Fading my sidebar (div) using jQuery

StackOverflow https://stackoverflow.com/questions/21191799

Domanda

Im using the following code to make my sidebar disappear if the screen is less than 1024 but it doesn't seem to work. It worked on a previous website but i cant see the problem. I would be grateful for any help.

Here is the HTML:

<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 my CSS:

#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; }

Here is my Javascript:

//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");


}

}
È stato utile?

Soluzione

Seem like you include your script before loading jQuery library. Try to reverse the order of them, so change from:

<script type="text/javascript" src="script.js"></script>
<script src="jquery1.js"></script>

to:

<script src="jquery1.js"></script>
<script type="text/javascript" src="script.js"></script>
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top