Tag: resize

使用窗口大小jquery动态调整元素大小: 我已经看过很多关于这个主题的问题，似乎无法找出我的代码有什么问题。任何帮助将不胜感激！ $(window).resize(function(){ var newwidth = $(window).innerWidth(); var newheight = $(window).innerHeight(); $(“#element”).height(newheight).width(newwidth); }); 我正在尝试将#element的大小调整为与窗口大小相同的高度和宽度。

如何只使用jQuery垂直调整DIV大小 – 没有插件？: 编辑：我把这段代码放在jsbin： http ：//jsbin.com/eneru 我试图让用户使用jQuery调整（仅垂直）DIV元素。我读了关于jQuery UI，我试过了，几分钟后，我就开始工作了。但是这个库增加了~25KB的开销，我想避免，因为我只想要简单的垂直大小调整。所以我试着自己做。这是HTML，我使用内联样式清晰： Lorem ipsum blah blah 如您所见，DIV元素下方有一个小条，因此用户可以向上或向下拖动它以调整DIV的大小。这是Javascript代码（使用jQuery）： $(document).ready(function(){ var resizing = false; var frame = $(“#frame”); var origHeightFrame = frame.height(); var origPosYGrip = $(“#frame-grip”).offset().top; var gripHeight = $(“#frame-grip”).height(); $(“#frame-grip”).mouseup(function(e) { resizing = false; }); $(“#frame-grip”).mousedown(function(e) { resizing = true; }); $(“#frame-grip”).mousemove(function(e) { if(resizing) { frame.height(e.pageY – origPosYGrip […]

JS或jQuery或窗口resize或窗口宽度小于npx: 如何检测用户何时调整浏览器窗口大小？我正在寻找一个脚本，当用户调整窗口大小或窗口宽度小于900px时，它会进行somenthing。

jQuery触发器函数高于某个窗口宽度: 我正在尝试编写一些jQuery，我遇到了很多问题。我需要一个函数一直可用，并且当用户窗口大于设置宽度时，有一个函数可用。这是我的函数，都运行在jQuery(document).ready(function($){ 下拉菜单的function只应在窗口大于设定量时发生; //the dropdown code for desktop users function largeDropDown(){ $(‘#nav ul li’).hover( //open function(){ $(this).find(‘ul’).stop().slideDown(300); }, //close function(){ $(this).find(‘ul’).stop().slideUp(300); } ); } 而这一个一直都可用，虽然知道如何使这个也适应屏幕尺寸会很好。 //the dropdown code for smaller screens $(‘a.menu_trigger’).click(openMenu); function openMenu(e){ e.preventDefault(); if($(this).next(‘ul’).hasClass(‘open_menu’)){ $(this).next(‘ul’).slideUp(300).removeClass(‘open_menu’); $(this).html(“↓”); } else { $(this).next(‘ul’).slideDown(300).addClass(‘open_menu’); $(this).html(“↑”); } } 使用CSS媒体查询时，当窗口超过768px时，将隐藏a.menu_trigger 。这样jQuery就什么都不做了（至少那是我试图让它工作的尝试！）所以，我想知道如何使第一个函数在768px以上工作，以及如何在窗口resize时调用此function。任何帮助都会很棒！谢谢。

可resize的列/面板用于jquery中的内容？: 有没有人知道jquery中是否有可用于滑动面板的例子？如果是这样，有人可以给我发链接吗？这就是我想要完成的。在我的主屏幕上，我希望有三个部门。一个右列覆盖屏幕的一半，然后左列分为两行。我想展开和/或缩小左列中的右列和/或左列和/或顶行和/或左列中的底行。将它视为一个IDE，其编码区域的左侧和右侧是项目资源管理器和属性。编码员希望立即看到任何三个部分，或者希望扩展每个工作区域。我正在寻找一个jquery解决方案！谢谢

如何在窗口resize时取消绑定/关闭jQuery事件: 我试图在窗口> 490时删除jquery事件。但是，当窗口小于490px时，unblind（）或off（）元素不会停用激活的操作。为什么是这样？有没有人知道任何选择返回其原始状态的方法？ $(document).ready(function(){ $(window).resize(function(){ if ($(window).width()=490) { $(“#shown”).unbind(); $(“body div hidden”).unbind(); } }); });

在canvas上调整照片大小而不会丢失宽高比: 大家好，感谢您提前提供的任何帮助。我正在写一个phonegap应用程序，无法在不丢失方面或错误裁剪图像的情况下缩小照片。在下面的函数中，“imageData”是相机拍摄的64位照片。我可以将图像绘制到我页面上的canvas上，但如果图片是在横向拍摄的，那么它就会被打碎。如果我不通过使用缩放function或drawimagefunction缩放它，那么我只获得照片的顶角。一个例子：我拍了一张照片，onPhotoDataSuccess函数中的图像宽度显示为1296px宽，968px高。但我在iPhone上的canvas是272像素宽（肖像模式）。我在网上尝试了很多不同的缩放方法，这似乎是最接近的。我究竟做错了什么？ function onPhotoDataSuccess(imageData) { var myImage = new Image(); var thecanvas = document.getElementById(“queImg”); var ctx = thecanvas.getContext(“2d”); myImage.onload = function() { thecanvas.setAttribute(‘width’, ‘100%’); thecanvas.setAttribute(‘height’, ‘auto’); ctx.scale((myImage.width * 0.15), (myImage.height * 0.15)); ctx.drawImage(myImage, 0, 0); } myImage.src = “data:image/jpeg;base64,” + imageData; }

$（window）.resize中的函数问题 – 使用jQuery: 我想使用一个简单的function来隐藏/显示仅在移动设备上的内容。函数本身非常简单。我在这里使用此代码： $(‘.toggleMobile’).click(function() { var hideableContent = $(this).parent().find(‘.hideable’); hideableContent.slideToggle(‘medium’); }); 所以……没什么特别的，我知道。当我尝试检测浏览器视口时，它变得更加复杂。我想我通过使用以下几行来处理它（你可能会找到改进它的方法）： function whatMedia() { var viewport = $(window).width(); var mediaType; if ( viewport = 767) && (viewport < 991) ) mediaType = 'tablet'; else mediaType = 'desktop'; return mediaType; } 现在我只需要一个仅在视口mobile时触发的function（可能问题在这里？）： function toggleMobile(mediaType) { if ( mediaType === ‘mobile’ ) { $(‘.toggleMobile’).click(function() […]

当div的内容发生变化时，如何自动调整div的大小？: 目前，我在这个DIV上有一个以页面为中心的注册表单。 DIV的内容来自ascx页面。这很好地完成了。现在，如果用户尝试填写不唯一的名称，则会在username字段旁边添加一些错误消息。这打破了DIV的布局，因为现在的内容比以前更宽。所以我用Google搜索了这个，但我找不到解决方案。任何人都可以帮我找到一个很好的方法（伪HTML / js）： function resizeToNewSize() { $(“#myCenteredDiv”).animateToSize($(“#myCenteredDiv”).contentWidth, $(“#myCenteredDiv”).contentHeight); } 我正在寻找“onChangeContents”方法（和/或事件）和“div.contentWidth”属性。非常感谢帮助我！更新：试图更清楚地解释问题假设我有这个DIV： Enter your name: 让我们说我有这个jQuery片段： $(document).ready(function() { $(“#txtYourName”).live(“blur”, function() { if (validateInput($(“#txtYourName”).val())) { $(“#errorYourName”).html(“”); // entry 1 } else { // entry 2 $(“#errorYourName”).html(“This name is not valid.”); } }); }); …其中validateInput(value)为有效值返回true 。现在好了。 SimpleModal插件获取div并将其置于页面的中心，具有一定的宽度和高度，它以某种方式读取div的内容。因此div不比输入框宽，因为此时跨度是空的。当输入框失去焦点时，会在范围中输入错误消息。 […]

jQuery – 如何知道窗口是在宽度/高度还是两者都resize？: 我使用jQuery的函数.resize（）调整窗口大小有点问题。我想知道哪个尺寸越来越大 – 宽度或高度。我需要这个，因为如果我只提出两个条件 – 如果宽度比div大50px并且如果高度比div大50px， // (pseudocode) if width = div.width + 50px width = something if height = div.height + 50px height = something 然后正在处理一个条件，我只能调整宽度或高度。我怎么知道哪个尺寸正在变化，或两者都是？