I am trying to have a list of items be randomly selected and then inserted to the CSS in the view. Essentially, I want a list of steps in which the icon selected is random. I tried putting a list of icon names in an array and using the sample function. It does not work, and when I checked the source code there was nothing there.
<% x= ["icon-link", "icon-bar-chart", "icon-edit", "icon-beaker"].sample %>
<li class="dark-nav ">
<i class="<% x %> icon-2x"></i>
<span>Step 2</span>
</a>
</li>
I tried also putting it as a method in my model and putting the method name in between the <% %>, but that does not work.
Any help would be appreciated.
Output the value of x using <%= in your view:
<i class="<%= x %> icon-2x"></i>
Related
There is likely an easy answer to this, but I can't seem to figure it out. My blog image won't display in an li tag once my rails form is submitted with the image.
Is there a way around this? The image displays when the li tag is removed.
I would like to show multiple images though.
Thanks
<!-- Blog Entry -->
<div class="flexslider project-img">
<ul class="slides">
<li>
<%= image_tag #post.image.url(:medium), class: "img-responsive" %>
</li>
</ul>
</div>
Try to check in the developer tools to see if your ul tag styles are not causing a conflict with your <li> tags styles;
and l think this:
<div class="flexslider project-img">
is suppose to look like this:
<div class="flexslider">
I hope this helps.
I am trying to create a hover over action for items inside of a dynamically created loop. I have no idea what the object names are or how many there are. As of now, I have the list printed correctly and a hover over working, however the hover over only prints the info from the first item, no matter which one you are hovering over
<% #reward_definitions_with_user_points.each do |definition| %>
<li>
<a href="#" data-class="popover-inside" data-toggle="popover-follow" data-placement="right" data-btn-edit="hover" data-target="#point-tracker-popover">
<%= definition.first.name %><span class="points"><%= format_points(definition.second) %> pts.</span>
</a>
<div id="point-tracker-popover" style="display:none">
<div class="popover-title"><%=definition.first.name%></div>
<div class="popover-content">
<div class="popover-inner popover-lg">
<%=definition.first.description%><span class="points"><%= format_points(definition.first.points) %> pts.</span>
</div>
</div>
</div>
</li>
<% end %>
For example: if the my list is a,b,c,d,e,f and I want the hover over to display each letter in sequence when activated. However it will display 'a' in the hoverover no matter which one the mouse activates.
You should probably mention that the problem you're having is with popovers. Also showing the html generated by your loop would be helpful. You seem to imply from the tags that popovers are an html5 thing, but I thought they were a part of twitter-bootstrap?
Having said all that...
What you are describing is clearly related to data-target="#point-tracker-popover". Which I believe is pointing to id="point-tracker-popover". The div with this id is being generated inside of your loop (having multiple elements with the same id is bad and is why you are experiencing the behavior you mentioned).
Changing your loop to use each_with_index should fix your problem.
<% #reward_definitions_with_user_points.each_with_index do |definition, index| %>
<li>
<a href="#" data-class="popover-inside" data-toggle="popover-follow" data-placement="right" data-btn-edit="hover" data-target="#point-tracker-popover-<%= index %>">
<%= definition.first.name %><span class="points"><%= format_points(definition.second) %> pts.</span>
</a>
<div id="point-tracker-popover-<%= index %>" style="display:none">
<div class="popover-title"><%=definition.first.name%></div>
<div class="popover-content">
<div class="popover-inner popover-lg">
<%=definition.first.description%><span class="points"><%= format_points(definition.first.points) %> pts.</span>
</div>
</div>
</div>
</li>
<% end %>
Of course, you may be able to simply change the target to a class like data-target=".point-tracker-popover" and change the id="point-tracker-popover" to be class="point-tracker-popover"; which would be a much cleaner approach. I am really not familiar with popovers, though, so I cannot say if this is the only problem you have, or if the second approach will work.
I'm using Zend/Navigation in Zend Framework 2. It prints this:
<ul class="Navigation">
<li>
Home Page
</li>
<li>
Contact
</li>
</ul>
But i want to put a <span> element inside every <li> like this:
<ul class="Navigation">
<li>
<span>
Home Page
</span>
</li>
<li>
<span>
Contact
</span>
</li>
</ul>
Is there any way to do that without using a "partial" solution?
There's no other way, how to change html output from menu view helper (except indentation and <ul> class).
Well, of course, you can write your own menu view helper - extend Zend\View\Helper\Navigation\Menu and override htmlify method:
https://github.com/zendframework/zf2/blob/release-2.2.5/library/Zend/View/Helper/Navigation/Menu.php#L472,
but I think, partial template is much better and easier solution.
For anyone who is intrested this guy has created a helper doing this job. http://cmyker.blogspot.gr/2012/11/zend-framework-2-navigation-menu-to.html
I'm a front-end web developer working on my first serious rails project (v3.2.8). I've successfully installed Foundation version 3.2.0 using the gem.
I am having trouble with the navigation toggle, which appears on smaller screen sizes and is used to expand and collapse the navigation links. When I click on it, it does nothing.
(You can see the documentation for the responsive zurb nav on their website: http://foundation.zurb.com/docs/navigation.php).
The code in question is:
<nav class="top-bar">
<ul>
<li class="toggle-topbar">
</li>
</ul>
<section>
<ul class="right">
<li class="has-dropdown">
<%= link_to "#{#user.email} | #{#user.credits_count}",
dashboard_path, :class => 'first-link' %>
<ul class="dropdown">
<li>
Settings<i class="icon-cog"></i>
</li>
<li>
Downloads<i class="icon-cloud-download"></i>
</li>
<li>
Subscription<i class="icon-calendar"></i>
</li>
<li>
<%= link_to 'Purchase Credits <i class="icon-money"></i>'
.html_safe, credits_path %>
</li>
<%= render "shared/menu_bar" %>
</ul>
</li>
</ul>
</section>
</nav>
The odd part is, when I remove:
<ul>
<li class="toggle-topbar">
</li>
</ul>
... Everything works as it should, but the first link:
<%= link_to "#{#user.email} | #{#user.credits_count}",
dashboard_path, :class => 'first-link' %>
... appears twice - Once where the actual toggle arrow should be and again once you click it to expand the navigation links.
Why would the navigation work properly when the toggle is not in the code and malfunction when it is?
Any help would be greatly appreciated.
I found this answer on another forum.
https://groups.google.com/forum/#!topic/foundation-framework-/-5F_kQWfNQ4
Put the following in the html:
<script src="http://foundation.zurb.com/public/assets/marketing_docs.js"></script>
And at least for me, the dropdown now works...
EDIT: as of Foundation 5 the marketing_docs file is no longer available
I'm currently trying to understand why the toggle isn't working.
I have a new batch form where user can select books from a div using the checkbox and click on a button to put them in another div which represents the selected books.
It works a bit like a listbox where user can move items between the different boxes except that here am using checkbox and div.
I have done the moving of books from one div to another using jquery.
See code below:
<% form_for #batch do |f| %>
<label style="width: 150px">Batch Name:</label><%= f.text_field :BAT_BATCH_NAME %>
<div id="all_books">
<% #books.each do |book| %>
<div id="book<%= book.BK_OID %>" bookid="<%= book.BK_OID %>" class="innertxt">
<ul>
<li>Book ID: <%= book.BK_OID %></li>
<li>Name: <%= book.BK_NAME %></li>
<li>
<input type="checkbox" name="batch[book_ids][]" id="select<%= book.BK_OID %>" value=<%= book.BK_OID %> class="selectit" />
</li>
</ul>
</div>
<% end %>
<div style="width:100px; text-align:center; margin-left:20px; padding-top: 100px; width:75px; float:left;">
Right »<br /><br />
« Left
</div>
<div id="selected_books"> </div>
<br/><br/>
<%= f.submit 'Update Batch Details' %>
<% end %>
Currently, only the selected books are saved, whether they are found in the 'all_books' div or 'selected_books' div.
However, I want all entries in the 'selected_books' div to be submitted when saving the batch, whether their checkboxes have been checked or not. and ignore all selected entries in the 'all_books' div.
In short, when saving the batch, i want to save only those books found in the 'selected_books' div and ignore the rest whether their checkboxes have been checked or not.
I hope i was clear enough.
I would be really grateful if someone could point me the right direction on how to do that.
Many many thanks for any suggestion provided.
$("#formid").submit(function(){ $("#selected_books").find("input:checkbox").attr({checked: "checked"}); });
That should do the trick.