I've been attempting to integrate the jQuery sidr plugin into my Rails project on Codecademy, but unfortunately, it's not functioning as expected.
To view the page, simply click here:
If you notice, the menu icon at the top left takes some time to load, and when clicked, the menu doesn't display correctly.
What's odd is that the menu appears correctly in the Codecademy browser (although the icon still loads slowly).
The expected appearance should resemble this:
Here are a few key files:
application.html.erb layout:
<!DOCTYPE html>
<html>
<head>
<title>Stories</title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,100,300" rel="stylesheet" type="text/css">
</head>
<body>
<%= yield %>
<div class="footer">
<div class="container">
Developed by Satchel French
</div>
</div>
<!-- javascript -->
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
</body>
</html>
The menu stylesheet (sidr-dark.css):
.sidr{display:none;position:absolute;position:fixed;top:0;height:100%;z-index:999999;width:260px;overflow-x:none;overflow-y:auto;font-family:"Roboto",tahoma,verdana,arial,sans-serif;font-size:19px;background:#000;color:#fff; font-weight:100;}
.sidr .sidr-inner{padding:0 0 15px}
.sidr .sidr-inner>p{margin-left:15px;margin-right:15px}
.sidr.right{left:auto;right:-260px}
.sidr.left{left:-260px;right:auto}
.sidr p{font-size:15px;margin:0 0 12px}
.sidr p a{color:rgba(255,255,255,0.9)}.sidr>p{margin-left:15px;margin-right:15px}
.sidr ul{display:block;margin:0 0 15px;padding:0;}
.sidr ul li{display:block;margin:10px;line-height:48px}
.sidr ul li:hover {background:#191919; margin: 10px;}
.sidr ul li a,.sidr ul li span{padding:0 40px;display:block;text-decoration:none;color:#fff}
And the home.html.erb file:
<!DOCTYPE html>
<html>
<!-- menu -->
<div id="sidr">
<!-- Your content -->
<ul>
<li class="active"><a href="#">Welcome</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
<!-- start page -->
<div class="window main">
<div class="container">
<!-- menu button -->
<a id="simple-menu" href="#sidr"><%= image_tag('https://s3.amazonaws.com/codecademy-content/projects/z2d/stories/menu-white.svg',class:'icon-menu', alt:'open', width:'24px') %></a>
<!-- content -->
<div class="row">
<div class="content col-md-6 col-md-offset-6">
<h1 class="headline"> Satchel and Travel </h1>
<p><a class="btn btn-primary sharp btn-lg" href="#" role="button"> Learn more </a> </p>
</div>
</div>
</div>
</div>
<!-- home -supporting -->
<div class="window-support">
<div class="container">
<h2 class="headline">Lets write about the moments.</h2>
</div>
</div>
<!-- home secondary -->
<div class="secondary">
<div class="container">
</div>
</div>
<!-- secondary support -->
<div class="window-support">
<div class="container">
<h2 class="headline">Interested?</h2>
<p><a class="btn btn-primary sharp btn-lg" href="#" role="button">Adventure</a></p>
</div>
</div>
</html>
Any assistance you can provide would be greatly appreciated! Thank you!
Satchel