卡住與css元素顯示器和hider的jquery函數

我在jquery中創建了一個函數，該函數在窗口調整大小時顯示隱藏的css元素，現在我被卡住了，如果窗口重新縮小到默認值然後隱藏元素... .I'm沒有得到該怎麼做......卡住與css元素顯示器和hider的jquery函數

var cwidth = $(window).width(); 
$(window).on('resize', function(event){ 
    profdisplayer(); 
}); 

function profdisplayer() 
{ 
    var i=1390; 
    var j=1; 
    for(; j<=5;j++){   
     if (cwidth>i){  
      $("#d"+j).show(); 
      i=i+600; 
     } 
    } 
}

HTML

<body> 
<div id="container"> 
<div id="containerchild"> 
<div id="hidden"></div> 
     <div id="myfavcontainer"> 
      <div id="myfav"></div> 
     </div> 
     <div id="profilecontainer"> 
       <div id="abouttab"></div> 
       <div id="horirule620"></div> 
       <div id="profiledata"></div> 
     </div> 
     <div id="d1"></div> 
     <div id="d2"></div> 
     <div id="d3"></div> 
     <div id="d4"></div> 
     <div id="d5"></div> 
    </div> 
    </div>

CSS

#container{ 
height:100%; 
width:100%; 
background-color:#000; 

} 
#containerchild{ 
height:100%; 
width:100%; 
float:right; 
margin:0 0 0 0; 
position:relative; 
} 
#hidden{ 
height:100%; 
width:174px; 
float:right; 
} 
#myfavcontainer{ 
height:100%; 
width:575px; 
float:left; 
position:absolute; 
margin:0 0 0 0; 
background-color:#31353E; 
} 
#profilecontainer{ 
height:100%; 
width:600px; 
float:left; 
position:absolute; 
margin: 0 0 0 575px; 
background-color:#31353E; 
box-shadow:inset 7px 0 7px -7px #000; 
-webkit-box-shadow:inset 7px 0 7px -7px #000; 
-moz-box-shadow:inset 7px 0 7px -7px #000; 
-ms-box-shadow:inset 7px 0 7px -7px #000; 
-o-box-shadow:inset 7px 0 7px -7px #000; 
} 
#horirule620{ 
height:1px; 
width:600px; 
float:left; 
background-color:#1C1D22; 
} 
#myfav{ 
height:620px; 
width:575px; 
background-color:#fff; 
position:relative; 
margin:0 0 0 0; 
} 
#abouttab{ 
height:60px; 
width:600px; 
float:left; 
position:relative; 
margin:0 0 0 0; 
background-color:#31353E; 
box-shadow:inset 7px 0 7px -7px #000; 
-webkit-box-shadow:inset 7px 0 7px -7px #000; 
-moz-box-shadow:inset 7px 0 7px -7px #000; 
-ms-box-shadow:inset 7px 0 7px -7px #000; 
-o-box-shadow:inset 7px 0 7px -7px #000; 
} 
#profiledata{ 
height:559px; 
width:600px; 
float:left; 
margin:1px 0 0 0; 
background-color:#31353E; 
box-shadow:inset 7px 0 7px -7px #000; 
-webkit-box-shadow:inset 7px 0 7px -7px #000; 
-moz-box-shadow:inset 7px 0 7px -7px #000; 
-ms-box-shadow:inset 7px 0 7px -7px #000; 
-o-box-shadow:inset 7px 0 7px -7px #000; 
} 
#d1{ 
height:100%; 
width:600px; 
float:left; 
position:relative; 
margin: 0 0 0 1175px; 
background-color:#31353E; 
box-shadow:inset 7px 0 7px -7px #000; 
-webkit-box-shadow:inset 7px 0 7px -7px #000; 
-moz-box-shadow:inset 7px 0 7px -7px #000; 
-ms-box-shadow:inset 7px 0 7px -7px #000; 
-o-box-shadow:inset 7px 0 7px -7px #000; 
display:none; 
} 
#d2, #d3, #d4, #d5 { 
height:100%; 
width:600px; 
float:left; 
position:relative; 
margin: 0 0 0 0; 
background-color:#31353E; 
box-shadow:inset 7px 0 7px -7px #000; 
-webkit-box-shadow:inset 7px 0 7px -7px #000; 
-moz-box-shadow:inset 7px 0 7px -7px #000; 
-ms-box-shadow:inset 7px 0 7px -7px #000; 
-o-box-shadow:inset 7px 0 7px -7px #000; 
display:none; 
}

來源

2013-10-20 vishal vasistha

您能顯示您的HTML代碼嗎？ – Sarcastic

你也可以顯示html嗎？ – BeNdErR

@BeNdErR我已經添加了頁面的html和css –

沒有必要做任何CSS媒體查詢的事情.. 我用jQuery做到了

$(window).on('resize', function(event){ 
    var awidth = $(window).width(); 
    if (awidth>bwidth) 
     { profdisplayer(); 
      bwidth = awidth; 
     } 
    if (bwidth>awidth) 
    { 
     profhider(); 
     var getdivname = $('#dcontainer').find("div").first(); 
     var divid = getdivname.attr("id"); 
     var divno = divid.match(/[0-9]+/); 
     $('#d'+divno).show(); 
     bwidth=awidth; 
     } 
    });

profdisplayer將顯示在調整，如果寬度增加

function profdisplayer() 
{ 
    var cwidth = $(window).width(); 
    var i=1390; 
    for(var j=1; j<=8;j++){ 
    if (cwidth>i){ 
     $("#d"+j).show(); 
     i=i+600; 
     } 
     else 
     { 
      break; 
     } 
    } 
}

profhider將隱藏如果寬度減小，則調整大小

function profhider() 
{ 
    var dwidth = $(window).width(); 
    var z = 5375; 
     for(var k=8; k>=1;k--) { 
      if(dwidth<z) 
      { 
      $("#d"+k).hide(); 
      z=z-600; 
      $('#dcontainer').first().show(); 
      } 
      else 
      { 
       break; 
      } 
     } 

    }

來源

2013-10-23 15:10:43

你ç一個只使用CSS的媒體查詢。

HTML：

<body> 
<div id="container"> 
<div id="containerchild"> 
<div id="hidden"></div> 
     <div id="myfavcontainer"> 
      <div id="myfav"></div> 
     </div> 
     <div id="profilecontainer"> 
       <div id="abouttab"></div> 
       <div id="horirule620"></div> 
       <div id="profiledata"></div> 
     </div> 
     <div id="d1" class="hide"></div> 
     <div id="d2" class="hide"></div> 
     <div id="d3" class="hide"></div> 
     <div id="d4" class="hide"></div> 
     <div id="d5" class="hide"></div> 
    </div> 
    </div>

CSS

@media screen and (min-width: 800px) { 
    .hide { display: none } 
}

來源

2013-10-20 14:13:20 jiceb

媒體查詢的目的是做你正在尋找什麼。根據我的理解，如果窗口大於1390像素，看起來像是要顯示每個600像素的「d＃」div，並顯示第一個像素。

因此，要做到這一點，我們需要一些媒體查詢第一個將顯示D1箱

@media (min-width:1390px){ 
    #d1{ 
     display: block; 
    } 
}

這將檢查並確保窗口寬度最低爲1390，如果是，則包裹在其中的css將被執行。

所以對於這一切應該是這樣的：

#d1,#d2,#d3,#d4,#d5{ 
    display: none; 
} 
@media (min-width:1390px){ 
    #d1{ 
     display: block; 
    } 
} 
@media (min-width:1990px){ 
    #d2{ 
     display: block; 
    } 
} 
@media (min-width:2590px){ 
    #d3{ 
     display: block; 
    } 
} 
@media (min-width:3190px){ 
    #d4{ 
     display: block; 
    } 
} 
@media (min-width:3790px){ 
    #d5{ 
     display: block; 
    } 
}

這將顯示所有的人都爲網頁獲得更大然後再隱藏在其收縮。

來源

2013-10-21 16:16:03 Chausser

好吧，如果我以這種方式，我將無法滑動div（s）...無論如何.... thanx的幫助...也許它可以用於任何其他目的... thanx很多... –

卡住與css元素顯示器和hider的jquery函數

回答

相關問題