[英]jquery responsive on resize not working
i want to check (on resize) the window width and then load a special part of a script. 我想检查(调整大小)窗口宽度,然后加载脚本的特殊部分。 when the browser window is < 500px width i want to scroll to the top of the div (when clicking on a menu link) and when the browser window is > 500px i want to scroll to the vertical middle of the div when i click on a menu link.
当浏览器窗口的宽度<500px时,我想滚动到div的顶部(单击菜单链接时),当浏览器窗口的宽度> 500px时,我想滚动到div的垂直中间。菜单链接。 it somehow works but it's slow and buggy.
它可以以某种方式工作,但速度缓慢且有故障。
first i create the "resize" function then i check the browser width 首先,我创建“调整大小”功能,然后检查浏览器宽度
(function($){
// on load
$(window).resize(function(){
var current_width = $(window).width(); //check width
$('.go').click(function (e) {
if(current_width > 700){ // when min-width 700px than go to center of DIV
e.preventDefault();
var $box = $('.box').eq($(this).data('rel') - 1);
$('html, body').animate({
scrollTop: $box.offset().top - ($(window).height() - $box.outerHeight(true)) / 2 // scroll to verticall middle of div
}, 200);
}
else if(current_width < 700){ // when max-width 700px than go to top of DIV
e.preventDefault();
var $box = $('.box').eq($(this).data('rel') - 1);
$('html, body').animate({
scrollTop: $box.offset().top + 0 // scroll to top of div
}, 200);
}
});
});
})(jQuery);
when id do it with "document ready" everything works fine ... but "document resize" makes problems. 当id用“文档准备好”来进行操作时,一切正常……但是“文档调整大小”会带来问题。
update - got it working this way: 更新-以这种方式工作:
$(".go").click(function(){
if ($(window).width() < 800) { // if window smaller than 800px
var $box = $('.box').eq($(this).data('rel') - 1);
$('html, body').animate({
scrollTop: $box.offset().top - 0
}, 200);
}
if ($(window).width() > 800) { // if window bigger than 800px
var $box = $('.box').eq($(this).data('rel') - 1);
$('html, body').animate({
scrollTop: $box.offset().top - ($(window).height() - $box.outerHeight(true)) / 2
}, 200);
}
});
It would be better to attach the event handlers like this: 最好像这样附加事件处理程序:
var resizeTimeout; //the timeout prevents triggering the resize event more than once
$(function () {
$(window).resize(function () {
clearTimeout(resizeTimeout);
resizeTimeout = setTimeout(resize, 500);
});
$('.go').click(function (e) {
});
});
function resize() {
if ($(window).width() > 700) {
} else {
}
}
Maybe a bad idea but you can try something like this in css: 也许是个坏主意,但是您可以在CSS中尝试以下操作:
@media screen and (min-width: 480px){
$("body").css({"position":"absolute", "top":"12px", "left":"12px"}); //Set your x and y
}
@media screen and (min-width: 768px){
$("body").css({"position":"absolute", "top":"22px", "left":"22px"}); //Set other stuff
}
No javascript needed :) 不需要JavaScript :)
PS: NOT tested! PS:未经测试!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.