S. Brilleman S. Brilleman - 14 days ago 5
CSS Question

jQuery function with window width

I'm trying to use other JavaScript/jQuery for several width. To start easily, I want to do 20% when window width > 981 and 100% when < 981. Here's my script that I've made out of other scripts.

<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>


My 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>


So when window < 981 show 100%, when > 981 show 20%. But this code isn't working. I hope someone knows.

(Sorry it's Dutch)

Answer

I found my problem...

<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>

Together with this :

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

And it worked... Thanks for helping!