草庐IT

resizing

全部标签

javascript - Resizer 扩展和最小化 div

我想并排制作3个div,当单击一个按钮同时折叠另一个时,每个div都可以扩展到全屏(但仍以垂直方向显示标题)。类似于CodePen做过。这是他们页面中的样子。最初它并排显示3个大小相等的div。当您双击侧面的调整器时,它会展开一个div并折叠另一个,但折叠的div不会完全隐藏。我试图检查他们的页面源代码,发现这一行代码。HTML!但我找不到任何与此行为相关的javascript或css。我怎样才能做到这一点?jQuery或Bootstrap是否有针对此类组件的插件?还是我必须从头开始创建? 最佳答案 您可以先做您自己的最小示例,例如

jquery - 将 JQuery UI.Resizable() 和 UI.Draggable() 与 iFrame 一起使用时出现问题

我正在尝试使用JQuery创建一个对话窗口。到目前为止,我正在取得进展,但遇到了iframe的一些问题...我知道iframe通常不受欢迎,但它们是唯一能够满足元素要求的东西。无论如何,我可以成功实现可调整大小和可拖动的插件,但如果用户快速拖动并将鼠标悬停在对话框内部div中包含的iframe上,我会遇到问题。有点难以解释,但下面的代码应该有助于说明正在发生的事情。似乎一旦鼠标越过iframe,iframe就会窃取mousedown事件的焦点。我想知道是否有任何解决方法。谢谢,克里斯$(document).ready(function(){$("#container").draggab

html - 为什么后台附件: fixed make background-size:cover resize to the window proportions?

如果您想要调整大小以覆盖整个标题的标题图像,但也希望固定背景附件,则背景图像将不再覆盖包含的div,而是会尝试覆盖整个窗口。这是一个显示问题的fiddle。只需在CSS上切换第13行的命令即可。当您更改为http://jsfiddle.net/TqQv7/155/#top-left{position:absolute;top:0px;left:0px;width:50%;height:50%;background:#000url('http://placekitten.com/2000/1000')no-repeat;-moz-background-size:cover;backgro

html - 使用 css resize :both; not working with table 调整表格单元格的大小

使用css{resize:both;}调整表格单元格的大小不适用于表格我需要调整表格及其单元格的大小,可以使用css调整大小,css{resize:both;}在div中有效,但在表格标签中无效hitablehidivhitablehidivhitablehidiv谁能帮忙 最佳答案 要覆盖Chrome和Safari,请使用th,td{resize:both;overflow:auto;}不要对整个表格设置初始宽度。不过,您可以设置单元格或列的宽度。要同时覆盖Firefox,恐怕您需要用一个类将每个单元格的内容包装在一个div上,并

html - 响应式网页设计 : "How to resize a background image according to browser window size using CSS"?

我正在创建一个网站,我的所有产品图片都将根据浏览器窗口大小调整大小,所以我写了一些媒体查询,我使用了一张大图片并在不同的窗口大小中调整了它的大小但是我在背景中使用了一张图片,如何调整它的大小?我希望在IE7和8的所有浏览器中都支持它。HTMLCSSdiv{background:url("http://canadianneighborpharmacy.net/images/cnp/discount_20.png")no-repeatscroll00transparent;position:absolute;width:45px;height:45px;}我的实时代码在这里:-http:/

javascript - jQuery-UI: resizable - 如何增加可拖动边缘的大小?

我正在使用jQuery-UI的可调整大小的边缘来增加表格的高度。我想知道如何创建一个可以拖动的较粗的底部边框?增加表格周围的边框没有什么不同。 最佳答案 您可以通过更改一些CSS来实现:CSSJqueryUI样式表中的类/*handleonthebottom*/.ui-resizable-s{height:15px;}/*handleontheright*/.ui-resizable-e{width:15px;}/*handleicon(corner)*/.ui-resizable-se{width:15px;height:15px

javascript - 检测点击 div 背景 30% resized

我有一个div,背景大小调整了30%,img大小调整为100%我只想在背景调整大小的div(下图中的紫色)上检测onclick,而不是在所有元素上检测什么是最好的方法?提前谢谢你。更新这就是我想做的! 最佳答案 我没有测试这段代码,但它可能会提示您如何实现这样的目标!$('.element').on('click',function(e){varxPossition=$(this).position().left;//Thedistancebetween'zero'andtheleftoftheelementontheXAxisva

javascript - HTML5 响应式 Canvas : resizing the browser canvas draw disappear

我想使用百分比大小制作一个响应式Canvas,一旦用户调整窗口大小,Canvas就会相对调整。我可以使用以下代码缩放Canvas,但唯一的问题是当我缩放窗口大小时,鼠标绘图消失了。body{margin:0px;padding:0px;background:#a9a9a9;}#main{display:block;width:80%;padding:50px10%;height:300px;}canvas{display:block;background:#fff;}varc=document.getElementById('paint');varctx=c.getContext('2

javascript - $(window).resize() 在 safari : why it works also if scroll window (but doesn't resize)?

我注意到,在我的iphone5上使用safari$(window).resize()它的工作方式很奇怪......我有这个代码:$(document).ready(function(){$(window).resize(function(){avviaChart();initialize();if($('#time').is(':checked')){$("#time").removeAttr('checked');$("#Time").css('border','2pxsolid#ffffff');}});});此代码仅在窗口大小发生变化时才有效....与其他浏览器一起工作非常好,但

javascript - JQuery UI - .resizable 不工作

我环顾四周,虽然我发现了与这个类似的问题,但没有一个有适合我的解决方案。这是另一个类似问题的链接。DraggableandresizableinJqueryUIforanimageisnotworking?$(document).ready(function(){$('#draggableHelper').draggable();$('#image').resizable();});这只是一个非常基本的示例,但是当我运行它时,图像是可移动的,但不能调整大小。尽管据我所知,它应该绝对有效。在上面问题底部的链接中,有一个指向工作示例的链接。http://jsfiddle.net/8VY52