Функция jQuery с шириной окна

Я пытаюсь использовать другой JavaScript/jQuery для нескольких ширины. Для начала, я хочу сделать 20% при ширине окна> 981 и 100%, когда < 981. Вот мой сценарий, который я сделал из других сценариев.Функция jQuery с шириной окна

<script> 
if ($(window).width() < 981){ 
    function openNav() { 
     document.getElementById("mySidenav").style.width = "20%"; 
     document.getElementById("main1").style.marginLeft = "20%"; 
    } 
    function closeNav() { 
     document.getElementById("mySidenav").style.width = "0"; 
     document.getElementById("main1").style.marginLeft = "0"; 
    } 
} 
else ($(window).width() > 981){ 
    function openNav() { 
     document.getElementById("mySidenav").style.width = "100%"; 
     document.getElementById("main1").style.display = "none"; 
    } 
    function closeNav() { 
     document.getElementById("mySidenav").style.width = "0"; 
     document.getElementById("main1").style.display = "block"; 
    } 
} 
</script>

Мой HTML

<html> 
<div id="mySidenav" class="sidenav"> 
    <a id="closebtn" onclick="closeNav()">&times;</a> 
    <p> OVER MEZELF </p> 
    <a href="/about/about.html">ABOUT</a> 
    <p> PHP OPDRACHTEN </p> 
    <a href="/bmi/bmi1.html">BEREKEN BMI</a> 
    <a href="/array/array.html">ARRAY OPDRACHTEN</a> 
    <p style="display:none;"> DOWNLOAD </p> 
    <a href="download.zip" style="display:none;">DOWNLOAD ZIP BESTAND</a> 
    <div id="date" style="color:#818181;font-size:15px;cursor:context-menu;font-weight:bold;text-transform:uppercase;margin-top:100%;"> <?php $today = date("F j, Y"); echo $today; ?></div> 
    <div id="time" style="color:#818181;font-size:15px;cursor:context-menu;font-weight:bold;"></div> 
</div> 


<div id="main1"> 
    <span id="menu0" style="color:white;font-size:30px;cursor:pointer;" onclick="openNav()">&#9776; </span> 
</div> 
</html>

Так что, когда окно < 981 показать 100%, когда> 981 показать 20%. Но этот код не работает. Надеюсь, кто-то знает.

(К сожалению, это голландский)

источник

2016-11-16 S. Brilleman

Я думаю, вам нужно узнать о [CSS Media Queries] (https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries) – mherzig

Я понимаю, что вы имеете в виду @mherzig , но это не так. Я знаю о размерах окна в CSS, и я уже использую это, но я не думаю, что могу изменить это в CSS. –

Я нашел свою проблему ...

<script> 
if ($(window).width() > 981){ 
    function openNav() { 
     document.getElementById("mySidenav").style.width = "20%"; 
     document.getElementById("main1").style.marginLeft = "20%"; 
    } 
    function closeNav() { 
     document.getElementById("mySidenav").style.width = "0"; 
     document.getElementById("main1").style.marginLeft = "0"; 
    } 
} 
else if ($(window).width() < 981){ 
    function openNav() { 
     document.getElementById("mySidenav").style.width = "100%"; 
     document.getElementById("main1").style.display = "none"; 
    } 
    function closeNav() { 
     document.getElementById("mySidenav").style.width = "0"; 
     document.getElementById("main1").style.display = "block"; 
    } 
} 
</script>

Вместе с этим:

<script src="https://code.jquery.com/jquery-1.10.2.js"> 
</script>

И это сработало ... Спасибо за помощь!

источник

2016-11-22 16:47:27

Это структура из другого, если в Javascript

if (time < 10) { 
    greeting = "Good morning"; 
} else if (time < 20) { 
    greeting = "Good day"; 
} else { 
    greeting = "Good evening"; 
}

так исправить код

if ($(window).width() < 981){ 
    function openNav() { 
     document.getElementById("mySidenav").style.width = "20%"; 
     document.getElementById("main1").style.marginLeft = "20%"; 
    } 
    function closeNav() { 
     document.getElementById("mySidenav").style.width = "0"; 
     document.getElementById("main1").style.marginLeft = "0"; 
    } 
    } 
    else if ($(window).width() > 981){ 
    function openNav() { 
     document.getElementById("mySidenav").style.width = "100%"; 
     document.getElementById("main1").style.marginLeft = "100%"; 
    } 
    function closeNav() { 
     document.getElementById("mySidenav").style.width = "0"; 
     document.getElementById("main1").style.marginLeft = "0"; 
    } 
    }

источник

2016-11-16 20:17:37

Извините, но это не сработало для меня. Я даже не могу открыть кнопку openNav(). Возможно, вы знаете другое решение. Спасибо за помощь в любом случае! –

@ S.Brilleman вы можете разместить свой HTML-код? пожалуйста, –

@ S.Brilleman посмотрите на это https://jsfiddle.net/z3nxvgy5/. –

Ваши функции должны быть объявлены вне if/else блокировать и использовать var для связи. Вы забыли else IF слишком

<script> 
    var openWidth = "100%"; 
    function openNav() { 
     document.getElementById("mySidenav").style.width = openWidth; 
     document.getElementById("main1").style.marginLeft = openWidth; 
    } 
    function closeNav() { 
     document.getElementById("mySidenav").style.width = "0"; 
     document.getElementById("main1").style.marginLeft = "0"; 
    } 
    if ($(window).width() < 981){ 
     openWidth = "20%"; 

    } else if ($(window).width() > 981){ 
     openWidth = "100%"; 
    } 
</script>

Это может быть сделано с помощью CSS тоже с помощью @media

@media only screen and (max-width: 320px) { 
    /* Here you can set the width of open */ 
}

источник

2016-11-16 20:22:31 driconmax

Это своего рода работа ... но когда я пишу 'var openWidth = "100%";' похоже, что это будет всегда 100%. это до 20% и всегда составляло 20%. Так что это не работает для меня. Может быть, ты поможешь мне дальше. В любом случае спасибо! @driconmax –

Если это весь код, то есть несколько вопросов, которые я могу видеть.

Вы if и else но последний должен быть else if. Но это представляет собой еще одну проблему - если width < 981, иначе, если width > 981, но что, если ширина равна точно 981? Вам лучше просто удалить ($(window).width() > 981) и сделать его нормальным заявлением else по сравнению с добавлением if.
Когда выполняется проверка ширины? Если вы не запускаете этот код в событии изменения размера (и не делайте этого!), Он будет запускаться один раз. Таким образом, открытый размер будет установлен только на странице load. Если вы измените размер браузера после этого и перейдете за пределы порога 981px, у вас не будет желаемого результата.

Так почему я говорю использование медиа-запросов? Прежде всего, давайте посмотрим на JS, и сделать открытия/закрытия функции очень общее:

function openNav() { 
    $("html").addClass("navopen"); 
} 
function closeNav() { 
    $("html").removeClass("navopen"); 
}

Мы теперь по существу установка состояния для страницы, говоря, что нав открывается или закрывается. Так что теперь CSS:

#mySidenav { 
    width: 0; 
} 

#main1 { 
    margin-left: 0; 
} 

html.navopen #mySidenav { 
    width: 100%; 
} 

html.navopen #main1 { 
    display: none; 
} 

@media (max-width: 981px) { 
    html.navopen #mySidenav { 
     width: 20%; 
    } 

    html.navopen #main1 { 
     margin-left: 20%; 
     display: block; 
    } 
}

Теперь, вы можете просто использовать простой переключатель в JS, чтобы установить, если нав открыт, и использовать CSS для остальных. Легче справиться, и вам также не нужно настраивать обработчики, чтобы увидеть, изменяется ли размер видового экрана браузера.

источник

2016-11-17 00:16:34 mherzig

Я пробовал, и я знаю, для чего вы код, но когда я пытаюсь, больше нет sidenav. Я скопировал его, но он работает не так хорошо »(я все еще благодарю вас за попытку и помощь. Http://s1100885.hbo-almere.nl –

Функция jQuery с шириной окна

ответ

Смежные вопросы