I'm generating a hypertext link to an individual article via ERB with the link_to helper method, yet when the link is displayed in the view it renders as an HREF clickable link, but it's not clickable (arrow doesn't even turn to a pointer)
I've tried manipulating the link_to helper and specifically the article_path(:id), but the href path in the dev tools is rendering the correct path with the code below.
I've also double checked my routes, as well as permitted params.
<% #articles.reverse.each do |article| %>
<div class="article_card">
<div>
<%= markdown(article.text[0..405]<<"...") %>
</div>
</div>
# This is the link that isn't clickable
<%= link_to 'Show full article', article_path(article) %>
<% end%>
and this is what it renders in dev tools:
Show full article
I expect the rendered href to be clickable and GET the articles/:id
inspect the element using the browser's dev tools, maybe you have some invisible element above the A tag, maybe you have some javascript messing things up, the generated html looks fine, I don't think it's a rails issue
EDIT: check J.R. Bob Dodds answer below
Credit goes to #arieljuod
The issue was a CSS issue.
Inspecting the A element in dev tools resulted in the dev tools focusing on the HTML element, not the A element.
Looking at the CSS rules for a div element that was an ancestor of the A tag, I noticed a z-index of -2 and vaguely recalled z-index influencing the clickability of its descendant tags.
I was able to set The z-index to 0, then add a positive z-index to a different element entirely, and regained the functionality of the link.
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'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.
Rails 2.3.5 (Running in Development Mode on localhost)
I haven't been able to find an answer for this. In IE8 and FF, the alts (tooltips) do not appear on mouseover. Yet for some reason in IE7 they do. I'd guess this is some basic knowledge I'm missing or there's something in my stylesheets that's killing the tooltips in IE7/IE8? I'm not using a tooltip script or plugin.
The two main ways I'm using image_tags:
<%= image_tag("show_group.png", :size => "64x64", :alt => "Show Group") %>
<%=link_to image_tag ("menu_icon_make_new_item.png", :size => "38x27", :alt =>
"Make new item", :id => 'item_select_menu', :class => 'nothing2'), {},
:onclick =>'dialog_back_to_new_item_select_menu(); return false' %>
Although I'm pretty sure it's not a Rails thing because even this hand coded img tag doesn't show it's alt on hover in IE8/FF (but does show it in IE7).
<span id="show_user_panel_arrow"><img src="\images\user_panel_expand.png"
alt="show bulk user panel" id="user_panel_arrow" /></span>
Thanks!
alt is the wrong attribute for tooltips. Old versions of IE improperly used the alt attribute for mouseover titles. alt is the alternative text that gets displayed if the image does not come up.
Use the title attribute.
example:
<img src="mypic.jpg" alt="Description" title="This shows up on mouseover" />
Use title option to display text in rails 3.
<%= image_tag 'show_group.png',:title => 'show_group' %>
When mouse hover over the show_group.png , it will show the text "show_group".
This "feature" was removed in IE8 and other browsers never had it. The alt attribute is for text to display instead of the image and wasn't intended as additional information. That is what the title attribute is for.
I`ve seen on various websites, some links appear like this: http://www.myserver.com/page.html#something and when I click on it, it just moves to another portion of the page.
I want to know how to do this. Is it only the URL of the <a href> atrribute?
The fragment at the end of the url coresponds to an ID on the page you're visiting.
If in my page I have a section such as:
<div id="comments">
...
</div>
Then I can take the user to this section by attaching #comments to the pages URL
(http://www.example.com/page.html#comments)
Link to comments
Update
Some of the other answers here correctly point out that you can create an anchor with a name attribute as: <a name="example"></a>.
Although this is technically correct, it's also a very antiquated way of doing things and something I'd recommend you avoid. It's very 1997 as some might say :-)
The text after the hashtag corresponts with an anchor on the page. An anchor is a hidden element on the page which you can link to.
Think for example about a large page with an to top link in it
To create an anchor use:
<a name="C4"></a>
To link to it use: Text
Or you can even link to an id of an element
Check out: links (aka anchors)
Also note that you can use <a name="something"></a> or <a id="something"></a>
or using divs <div id="something"></div>
This is a link to a bookmark on the given page (or even just #something on the current page).
To make it work, you need to define something. You can do this using the name attribute of an <a> tag.
http://programming.top54u.com/post/HTML-Anchor-Bookmark-Tag-Links.aspx