I'm trying to figure out how to get a tag on my page so when I click it, it jumps to another section on the same page.
I have a link in my show page with:
<li class="col-xs-4 col-sm-2 nopadding menuitem" style="background:#39AFBF">
<a href="#stats" class="hvr-sweep-to-bottom">
<span>impact</span></a>
</li>
I then have a section lower down on the same page:
<section class="counter index section parallax-bg" id="stats" data-background="<%= image_path 'testimonial.jpg' %>">
But when I save this, I get an error that says:
Couldn't find Profile with 'id'=stats
The same is problem arises with this one:
<li class="col-xs-4 col-sm-2 nopadding menuitem" style="background:#009CB2">
<a href="#feedback" class="hvr-sweep-to-bottom">
<span>feedback</span></a>
</li>
<section class="section index parallax-bg testimonial" id="feedback" data-background="<%= image_path 'webre.png', :style=>"background-repeat: repeat !important; background-size: inherit !important;" %>">
What you're using is an anchor link, and when anchors links are clicked, the browser is supposed to simply jump to the anchor in the currently loaded page.
However, in your case, it seems to be calling the URI /profile/:id with :id set to stats.
Are you sure that the href is correctly set to #stats, and not simply stats, because if it's set to the latter, then the link will point to /profile/stats (clicking on this will cause a request to be sent to server), instead of /profile/SOME_ID#stats (which will not cause a request; the browser will jump to anchor on current page). The latter is what should be happening, but it isn't. Hope this helps. :-)
Related
I have an index.html that includes:
<li>
<a href="imprint.html#imprint-link">
<div class="main-menu-title">IMPRINT</div>
</a>
</li>
When I click on this item another html file (imprint.html) is loaded, but when I click on Home, which includes the following code to go back to index.html, it doesn't work!
<a href="#index-link">
<div class="main-menu-title">HOME</div>
</a>
What is wrong here?
Update 1: When hovering the mouse over the link I get:
try using this code :
<a href="index.html">
<div class="main-menu-title">HOME</div>
</a>
inplace of :
<a href="#index-link">
<div class="main-menu-title">HOME</div>
</a>
To answer your original question.
What's wrong here?
As a couple kind folks already commented and one person already provided a nice solution, clicking on your original link
href="#index-link"
while you are on the imprint.html page will not take you to your index.html page. Why? Because
<a href="#index-link">
<div class="main-menu-title">HOME</div>
</a>
is saying, "Take me to an element on the current page (imprint.html) that has an ID of 'index-link'. If there is no element with and ID set to index-link, on the imprint.html page, nothing will happen. And, you will stay on the current page because you didn't specify an URL outside of the current page, which is still imprint.html.
So, with that current setup, you will not get to see index.html.
I'm currently stuck with some HTML code. On my website, I currently have 5 existing tabs but I wanted to make one clickable that redirects the user to a printable page that pops open the print menu specific to their browsing. I think I may be missing something in my HTML code. Underneath you can find a simplified version I extracted from one of my tabs:
<div class="tab-item">
<a class="tab-label text-center"><i class="icon-1-map"></i> Ligging</a>
<div class="tab-content">
<iframe src="<!--GOOGLE MAPS LINK-->" style="width:100%; height:400px; frameborder:0; border:0" allowfullscreen></iframe>
</div>
</div>
I wanted to implement something like this
<div class="tab-item">
<a href="../../print/k420-torhoutsesteenweg306.html">
<i class="icon-1-print"></i> Print deze pagina
</a>
</div>
The problem is, sometimes the tab doesn't even show up and if I change my code to the one underneath, it doesn't bring me to the linked page.
<div class="tab-item">
<a class="tab-label text-center" href="../../print/k420-torhoutsesteenweg306.html">
<i class="icon-1-print"></i> Print deze pagina
</a>
</div>
Can anybody help me?
If you'd like to see the full sourcecode, please click here
Thanks!
Welcome to StackOverflow.
1) To just open the print dialogue of the page upon loading, simply add this at the bottom of your HTML's <body> : <script>window.print()</script>
2) As for your disappearing code, please provide more information and/or link your CSS. Also, why are you using <i> on its own like that? <i> is to display text in italics
The information you provide is not enough to correct any issues.
I am using Twitter Bootstrap for a project.
I have a widget type list-group, which is a list of elements that are used for navigation.
For some reason I can't make those links to work. Although the correct link appears when hovering, they don't take me there.
I created a fiddle to ilustrate the problem.
Can anyone help?
Regards.
When you specify http in the link it will not work in an https site.
Have a look at Bootstrap's documentation for list-group. When I put your links into a UL, things seem to work:
<ul class="list-group">
<li><a
href="http://www.google.com"
class="list-group-item active"
>External link not working</a></li>
<li><a
href="#my_local_anchor"
class="list-group-item active">
Internal link not working
</a> </li>
</ul>
I checked the internal link and it worked when yo use your anchor as an ID
<h1 id="my_local_anchor">
And the external link worked when I added:
<a href="https://www.google.com" target="_blank">
Which opens the link in a new tab which is usually better as your website will keep a presence in the users browser
Never put http protocols in the href for many reasons, one of which the protocol might be the wrong one ! (http vs https).
As for the internal link it is working properly in the JSfiddle once you actually create an element with that id.
Plus the list group should be in a LIST not a bunch of divs
Here my site: viettech-ca. com
My codes:
<div class="wrap footer-nav mgt35">
<ul>
<li>Về chúng tôi</li>
<li>Đại lý</li>
<li>Liên hệ</li>
<li>Điều kiện & Điều khoản</li>
<!-- <li>--><!--</li>--></ul>
<div><a class="go-top" href="#">Lên đầu trang</a></div>
</div>
go-top works, but it redirected me to the top of the homepage instead of the top of the current page.. Please show problem
since you also have javascript:
JS:
function scroll2Top(){
scroll(0,0);
}
HTML
<a class="go-top" onclick="scroll2Top();return false;">Lên đầu trang</a>
I'm assuming you want to set up a 'Go to top' link in your page that takes the user back to the top of the page.
You do this with anchor tags where you would usually define it at the top of your code and then reference to it when required.
Code at top of html:
<body>
<a name="top"></a>
...
Then your 'href' link would be as follows:
<div><a class="go-top" href="#top">Lên đầu trang</a></div>
If you leave out the top anchor name (name="top") it will still work, but this is bad practice because whats happening is that the page can't find the '#top' reference, it scrolls to the top anyway but because is can't find the link.
Can someone tell me, what the href with the "#" means?
<a id="logoutLink" href="#">Logout</a>
It is the shortest way to say "go nowhere" :)
Often something else is bound to that link, a javascript event handler in most cases. But if an <a> doesn't have a href, most browsers don't render it with the same styling...so you need a short something to put there.
If it had something following the hash, like Go to Topics it is a scroll to link, it goes to where the element with id="topics" is at the top of the page. A common example is Go to Top, and you stick a <div id="top"></div> at the very top of the page.
As others have pointed out, hash anchors (those beginning with the # sign) typically lead to a named anchor on the page. A table of contents on a page might be a good example of where you'd see this:
<ul>
<li>Company History</li>
<li>Our Goals</li>
<li>Products We Offer</li>
<li>Services We Offer</li>
</ul>
<h2><a name="history">History</a></h2>
<p>The #history anchor tag will lead to the named anchor above.</p>
<h2><a name="goals">Our Goals</a></h2>
<p>The #goals anchor tag will lead to the named anchor above.</p>
<h2><a name="products">Products We Offer</a></h2>
<p>The #products anchor tag will lead to the named anchor above.</p>
<h2><a name="services">Services We Offer</a></h2>
<p>The #services anchor tag will lead to the named anchor above.</p>
One thing to note is that when you have a blank hash as the anchor href (i.e.: Blah), some browsers make that jump to the top of the page, which is not the desired effect. To work around this and prevent the page from scrolling all the way to the top, a JavaScript implementation is often included to prevent the anchor tag from acting as it normally would by returning false.
Blah
It means nothing... ;) Normally we use #something to create anchor to some element. If your URL ends with ...#comments then your browser will automatiacly jump (scroll the page) to element with id="comments".
href="#" is often used to create a link that leads to nowhere.
It means make this page an anchor and navigate to it - which is why you see '#' after your URL in the address line (which can have nasty side-effects). Its also why your page will scroll back up to the top if you click on the link (sidenote: you can avoid this by adding "return false;" at the end of your onclick handler)
If points to an anchor on the page. In this case the anchor is just default. You could have multiple anchors on the page
<a name="anchor1"></a>
<a name="anchor2"></a>
<a name="anchor3"></a>
and link to them as
link 1
link 2
link 3
The hash symbol (i.e., <a id="logoutLink" href="#">Logout</a>) is a placeholder, so that you can preview the "Logout" link in a browser as you develop your page. Eventually, the hash symbol will be replaced with a real URL.