I'm using Joshua Gatcke's 99Lime HTML Kickstart framework for prototyping.
It uses an implementation of the jQuery tabs and I was wondering if it's possible to access a tab directly by the URL.
So for example, I have a page, with in this case, static content.
One is #settings and another is #users.
I want to redirect a user to /dashboard#users and have the users tab display immediately.
Is this something that's possible?
Voilá:
$(document).ready(function(){
$(window).bind('hashchange', function(){
$('ul.tabs a[href^="' + document.location.hash + '"]').click();
});
if (document.location.hash.length) {
$(window).trigger('hashchange');
}
});
Working fiddle
Edit:
Upon reading your question thoroughly, I realized that this is all you need:
$(document).ready(function(){
if (document.location.hash.length) {
$('ul.tabs a[href^="' + document.location.hash + '"]').click();
}
});
Yep, it is. Have you tried anything? Or are you just asking if there is some out-of-the-box way to do this?
In case it is the first, here is some pseudo code to do this (I guess clicking on a tab displays it, right?):
window.onhashchange = function(e) {
By.id(e.newUrl).click()
}
PS: using the By micro-library.
Related
i have a WordPress site and problems with anchors. i have a page with several anchors which are linked to in the main menu. when i am on the page itself, all anchors work fine, but if I'am on any other page, they don't work, at least not in all browsers and the anchors are ignored.
As being informed it is a chrome bug, ive found this solution:
<script type="text/javascript">
jQuery(window).load(function(){
var hashNum = 0;
if (window.location.hash != ''){
hashNum = window.location.hash.replace("#oneofmanyanchors", "");
console.log('hashNum: ' + hashNum);
};
hashMenu = jQuery('[data-q_id="#oneofmanyanchors"]').offset().top;
jQuery('html,body').animate({
scrollTop: hashMenu
}, 0);
});
</script>
above code is working and fixes the issues i had in chrome and ff.
however i need this added functionality: At the moment it is addressing only one specific anchor, but i need it to work with any anchors in the page url, not just the one above (anchors are referenced with the data-q_id attribute).
so the code needs to be updated that it grabs any given anchor from the page URL and go to / scroll to that anchor (once) via jquery after first page load.
How do i achieve this?
Thanks in advance!
PS: The problem is caused by theme incompatibility with a certain plugin i need...
I think this should work in every browser - what happens to be the problem?
In order to achieve this in jquery you should scroll to the element/anchor with javascript as soon as the document is loaded.
So like this:
$(function() {
location.hash = "#" + hash;
});
I still think you should find out what went wrong and why the linken from another page doesn't work in some browser before using a workaround for the problem. Your code will just ged more and more messy like that.
How to scroll HTML page to given anchor using jQuery or Javascript?
and here
$(document).ready shorthand
I have a website on which I have the following script intended to handle all links:
$(document).ready(function(){
$("body").css("display","none");
$("body").fadeIn(2000);
$("a").click(function(event){event.preventDefault();
linkLocation=this.href;
if(!linkLocation.contains("#")){$("body").fadeOut(1000,redirectPage);
}});
function redirectPage(){
window.location=linkLocation;}})
What it should do is, when a link is clicked to fade out and then to fade back in.
The issue I am facing is that in IE, links simply do not work.
Is it possible to edit my code in order for it to work?
If not, is there a way I can use a fallback code during this issue?
This issue is not present in chrome and I am using the latest IE
You should first check if your url contains the substring that you want to check with using indexOf() method. If it contains that character/substring then it'll return any 0 or positive value. Else it'll return -1 .
Try this way :
HTML :
ToogleFade
jQuery :
$(document).ready(function(){
$("body").css("display", "none");
$("body").fadeIn(2000);
$("a").on("click", function(e){
linkLocation = $(this).attr("href");
e.preventDefault();
if(linkLocation.indexOf('#') == -1){
$("body").fadeOut(3000, redirectPage);
}
});
function redirectPage()
{
window.location=linkLocation;
}
});
jsFiddle
Resources :
indexOf()
I found that the answer was to set the z-index. I have a stack of absolutely positioned divs and wanted to fade between them. The only way I could get IE8 to handle the fades nicely was to set the z-index of the element to be faded in higher than the element to be faded out.
$('#fadeoutdiv').css({zIndex:99}).fadeOut(2000);
$('#fadeindiv').css({zIndex:90}).fadeOut(2000);
and for redirect Check the Link Stackoverflow
I have gone through your code its almost correct you simply need to change something in your click function because preventDefault(); creating problem with the default functionality of <a></a> tag...
Also click on Allow block content when it ask you in IE.
Instead try this :-
<script>
$(document).ready(function(){
$("body").css("display","none");
$("body").fadeIn(2000);
$("a").click(function() {
linkLocation=this.href;
if(!linkLocation.contains("#"))
{
$("body").fadeOut(1000,redirectPage);
}
});
function redirectPage()
{
window.location=linkLocation;
}
});
</script>
I hope this will work for you..
I'm trying to get jQuery to take the hashtag from a URL and do some functions with it:
Hashtag example:
http://www.example.com/Help.asp#contact
I built out a help center. This help center hides all the answers on the page load and when you click on a question, the answer slides down. Each question is it's own anchor with a name identifier. So when you go to http://www.example.com/Help.asp#contact, the document automatically scrolls down to <a name="contact">. We use these a lot in emails or whatever when we want to direct a user straight to the question they're asking in the Help Center. However, it would be even easier to use, if that anchor is triggered a second after the page loads. What I'm guessing is, I'd need to grab the hashtag, and have a jQuery script like this:
$(document).ready(function(){
$('a[name="~~HASHTAG~~"]').trigger('click').delay(1000);
});
How can I get the hashtag from the URL? Thanks for your help.
Here's my HTML http://jsfiddle.net/tBLuL/
You are looking for the javascript value
location.hash
It will contain the #Hash part of the url, in your case
#contact
Use the hash property off of the window object ...
$(document).ready(function(){
var thehash = window.location.hash; // #contact
$('a[name="' + thehash.replace('#','') + '"]')
.trigger('click')
.delay(1000);
});
Try this.
$('a[name="' + location.hash.replace('#', '') + '"]').click().delay(1000);
The delay of 1 sec after the click is useless. What are you trying to achieve with delay?
Update:
If you want to delay the click try this.
$('a[name="' + location.hash.replace('#', '') + '"]').delay(1000).click();
Check out the window.location object. location.hash has exactly what you're looking for, no jQuery required.
I am working on a pure jquery/js site, mostly to practice some jquery. I am using a load statement to load a menu from a file of common html, like so:
$('#categoryListing').load('../common.html #categoryLinksUL');
which loads:
<ul id="categoryLinksUL">
<li>Anklets</li>
<li>Bracelets</li>
</ul>
The problem is where I am using it now I need to alter the href of the above links, but they are not part of the dom. In previous instances I was able to use .live(click... But not here. Is there a way I can accomplish this?
Specifically I need to load the links and change the href from #anklets to ?category=anklets
What about the following?
$('#categoryListing').load('../common.html #categoryLinksUL', function() {
$('li a[href^="#"']').each(function () {
this.href = '?category=' + this.href.substr(1);
});
});
In my example, after the load is completed, the anonymous function is called. It takes every anchor with a hash HREF and replaces it with an HREF based on your description.
Thank you Dimitry, you solution basically worked. I finally used:
$('#categoryListing').load('../common.html #categoryLinksUL', function() {
$('#categoryListing li a').each(function () {
var hashPos=this.href.indexOf("#");
var tCategory = this.href.substr(hashPos+1,this.href.length );
});
});
So why did jQuery recognize categoryListing there? I tried moving the each function outside of the load function and categoryListing did not contain any links. Is it because maybe the load was not completed when it tried to get categoryListing links? Seems like that is possible.
Thanks,
Todd
We have a JavaScript function named "move" which does just "windows.location.href = any given anchor".
This function works on IE, Opera and Safari, but somehow is ignored in Firefox. Researching on Google doesn't produce a satisfactory answer why it doesn't work.
Does any JavaScript guru knows about this behavior, and what would be the best practice to jump to an anchor via JavaScript?
Have you tried just using
window.location = 'url';
In some browsers, window.location.href is a read-only property and is not the best way to set the location (even though technically it should allow you to). If you use the location property on its own, that should redirect for you in all browsers.
Mozilla's documentation has a pretty detailed explanation of how to use the window.location object.
https://developer.mozilla.org/en/DOM/window.location
If you are trying to call this javascript code after an event that is followed by a callback then you must add another line to your function:
function JSNavSomewhere()
{
window.location.href = myUrl;
return false;
}
in your markup for the page, the control that calls this function on click must return this function's value
<asp:button ........ onclick="return JSNavSomewhere();" />
The false return value will cancel the callback and the redirection will now work. Why this works in IE? Well I guess they were thinking differently on the issue when they prioritized the redirection over the callback.
Hope this helps!
One observation to ensure in such a scenario
Following will work in IE, but neither in Chrome nor in Firefox (the versions I tested)
window.location.href("http://stackoverflow.com");
Following will work all the three
window.location.href = "http://stackoverflow.com";
Maybe it's just a typo in your post and not in your code, but it's window and not windows
I am not sure to follow you.
I just tried: going with FF3 to Lua 5.1 Reference Manual (long and with lot of anchors).
Pasting javascript:window.location.href="#2.5"; alert(window.location.href); in the address bar, I went to the right anchor and it displayed the right URL. Works also with a full URL, of course.
Alternative code: javascript:(function () { window.location.href="#2.5"; })();
Perhaps you forgot the #. Common problem, also with image maps.
I have the same problem and I guess this is related to a click event.
I have a function that moves the browser to a specific page. I attach that function to some click events: in a button and in a image. AlsoI execute the function when the user press escape (document onkeypress event).
The results are that in all cases the function is called and executed, but only when there is a click the browser goes to the address I want.
Update
I got it working! with a
setTimeout( "location.replace('whatever.html');", 0 );
I don't know why the location.replace wasn't working when the event was a keypress, but with the settimeout it works :)
Update
Returning false after the event when you press escape makes the redirection works. If you return true or nothing the browser will not follow
You've got to add return false; after the window.location.href as mentioned above.
function thisWorks()
{
window.location.href = "http://www.google.com";
return false;
}
function thisDoesNotWork()
{
window.location.href = "http://www.google.com";
}
window.location.href works fine in all versions of Firefox, as does document.location.href I think that there is something else in your code that is breaking things.
drop this in a blank page, if it works, it indicates there is something else wrong on your page.
<script>
window.location.href = 'http://www.google.com/';
</script>
You could also use window.location.replace to jump to an anchor without register it in the browser history:
This article illustrates how to jump to an anchor and uses href as read-only property.
function navigateNext()
{
if (!window.location.hash)
{
window.location.replace(window.location.href + unescape("#2"))
}
else
{
newItem = nextItem(window.location.hash)
if (document.getElementById(newItem))
{
window.location.replace(stripHash(window.location) + "#" + newItem)
}
else
{
window.location.replace(stripHash(window.location) + "#1")
}
}
}
Have you tried this?
Response.Write("<script type='text/javaScript'> window.location = '#myAnchor'; </script>";);
please add full javascript script tag
<script type="text/javascript" language="javascript"></script>
window.location.hash = "#gallery";
For reference I had the same problem.
onclick = "javascript: window.location('example.html');" didn't work under FF (latest)
I just had to rewrite to onclick = "javascript: window.location = 'example.html';" to get it working
I just overcome the same problem. and the problem is not in javascript, but the href attribute on the <a> element.
my js code
function sebelum_hapus()
{
var setuju = confirm ("Anda akan menghapus data...")
if (setuju)
window.location = "index.php";
}
my previous html was
Klik here
and I update it to
Klik here
or remove the href attribute
hope this helps.
window.location.assign("link to next page") should work in both (chrome and firefox) browsers.
window.location.assign("link to next page")
Another option:
document.location.href ="..."