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.
Related
I am not sure why this keeps happening. I searched how to remove hashtags from the URL and found many answers. All of them was no help as all they simply did was remove the hashtag, but I had to refresh the page. And even then that still did not help. My problem is that the hashtag appears when I click on this anchor tag:
echo '<a href="?id='.$row['id'].'" <-- here is what I am trying to add to the URL, but the hashtag appears. id="smallbtn" data-toggle="modal" data-target="#small" data-modal="small">';
Here is the javascript I used to try and fix my problem, but no success (Also was told to use it in the <head>.):
<script type="text/javascript">
// 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));
}
</script>
And I don't know if this is the problem, but I use this to open the modal and put the anchor tag href in the URL:
<script type="text/javascript">
$(document).ready(function(){
$(window.location.hash).modal('show');
$('a[data-toggle="modal"]').click(function(){
window.location.hash = $(this).attr('href');
});
});
</script>
My goal is to try to put that href in the URL as parameter and so far I am having a hard time getting it that work. Any help on this is gladly appreciated!
In the click event callback, the line where you set window.location.hash = $(this).attr('href'); , this will cause the a '#' to be prefixed before the content you set, ie, the value of href attribute.
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 am trying to make this work
<script>
document.write('<button onclick="location.href=' + document.referrer + '">Go back</button>');
</script>
It should be nothing but a simple "Back" button to the previsous page.
When I do it like an "a href" it works
<script>
document.write('Go back');
</script>
but when trying tom ake it as a "button" it fails. The button is there but didnt navigate to the previsious page
Add another escaped quote into the href body (as well as a semicolon at the end, although I don't know if that would make a difference) and see if that works...
<script>
document.write('<button onclick="location.href=\'' + document.referrer + '\';">Go back</button>');
</script>
You could also implement native back with:
window.history.back();
//in your onclick="history.back()"
//also can try with:
//javascript:history.go(-1)">
Or call a function that check if history.back() is available in the browser first else implement a custom back function/code as is showed here (I would prefer take out the code from the html just handle the onclick in my function)
Using javascript history.back() fails in Safari .. how do I make it cross-browser?
For a robust solution check history.js:
https://github.com/browserstate/history.js
You're missing the quotes around the URL in the href, so try escaping it like this (worked for me)
document.write('<button onclick="location.href=\'' + document.referrer + '\'">Go back</button>');
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.
i've got a slight jQuery problem.
What i want is to load a particular area of an external html doc into a div,
instead it loads the whole document, not the specified area.
This is the trigger:
$('a').click(function(){ // my link to trigger the load
var pid = $(this).attr('href'); //the pid is the links href
getproject(pid); //trigger the load function, pass variable
});
This is the triggered function:
function getproject(pid) {
$('#container').load('data.html', pid);
}
So when i click my link, it should load the element with the id (#) specified by the link into my container, but it loads the whole data... i cant seem to find a solution to this.
The Link looks like this (cant use exact markup here):
a href="#elementtoload"
The data document looks like this:
div id="elementtoload"
div id="..."
and loads of more elements with content, which should be loaded by id from the links href.
Looking at the documentation for $ load, you should be able to do this:
function getproject(pid) {
$('#container').load('data.html #' + pid);
}
http://api.jquery.com/load/
Second section, Loading Page Fragments. For us to say exactly how this is relevant, you'd need to provide an example of the triggering link, and ideally the document you're loading.
Not sure what your actual intent is but it seems to me that you are going to alot of trouble to get the pid but then not using it in your load routine. I'm guessing the code should look more like this:
function getproject(pid) {
$(pid).hide().load('data.html');
}
String concatenation:
.load('data.html ' + pid);
Regarding your update:
<div id="#elementtoload"> should be <div id="elementtoload">
I was trying something similar and after some hours (...) michael came finally with something that works :) this did the trick for me, the # should be in the url string, like this:
$('#div1').load('data.html #' + x);