Скрыть элементы / символы при загрузке в определенных размерах браузера с JS? (Adobe Edge Animate)

Question

** Обратите внимание, что это использует Adobe Edge Animate. Я пробовал медиа-запросы и готовые HTML-файлы, но чтобы получить то, что мне нужно, мне нужно использовать его как Edge Stage.

Таким образом, у меня есть 2 меню в качестве символов в моем проекте 'mobileNav' и 'deskNav'. Моя цель - загружать mobileNav при <=800 и загружать deskNav с>=800.

На данный момент он загружает оба символа, пока браузер не согнется. Вот скриншот через imgur.

Мой код для составления состава:

    $(window).resize(function() {
if ($(window).width() <= 799) {
   //alert('Less than 799');
   sym.$("deskNav").css("visibility","hidden");
   sym.$("mobileNav").css("visibility","visible");
}
else {
   //alert('More than 799');
   sym.$("deskNav").css("visibility","visible");
   sym.$("mobileNav").css("visibility","hidden");
}

Я хотел бы, чтобы он загружал только один или другой в зависимости от размера браузера (мобильный и рабочий стол)

Спасибо большое заранее!

Answer 1

А) Ты слишком глубоко заглядываешь в это:

HTML:

<p class="mobile">Hello world</p>
<p class="desktop">Hello world</p>

Определите ваши веб-страницы по отдельности с обоими элементами, чтобы сэкономить время.

Попробуйте изменить размер окна: http://jsfiddle.net/3vXpR/1/

B) Медиа-запросы, а не Javascript:

CSS:

@media screen and (min-width: 801px)  {
    .desktop {
        display: block;
    }
    .mobile {
        display: none;
    }
}
@media screen and (max-width: 800px)  {
    .desktop {
        display: none;
    }
    .mobile {
        display: block;
    }    
}
.desktop {
    color:#CCC;
}
.mobile {
    color:#FCC;
}

CSS может обрабатывать размеры браузера гораздо лучше, чем jQuery Можно.

Попробуйте изменить размер окна: http://jsfiddle.net/3vXpR/1/

ИЛИ ЖЕ...

Просто используйте framework это делает все для вас.

Проверять, выписываться:

• http://foundation.zurb.com/ (Легко)
• http://getbootstrap.com/getting-started/ (Hard)

Answer 2

Вы можете использовать медиа-запросы для скрытия / отображения параметров навигации

@media screen and (max-width: 800px)  {
  .deskNav
   {
     display:none;
   }
  .mobileNav
   {
     display:block;
   }
}
@media screen and (min-width: 801px)  {
  .deskNav
   {
     display:block;
   }
  .mobileNav
   {
     display:none;
   }
}