]2I have a website with 3 pages and in each of one them is a button which should take me to a bottom part of the main page.
index.html is the main page and #r is for it to take me to the bottom part. When i click the button on that page it works perfectly, but when i do it on one of the two other pages it redirects me to the main page and the part i wanted but without all the css classes.
How can i fix this? href="./index.html/#r"
I have tried different approaches but none of them seems to work.
It's not href="./index.html/#r", (i.e. #r is not a separate file and index-html is not a directory in the filepath), but the anchor is directly appended to the filename of the page, like href="./index.html#r"
It is quite simple as you just have to specify a name or id to that part of the main web page, and then you can link it with other web pages by just putting both values(name of the page along with that part of its body) in "href" attribute.
For example-
text
here page.html is the name of webpage and #anchor is the name or id of that specified part
hoping it will help you!!
greetings,
Om Chaudhary
Related
While I'm trying to switch between different sections of my webpage I am getting the following page as shown in the image. How can I solve this?
you need to provide context for your question for people being able to help you. I imagine you are trying to navigate between different html files, by clicking into an anchor tag, is that correct?
Go to next page
So in that case, you might be adding a wrong relative route, otherwise I think you should add more context to your question.
If you are trying to switch between sections on your webpage. Try adding section and giving them id. Then from any anchor tag you can reach the section by adding the following code.
Section 1
you can use jquery
$(".div").load("index.php .yoursection");
To switch between sections on your webpage,Use the id selector ,
Example:
<p id="opening">Hyperlinks are utilized by a web browser to move from one page to another...</p>
Now add the anchor tag to link,
Opening
"Opening" will be displayed as a link on the webpage. On clicking it, you will be switched on the same webpage where the id is "Opening".
In this example it is the paragraph tag.
If you trying to switch into another webpage,
Go to home page
I created my first website uploading the first two pages including the first and main page and then a second page that the first page links to. Before doing so, a link that when clicked on, takes me correctly from my main page to a second page worked. After uploading it on 000webhost.com it no longer worked. Meaning, I can view my main page but when I click on the link that should take me to my second page, it doesn't do anything. Here is the code that was and is still included in my main page for the link that should take me to my second page. I have a feeling that it has something to do with the protocol and that I have to make changes to it but not sure what changes to correctly make so the link will work. I used a sub domain at 000webhost.com not my own. Here is the code that was and is on my main page:
<li>Noah's First Day</li>
The link points to a file on your computer (note the file:// prefix). The best practice is usually to have links to your own pages in relative form. So, for example, assuming you uploaded all the files to the same directory, just use the filename itself:
<li>Noah's First Day</li>
Ok, I was able to link a specific section of a page from another page, but for some reason none of the CSS is loading with the page being referenced. What can be causing this?
In hopes of providing context, this is the code I'm using to reference (which works only to link the section correctly, but no styling in the entire page is shown)
(Page link)
Dog Food
(Section being referenced in different page)
<a name="dog-food-a" id="dog-food-a">Food</a>
I was able to acquire the referencing information from the following link, but I'm having trouble finding somebody else with the same 'lack of css' issue.
https://stackoverflow.com/a/2835151/2488264
Thanks in advance for any help! :)
The id tag specifies the ID of an element, not to what element your doing an anchor tag.
Having that in mind, it is always http://mypage.com/this.html#my-anchor
are you trying to remote accesss that link and section?
if your answer is YES i should say you have to load entire target page Or load <link> tag of target page Or use same CSS file for both pages
if I dont get the right point forgive me
I know using iframes is not always the best idea, but for my case it makes things easier. I have a website A which contains links to other parts on the same site (using <a name=...). I have a seconds site B which has an iframe containing A. Everything works fine, except the page hyperlinks, if you click on them, nothing happens.
Does anyone know if named hyperlinks are even possible in iframe? And if yes how to make them work.
EDIT:
Seems like I wasn't clear enough. The file is named test.html (http://www.domain.com/embedded/test.html) and contains a hyperlink at the top
Examples
then somewhere at the end there is a link
<a name="examples"></a>
So when you click on the top link the page should scroll down to the bottom link. I have a second page (http://www.domain.com/index.html) with the iframe containing test.html. When hovering over the link (inside the iframe), it shows http://www.domain.com/embedded/test.html#examples. I'm not and iframe expert, but this link seems as it would rather redirect to the actual file (to #examples), rather than jumping inside the iframe. As I said before when clicking on the link nothing happens. Just tested in in Chrome and it works. Seems like this is a problem specific to Firefox.
These parts of your question make me smell something: "links to other parts on the same site (using <a name=...)" and "named hyperlinks"...
A hyperlink for moving to an other part of the same page:
Goto BOOKMARK
And an anchor (bookmark) somewhere else in the same page:
<a name="BOOKMARK"></a>
These are working in every HTML-document, regardless they were shown in the iframeor not.
I had a similar problem. I too wanted a link in an embedded page to point to a bookmark in the containing page. But I am not sure if our circumstances are exactly the same.
A local link such as
<a href="#BOOKMARK">
will only look for an anchor in the same page as the link, i.e. in the embedded page. An approach such as
<a href="containing-page.html#BOOKMARK" target="top">
will only work if your link always references the same containing page. (The target needs to be specified, to display the page outside the iframe.) I am not sure if this will meet your needs.
If you want to re-use a common bookmark name in different containing pages, as I do, the design effectively requires the destination url to be treated as a variable, and that cannot be done using pure HTML. It requires javascript or similar.
It was in fact more elegant for me to add the bookmark link to the containing page, so that I do not need to standardize my bookmark names. This does not even need javascript, just a bit of css.
What I did was to position the bookmark link over the embedded display, so that it looks like it is part of the embedded page. In this example, the iframe is fixed at the top of the page and the bookmark link positioned over its top left corner.
<iframe style="position:fixed; left:0pt; top:0pt;" src="embedded-page.html"></iframe>
<div style="position:fixed; left:0pt; top:0pt;">
My Bookmark
</div>
With a bit of css refinement, this gives some flexibility of layout. For your issue, you may need to stick with javascript.
I see on some website (like StackOverflow, yahoo, the US Homeland Security department, ...) a word associated to a link that, when clicked, not only loads a page, but also, displays that page at the exact location where the contain related to the word starts.
How can I obtain that with ASP.NET MVC? (by the way, do I need javascript for that?)
Thanks for helping
Go to the other content
<a name="jumpHere">Some content</a>
Also the URL can have /yourpage.html#jumpHere or with variables, /yourpage.html?var1=foo&var2=bar#jumpHere.
Since we're talking about the hash (#), it's usually used for jumping to a specific part of the page. Because of that, it won't reload the whole page. This is useful for web applications that move from one view to another using only AJAX. To make each view bookmarkable, JavaScript "saves" the state (what view you are on) using location.hash to the URL. The next time you open the URL, JavaScript reads it and loads the correct view. In HTML5 this is superseded by pushState.
1) Find the coordinates of the element on the page
2) window.scrollTo(x,y)
Its called an anchor tag.
Place this in your HTML.
<a name="name"></a>
If you call this URL, it will jump to that place.
html-file.html#name
See: http://www.w3schools.com/tags/tag_a.asp
You can use a named anchor to do this with HTML, without javascript. here is a link explaining this.
It is very simply done with id tag of differnt html elements
for eg :- an div element if it is having "footer" as its id and is placed at the bottom of the page then, http://url-address-to-thatpage.html#footer will load the page and scroll it too the footer. (adding the "#idoftheelement" after the page url)
It is also possible to load and scroll the page with javascript.
You need to create a named anchor within the page. This will have the result you're talking about, almost like creating a "bookmark" within a page. No javascript required.
First, create the anchor using the <a> tag with the name attribute specified (in this case, section1):
<a name="section1"></a>
Then, to link to that anchor from the same page, just use something like this:
Go to Section 1
If you're linking to that anchor from another page (in this case, mypage.html), append #section1 at the end of the url:
Go to Section 1 in MyPage.html
For more information, see here.
Another way to do it is with the "id" attribute if it's not an anchor tag you'd like to bookmark. For example:
<div id="bookmark1">Content...</div>
Then, you can link to it with an anchor tag like this:
Go to content
Or link to that spot on the page by appending a #bookmark1 to
http://yourwebsite.com/page#bookmark1