在我的响应应用程序中,我使用jquery来定位元素。 它的效果很好。并且在调整窗口大小(将分辨率从大到小)时可以正常工作,但反之(从小分辨率到大到大)则原始图像无法反映出来。

s

(function ($) {
$(document).ready(function () {

var shareLink = $('#article_tools');
var social_alone = $(".social-share-custom");

if($(window).width() < 1026) {
    var twitter_link = $('.follow_twit');
    var google_link = $('#google_responsive_container');
    twitter_link.before($('.follow_fb'));
    twitter_link.after(google_link);
    google_link.after($('.follow_feed'));
}
 function setHeader(){

    if($(window).width() < 1026){
        var shareLink = $('#article_tools');
        if( shareLink.length > 0){
            shareLink.prepend($(".social-share-custom"));
        }
        else{
            var social_alone = $(".social-share-custom");
            $(".evt_detail_main").before(social_alone);
        }

    }
     var primary=$('#primary');
     var temp=primary.find('>ul>li');
     var srctemp=primary.find(".links");
    if ($(window).width()<768) {
        var search_container =$('#container-search');
        //var temp=$('#primary').find('>ul>li');
        shareLink.prepend($(".social-share-custom"));
        $('.follow-login-wrapper').prepend($('#top-login'));
        $('.responsive-menu').append($("#simplemenu"));
        $('#logo-title').after(search_container);
        $('#homemenu').after(temp);
        $('#comments').before($('#sidebar-right').find('#sidebar-right-inner>#block-constant_contact-0'));
       search_container.after($("#search-box"));
    }
     else {
        srctemp.append(temp);
    }


});
$( window ).resize(function() {
    setHeader();

   });



setHeader();

  });

 })(jQuery); 

从较小的分辨率调整为较大的分辨率时,对于$(window).width()<768)下的代码,我没有得到适当的响应(原始视图未反映)

#1楼 票数:0

(function ($) {
$(document).ready(function () {

var shareLink = $('#article_tools');
var social_alone = $(".social-share-custom");

if($(window).width() < 1026) {
    // ... gets ONLY executed if condition is TRUE
}
 function setHeader(){

    if($(window).width() < 1026){    

        // ... gets ONLY executed if condition is TRUE

    }
     var primary=$('#primary');
     var temp=primary.find('>ul>li');
     var srctemp=primary.find(".links");
    if ($(window).width()<768) {

        // ... gets ONLY executed if condition is TRUE

    }
     else {
        srctemp.append(temp);
    }
});
$( window ).resize(function() {
    setHeader();
   });
setHeader();
  });
 })(jQuery);     

问题是,仅当窗口具有正确的大小时(那时,当函数执行时,才是document.ready),才执行函数。

试试这个代替:

(function($) {

    $(document).ready(function () {
        //... include BOTH cases for the document ready event.

            if ($(window).width() < 1200) { ...do something };
            if ($(window).width() < 700) { ...do something else };
    };

    $(window).resize(function () {
        //... include BOTH cases for the window resize event.

            if ($(window).width() < 1200) { ...do something };
            if ($(window).width() < 700) { ...do something else };
    };

})(jQuery);

  ask by UI Developer translate from so

未解决问题?本站智能推荐:

3回复

jQuery在窗口调整大小时获取元素高度

我正在尝试在调整窗口大小时获得div标签的高度,但是我总是得到相同的高度。 事件大小调整已正确触发。 / 如果我未将高度设置为低于高度,请在调整大小时正确更改 /
1回复

jQuery-通过滚动位置进行动画处理以在窗口调整大小时保持相同

嘿,我遇到了一个非常烦人的问题,这也许可以得到一个简单的解决方案,但是对于我的一生,我找不到解决的办法。 基本上,我有两个图像,两个图像都占其容器的50%,现在的目标是根据滚动位置将两个图像滑入(向左/向右),一旦到达容器顶部,两个图像将被放置。 现在,我的工作到了这一点,唯一的问题是当
1回复

响应式jQuery画布,画布背景在窗口调整大小时消失

我正在尝试创建一个具有背景图像的响应式画布。 我在这里创建了一个有问题的codepen: http ://codepen.io/eternalminerals/pen/avZBOr 我试图使此画布具有响应性,这意味着当我调整窗口大小时,背景中的图像也会重新调整大小,但是当您调整窗口大小时,
1回复

Fancybox描述框在窗口调整大小时保持大小

我在fancybox的弹出图像旁边有一个描述框,但是从上方重新调整窗口大小(在jsfiddle中尝试)时,图像会适应更改并减小尺寸,但是描述框保持其大小。 我正在尝试为描述框提供与图像相同的高度,同时在与图像平行调整窗口大小时减小尺寸。 请帮忙。 JSFIDDLE: http : //j
1回复

为什么我的Jquery元素调整大小无法正常工作?

我正在使用CSS的resize属性来调整FF,Safari和Chrome中div元素的大小,但是由于该属性在IE和Opera中不起作用,因此如果使用了这两种浏览器之一,我将不得不查找备份,因此我结合使用Jquery和javascript来询问我在网上找到的功能,在这里: 浏览器调整支持代码的大小
2回复

在窗口调整大小时重新计算表格高度

我有这个功能,可以做三件事: 悬停 专注于同一行中显示的两个单独的表 从第一个表计算tr高度,并将该高度从第二个表设置为tr。 此函数的效果很好,但是调整浏览器大小时出现问题,因为该函数未重新计算tr高度。 这破坏了所有桌子的设计。 谁能帮我这个忙:如何调整浏览器大
5回复

Jquerydotdotdot仅在窗口调整大小时正确触发

为了在元素中的第二行之后创建省略号,我使用jquery dotdotdot 。 我正在使用google字体'source sans pro' ,但是在调整窗口大小之后它才能正常工作。 这是在调整窗口大小之前文本的显示方式(省略号创建得太早) 这是在调整窗口大小后文本显示的方式(省略号位
3回复

如何在窗口调整大小时禁用/重新启用Javascript?

我需要能够在窗口调整大小时禁用/重新启用Javascript吗? 当前,在桌面上调整窗口大小时,导航栏会固定,并且是唯一可见的内容而不是内容。