I have problem with Ruby on rails link effects.
My current code is:
<header class="navbar navbarfixed navbar-default navstyle>
<%= link_to "Cocktails",root_path, class:"btn btn-lg", id: "logo" %>
<nav class="cl-effect-5 container">
<span data-hover="new">new</span>
<span data-hover="test">test</span>
<span data-hover="test">test</span>
</nav>
</header>
So i need to convert the current html link style to ruby, so the effect is still there(cl-effect-5). I tried using this solution, but i get syntax error for some reason, even though i double checked everything...
One difference I noted with your code and the linked solution is that you have the hovers in the <span> versus in the <a> tag.
= link_to '#', data: { hover: 'test' } do
'Test'
I think that's what you may be looking for (not that the span is wrong per se). Also, make sure your application.css and application.js manifests are including bootstrap (or whatever front end UI kit you're using)!
Related
I am working with Semantic UI in a rails project and wanted to create a dropdown menu with items that would link to other view pages. Most of the problems i've seen with the dropdown stemmed from users not initializing the dropdown menu which I was able to do.
Here's my code:
<div class="ui floating dropdown button">
Course<i class="dropdown icon"></i>
<div class="menu">
<% #topics.each { |topic| %>
<a class="item" href="articles/<%= topic.id %>">
<span class="text"> <%= topic.name %></span>
</a>
<% } %>
</div>
</div>
Different things i've tried:
Creating a separate hardcoded links / a tags like <a href="articles/4"> outside of the dropdown menu. This creates a working link and directs me to the article show view page with the id of 4.
Changed the wrapping 's class as "ui floating dropdown item" as well
I've also looked up other users' posts that shows they have the same exact problem. But when i try their solution, my dropdown menu items still do not work and i'm not sure what i'm doing wrong. Here are their posts:
https://github.com/Semantic-Org/Semantic-UI/issues/3234
https://github.com/Semantic-Org/Semantic-UI/issues/453
The two most important things seem to be:
Not putting the dropdown class definition as part of an anchor tag (inserting an anchor tag inside an anchor tag in the dropdown menu)
Not surrounding each anchor tags with their own <div class="items"> tags but to integrate them into one line like <a class="item" href="#"> # </a>
Can anyone help me understand what i might be overlooking? Let me know if i left out any critical information, would love to update the post with the relevant data right away, thank you!
After doing more and more research, I came to the conclusion that the links were not working in my semantic-ui dropdown menu because of some code, most likely Javascript, that i had inserted before.
Of course, i ruled this way out of the realm of possibility because there was no way i would forget about such code but i decided to go through all of my .js files just in case.
Lo and behold, i had a jQuery selector return false when a .item was being clicked...
I felt really silly and i didnt want to believe it at first but if you're having this problem and you've checked everything else like i have, it's probably your javascript!
Ok so I've encountered a very very weird problem that has got me staying up late but I finally figured out whats wrong however, the solution is not ideal and I would like to know what is happening. Better yet, how to fix it.
I have a page seperated with many div tags with the id class. I have other pages that are done the same way with no problems at all when I try to link to a particular section of a page from another page with the following methods. However, the problem occurs when the page Im linking to has not enough content.. but still is at least scrollable length.. When clicking on the links that way, instead of moving to the desired section, it just moves towards the bottom.
For instance if you clicked on this website, http://aquaticshelp.com/aquascape/getting-started#aquascape-main-plants and clicked on the "Preparing your plant section" you will see what I mean. This is a very undesirable behavior and Im not sure where to go from here.
<%= link_to 'Section 1', route_path(anchor: "section-1"), class: "h4" %>
<div id="section-1">
</div>
<div id="section-2">
</div>
<div id="section-3">
</div>
EDIT: Added some screen shots for clarity of question
Below is where you click and contains the following code
<%= link_to aquascape_plants_prep_path(anchor: "aquascape-plants-prep-intro") do %>
<%= image_tag("aquascaping/start/plant_prep_img.jpg", size:"140x140", class: "img-circle center-block")%>
<%= link_to 'Preparing the Plants', aquascape_plants_prep_path(anchor: "aquascape-plants-prep-intro"), class: "h4" %>
<% end %>
The following is where it directs me to regardless of the anchor tag
Where I want it to go, and it does if I click on the following
<%= link_to 'Intro', "#aquascape-plants-prep-intro" %>
I tried reading guides.rubyonrails but I cant seem to figure this out:
I have a masthead in my application.html.erb file in my rails 4.0 application.
I want the masthead div to be rendered in all pages except the homepage.
Thanks for your help!
You can wrap it in a conditional ruby statement like
<% unless current_page?(root_url) %>
<div>Your html code</div>
<% end %>
I'm having trouble with HAML nesting a link within another link. The indentation is completely correct in the HAML, but the HTML is being output very wrong.
The original HAML code:
.item
=link_to page_path do
.item-info
%h3 Item name
=link_to 'Link', different_page_path
When I view the HTML in Chrome's inspect element, this is what I get:
<div class="item-info">
<a href="/page">
<h3>Item name</h3>
</a>
Link
</div>
But when I view the source, it show's up correctly, but is still messed up when viewing the page:
<a href="/page">
<div class='item-info'>
<h3>Item name</h3>
Link
</div>
</a>
I'm at a loss and any help would be great. Thanks.
If you really want a link within a link you could use haml directly instead of the rails (or what framework you are using) method link_to:
.item
%a{ :href => '/page' }
.item-info
%h3 Item name
%a{ :href => '/different_page' } Link
link_to is helping you to do the right thing visavi the browser as discussed above. It may be good to realize that this is not a haml issue but rather the link_to implementation.
UPDATE: clarification - it will still not be rendered nicely by the browser but the markup produced will be as asked for.
I'm a bit of a Ruby on Rails amateur, and I am trying to nest a div tag inside of an anchor tag in rails. I can make it work, but the resulting code I have written is terrible and is certainly NOT the rails way.
Here is an example of what I am trying to accomplish in HTML:
<a href="tell-a-friend">
<div id="tellafriend">
<strong>Strength in Numbers.</strong><br />
Suggest a friend or colleague to participate in this survey.
</div>
</a>
Here is what I came up with to do it in ERB:
<%= link_to content_tag(:div,
content_tag(:strong, 'Add your labor rates now.') +
content_tag(:br, '') + ' We are counting on you.', :id => 'participate'),
participate_path %>
Or here I mixed some HTML and ERB:
<%= link_to '<div id="results">
<strong>See the results.</strong><br />
Knowledge is power.
</div>'.html_safe, results_path %>
Both of my solutions seem very ugly... but moving it into a helper didn't seem like the right thing to do, given that the content of the DIV changes and that I am only displaying 3 of these on one page.
So if anyone is aware of a better way to do this, I am interested! Any combination of HTML, ERB and HAML is ok by me.
Links work as blocks:
<% link_to '', my_path do %>
<div></div>
<% end %>
FYI: An ANCHOR surrounding a DIV is not legal in HTML 4.01 Transitional (but it is in HTML5?) so make sure that you use the correct doc-type and test on the target browser(s)!
<head>
<title>a</title>
</head>
<body>
<div>
<a href="www.google.com">
<div>test</div>
</a>
</div>
</body>
</html>
You can run this at W3C Validator and change the DOCTYPE to see for which mode(s) this is valid. (Make sure to specify the encoding as well to get rid of the warning :-)
The worst is :
<%= link_to(url, html_options = {}) do %>
# name
<% end %>