Response title
This is preview!
Move this topic
adding different classes when coming from different pages
in Using jQuery
•
2 years ago
Hello!
On load of my index page, I have a js running:
$(document).ready(function() {
setTimeout(function(){
$("body").addClass("item1")
I am leaving this page to page2 and returning to index.
Now I want to add:
$("body").addClass("item2")
If I come from page3 I want item3 to add.
How can I achieve this?
On load of my index page, I have a js running:
$(document).ready(function() {
setTimeout(function(){
$("body").addClass("item1")
I am leaving this page to page2 and returning to index.
Now I want to add:
$("body").addClass("item2")
If I come from page3 I want item3 to add.
How can I achieve this?
1
Replies(49)
- document.referrer.split("/").pop().replace(/\..*$/,"")
is the last part of the referring page. If you really need item1, and not page1, you can do the if else code to recode it. I would just use the class page1.
JΛ̊KE
Leave a comment on jakecigar's reply
referrer can't be relied on 100%, though.
The referrer header is set by the browser. Some people consider it to be a security risk, and so there are various reasons it might not be sent:
- user has set a privacy setting in their browser
- user has installed a browser extension that blocks it
- user/user's employer has installed a security suite that blocks it
- user/user's employer uses a firewall that blocks it
- user's ISP blocks it
Some of these may avoid blocking it within the same domain, but you can't count on that.
Alternatives:
- Use a URL query to pass along the referring page
- Use a cookie
- use localstorage
Leave a comment on watusiware's reply
Perhaps I could do it easier...
I add class with this (document).ready(function().
Then I open a modal. The class sill stays active.
Then I switch to another page and want to return into that same modal with another class.
Means I need to goBack() onclick and change the class perhaps with a query in the url.
Something like goBack()a?addclas&removeclass.
Is this possible?
99 44/100% of referer usage will work on your site.
JΛ̊KE
Leave a comment on snote's reply
Sorry, I'm still a beginner...
Can you please tell me where exactly I have to paster the referer?
Thanks,
snote
Leave a comment on snote's reply
- $("body").addClass( document.referrer.split("/").pop().replace(/\..*$/,"") );
give you class page1 or page2 depending on where you came from.
JΛ̊KE
Leave a comment on jakecigar's reply
Sorry, I think i am having trouble expressing myself.
I am on the index page, adding class blue with this (document).ready(function().
Then I open a modal. The class is changed to red on open.
Then I switch to another page and return with goBack() into that same modal but now it loads the starting class blue because of the document ready function. But I need to have the same class red on returning.
snote
Leave a comment on snote's reply
Are we to guess what goBack() is? What modals are you using?
Make a demo of your site, and share a link to it.
JΛ̊KE
Leave a comment on jakecigar's reply
Ja, sorry. It is difficult to describe, but also difficult to extract a demo.
With go back I ment onclick="history.go(-1)"
I tried to build a small demo:
hope it is self explainig...
Snote
Leave a comment on snote's reply
You have to many scripts in your "demo". You may need to hire someone.
JΛ̊KE
Leave a comment on jakecigar's reply
But everything is working, except this little step where I have to include the changing of a class for the next page to the onclick="history.go(-1)". I came so far and now can't give up!
But anyway. Thanks a lot for your help again!
snote
Leave a comment on snote's reply
A demo does not contain all the code that you have ever worked on. Just enough to show the problem.
I think one of your many code files is doing some history manipulation with the history api.
JΛ̊KE
Leave a comment on jakecigar's reply
I appologise for that!
Here is the basics of my problem:
snote
Leave a comment on snote's reply
FYI, your demo doesn't work on Mobile Safari (iPhone/iPad), or on desktop Safari on MacOS. It never goes back to Demo.
It works on desktop Chrome on MacOS, though.
Leave a comment on watusiware's reply
TFI
I edited it to:
<script>
function goBack() {
history.go(-1);
}
</script>
<a onclick="goBack()">Back</a>
Leave a comment on snote's reply
It still doesn't work on Safari.
And I can't guess what you edited it FROM (since I don't have a photographic memory) or why.
Leave a comment on watusiware's reply
Besides the issue of not working on Safari, you need to communicate desired state back to the original page.
Take your pick of:
- referer (I have reservations, which Jake does not...)
- URL parameter ?color=red ?from=page2 etc.
- URL fragment #color=red #from=page2 etc.
- HTML5 pushstate/replacestate (but won't work on older browsers, polyfill available, though)
- localstorage
- cookie
Some of these solutions won't work on older browsers
Even your history.go(-1), which is only supported from IE 10. And some would require you use a URL instead of history.go(). But history.go will work with about 94% of browsers worldwide, according to caniuse.com. pushstate/replacestate generally works on the same browsers as history.go().
Decide what browsers you want to support, and use caniuse.com to see if it will work for them.
You never said what browsers you want this to work with.
None of this has anything to do with jQuery, though.
Leave a comment on watusiware's reply
See http://home.jejaju.com/play/back-button/ <--
It starts off with no highlighting, then when you come back it is highlighted.
for the back button, I use
- <a onclick="location.href = document.referrer;return false">Back</a>
instead of the history.go.
JΛ̊KE
Leave a comment on jakecigar's reply
If you insist on using the old-fashioned inline onclick= you need to return false, to insure that the default browser action is not followed. Different browsers may interpret an empty/missing href differently.
Safari apparently interprets it to mean "do nothing".
You can do it inline:
onclick='window.history.go(-1);return false;'
Or, use your function and make sure your function returns false.
Jake's solution works on Safari. Though I imagine history.go(-1) will work as well, so long as it has the return false.
It still needs a way of communicating state back to the first page, or checking referrer on the first page.
None of this will work if the user should happen to bookmark page2 or place a link to page2 on some external site! (Of course, in the latter case, the button would go back to the external site.) You can't use window.history.go(-1) In these cases, you would need a definite URL to go to, and the word "back" would be confusing.
history.go(-1) does not work with document.referer!
JΛ̊KE
Leave a comment on watusiware's reply
Oh! Jake's solution does work. But the colors are different (so I missed it!). And it works in Safari, but not in Chrome.
On Safari, there is a link in purple on page1. Go to page 2, go back, and Demo has a cyan background.
But on Chrome there is no cyan background.
Leave a comment on watusiware's reply
Ha! Because there is no referer! It's the browser going back in it's history locally. Referer comes in a header from the server. When you go(-1) there's no request to the server.history.go(-1) does not work with document.referer!
Well, now it works in Chrome. Did you change it, or did my eyes deceive me?
Your eyes deceived you.
JΛ̊KE
Leave a comment on watusiware's reply
Let the OP comment on my solution.
JΛ̊KE
Leave a comment on jakecigar's reply
Sorry, but all solutions except onclick='window.history.go(-1);return false;' are not working for me...
But I think I know why.
It is because I still don't know how to add this class (changing my Augenlogo) to a link.
Therefore I made a link to page.html#somename.
Then I redirected this to the page I wanted
if (window.location == "file:///C:....html#Video-Walbeck") {
window.location.href = 'file:///C:/....html#lg=1&slide=2';
window.location.href = 'file:///C:/....html#lg=1&slide=2';
and could add my class.
$(document).ready(function() {
setTimeout(function(){
$("body").addClass("scrolled-down-rueck").addClass("hidden");}, 1000);
setTimeout(function(){
$("body").addClass("scrolled-down-rueck").addClass("hidden");}, 1000);
Looks like I first have to fix this one...
snote
Leave a comment on snote's reply
Sorry, but all solutions except onclick='window.history.go(-1);return false;' are not working for me...
We can't guess what "are not working for me" means.
And you can change the background color to red, or whatever you want.
Leave a comment on watusiware's reply
I noticed the file:///C:...
referer can't work if you are loading from your local filesystem! It has to come from a server. And there are lots of other things that can't work if the files don't come from a server.
Do you intend to put this on the Internet, or serve from local files?
You should install a little server on your desktop for test! (You DON'T need anything as fancy as Apache.)
Many HTML editors have a little server built in for previewing. Or have plugins that do.
Leave a comment on watusiware's reply
Did you try my demo? Does is background color different when you return from the second page?
The particular CSS is not as important as the fact that the DOM is changed with a new attribute that can be used for anything you need.
Your original code doesn’t make much sense to me. In one second, you add the same class as if they come from the second page.
JΛ̊KE
Leave a comment on jakecigar's reply
Thank you both for your patience!
I am working mostly local and upload only for testing. Thanks for the hint with the sever. But also from the server, the backlink
<a onclick="location.href = document.referrer;return false"><img class="zurueck" src="images/navbar/zurueck.png" alt="zurueck"> </a>
from
leads to
and not back to:
With <a onclick='window.history.go(-1);return false;'> <img class="zurueck" src="images/navbar/zurueck.png" alt="zurueck"> </a> I am at least coming back to the right page...
snote
Leave a comment on snote's reply
Yes, JAKE, your demo is working. But if I put the code in my orignal files, it is not :-(
Read the code. It is very simple. Modify it as you need to.
JΛ̊KE
Leave a comment on snote's reply
With the same class, you are right, Jake. I was just using the same class but with the backlink for testing.
Leave a comment on snote's reply
I use dynamic css derived from the URL of the second page.
JΛ̊KE
Leave a comment on jakecigar's reply
Thank you Jake. I really did not notice the code...
I try to decode it.
snote
Leave a comment on snote's reply
ok. I did not get it working yet.. But I think that I am on a good way. Thanks!
Will continue tomorrow morn.
snote
Leave a comment on snote's reply
The back link is working now. But I can't get it pointing back to my anchor.
https://2018.stephanundverena.de/de-alle-ausstellungen.html#lg=1&slide=0 (click on "home")
I tried += '#anchor' or .hash ...
Leave a comment on snote's reply
You can’t put a <script> inside a <style>. Move it out!
JΛ̊KE
Leave a comment on jakecigar's reply
Yes, sorry. this happened only while I was trying to change the position of the script, trying if it would interfere with my other scripts..
Leave a comment on snote's reply
You can’t add a script that uses jQuery before you add jQuery. Move the script after jQuery is added.
JΛ̊KE
Leave a comment on jakecigar's reply
And, you don’t have a $lg
$lg.data('lightGallery').destroy();
JΛ̊KE
Leave a comment on jakecigar's reply
You need to open up the developer tools in every browser. Chrome has a very good one. As does Firefox. IE and Edge, not so good.
It would show you all these errors.
JΛ̊KE
Leave a comment on jakecigar's reply
Ja, I think I am overworked...
If you click on the anchor you are at demo.html#test but you will not return to the anchor. ;-(
snote
Leave a comment on snote's reply
Leave a comment on jakecigar's reply
Can we try it from another side, perhaps?
I have my function which loads my class on accessing the pageX:
$(function() {
$(document).ready(function() {
$("div").addClass("scrolled-down-home");
});
Is it possible to add some if else to this on load function:
If the user comes from page1, addclass(page1)
if the user comes from page2, addclass(page2)
else add default class(pageY)
? Snote
I have my function which loads my class on accessing the pageX:
$(function() {
$(document).ready(function() {
$("div").addClass("scrolled-down-home");
});
Is it possible to add some if else to this on load function:
If the user comes from page1, addclass(page1)
if the user comes from page2, addclass(page2)
else add default class(pageY)
? Snote
Did you read the link and try something that uses the hashchange event?
JΛ̊KE
Leave a comment on snote's reply
I did, but don't know how to convert it to my needs :-(
Leave a comment on snote's reply
Because I am coming from a external page, so not only the hash is changing but also the path.
Leave a comment on snote's reply
Yes. You need to use both techniques, combined.
Start coding.
JΛ̊KE
Leave a comment on jakecigar's reply
All the hash changers working for me on the same page only. As soon as I link from or to another page nothing is happening. Also the referrer points back, but ignors the hash...
:-(
#snote
Leave a comment on snote's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to snote's question
{"z35601403":[14737000007779304,14737000007789033,14737000007789035,14737000007789037,14737000007789039,14737000007789051,14737000007789053,14737000007789055,14737000007789057,14737000007789059,14737000007789061,14737000007789063,14737000007789065,14737000007789067,14737000007789069,14737000007789071,14737000007789073,14737000007789199,14737000007789201,14737000007789205,14737000007789215],"z7664639":[14737000007788007,14737000007788087,14737000007788089,14737000007788091,14737000007788095,14737000007788099,14737000007788101,14737000007788107,14737000007788109],"z2950240":[14737000007782001,14737000007788065,14737000007788067,14737000007788073,14737000007788077,14737000007788085,14737000007788093,14737000007788097,14737000007788103,14737000007788105,14737000007790051,14737000007790059,14737000007790063,14737000007790099,14737000007783103,14737000007783105,14737000007783109,14737000007783117,14737000007783151,14737000007783155]}