화면이 1024px보다 좁을 경우 ADIV 숨기기

화면이 1024px보다 좁을 경우 ADIV 숨기기

(이 질문에서) 이 코딩 조각을 찾았습니다. - 화면이 특정 너비보다 작으면 구분 숨기기

  $(document).ready(function () {

    if (screen.width < 1024) {
        $("#floatdiv").hide();
    }
    else {

        $("#floatdiv").show();
    }

});

유일한 문제는 코드가 작동하지 않는 것 같습니다. IE에서 작동하려면 코드만 입력하면 됩니다. 다른 (새로운) 브라우저에서는 미디어 쿼리를 사용할 것입니다.제가 어디서부터 잘못되고 있는지에 대한 힌트가 있습니까?

지금까지.<div id="floatdiv">

그 다음 디브의 끝에 (어디가 닫히는지)있습니다

<!--[if lt IE 9]>
<script type="text/javascript" src="http://dl.dropbox.com/u/17087195/website/sidebar_size.js"></script>
<![endif]-->

내 머리속에는 내가 가지고 있습니다.<script type='text/javascript' src='http://www.itsdaniel0.com/wp-includes/js/jquery/jquery.js?ver=1.4.4'></script>

그리고 아직도 코드가 작동하지 않습니다(IE8에서 테스트). 아직도 어딘가에서 잘못되고 있습니까?

업데이트 jQuery의 다른 조각이 연결되어 있습니다. 이것이 문제의 원인이 될 수 있습니까?아래 코딩의 전체 내용입니다.

<div id="floatdiv">

<div class="floating-menu">

<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.itsdaniel0.com%2F2011%2F03%2Funicorns-are-cool%2F&amp;layout=box_count&amp;show_faces=true&amp;width=55&amp;action=like&amp;colorscheme=light&amp;height=65" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:55px; height:65px;" allowTransparency="true"></iframe>

<br /><br /><a href="http://twitter.com/share?url=http%3A%2F%2Fid0.me%2Fj0&amp;counturl=http://www.itsdaniel0.com/2011/03/unicorns-are-cool/" class="twitter-share-button" data-text="Unicorns Are Cool" data-count="vertical" data-via="itsdaniel0 #itsdaniel0">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

<br /><br />

<script src="http://widgets.fbshare.me/files/fbshare.js"></script>

</div>

</div>

<script type="text/javascript" src="http://dl.dropbox.com/u/17087195/website/sidebar.js"></script>

<!--[if lt IE 9]>

<script type="text/javascript" src="http://dl.dropbox.com/u/17087195/website/sidebar_size.js"></script>

<![endif]-->

오류 메시지

웹페이지 오류내역

사용자 에이전트: Mozilla/4.0(호환성, MSIE 7.0, 윈도우즈 NT 5.1, Trident/4.0, chromeframe/10.0.648.133; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; OfficeLiveConnector.1.5; OfficeLivePatch.1.3; .NET4.0C; .NET4.0E; InfoPath.2) 타임스탬프: 토요일, 2011년 3월 12일 11:31:32 UTC

메시지:필요한 식별자, 문자열 또는 숫자 줄: 140자: 1 코드: 0 URI: www.itsdaniel0.com/2011/03/unicorns-are-cool/

메시지:개체가 이 속성 또는 메서드를 지원하지 않습니다. 줄: 16 문자: 1 코드: 0 URI: dl.dropbox.com/u/17087195/website/sidebar_size.js

메시지: 'twttr.아무 곳이나._instances'이(가) null이거나 개체가 아닙니다 줄: 1 문자: 5207 코드: 0 URI: platform.twitter.com/anywhere.js?id=6vIPELyEeU5vcSc3c0Q5w&v=1

메시지: 'twttr.아무 곳이나._instances'이(가) null이거나 개체가 아닙니다 줄: 1 문자: 5207 코드: 0 URI: platform.twitter.com/anywhere.js?id=6vIPELyEeU5vcSc3c0Q5w&v=1

"낮은 표현" 오류로 인해 URL에서 http가 제거되었습니다.

JQuery를 사용한 오래된 답변:

//the function to hide the div
function hideDiv(){

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

            $("#floatdiv").fadeOut("slow");

    }else{

        $("#floatdiv").fadeIn("slow");

    }

}

//run on document load and on window resize
$(document).ready(function () {

    //on load
    hideDiv();

    //on resize
    $(window).resize(function(){
        hideDiv();
    });

});

편집: 이제 css3 미디어 쿼리에 대한 크로스 브라우저 지원이 훨씬 많아졌습니다. 자바스크립트보다는 그것들을 사용하는 것이 훨씬 효과적일 것입니다.

CSS 사용.

/* always assume on smaller screen first */

#floatdiv {
    display:none;
}

/* if screen size gets wider than 1024 */

@media screen and (min-width:1024px){
    #floatdiv {
        display:block;
    }
}

대부분의 최신 브라우저에서는 window.matchMedia를 사용하여 javascript로 미디어 쿼리를 실행할 수도 있습니다.

if(window.matchMedia("(min-width:1024px)").matches){
    console.log("window is greater than 1024px wide");
}

화면 요소를 설정해야 합니다.

var screen = $(window)

예를 들어 다음과 같습니다.

$(document).ready(function () {

    var screen = $(window)    

    if (screen.width < 1024) {
        $("#floatdiv").hide();
    }
    else {

        $("#floatdiv").show();
    }

});

우승을 위한 미디어 쿼리

브라우저 창이 일정 폭일 경우 div가 표시되지 않도록 하려면 어떻게 해야 합니까?

@media all and (max-width: 1024px) { /* Change Width Here */
  div.class_name {
     display: none;
  }
}

언급URL : https://stackoverflow.com/questions/5277872/hide-a-div-if-screen-is-narrower-than-1024px