I have page the has some data in tabs, Im trying to write a function so that when links are click from another page can load the page with the tabs on and show the correct tab. This is working with the code below, minus the actual changing tabs function. But for some reason using the window.location..... as a variable still scroll the page down to the matching id. Is there another way to get the string in the url after the #. Or can i do it this way but not have to jump to the id? thanks
function loadTab(){
var linkToTab = window.location.hash.substr(1);
var linkClass = '.'+linkToTab
if(window.location.hash != '') {
changeTabs(linkClass);
}else{
$('.companyLink:first').addClass('active');
$('.companyBio:first').addClass('active');
$('.companyBio:first').fadeIn();
};
}
The hash character is for anchors.
Use a question mark instead of a hash.
<a href="index.html?tabname">
and
var linkToTab = window.location.search.substr(1);
var linkClass = '.'+linkToTab
if(window.location.search != '') {
The # part of the URL is traditionally used for anchors. The 'jumping' you see is the original feature.
Modern websites and web-applications use it build a history as HTML5's history feature isn't widely supported yet.
To avoid the jumping add event.preventDefault to your links, like:
Tab1
<script type="text/javascript">
document.getElementById("tab1handle").onclick = function (event) {
event.preventDefault();
}
</script>
You can also make sure the anchor is not defined. In this case the browser will jump to the top of the page. It's up to you whether this is undesirable or not.
Related
The legacy website I inherited is comprised of href #links to navigate through the website. It's rather large so I don't want to recreate the whole thing, even though I know the #urls are not best practice. One enhancement that is necessary is to enable the back and forward buttons in the browser so that they will not only change the URL (which it does) but refresh the page to show the previous/forward URL's content.
If anyone could point me in a direction to make this happen, I would definitely appreciate it.
Have some javascript on your page load look for the anchor and then scrollTo it
var url = "www.website.com/#a1", idx = url.indexOf("#")
var hash = idx != -1 ? url.substring(idx+1) : "";
function scrollTo(hash) {
location.hash = "#" + hash;
}
I have html page(parent page) that contains a iframe(child page inside this iframe),
this java script function get the location where i want to scroll iframe using internal page linking.
function scrollToAnchor ()
{ //function parseParameter return the query string value from the url
var anchor = parseParameter(window.location.href,'anchor');
if (anchor != null)
{
location.hash=anchor;
}
}
but anchor value in iframe page source not in parant page,
this is not able to scroll the iframe page.how to scroll iframe page through parant page,
it works in IE and Crome but doesn't work in firefox. there is any alternative of this code.please suggest.
my parant page url is
http://localhost:8989/schoolforms/SelectForm?formTypeID=STUDENT_EMERGENCY
This is my window.location.href" value that is for iframe
http://localhost:8088/schoolforms/StudentEmergency?student=B874BCC3EA5B83670988C959E9F0036B&anchor=InsuranceInfo
after parsing anchor contains InsuranceInfo after this function url becomes like
http://localhost:8088/schoolforms/StudentEmergency?student=B874BCC3EA5B83670988C959E9F0036B&anchor=InsuranceInfo#InsuranceInfo
JQuery bbq has a nice 'deparam' function
https://github.com/cowboy/jquery-bbq/
var params = $.deparam.querystring();
window.location.hash = params['anchor']
Too many missing information to understand what exacly do you want to achieve. I guess that you need to scroll your page to the anchor with id from anchor variable of window.location.href.
I don't know how works your function parseParameter() and I need to believe that is working good.
location.hash contains the part of URL after # for example #news etc. So if you pass a string to location.hash browser will add this string to URL and scroll to the html element with the same ID.
EFFECT
http://localhost:8088/schoolforms/StudentEmergency?student=B874BCC3EA5B83670988C959E9F0036B&anchor=InsuranceInfo#InsuranceInfo
It's not a good way, because after that you will have both anchor variable and hash in your URL.
TRY THIS
function scrollToAnchor ()
{
var anchor = parseParameter(window.location.href,'anchor');
if (anchor != null)
{
$('html, body').animate({scrollTop: $('#'+anchor).offset().top}, 0);
}
}
I used .animate() because if you want you can change in this line 0 to for example default value, which is 400 (i guess ms unit) and it will scroll with animation (delay). If you leave 0 it will scroll to the element immediately without any delay.
$('html, body').animate({scrollTop: $('#'+anchor).offset().top}, 400);
The scenario is a lot of html files with a lot more of links between them. When I call the first one of them (it would be the index), the link pass several parameters through the URL (we could call them preferences).
Now I want that, when clicking any of the several links of the page, those parameters would be added. So the problem would be similar to this other ( How to add parameters to a URL that already contains other parameters and maybe an anchor) but doing it just after clicking the link.
I know that one solution could be changing the onclick event on each link, but as there may be thousands of them, without a regular url format... I'm looking for a solution that could be on the script at the head; perhaps something relative to onbeforeunload event.
Anyway I couldn't find how to do it. Any ideas?
This will append a string to anything containing an href-attribute when being clicked:
window.addEventListener("click", function(e) {
var href = e.target.getAttribute("href");
if(href) {
location.href = href + "?q=stackoverflow";
e.preventDefault();
}
});
Example here: http://jsfiddle.net/E5Q7P/
Won't work in < IE9
Instead of changing the onclick-attribute of each link, or using the onbeforeunload-event, I guess one way would be to attach a clickevent-listener to all anchor-elements when the page loads. The callback could then intercept the browsers default behavior to follow the link. You could then get the src attribute of the a-element that was just clicked, add the desired preferences to the URL and then send the user to the proper location (including preferences) by setting window.location.href to the proper URL.
There is a great aricle on MDN about event-listeners, that I believe would be helpful to you. Note specially the section about older versions of IE
A very crude example of what it could look like:
function callback(e){
// Get the src of the clicked a-element
var src = this.src;
// Add preferences to the url, this need
// improvement depending on your needs
src += "?somesetting=foo";
// Send user to the url with preferences
window.location.href = src;
}
// Get all anchors on page
var anchors = document.getElementsByTagName("a");
// Loop over the elements and attach listener
for(i=0 ; i < anchors.length ; i++){
// Extend with support for older IE if needed
anchors[i].addEventListener("click", callback, false});
}
I am using JavaScript to make a small iframe application, and I cannot seem to figure out a way to update the URL in my URL bar I made when someone clicks a link inside the iframe.
It needs to be instantaneous, and preferably without checking every millisecond whether or not the value of document.getElementById('idofiframe').src has changed.
I can't seem to find a simple property to tell when the url has changed, so if there is not one, then solving this programmatically will work as well.
Thanks for the help!
This will be difficult to do because it is considered xss and most browsers block that.
There are most likely some workarounds involving AJAX.
First of all, what you want to do will be possible only if the source of your iframe points to the same domain as the parent window. So if you have a page page.html that iframes another page iframed.html, then both of them have to reside on the same domain (e.g. www.example.com/page.html and www.example.com/iframed.html)
If that is the case, you can do the following in the iframed.html page:
<script type="text/javascript">
window.onload = function() {
var links = document.getElementsByTagName('a');
for (var i=0, link; link = links[i]; i++) {
link.onclick = function() {
window.parent.location.href = '#' + encodeURIComponent(this.href);
}
}
}
</script>
This will make it so that whenever you click on a link in iframed.html, the url bar will put the url of the link in the "hash tag" of the url (e.g. www.example.com/page.html#http%3A%2F%2Fwww.example.com%2FanotherPage.html)
Obviously, you would have to have a script like this on every page that is to appear inside the iframe.
Once this is in place, then you can put this snippet inside of page.html, and it will make the iframe automatically load the url in the hash tag:
window.onload = function() {
var url = window.location.hash.substr(1);
if (url) {
document.getElementById('iframe').src = url;
}
}
I unfortunately haven't run this code to test it, but it is pretty straight forward and should explain the idea. Let me know how it goes!
You could add an onload event to the iframe and then monitor that - it'll get thrown whenever the frame finishes loading (though, of course, it could be the same URL again...)
Instead, can you add code to the frame's contents to have it raise an event to the container frame?
In IE, the "OnReadyStateChanged" event might give you what you want.
Background: I have an HTML page which lets you expand certain content. As only small portions of the page need to be loaded for such an expansion, it's done via JavaScript, and not by directing to a new URL/ HTML page. However, as a bonus the user is able to permalink to such expanded sections, i.e. send someone else a URL like
http://example.com/#foobar
and have the "foobar" category be opened immediately for that other user. This works using parent.location.hash = 'foobar', so that part is fine.
Now the question: When the user closes such a category on the page, I want to empty the URL fragment again, i.e. turn http://example.com/#foobar into http://example.com/ to update the permalink display. However, doing so using parent.location.hash = '' causes a reload of the whole page (in Firefox 3, for instance), which I'd like to avoid. Using window.location.href = '/#' won't trigger a page reload, but leaves the somewhat unpretty-looking "#" sign in the URL. So is there a way in popular browsers to JavaScript-remove a URL anchor including the "#" sign without triggering a page refresh?
As others have mentioned, replaceState in HTML5 can be used to remove the URL fragment.
Here is an example:
// remove fragment as much as it can go without adding an entry in browser history:
window.location.replace("#");
// slice off the remaining '#' in HTML5:
if (typeof window.history.replaceState == 'function') {
history.replaceState({}, '', window.location.href.slice(0, -1));
}
Since you are controlling the action on the hash value, why not just use a token that means "nothing", like "#_" or "#default".
You could use the shiny new HTML5 window.history.pushState and replaceState methods, as described in ASCIIcasts 246: AJAX History State and on the GitHub blog. This lets you change the entire path (within the same origin host) not just the fragment. To try out this feature, browse around a GitHub repository with a recent browser.
Put this code on head section.
<script type="text/javascript">
var uri = window.location.toString();
if (uri.indexOf("?") > 0) {
var clean_uri = uri.substring(0, uri.indexOf("?"));
window.history.replaceState({}, document.title, clean_uri);
}
</script>
There is also another option instead of using hash,
you could use javascript: void(0);
Example: Open Div
I guess it also depends on when you need that kind of link, so you better check the following links:
How to use it: http://www.brightcherry.co.uk/scribbles/2010/04/25/javascript-how-to-remove-the-trailing-hash-in-a-url/
or check debate on what is better here: Which "href" value should I use for JavaScript links, "#" or "javascript:void(0)"?
$(document).ready(function() {
$(".lnk").click(function(e) {
e.preventDefault();
$(this).attr("href", "stripped_url_via_desired_regex");
});
});
So use
parent.location.hash = '' first
then do
window.location.href=window.location.href.slice(0, -1);
As others have said, you can't do it. Plus... seriously, as the jQuery Ajaxy author - I've deployed complete ajax websites for years now - and I can guarantee no end user has ever complained or perhaps ever even noticed that there is this hash thing going on, user's don't care as long as it works and their getting what they came for.
A proper solution though is HTML5 PushState/ReplaceState/PopState ;-) Which doesn't need the fragement-identifier anymore:
https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history
For a HTML5 and HTML4 compatible project that supports this HTML5 State Functionality check out https://github.com/browserstate/History.js :-)