CODEWITHSUNDEEP
javascriptjqueryhtmlcssmenu
Jane
Jane

Reputation: 816

Sidr multiple menus with different content

I am trying to use sidr for a website I'm building.

The website consists of one long page that is scrollable. It contains 3 anchor divs and it loads on the second anchor so that you can scroll both up and down. So far that works, but when I try to implement the sidr menus (I need 3 different texts to show, text 1 opens with a button that is in anchor div 1, etc.) but I can't even get the simplest version to work, not even when I copy the sample code from the website.

This is what I have now;

        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
   <head>
      <title>Konijntjes TEST</TITLE>
         <script>
$(document).ready(function() {
    $('#menu1').sidr({
      name: 'menu1',
      side: 'left' // By default
    });
    $('#menu2').sidr({
      name: 'menu2',
      side: 'right'
    });

      $('#menu3').sidr({
      name: 'menu3',
      side: 'left'
    });
});
</script>
<link rel="stylesheet" href="style.css" type="text/css">
      <link rel="stylesheet" href="javascripts/sidr/stylesheets/jquery.sidr.dark.css">

   </head>
   <body onload="moveWindow()">

   <!-- Include jQuery -->
    <script src="javascripts/jquery.js"></script>
    <!-- Include the Sidr JS -->
    <script src="javascripts/sidr/jquery.sidr.min.js"></script>
      <script type="text/javascript" language="javascript">
    function moveWindow (){window.location.hash="mylocation";}
</script>

   <div class="container">

   <!--- PAGE 2 --->
   <div class="page2">

      <h1>Deel 2</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida aliquam odio. Duis elementum nisl vel libero molestie, in varius nisi venenatis. Maecenas sed arcu ac ante convallis aliquam eu nec libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec euismod odio erat, a suscipit elit luctus sed. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida aliquam odio. Duis elementum nisl vel libero molestie, in varius nisi venenatis. Maecenas sed arcu ac ante convallis aliquam eu nec libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec euismod odio erat, a suscipit elit luctus sed. Aliquam aliquet diam at erat aliquet malesuada. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
      <a id="menu1" href="#menu1">Menu 1</a> 

      <div id="sidr 2">
  <!-- Your content -->
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida aliquam odio. Duis elementum nisl vel libero molestie, in varius nisi venenatis. Maecenas se</p>
</div>
   </div>

<!--- PAGE 1 --->      

<a name="mylocation"><div class="page1"><div class="pagecontainer">
<h1>This should be the beginning.</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida aliquam odio. Duis elementum nisl vel libero molestie, in varius nisi venenatis. Maecenas sed arcu ac ante convallis aliquam eu nec libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec euismod odio erat, a suscipit elit luctus sed. Aliquam aliquet diam at erat aliquet malesuada. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida aliquam odio. Duis elementum nisl vel libero molestie, in varius nisi venenatis. Maecenas sed arcu ac ante convallis aliquam eu nec libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec euismod odio erat, a suscipit elit luctus sed. Aliquam aliquet diam at erat aliquet malesuada. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>

    <a id="menu2" href="#menu2">Menu 2</a>

    <div id="sidr 1">
  <!-- Your content -->
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida aliquam odio. Duis elementum nisl vel libero molestie, in varius nisi venenatis. Maecenas se</p>
</div>
   </div>

    </div>
</div></a>

<!--- PAGE 3 --->

<div class="page3">

      <h1>Deel 3</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida aliquam odio. Duis elementum nisl vel libero molestie, in varius nisi venenatis. Maecenas sed arcu ac ante convallis aliquam eu nec libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec euismod odio erat, a suscipit elit luctus sed. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida aliquam odio. Duis elementum nisl vel libero molestie, in varius nisi venenatis. Maecenas sed arcu ac ante convallis aliquam eu nec libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec euismod odio erat, a suscipit elit luctus sed. Aliquam aliquet diam at erat aliquet malesuada. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>

      <a id="menu3" href="#menu3">Menu 3</a>

      <div id="sidr 3">
  <!-- Your content -->
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida aliquam odio. Duis elementum nisl vel libero molestie, in varius nisi venenatis. Maecenas se</p>
</div>
   </div>


   </div>







   </div>

   </body>
</html>

And this is the css I have, plus the sidr css in another document.

body {
    font-family: verdana;
    line-height: 1.2em;
    font-size:1.1em;
}
p { width: 100%;
}

.container {
    margin: 0px auto;
    width: 800px;
}

h1 {
    padding-bottom: 2em;
}

.pagecontainer {
    padding-top:9.8em;
    padding-bottom:10.2em;
}

.page1 {
    padding-top:2em;
}

.page2 {
    padding-top:2em;
}

.page3 {
    padding-top:2em;
    padding-bottom: 3em;

}

What am I doing wrong? I'm new to javascript so I'm not sure if I loaded the scripts in all the right places.

Upvotes: 0

Views: 250

Answers (1)

Jeff Noel
Jeff Noel

Reputation: 7618

You are closing too many div elements (3 closing tags for 2 opening tags), at two different places. Also, the script tags are parsed in the order you put them, which means if you call .sidr() function before actually loading this fonction's code, it won't work !

You are targetting the .sidr() menu elements the wrong way: You tell the link to be the menu itself! Here is how to initiate .sidr() properly:

$('#myLink').sidr({
    name: 'TheTargettedContainerWhichWillBecomeTheHiddenSidrMenu',
    side: 'left' /* Pretty self explanatory */  
});

Live Demo

HTML

<!DOCTYPE HTML>
<html>
    <head>
        <title>Konijntjes TEST</title>
        <link rel="stylesheet" href="style.css" type="text/css">
        <link rel="stylesheet" href="javascripts/sidr/stylesheets/jquery.sidr.dark.css">
        <!-- Include jQuery -->
        <script src="javascripts/jquery.js"></script>
        <!-- Include the Sidr JS -->
        <script src="javascripts/sidr/jquery.sidr.min.js"></script>
        <script type="text/javascript">
            function moveWindow() {
                window.location.hash = "mylocation";
            }
        </script>
        <script>
            $(document).ready(function() {
                $('#menu1').sidr({
                    name: 'page1',
                    side: 'left' // By default
                });
                $('#menu2').sidr({
                    name: 'page2',
                    side: 'right'
                });

                $('#menu3').sidr({
                    name: 'page3',
                    side: 'left'
                });
            });
        </script>
    </head>
    <body onload="moveWindow()">
        <div class="container">
            <!-- PAGE 2 -->
            <div class="page2">
                <h1>Deel 2</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida aliquam odio. Duis elementum nisl vel libero molestie, in varius nisi venenatis. Maecenas sed arcu ac ante convallis aliquam eu nec libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec euismod odio erat, a suscipit elit luctus sed. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida aliquam odio. Duis elementum nisl vel libero molestie, in varius nisi venenatis. Maecenas sed arcu ac ante convallis aliquam eu nec libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec euismod odio erat, a suscipit elit luctus sed. Aliquam aliquet diam at erat aliquet malesuada. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
                <a id="menu1" href="#menu1">Menu 1</a> 
                <div id="sidr 2">
                    <!-- Your content -->
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida aliquam odio. Duis elementum nisl vel libero molestie, in varius nisi venenatis. Maecenas se</p>
                </div>
            </div>
            <!--- PAGE 1 -->
            <a name="mylocation">
                <div class="page1">
                    <div class="pagecontainer">
                        <h1>This should be the beginning.</h1>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida aliquam odio. Duis elementum nisl vel libero molestie, in varius nisi venenatis. Maecenas sed arcu ac ante convallis aliquam eu nec libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec euismod odio erat, a suscipit elit luctus sed. Aliquam aliquet diam at erat aliquet malesuada. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida aliquam odio. Duis elementum nisl vel libero molestie, in varius nisi venenatis. Maecenas sed arcu ac ante convallis aliquam eu nec libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec euismod odio erat, a suscipit elit luctus sed. Aliquam aliquet diam at erat aliquet malesuada. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
            <a id="menu2" href="#menu2">Menu 2</a>
            <div id="sidr 1">
            <!-- Your content -->
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida aliquam odio. Duis elementum nisl vel libero molestie, in varius nisi venenatis. Maecenas se</p>
            </div>
            </div>
            </div>
            </a>
            <!-- PAGE 3 -->
            <div class="page3">
                <h1>Deel 3</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida aliquam odio. Duis elementum nisl vel libero molestie, in varius nisi venenatis. Maecenas sed arcu ac ante convallis aliquam eu nec libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec euismod odio erat, a suscipit elit luctus sed. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida aliquam odio. Duis elementum nisl vel libero molestie, in varius nisi venenatis. Maecenas sed arcu ac ante convallis aliquam eu nec libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec euismod odio erat, a suscipit elit luctus sed. Aliquam aliquet diam at erat aliquet malesuada. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
                <a id="menu3" href="#menu3">Menu 3</a>
                <div id="sidr 3">
                    <!-- Your content -->
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida aliquam odio. Duis elementum nisl vel libero molestie, in varius nisi venenatis. Maecenas se</p>
                </div>
            </div>
        </div>
    </body>
</html>

Upvotes: 2

Related Questions