I have written the following code to hide my sidebar when the screen width is less than 1024 pixels, but it doesn't seem to be working. It worked fine on a previous website, so I'm not sure what the issue is here. Any help would be greatly appreciated.
Below is the HTML code:
<html>
<head>
</head>
<body>
<script type="text/javascript" src="script.js"></script>
<script src="jquery1.js"></script>
<div class="content">
<!-- Sidebar -->
<div id="sidebar">
<!-- Sidebar Search -->
<form class = "search" method="get" action="">
<input class = "search_box" type="text" value="Search..." onfocus="if(this.value=='Search...')this.value=''"; onblur="if(this.value=='')this.value='Search...';" >
<input class = "search_submit" type = "submit" value = "Search">
</form>
<!-- Sidebar Menu -->
<ul id="sidebar_menu">
<li><a id="" href="#">Link 1</a>
<li><a id="" href="#">Link 2</a>
<li><a id="" href="#">Link 3</a>
<li><a id="" href="#">Link 4</a>
<li><a id="" href="#">Link 5</a>
<li><a id="" href="#">Link 6</a>
<li><a id="" href="#">Link 7</a>
<li><a id="" href="#">Link 8</a>
</ul>
</div>
<!-- Main Content -->
<div id="main_content">
<h3>Lorem Ipsum</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium odio vitae erat pharetra eleifend. Sed in consectetur odio, vel venenatis nunc.
Sed felis sapien, ullamcorper eget arcu eget, consectetur posuere nisl. Ut blandit metus quis lectus ultricies, eu dignissim mauris rhoncus.
Aliquam est libero, molestie eget lacus ac, luctus interdum enim. Nulla ac dapibus tellus, in bibendum leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris in mi lorem. Vivamus nec risus nec nisi tempus bibendum ut eget mi. Phasellus eget luctus massa.
Vivamus et libero turpis.
</p>
</div>
</div>
</body>
Here is the associated CSS code:
#sidebar {
float: right;
margin: 10px;
margin-top: 0;
margin-bottom: 0;
width: 300px;
height: 100%;
background: #168AFF;
border-top-right-radius: 15px;
}
#sidebar_menu {
margin: 20px;
}
#sidebar_menu li {
list-style-type: none;
margin: 10px;
padding-bottom: 10px;
width: 250px;
}
#sidebar_menu li a{
text-decoration: none;
font-family: 'Open Sans', sans-serif;
font-size: 15px;
color: #FFFFFF;
border-style: solid;
border-radius: 2px;
border-color: #585858;
background-color: #585858;
height: 42px;
width: 250px;
float: right;
margin-left: auto;
margin-right: auto;
margin-bottom: 5px;
}
#sidebar_menu li a:hover { background-color: #777777; border-color: #777777; }
Finally, here is my JavaScript code:
//run on document load and on window resize
$(document).ready(function () {
//on load
hideDiv();
//on resize
$(window).resize(function(){
hideDiv();
});
});
function hideDiv(){
if ($(window).width() < 1024) {
$("#sidebar").fadeOut("slow");
}else{
$("#sidebar").fadeIn("slow");
}
}