I am trying to grasp interpolation and am trying to use a dynamic string ( i say dynamic as it can change all the time, I am pulling dates via a screen scrape for movie releases) and as an ID so that i can use bootstrap scrollspy in my project
I created a js fiddle using conventional ID's and anchor tags that demonstrates what I am trying to achieve.
As you can see, I would like to show the release date of a film if I am within that section as I am scrolling.
My code looks like this:
<div class="container">
<div class="row">
<div class="span8 offset2">
<div id="dateNav">
<ul class="dateNav">
<li><% #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 set like so
<body data-spy="scroll" data-target="#dateNav">
and am calling scrollspy like so
$('.dateNav').scrollspy()
When you are in the relevant section the date is supposed to 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 down the page the dates do not appear.
Any help appreciated, would really like to clarify some understanding here.
Thanks
EDIT
ok so have changed as Joe Pym suggested
<li><% #response.each_pair do |date, movie| %><%= link_to date_format(date), "##{date}" %><% end %></li>
Each date has its own id now which wasnt happening before but still no appearance of the relevant date
HTML now generated
<ul class="dateNav">
<li>
9th Jan 2013
11th Jan 2013
18th Jan 2013
23rd Jan 2013
25th Jan 2013
30th Jan 2013
</li>
</ul>
EDIT for Sara
calling scrollspy
$('#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 Movies
<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 set height as auto because the number of results can change every time
ul.dateNav > li.active > a {
display:block;
color: red;
text-decoration: underline;
}
IDs that start with a number are invalid. Source
Try adding a string constant to the beginning of each ID.
and
<h3 class="resultTitle fontSize13" id="d_<%= date %>">
Disclaimer: I don't know Ruby.
EDIT
Okay, so I stripped this down and got it working. jsFiddle
I changed some of your classes and IDs for fiddle purposes (also there seemed to be some confusion about .dateNav and #dateNav), but it should look something like this:
<ul class="nav dateNav">
<li>
<% #response.each_pair do |date, movie| %><%= link_to date_format(date) %><% end %>
</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 the IDs on div (like in the fiddle) or h3, it doesn't matter. The important part is the CSS and how you initiate ScrollSpy.
If you're calling it with JavaScript ($('#spyOnThis').scrollspy()), you need to attach it to the element that is going to trigger scroll events - not the menu that keeps track. Source
Furthermore, you should remove data-spy and data-target from the body element.
Last but not least, the element you're calling .scrollspy() on needs to have a height and overflow: auto; set for the plugin to keep track of the scroll position.
In your ERB, where you have
<li>
You aren't interpolating it. Change it to:
<li>
EDIT.
Scrap that...just looks like that a tag should be inside the loop?
Related
Can anyone tell me whats wrong with this section of code? I recently got this to work, but found out soon after the functionality for the Fancybox gallery stopped working. The a link element is only a sliver compared to the over all element. Im not sure if thats it. I know the most recent edit I made was to fix the surrounding row from .row-fluid to .row since that broke my layout. Below is the code:
<body id="portfolio">
<div class="container-fluid" id="particles-js"></div>
<%= render 'layouts/altmenu_gallery' %>
<h1>Portfolio</h1>
<div id="gallery" class="container-fluid">
<% #photos.each_slice(4) do |group| %>
<div class="row ">
<% group.compact.each do |photo| %>
<div class= "col-md-3">
<a class="fancybox" data-fancybox="gallery" href="<%=image_path photo.file_url %>" data-caption="<%= photo.description %>">
<%= image_tag photo.file_url, class:' img-fluid img-thumbnail' if photo.file.present? %>
</a>
</div>
<% end %>
</div>
<% end %>
<br class="clear">
</div>
<%= link_to 'New Photo', new_photo_path %>
</body>
Sorry, but it is not possible to tell without seeing the actual html code or, preferably, live demo. Maybe this issue arises because you have not escaped photo.description and that breaks html code, but, as I said, I can not be sure.
My apologies for the confusing title. I am not very sure how to describe this question, please suggest alternative titles if possible!
I'm building a web app where you can like an answer, like most social apps. The problem is, I am new to using coffeescript and erb, so I am not sure how to target my jQuery animations to specific elements.
So my html.erb file looks like this. It has a ERB loop where I go through each answer and display it.
<% #question.answers.each do |answer| %>
<div class="row">
<div class="col-lg-2 col-sm-2">
<div class="like">
<button class="heart-btn">
</button>
<div class="liked">
+1
</div>
</div>
<div class="option">
<a href='/'>Report</a>
<br><a href='/'>Edit</a>
<br>
<%= link_to 'Delete', question_answer_path(#question, answer), method: :delete, data: { confirm: 'Are you sure?' } %>
</div>
</div>
<div class="col-lg-10 col-sm-10">
<div class="row" style="margin:0">
<!-- USER PROFILE -->
<a href='/users/2/profile'>
<div class="mini-profile">
<%= image_tag(#tutor.picture_url) %>
<ul style="list-style-type:none">
<li class="username"><%= #tutor.username %></li>
<li><i class="fa fa-flag" style="padding: 2px"></i><%= #tutor.country %></li>
<li><i class="fa fa-graduation-cap"></i><%= #tutor.educational_level %></li>
</ul>
</div>
</a>
</div>
<div class="row">
<div class="ans-box">
<ul style="list-style-type:none">
<li><strong>This answer was written on:</strong> <%= answer.created_at %></li>
<li class="ans-content"><strong>This is my answer:</strong> <%= raw answer.answercontent %></li>
</ul>
</div>
</div>
</div>
</div>
<hr class="line">
<% end %>
Now, for the div of class 'like', I have the following js written (document ready omitted):
# Heart like
$(".heart-btn").click ->
$(this).toggleClass('clicked')
$(".liked").show().fadeOut(500)
the 'liked' class is the +1 that will show when the heart is clicked.
But as you can probably imagine, this makes ALL the hearts on the page display the '+1'. I want to target only the 'heart' of the 'answer' that was clicked. I reckon I can do this by referencing the current 'answer' as a dom object, but I am unsure on how to do this. My attempt is doing something like:
# Heart like
current_ans = <%= answer %>
$(".heart-btn").click ->
$(this).toggleClass('clicked')
current_ans.$(".liked").show().fadeOut(500)
But the syntax seems very off to me and it doesn't seem to work.
(I think partially I'm not finding the solution because I cannot phrase my question so well. Please advise if this is the case. Thanks!)
jQuery closest is ideal for this:
$(".heart-btn").click ->
$(this).toggleClass('clicked')
$(this).closest('.like').find(".liked").show().fadeOut(500)
is it possible to reorder/move widgets by given property on the dashboard ?
i am adding widgets dynamically to the dashboard by pushing data from a job to the erb file:
<div class="gridster">
<ul>
<% settings.servers.each do |data| %>
<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
<div data-id="<%=data['webHost']%>" data-title="<%=data['name']%>" data-version="<%=data['Version']%>" >
</li>
<% end %>
</div>
You can organize your widgets changing data-row and data-col.
If there are some property on your data that can be used to sort them the widgets, you could use it on data-row and data-col
Ex.:
<% settings.servers.each do |data| %>
<li data-row="<%= data['row'] %>" data-col="<%= data['col'] %>" data-sizex="1" data-sizey="1">
<div data-id="<%=data['webHost']%>" data-title="<%=data['name']%>" data-version="<%=data['Version']%>" >
</li>
<% end %>
I'm just starting out with Ruby from a java background. I'm trying to code a particular loop but can't figure out the right syntax:
Could someone help me troubleshoot this please? I'm trying to write a loop but use different css classes to change the style of each block.
Realise this is probably easy, but help is appreciated....
<%= #products.each do |product, i| %>
<% if i % 1 %>
<div class="items-row clearfix">
<div class="one_fourth">
<div class="item-thumb">
<img src="<%= image_path "thumb.png" %>" alt="" class="thumb" width="162" height="230" />
</div>
<p><%= product.name %></p>
<p class="bold">$79.95 AUD</p>
<p class="color-wrap">
<span class="color" style="background:#ddd;"></span>
<span class="color" style="background:#f9f9f9;"></span>
<span class="color" style="background:green;"></span>
<span class="color" style="background:red;"></span>
</p>
</div>
<% elsif i % 4 %>
<div class="one_fourth last">
<div class="item-thumb">
<img src="<%= image_path "thumb.png" %>" alt="" class="thumb" width="162" height="230" />
</div>
<p><%= product.name %></p>
<p class="bold">$79.95 AUD</p>
</div>
</div><!-- end row -->
<% else %>
<div class="one_fourth">
<div class="item-thumb">
<img src="<%= image_path "thumb.png" %>" alt="" class="thumb" width="162" height="230" />
</div>
<p>Item Name</p>
<p class="bold">$79.95 AUD</p>
</div>
<% end %>
<% end %>
You can do something like this using cycle:
<% products.each_slice(4) do |slice| %>
<div class="items-row clearfix">
<% slice.each_with_index do |product,i| %>
<div class="one_fourth <%= cycle("first", "second", "third", "fourth") %>">
<%= render product %>
<% if i != 3 %>
<p class="color-wrap">
<span class="color" style="background:#ddd;"></span>
<span class="color" style="background:#f9f9f9;"></span>
<span class="color" style="background:green;"></span>
<span class="color" style="background:red;"></span>
</p>
<% end %>
</div>
<% end %>
</div>
<% end %>
_product.html.erb:
<div class="item-thumb">
<img src="<%= image_path "thumb.png" %>" alt="" class="thumb" width="162" height="230" />
</div>
<p><%= product.name %></p>
<p class="bold">$79.95 AUD</p>
Rather than if/else statements and CSS markup in your views, you should probably externalize your CSS, make a few partials, and make use of ActionView::Helpers::TextHelper#cycle. For example:
<%= #products.each do |product| %>
<div class="<%= cycle('first', 'second', 'third', 'fourth') -%>">
<!-- 1. let the CSS class handle display differences -->
<!-- 2. render a partial based on #current_cycle -->
<%= render :partial => current_cycle %>
</div>
<% end %>
I'd say the mod's are your problem. It's never going to go into the first block as n%1 will always return 0. Try your logic out using irb to get you going.
You may want to try jQuery nth-child
I got part of the answer. Slight change of syntax to use "each_with_index" instead of just each.
Still trying to work out there's a lot of variations of when a product can be the last tile and require closing, first on row, first in set, last in a row.....
Thanks guys, I think I've answered my own question.
I am working within a Ruby on Rails app. I have a loop that creates divs like this:
<% #snorks.each do |snork| -%>
<div>
<%= snork %>
</div>
<% end %>
And I need the output to have every other div be floated left or right like this:
<div class="left">
Allstar Seaworthy
</div>
<div class="right">
Casey Kelp
</div>
<div class="left">
Dimmy Finster
</div>
<div class="right">
Daffney Gillfin
</div>
<div class="left">
Tooter Shellby
</div>
<div class="right">
Dr. / Uncle Galeo
</div>
Additionally, I need to add a div with class="clear" every two divs, like this:
<div class="left">
Allstar Seaworthy
</div>
<div class="right">
Casey Kelp
</div>
<div class="clear"></div>
<div class="left">
Dimmy Finster
</div>
<div class="right">
Daffney Gillfin
</div>
<div class="clear"></div>
<div class="left">
Tooter Shellby
</div>
<div class="right">
Dr. / Uncle Galeo
</div>
<div class="clear"></div>
I have researched, and found a few posts saying that the alternate classes can be accomplished easily by using cycle(), and that does work. However, when I use it in two places within the loop it stops working right and just outputs something like this:
<div class="left">
Allstar Seaworthy
</div>
<div class="left">
Casey Kelp
</div>
<div class="left">
Dimmy Finster
</div>
<div class="left">
Daffney Gillfin
</div>
<div class="left">
Tooter Shellby
</div>
<div class="left">
Dr. / Uncle Galeo
</div>
What's the best practices way in Ruby on Rails to alternate classes in a loop, and also add something every other loop?
According to the documentation, if you need nested ones you name them. Otherwise they will both share the name "default" and conflict.
<% #snorks.each do |snork| -%>
<div class="<%= cycle('left', 'right') -%>">
<%= snork %>
</div>
<%= cycle('','<div class="clear"></div>', :name=>"cleardiv") %>
<% end %>
The best thing here seems to be using each with index. That way you could do some simple modulus math to determine if the number is odd or even and output the correct class and add the clears.
#snorks.each_with_index do | snork, index|
If index%2 == 0
class = 'left'
else
class = 'right'
end
Well u get my drift and I'm on my phone.
use cycle helper
http://apidock.com/rails/ActionView/Helpers/TextHelper/cycle
<% #snorks.each do |snork| -%>
<div class="<%= cycle("left", "right") -%>">
<%= snork %>
</div>
<% end %>
Edit: for adding new div; following could help
<% #snorks.each_slice(2) do |snork_batch| -%>
<% snork_batch.each do |snork|%>
<div class="<%= cycle("left", "right",:name=>"className") -%>">
<%= snork %>
</div>
<%end%>
<div class="clear"></div>
<% reset_cycle("className")%>
<% end %>