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
Related
I have made an web page. There are two iframes
In it. First is of index and second one is description page. I want that when I click on the any index hyperlink, then it is displayed on main description page.
How it will be possible? please give me the HTML code
You can use a button and when clicking it, change the url of the iFrame using Javascript like this:
document.getElementById('iframe-id').src = newLink;
You can use the data-attribute to store the wanted link in your html.
In case you want to do that: It is not possible to react to things outside of an iFrame through an iFrame. So you cannot put a link in iFrame1 and have it reload iFrame2, because those are two different websites and don't see each other.
Now, idk what exactly you are planing to do, but I really hope, that you don't want to make your entire site like that. Using iFrames is really only useful for things like inserting widgets (like Codepen etc.), but should never be used to display information from your own site. If you don't want to copy your html for every site then use PHP. If you don't want to reload your entire webpage (which is pretty much never a problem) you can use AJAX-requests to load parts of your website. (Frameworks like React.js, Angular.js and Vue.js do that for you)
The default way to jump to somewhere in a HTML page is use the a href/a name tags. However, if I want to refer to an external website, somewhere in the middle and that external page does not use the a name tag, is there an alternative way? Like jumping to the first occurrence of some text?
Not possible unless the external website has any custom support for it and they don't have name or id in the desired location.
You really don't need a:
<a name="named-anchor"></a>
Find the nearby element with an id attribute. For eg., consider this:
https://www.digitalocean.com/community/tutorials/how-to-set-up-an-openvpn-server-on-ubuntu-14-04
The site has:
<h2 id="prerequisites">Prerequisites</h2>
So you can go to that place, by adding # and the id value:
https://www.digitalocean.com/community/tutorials/how-to-set-up-an-openvpn-server-on-ubuntu-14-04#prerequisites
If that's not there, then it is not possible.
It's only possible if you find element with ID at the place of where to jump, than simply apply #id-of-element to link.
E.g. We have this HTML attributes list and want to link to lang attribute.
Inspect element and we find <dt id="attr-lang"> than link would be https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#attr-lang
If one of the elements on the site which your are trying to link to has an id attached to it.
You can force the load of the page onto that specific element by adding a hashtag at the end of the url of the website, and the name of the id for that specific element.
For example:
Click me!
Try clicking this clicking this link just here:
Link to a part inside an external HTML page
You will notice that it brings you to the footer section of this StackOverflow post.
However, other than that there are no other possible ways of achieving this (at least as far as Google knows)
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 am attempting to link from my website to an outside website but the information that relates to the user is in the middle of the outside page. Can I make the link take them to there?
Thank you in advance
If that outside page has an anchor tag in or near the content you wish to link to, yes.
<a name="releventContent">
If the above code (or something like it) is present in the outside page, you can link to it from your site like so:
clicky
I can suggest you a dirty trick that might work or not too. Steps
Open the new link in an IFrame.
Create a javascript function that will accept the string to search as parameter.
On the bodyload call that function that will search for the text in the source file.
Some SO links
Filling an IFRAME with dynamic content from JavaScript
Read IFrame content using 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