Interpolating Ruby String as ID
I am trying to understand interpolation and am trying to use a dynamic string (I say dynamically as it can change all the time, I push dates through the screen shot for movie releases) and as an id so that I can use bootstrap scrollspy in my project
I created a js fiddle using the usual id and bind tags that demonstrate what I am trying to achieve.
As you can see, I would like to show the release date of the movie if I am in that section when I scroll.
My code looks like this:
<div class="container">
<div class="row">
<div class="span8 offset2">
<div id="dateNav">
<ul class="dateNav">
<li><a href="##{date}"></a><% @response.each_pair do |date, movie| %><%= link_to date_format(date) %><% end %></li>
</ul>
</div>
</div>
</div>
</div>
<div class="span9">
<% @response.each_pair do |date, movie| %>
<h3 class="resultTitle fontSize13" id="<%= date %>">Available on <%= date_format(date) %></h3>
</div>
<!-- More movie information here
<% end %>
I have my body this way
<body data-spy="scroll" data-target="#dateNav">
and i call scrollspy like so
$('.dateNav').scrollspy()
When you are in the relevant section, the date should appear
CSS
ul.dateNav ul li a {
display:none;
}
ul.dateNav ul > li.active > a{
display:block
color: red;
text-decoration: underline;
}
however, when scrolling the page, the dates are not displayed.
Any help that would be appreciated, really would like to clarify some understanding here.
thank
EDIT
ok so changed as Joe Pim suggested
<li><% @response.each_pair do |date, movie| %><%= link_to date_format(date), "##{date}" %><% end %></li>
Each date has its own ID, which hasn't happened before, but the corresponding date is still not displayed
HTML is now generated
<ul class="dateNav">
<li>
<a href="#2013-01-09">9th Jan 2013</a>
<a href="#2013-01-11">11th Jan 2013</a>
<a href="#2013-01-18">18th Jan 2013</a>
<a href="#2013-01-23">23rd Jan 2013</a>
<a href="#2013-01-25">25th Jan 2013</a>
<a href="#2013-01-30">30th Jan 2013</a>
</li>
</ul>
EDIT for Sarah
scrollspy call
$('#spyOnThis').scrollspy();
Nav for dates
<div class="container">
<div class="row">
<div class="span12">
<div id="dateNav">
<ul class="nav dateNav">
<li><% @response.each_pair do |date, movie| %><%= link_to date_format(date), "#d_#{date}" %><% end %></li>
</ul>
</div>
</div>
</div>
List of films
<div id="spyOnThis">
<% @response.each_pair do |date, movie| %>
<h3 class="resultTitle fontSize13" id="d_<%= date %>">Available on <%= date_format(date) %></h3>
<% movie.each do |m| %>
<div class="thumbnail clearfix">
<img class="pull-left" src=<% if m.image_link %> <%= m.image_link %> <% else %> "/assets/noimage.jpg" <% end %>>
<div class="caption pull-right">
<%= link_to m.name, m.title_id, :class => 'resultTitle fontSize11' %>
<p class="bio"><%= m.bio %></p>
<p class="resultTitle">Cast</p>
<p class="bio"><%= m.cast.join(", ") unless m.cast.empty? %></p>
<%= link_to "Remind me", reminders_path(:title_id => m.title_id), :method => :post, :class => 'links button' %>
</div>
</div>
<% end %>
<% end %>
</div>
CSS
#spyOnThis {
height:auto;
overflow:auto;
}
I am setting the height as automatic because the number of results can change every time
ul.dateNav > li.active > a {
display:block;
color: red;
text-decoration: underline;
}
source to share
Identifiers starting with a number are not valid. Source
Try adding a string constant to the beginning of each identifier.
<a href="#d_#{date}"></a>
and
<h3 class="resultTitle fontSize13" id="d_<%= date %>">
Disclaimer: I don't know Ruby.
EDIT
Ok so I stripped it and it worked. jsFiddle
I've changed some of your classes and ids for fiddle purposes (there also seems to be some confusion about .dateNav
and #dateNav
), but it should look something like this:
<ul class="nav dateNav">
<li>
<a href="#d_#{date}"><% @response.each_pair do |date, movie| %><%= link_to date_format(date) %><% end %></a>
</li>
</ul>
and
<div class="span9">
<% @response.each_pair do |date, movie| %>
<h3 class="resultTitle fontSize13" id="d_<%= date %>">Available on <%= date_format(date) %></h3>
</div>
You can put identifiers on div
(for example on a violin) or h3
, it doesn't matter. The important part is CSS and how you run ScrollSpy.
If you call it with JavaScript ( $('#spyOnThis').scrollspy()
), you need to attach it to the element that will fire the scroll events, not the menu that is tracking. Source
Also, you must remove data-spy
and data-target
from the item body
.
Last but not least, the element you call .scrollspy()
on must have height
and overflow: auto;
set for the plugin to keep track of the scroll position.
source to share