i have a wrapper ("overview-nav") and three spans inside.
The span "overview-nav-current" is on the bottom of the first wrapper, and i am not able to drag it higher, so that it appears in the middle
float: top, margin-bottom, positive or negative doesn't work.
it would work if i would set it to positon: relative but then i have the problem, that the popover, above can not overlap the element if its positioned relative
HTML-Popovers best-way / Positioning / Z-Index
<div id="overview-nav" style="z-index: 0">
<% p = ($system_type_app ? select_times_path : invoicing_path) %>
<span class="overview-nav-btn">
<%= link_to far_svg('chevron-left'), p(date: p_overview[:back_date], view: p_overview[:view]) %>
</span>
<span id="overview-nav-current">
<%= link_to "Today", p(date: 'today', view: p_overview[:view]) %>
</span>
<span class="overview-nav-btn">
<%= link_to far_svg('chevron-right'), p(date: p_overview[:forward_date], view: p_overview[:view]) %>
</span>
</div>
The "far_svg" is a helper and that generated a svg, which affected the span, with the text "Today".
I positioned a little div with a little text beneath the word "today" and then I was able to push the text a little bit higher.
That is really not the cleanest way, but, it works for now.
Related
I am trying to add some style to the current page to highlight it from the other pages style. But my code does not seem to work... all the numbers look the same!
<section id="pagination">
<nav>
<ul>
<li><a class='<%= "active" if (params[:page]).to_i == #myths.current_page %>'>
<!-- checking current page and params page -->
<%= #myths.current_page.to_i %> <br> <%= (params[:page]).to_i %> <br>
<%= will_paginate #myths, :inner_window => 1, :outer_window => 1, :previous_label => '← previous', :next_label => 'next →' %>
</a></li>
</ul>
</nav>
</section>
Any help is appreciated.
update
CSS
a.active{text-decoration:underline;}
Picture of the pagination the current page is 3 (the style is applied when i check for the current page).
I am not using any helper.
Here is the generated html
<section id="pagination">
<nav>
<ul>
<li><a class='active'>
3 <br> 3 <br>
<div class="pagination">
<ul>
<li class="prev previous_page ">
<a rel="prev" href="/tags/Justice?page=2">← previous</a>
</li>
<li><a rel="start" href="/tags/Justice?page=1">1</a></li>
<li><a rel="prev" href="/tags/Justice?page=2">2</a></li>
<li class="active">3</li>
<li><a rel="next" href="/tags/Justice?page=4">4</a></li>
<li>5</li>
<li class="next next_page ">
<a rel="next" href="/tags/Justice?page=4">next →</a>
</li>
</ul>
</div>
</a></li>
</nav>
</section>
this is the problem
<li class="active">3</li>
it should be
<li><a class="active" href="/tags/Justice?page=3">3</a></li>
for it to work. how to fix that?
since i am on page 3, 3 should be underlined the pagination should be like : <- previous 1 2 3 4 5 next ->
Consider reading the following wiki page. Just simplify your view:
<section id="pagination">
<%= will_paginate #myths, :inner_window => 1, :outer_window => 1, :previous_label =>
</section>
To add some special look and feel for the current page link, just set css style for the .current class. will_paginate will do the remaining staff for you and automatically add .current class to the current page link.
Update:
To make your particular case working, just change the css style to reflect the markup
li.active a {
text-decoration:underline;
}
I'm brand new to rails (and coding in general) so I've a quick question on retrieving images from a database
Running rails 3.2.8
I have a list of products, code, description, price and product_image in the database, The product images is stored as 123.jpg in the database and the image itself is stored in app/assets/images folder
In my view I have the following code
<div class="center_content">
<div class="center_title_bar">Latest Products</div>
<% #camera_catalogues.each do |camera_catalogue| %>
<div class="prod_box">
<div class="top_prod_box"></div>
<div class="center_prod_box">
<div class="product_title"><%= camera_catalogue.model_description %></div>
<div class="product_img"><%= link_to (image_tag camera_catalogue.product_image),camera_catalogue %></div>
<div class="prod_price"><span class="reduce">350$</span> <span class="price"><%=number_to_currency(camera_catalogue.price, :unit =>"€")%> </span></div>
</div>
<div class="bottom_prod_box"></div>
<div class="prod_details_tab">
<img src="assest/cart.gif" alt="" title="" border="0" class="left_bt" />
<img src="assest/favs.gif" alt="" title="" border="0" class="left_bt" />
<img src="assets/favorites.gif" alt="" title="" border="0" class="left_bt" />
details
</div>
</div>
Everything displays correctly except that the image is not retrieved from the database
which is this line
<div class="product_img"><%= link_to (image_tag camera_catalogue.product_image),camera_catalogue %></div>
Does the image in the database need to be saved with a different url. i.e. instead of 123.jpg it is saved as assets/123.jpg
or is there some other error in my code.
Help/advice greatly appreciated :)
Use it like this
<div class="product_img"><%= link_to (image_tag (camera_catalogue.product_image)),camera_catalogue %></div>
I guess it will work for you. You need not use 'assests/image_name'
What's wrong with this line of code?
<%= submit_tag "Delete <i class='icon-check'></i>".html_safe, :disable_with => "Deleting", :class => "btn btn-danger"%>
This literally produces:
Evidently my html_safe call isn't doing anything.
Background:
I'm using Twitter Bootstrap as well as Font Awesome and I'm essentially trying to achieve a submit button with an icon inside of it.
To extend on Lukas' answer I needed a button tag rather than an input. This code produced the effect I was looking for:
<button type="submit" class="btn btn-danger">
Delete <i class="icon-check"></i>
</button>
Which resulted in:
I found the answer I was looking for here.
What's wrong with it? Submit button values should not contain embedded HTML code.
This is how submit button looks in HTML:
<input type="submit" value="Submit" />
HTML tags in value attributes are interpreted as text, not as HTML:
<input type="submit" value="<i>Submit</i>" />
<%= form.button :submit, class: 'btn btn-success' do %>
<i class="fa fa-plus"></i> Add Funder <i class="fa fa-chevron-right"></i>
<% end %>
This is good answer.
This is driving me nuts, I don't see why something so simple is so difficult to do in Rails.
Ok, so I'm looping with an index and attempting to assign individual divs with multiple classes, one is unchanging, but the other gets computed by the loop, i.e., class="item item_1" ... class="item item_2".. and so forth. This is what I have for code thus far:
<% #variable.each_with_index do |item, index| %>
<div class=<%="item item_#{index}"%>>
....
</div>
<% end %>
But this produces...
<div class="item" item_0="">
....
</div>
<div class="item" item_1="">
....
</div>
How do I go about accomplishing this?
<div class=<%="item item_#{index}"%>> compiles to <div class=item item_1>, so your browser thinks that the class is item and that item_1 is an attribute.
You just need some quotes around that ERB so it all gets put into the class:
<div class='<%="item item_#{index}"%>'>
should do the trick.
I have a Profile in my Rails 3 app. When the Profile is viewed, the Profile's about information shows in a div container by default. What I want to do is replace the "about" information in the div with messages from the User when a "messages" link is clicked. (The messages should load according to the profile_messages template.) To do this, I turned to jQuery UI Tabs.
So the "about" information exists in Tab-1. The "Messages" is in a template called profile_messages that I've tried loading from both the ProfilesController and the MessagesController.
I've gotten a lot of help here on SO to get to where I'm at. However, for some reason I can't get the actual messages to show up. What happens when I click "messages is I see the error message in my jQuery. If I inspect the element, I see this:
Failed to load resource: the server responded with a status of 404 (Not Found) `profile_messages`
Here is my code. If anyone can help me figure out what's going on I'd appreciate it greatly.
ProfilesShow show.html.erb:
<div id="tabs">
<ul id="infoContainer">
<li>About</li>
<li><%= link_to "Messages", "/profiles/profile_messages", :remote => true %></li>
</ul>
<div id="tabs-1">
</div><!-- end profile-about -->
profile_messages.html.erb:
<div id="tabs-2">
<% for 'message' in #user.messages %>
<div class="message-1">
</div>
</div><!-- end messages -->
<% end %>
ProfilesController:
def show
#profile = Profile.find(params[:id])
#user = User.find(#profile.user_id)
end
Routes.rb:
resources :messages do
resources :responses
end
resource :messages do
collection do
get :profile_messages
end
end
profile_messages.js.erb:
$( "#tabs" ).html( "<%= escape_javascript( render(#profile.messages) ) %>" );
From rake routes:
message GET /messages/:id(.:format) {:action=>"show", :controller=>"messages"}
profile GET /profiles/:id(.:format) {:action=>"show", :controller=>"profiles"}
profile_messages_messages GET /messages/profile_messages(.:format {:action=>"profile_messages", :controller=>"messages"}
jQuery UI Tabs:
$(function() {
$( "#tabs" ).tabs({
spinner: '<img src="">' },{
ajaxOptions: {
error: function( xhr, status, index, anchor ) {
$( anchor.hash ).html(
"There was an error loading this tab. Please try again." );
}
}
});
});
As I said, I'm really close so if anyone can help me figure out what I'm doing wrong I'd appreciate it.
UPDATE: If I switch the route from profiles/profile_messages to messages/profile_messages here is the HTML output of the jQuery UI Tabs:
<div id="tabs">
<ul id="infoContainer">
<li>About</li>
<li>Messages</li>
</ul>
<div id="tabs-1">
Here is what I see in Firebug:
<div id="tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
<ul id="infoContainer" class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
<li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active">About</li>
<li class="ui-state-default ui-corner-top">Messages</li>
</ul>
<div id="tabs-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom">
</div>
</div>
The fact that Firebug shows the second link as #ui-tabs-1 seems odd to me.
The routes output says it all: profile_messages_messages, but you also need to append _path--if you were using the generated path variable and not using a string path.
Does this route exist?
/profiles/profile_messages
This is what you are calling from your link_to. From your routes output, it seems this should be:
/messages/profile_messages
Thanks to the combined efforts of folks here on SO I was able to get this to work. Check out these questions for more code:
Exclude application layout in Rails 3 div
Rails 3 jQuery UI Tabs issue loading with Ajax