I use some hashes in a script to scroll to differents elements of a page when the client open a page that has a trailing "#something" in its url. The problem is when the user uses the go back and for buttons of his client. How can i make the script reacting again once the client has moved back or for?
Here is the concerned portion of code:
// Arrivée avec une ancre
var $h = window.location.hash;
if ($h != '') {
var $arrh = {'#home': '#panel_home', '#services': '#panel_services', '#realisations': '#panel_realisations', '#contact': '#panel_contact', '#about': '#panel_about' };
$('#left').scrollTo($arrh[$h], 500);
}
else {
$('#left').scrollTo('#panel_home', 500);
}
I hope my question is understandable... i'm french and i've just tried to explain my thought the best i can in english.
I don't know if what i'm asking is possible, but if you have an idea, your help will be welcome!
Edit-0:
've just seen a seemingly similar discussion there: Detecting Back Button/Hash Change in URL
I'll read and bring back answers if i find a solution (some links proposed are really interesting).
this css selector may be helpful:
#left:target
{
.
.
.
}
Add this code to a function, and call that function anytime the hash changes. I'm not sure I completely understand, but from what I do, I think this should work fine for you:
var scrollFunction = function (){
var $h = window.location.hash;
if ($h != '') {
var $arrh = {'#home': '#panel_home', '#services': '#panel_services', '#realisations': '#panel_realisations', '#contact': '#panel_contact', '#about': '#panel_about' };
$('#left').scrollTo($arrh[$h], 500);
}
else {
$('#left').scrollTo('#panel_home', 500);
}
};
window.onhashchange = scrollFunction;
You can also try using a jquery plugin like jquery hash-change (https://github.com/cowboy/jquery-hashchange) or jquery history (http://tkyk.github.com/jquery-history-plugin/)
developed for similar requirements
Well, the solution that meets my need is in that plugin:
http://benalman.com/projects/jquery-hashchange-plugin/
May be it'll help someone else...
Ps: it's really easy to use; just link the script to your document and add something like:
$(window).hashchange(function(){
my_func();
});
Related
Apologies if my question sounds like a newbie question...but I could not find an appropriate answer.
I am trying to create 2 back buttons on my website that would bring the visitor back :
1. to the very first page he visited on my website
2. to the previous site (not page) he visited - so the site that brought him to my site basically.
Is this feasible by any chance ? And if so, can you please share your insights on the way to do it ?
Many thanks in advance for any help !
Maybe you can do something like this:
$(document).ready(function() {
var sessionIsNew = sessionStorage.getItem('sessionIsNew');
if (sessionIsNew == null) {
sessionStorage.setItem('sessionIsNew', 'false');
sessionStorage.setItem('entryUrl', window.location.href);
}
}
// On click to your back button:
function backToEnrtryPage () {
entryUrl = sessionStorage.getItem('entryUrl');
if (entryUrl != null) {
window.location.href = entryUrl;
}
}
More information about session in JavaScript
https://developer.mozilla.org/de/docs/Web/API/Window/sessionStorage
You can do it by manupulating the browser history, so to move once backward through history, just do:
window.history.back();
to back to initial entry page you can do somting like
var numberOfEntries = window.history.length;
window.history.go(- numberOfEntries );
the full api documentation from mozilla : https://developer.mozilla.org/en-US/docs/Web/API/History_API
As someone completely new to javascript (my experience doesn't go past a mastery of CSS), can someone tell me if there is a way to add a delay to this exact redirect code by adding something into it, and can you pretty please show me how to do it as though I am an infant child who knows nothing because I am very, very inexperienced at javascript, and very, very confused.
<script>
//redirect to new blog
var path = window.location.pathname;
window.location.replace('http://newurl.tumblr.com' + path);
</script>
All other questions on this topic seem require a stronger foundation of understanding of javascript than I have, or the code they're showing doesn't bear much resemblance to the one I'm using, and I find myself getting confused and lost when I read them. Questions like this one do have answers that seem simple enough, but since the new url is mentioned in the timeout code, I'm uncertain if that would effect the code I currently have, which I prefer because it redirects people to the corresponding pages of my blog instead of just to the homepage. Since that question and others like it confuse me that way, I'd appreciate any help with those concerns borne from my inexperience in mind!
You would do setTimeout()
Try this and see if it works for you:
<script>
//redirect to new blog
var path = window.location.pathname;
setTimeout(function(){
window.location.replace('http://belladxne.tumblr.com' + path);
}, 3000);
</script>
If I'm understanding correctly...no, this code should not affect the URL replacement, since you're just grabbing the pathname of the current URL you are on.
Combining your example code and the suggested answer from the linked question using setTimeout
<script>
//delay in seconds:
var redirectDelay = 5;
//redirect to new blog
var path = window.location.pathname;
setTimeout(function() {
window.location.replace('http://belladxne.tumblr.com' + path);
}, redirectDelay * 1000);
</script>
I've also added the variable redirectDelay so that you can easily tweak the delay until you find the delay time that fits what you're wanting.
here
setTimeout(function() {
var path = window.location.pathname;
window.location.replace('http://belladxne.tumblr.com' + path);
}, 2000); // <- this is the delay, 2 seconds
still practicing javascript.
Here is a JSBIN of a site that I have made that I can't seem to figure out how to make it so the URL will change once the video is clicked or randomized.
(page load/refresh and click both trigger this)
http://jsbin.com/vesebu/1/edit?html,js,output
The page randomizes on load and page click with an array of videos.
What I am trying to figure out is how to change the URL by appending an ID to the end of it. ie: mysite.com/6530 <-- last four digits representing the ID of the video. This will make the site shareable and is what I am trying to figure out how people are able to do this!
I have tried reading documentation on history.js, html5 pushstate as well as window.location hash and nothing seems to work.
M = function(d) {
function a() {
var a;
a = window.location.hash;
/^#\d+$/.test(a) && (window.location.href = "/" + a.slice(1));
/^#!\d+$/.test(a) && (window.location.href = "/" + a.slice(2));
f
}
y(a, d);
return a
}(n);
I was suggested this code by a friend but can't seem to make sense of it, especially with the jsbin I have. I'm completely lost here on how to do this, and have really tried reading up on it.
any help at all is definitely appreciated!
Thanks guys
Your hashes may be like this:
#/2134/23423/
#2134/23423/
result:
windows.location = /2134/23423/;
then do something else.......
Hope it can help you ~
I am clutching at straws a little bit here, I want to do as the title says, when the page loads I would really love some javascript to fire off some code that checks the url, and reads the end of it. I then want to have an 'if' that says (URL ends with =en?check this radio:do nothing). the code I have attempting at fitting already is messy at best but I will show you to help you understand my lack of ability and to better explain my query:
window.onload = function(){
var url = window.location.href;
var lastPart = url.substr(url.lastIndexOf('/') + 1);
if (lastPart === "=en") {
radiobtn = document.getElementById("123456789");
radiobtn.checked = true;
}
};
Thank you guys!
This was a serious lack of understanding of the code of the code I was attempting to use.
var lastPart = url.substr(url.lastIndexOf('/') + 1);
I didnt realise that this was reading everything after the char '/'. After changing it to '=' it worked perfectly!
Sorry community!
If I had a normal website this would be a simple enough fix... but I've built my site on tumblr so I need a workaround. Every page runs off of the same code, so any solution script is going to run on every page.. can't quite figure this one out (did I mention I'm a total n00b?). There are lots of answers to questions LIKE this one, but I couldn't quite find the right syntax I suppose to answer this question...
The goal here is, if some goes to just the raw domain name, in this case milliondollarextreme.tv --> I'd like it to redirect to milliondollarextreme.tv/tagged/videos.
In any other case, by that I mean, if there is anything appended to the end of the domain name already, such as:
milliondollarextreme.tv/permalink/91298132843
milliondollarextreme.tv/tagged/blog
milliondollarextreme.tv/contact.htm
I don't want there to be any redirection going on. I only want the redirect to 'fire' really the first time the person types in the domain -- milliondollarextreme.tv
The trick here, the reason why I am asking (I did a search and 1000 apologies if this has been asked elsewhere, I just couldn't find it) is that the script has to run on every page, because it's hosted on tumblr, so every page is driven by the same code.
Any ideas? Thanks in advance.
This will simply redirect any visit to milliondollarextreme.tv/ to milliondollarextreme.tv/tagged/videos
if(window.location.pathname == '/')
{
window.location.pathname = '/tagged/videos';
}
However, it will do it every time they go to the root; like Gerardo, I'm not clear if that's what you want.
<script>
if( window.location.href == "http://milliondollarextreme.tv" ||
window.location.href == "http://milliondollarextreme.tv/" ||
window.location.href == "http://www.milliondollarextreme.tv" ||
window.location.href == "http://www.milliondollarextreme.tv/") {
window.location.href = "http://www.milliondollarextreme.tv/tagged/videos/";
}
</script>
What should happen when someone enters to http://milliondollarextreme.tv/ for the second time?