1

ウィンドウのサイズ変更時に隠されたcss要素を表示する関数を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;
}
4

3 に答える 3