Sidr is not working in blogger blogspot

219 Views Asked by At

I am trying to implement sidr in a blog I tried everything but its not working. Here's what i have tried

<link href='https://googledrive.com/host/0B0pQhfT_FrZTcHE3dmEzUkpta2M' rel='stylesheet'/> 
<head>
</head>
<a id="simple-menu" href="#sidr">Toggle menu</a>

<div id="sidr">
  <!-- Your content -->
  <ul>
    <li><a href="#">List 1</a></li>
    <li class="active"><a href="#">List 2</a></li>
    <li><a href="#">List 3</a></li>
  </ul>
</div>

<body>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'/>
<script src='https://googledrive.com/host/0B0pQhfT_FrZTZ1JRajJzTjllczQ/'/>
<script>
$(document).ready(function() {
  $('#simple-menu').sidr();
});
</script>
</body>

Here is the blog : http://xfactor445.blogspot.in/

I tried it in code pen :http://codepen.io/anon/pen/Hmkof

1

There are 1 best solutions below

0
On

Both your link to the CSS and the jQuery for your slider seem to be missing the actual filename in the paths. Also I would not recommend closing script tags with < /> and instead use <script></script> as this will not work in some browsers (e.g. IE). I have tried to fix below...

<link href="https://googledrive.com/host/0B0pQhfT_FrZTcHE3dmEzUkpta2M/slidr.css" rel='stylesheet'/> 

<a id="simple-menu" href="#sidr">Toggle menu</a>

<div id="sidr">
  <!-- Your content -->
  <ul>
    <li><a href="#">List 1</a></li>
    <li class="active"><a href="#">List 2</a></li>
    <li><a href="#">List 3</a></li>
  </ul>
</div>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://googledrive.com/host/0B0pQhfT_FrZTcHE3dmEzUkpta2M/slidr.js"></script>
<script>
$(document).ready(function() {
  $('#simple-menu').sidr();
});
</script>

Codepen code updated here