CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Final Project
Final Project

Reputation: 11

Slider is not working in jQuery

I wrote a jQuery code that have all the pages code in one html file and I wanted to add a slider in the left side that will show the pages on. It works in the home page but it's not working for the other pages? Nevertheless the code is similar. I don't know what to change or add to make working for all of the pages.

My HTML header: 

    <head>
<meta charset="utf-8">
<title>WELCOME</title>
<link href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css"/>
<script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/jquery.sidr.dark.css">
<script>
$(document).ready(function(){
        {$(".p1").hide()};
    $("#hide1").click(function(){
        $(".p1").hide();
    });
    $("#show1").click(function(){
        $(".p1").show();
    });
});
</script>

<script>
$(document).ready(function(){
        {$(".p2").hide()};
    $("#hide2").click(function(){
        $(".p2").hide();
    });
    $("#show2").click(function(){
        $(".p2").show();
    });
});
</script>

<script>
$(document).ready(function(){
        {$(".p3").hide()};
    $("#hide3").click(function(){
        $(".p3").hide();
    });
    $("#show3").click(function(){
        $(".p3").show();
    });
});
</script>

<script>
    $(document).ready(function() {
    $('#simple-menu1').sidr();
});
</script>

<script>
    $(document).ready(function() {
    $('#simple-menu2').sidr();
});
</script>



<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/mobile.css" />
<link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>

</head>

And here is the home page slider (the one that works): 

 <!-- Home Page --> 
<div data-role="page" id="page">
    <!-- Header -->
    <div data-role="header">
        <div id="s-image"><a id="simple-menu1" href="#sidr"><img class="header-image" src="images/sort.png" alt="Sort By" heigh="35" width="35"></a> </div>
        <div id="sidr">
            <!-- Your content -->
            <ul class="center my-font">
                <li>
                    <a href="#page2" class="header-list">Page 1</a>
                </li>
                <li class="active">
                    <a href="#page3" class="header-list">Page 2</a>
                </li>
                <li>
                    <a href="#page4" class="header-list">Page 3</a>
                </li>
            </ul>
        </div>
        <h1 class="my-font"> Welcome to the home page</h1> 
    </div>

Here is the code for the slider for the one of the pages (It didn't work): 

  <!--  Page (2)  --> 
<div data-role="page" id="page">
    <!-- Header -->
    <div data-role="header">
        <div id="s-image"><a id="simple-menu1" href="#sidr"><img class="header-image" src="images/sort.png" alt="Sort By" heigh="35" width="35"></a> </div>
        <div id="sidr">
            <!-- Your content -->
            <ul class="center my-font">
                <li>
                    <a href="#page2" class="header-list">Page 1</a>
                </li>
                <li class="active">
                    <a href="#" class="header-list">Page 2</a>
                </li>
                <li>
                    <a href="#page4" class="header-list">Page 3</a>
                </li>
            </ul>
        </div>
        <h1 class="my-font"> Welcome to the home page</h1> 
    </div>

Upvotes: 0

Views: 63

Answers (1)

Aman Dhiman
Aman Dhiman

Reputation: 303

Have you try to replace $ with jQuery . Or either you can check error on console .

Upvotes: 1

Related Questions