I'm trying to link to an element on the same page like this
Link
...
<div id="myelement">...</div>
But the browser keeps prepending the full domain to the link and it ends up linking to
http://example.com/#myelement
causing it to reload the page instead of moving to an element on the page. How do I get it to just link to #myelement?
The problem is the <base href="http://hecotravel.com/"> element, which dictates that all links are relative to http://hecotravel.com/. Therefore a link to #traveler is a link to http://hecotravel.com/#traveler, which is a different page than http://hecotravel.com/request.
Either remove the <base> element or link to request#traveler.
Related
My anchors are working perfectly fine when there referring to a anchor on the same page. But when there referring to another page, they load in with an offset.
The anchor is referred to as;
<a name="featuredwork">
The link is;
<strong>FEATURED WORK</strong>
What am i doing wrong?
I have a menu made from Wordpress that serves as my site's navigation. Every main item in this menu is a Page Type (redirects to other existing pages) with one of them having submenus that are custom links.
These custom links' URLs are div IDs from the its parent page. This is how it's structured.
About Us
Who we are
What we do
How we do
So the submenus URLs are #who-we-are, #what-we-do, and #how-we-do which are sections from the About Us page. Now my problem is that when I am in the About Us page, the submenus links works properly. It scrolls up/down to the section it should. But when I am in another page (let's say Homepage), it doesn't redirect to it as it can't find any section in the page with that div.
Any ideas on what I should put on the URLs instead? Thanks in advance.
To get it to work, you have to attach the id tags to the url (otherwise it is treated as a relative link).
Example:
A main page: http://yourdomain.com/page1
Section URL: http://yourdomain.com/page1#who-we-are
Suppose your about us page url is "www.yoursite.com/about-us".
Then to jump directly into a section of this page from external page you need to put anchor tag like this
<a href='http://www.yoursite.com/about-us#who-we-are'/>
so you should give url "http://www.yoursite.com/about-us#who-we-are" for your custom link not only "#who-we-are".
click link and see address bar
Wordpress submenu link to a section of page
For this you have to attach the ids with the links of pages from which you want to get redirect to particular section.
Example: Let say your home page be http://www.yourdomain.com/
Now pass the id with this as : http://www.yourdomain.com/about-us/#who-we-are
http://www.yourdomain.com/about-us/#what-we-do
These should be the ids of the div's on about-us page.
I see these lines of code in some professional developer's project:
<a href="###">
...
</a>
What is the use of three # instead of one?
That's usually written when you want your anchor tag to not change the href. For instance if you want to attach an event on it later on.
It doesn't matter how many # you are using. The href='#' will make the page jump to the top of the page if clicked.
My preferred way is doing <a href="javascript:void(0);". That way the click does absolutely nothing, instead of jumping the page up.
The first thing about "anchor tags"...
This use of ### in particular is to create a links that don't go anywhere, and to do that the href attribute must have a value. Please read the href W3C spec page for more info about that.
Browsers render default styles for elements and will change the default style of an anchor tag that doesn't have the href property. Instead, it will be considered like regular text. It even changes the browser's behavior with regard to the element. The status bar (bottom of the screen) will not be displayed when hovering an anchor without the href property. It is most optimal, then, to use a placeholder href value on an anchor to ensure it is treated as a hyperlink.
I've often seen <a href="#">, and <a href="##"> , a hashtag - # within a hyperlink specifies an html element id to which the window should be scrolled.
href="#some_id" would scroll to an element on the current page such as <div id="some_id">.
href="//example.com/#some_id" would go to example.com and scroll to the id on that page.
href="#" doesn't specify an id name, but does have a corresponding location - the top of the page. Clicking an anchor with href="#" will move the scroll position to the top.
So, when you use <a href="###"> this create a links but it doesn't go anywhere. You can use it from "##","###" and more of hashtag to create a links like a "Hyperlinks" but they take you nowhere.
My Conclusion:
So, what is the use of it?
You use it when you need a hyperlink that doesn't go anywhere. It's just to tell the browsers to change the style to an anchor tag.
Check this JSFiddle demo
As Bhuiyan's answer said, it is a variation on the href="#" trick...
Goal
So, to explain that trick. The trick is to work around the fact that Anchor tags are only rendered as links if they have a target to link to (see this example). The goal is to create a link that looks like a link, but doesn't actually go anywhere.
How it works
The href="#" idiom is taking advantage of the fact that anchors can specify a specific element as a target by using the href="#{other element identifier}]" notation. When you do this the browser will not redirect or reload the page, but instead scroll to that element. So when you specify href="#" you are essentially telling the browser that this is a link, but since there is no valid target element please don't do anything when it is clicked.
Note: It would work just as effectively to say href="#mybogusid" but then you would see #mybogusid appended to the url. Gross.
TL;DR of it all: <a href="###"> is just a way to make the browser render the anchor tag like a link, but not navigate anywhere on click.
I think this is same as Go to link that person just used three "###" instead of one "#". we can use more # if we want.
It was very useful when i had button and js click event. With '#' it scrolled to top every time i pressed the button, but with '###' it stayed in place as needed!
I have this anchor element:
<a href="mindex.html#clickableAnchor?showhide=1" id="clickableAnchor">
<!-- some content -->
</a>
I need to pass all three elements in href attribute:
- URI mindex.html
- ID #clickableAnchor
- GET parameter showhide
URI is for reloading the page,
ID is for scrolling the page to anchor,
GET parameter is sent for php script which decides either to show or hide a menu placed just under the anchor.
Page is reloading, menu is showing/hiding but the window is not scrolling to #clickableAnchor.
I resolved the problem using jQuery (by toggling the menu) but I want this feature working ALSO without javascript.
What should I do?
The anchor part of a URL comes after the query string. See Wikipedia: http://en.wikipedia.org/wiki/Url
Note that the browser won't scroll to the anchor if there is no scrollbar - if the page contents fit in the browser window, it can't scroll anywhere.
Here's the way I've set-up my site. I have a page called "news.html". The content of this page is just an iframe with a fixed size. The iframe links to "innernews.html", which is the actual content I'm trying to display. I have it set-up this way to keep every page consistently sized. The iframe prevents the height of the page from expanding due to extra content, and is scrollable.
How would I create a link targeting a specific element/header within my "innernews.html" page? If there isn't a way to achieve this, I'll remove the iframe and just plug content straight into "news.html". But still I wouldn't know how to create a link that targets a specific element/header...
You can link to an element (on another page or on the same page) only if the element has the id attribute or it is an a element with the name attribute. In both cases, put the fragment identifier #foo at the end of the URL in the link, where foo is the value of the attribute.
If the page being linked to does not contain such an attribute, and if it is outside your control, you are out of luck
Basically, you can simply create a link to specific header of a page:
<a name="your_header_name"></a>
<h1>Header Text</h1>
...
Link to the header
I strongly recommend you to remove iframes from the page if there is no reason to keep them. Iframes can complicate your life when you're trying to do something not trivial.
Have you considered using a container such as:
#newsContainer {
overflow: scroll;
height: /*whatever*/
}