Скрыть DIV, если экран уже 1024 пикселей

Question

Я нашел (из этого вопроса - Скрыть div, если экран меньше определенной ширины) этот фрагмент кода

  $(document).ready(function () {

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

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

});

Единственная проблема в том, что я не могу заставить работать код, мне нужно только код для работы с IE, я собираюсь использовать Media Queries для других (более новых) браузеров. Любые советы / подсказки, где я иду не так?

Пока у меня есть <div id="floatdiv">

Затем в конце этого div (где закрывается) у меня есть

<!--[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; Windows 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) Отметка времени: суббота, 12 марта 2011 г. 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.anywhere._instances" является нулевым или не является объектом. Строка: 1 символ: 5207 код: 0 URI: platform.twitter.com/anywhere.js?id=6vIPELyEeU5vcSc3c0Q5w&v=1

Сообщение: "twttr.anywhere._instances" является нулевым или не является объектом. Строка: 1 символ: 5207 код: 0 URI: platform.twitter.com/anywhere.js?id=6vIPELyEeU5vcSc3c0Q5w&v=1

Удален http из URL из-за ошибки "low rep"

Answer 1

СТАРЫЙ ОТВЕТ С ИСПОЛЬЗОВАНИЕМ 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, поэтому было бы гораздо эффективнее использовать их, чем javascript.

ИСПОЛЬЗУЯ 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;
    }
}

Обратите внимание, что в большинстве современных браузеров вы также можете запускать медиазапросы в javascript, используя window.matchMedia

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

Answer 2

Вам нужно установить элемент экрана:

var screen = $(window)

например:

$(document).ready(function () {

    var screen = $(window)    

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

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

});

Answer 3

Медиа-запросы на победу

Как сделать так, чтобы div не отображался, если окно браузера имеет определенную ширину?

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