Jquery Class change on Href change?
0
I've wracked my brain and I'm hopeful someone else has a solution here.
My client wants a menu to fade out and different menu fade in when you go down the page. https://67livingstonst.com/#home then goes to https://67livingstonst.com/#find-story-67-livingston-2
I can't seem to figure out the event they're using... I'm much more adept at Jquery so if anyone has feedback on what event they're using to trigger the menu fading in that would be amazing...
javascript jquery css
asked Nov 28 '18 at 22:21
TiffanyTiffany
111
add a comment |
0
I've wracked my brain and I'm hopeful someone else has a solution here.
My client wants a menu to fade out and different menu fade in when you go down the page. https://67livingstonst.com/#home then goes to https://67livingstonst.com/#find-story-67-livingston-2
I can't seem to figure out the event they're using... I'm much more adept at Jquery so if anyone has feedback on what event they're using to trigger the menu fading in that would be amazing...
javascript jquery css
asked Nov 28 '18 at 22:21
TiffanyTiffany
111
Please take a moment to review How to Ask for details about the information that is expected to be included in a question for Stack Overflow.
– Taplar
Nov 28 '18 at 22:30
1
Hi Tiffany and welcome to Stack overflow. Someone (not me) has downvoted your question because you haven't given an example of what you have already tried, and you have given us links to a fully working site to wade through. Please provide a minimal, complete, and verifiable example. stackoverflow.com/help/mcve See also How to ask: stackoverflow.com/help/how-to-ask
– Yvonne Aburrow
Nov 28 '18 at 22:32
My apologies for not being more clear. Still learning everything to add. This is my current working site that I'm in the midst of dev on: stpaullux18re.wpengine.com
– Tiffany
Nov 28 '18 at 22:59
1
Look for haschange event... It may be what you look for.
– Louys Patrice Bessette
Nov 28 '18 at 23:08
1
I had to make the scroll bar active, which the plugin defaults to hide that function. I Fullpage JS for those looking into it. Then I added this $( window ).scroll(function() { $( "#standard" ).css( "display", "none" ).fadeOut( "slow" ); });
– Tiffany
Nov 28 '18 at 23:16
add a comment |
0
0
0
I've wracked my brain and I'm hopeful someone else has a solution here.
My client wants a menu to fade out and different menu fade in when you go down the page. https://67livingstonst.com/#home then goes to https://67livingstonst.com/#find-story-67-livingston-2
I can't seem to figure out the event they're using... I'm much more adept at Jquery so if anyone has feedback on what event they're using to trigger the menu fading in that would be amazing...
javascript jquery css
asked Nov 28 '18 at 22:21
TiffanyTiffany
111
I've wracked my brain and I'm hopeful someone else has a solution here.
My client wants a menu to fade out and different menu fade in when you go down the page. https://67livingstonst.com/#home then goes to https://67livingstonst.com/#find-story-67-livingston-2
I can't seem to figure out the event they're using... I'm much more adept at Jquery so if anyone has feedback on what event they're using to trigger the menu fading in that would be amazing...
javascript jquery css
javascript jquery css
asked Nov 28 '18 at 22:21
TiffanyTiffany
111
asked Nov 28 '18 at 22:21
TiffanyTiffany
111
asked Nov 28 '18 at 22:21
TiffanyTiffany
111
asked Nov 28 '18 at 22:21
TiffanyTiffany
111
asked Nov 28 '18 at 22:21
TiffanyTiffany
111
111
Please take a moment to review How to Ask for details about the information that is expected to be included in a question for Stack Overflow.
– Taplar
Nov 28 '18 at 22:30
1
Hi Tiffany and welcome to Stack overflow. Someone (not me) has downvoted your question because you haven't given an example of what you have already tried, and you have given us links to a fully working site to wade through. Please provide a minimal, complete, and verifiable example. stackoverflow.com/help/mcve See also How to ask: stackoverflow.com/help/how-to-ask
– Yvonne Aburrow
Nov 28 '18 at 22:32
My apologies for not being more clear. Still learning everything to add. This is my current working site that I'm in the midst of dev on: stpaullux18re.wpengine.com
– Tiffany
Nov 28 '18 at 22:59
1
Look for haschange event... It may be what you look for.
– Louys Patrice Bessette
Nov 28 '18 at 23:08
1
I had to make the scroll bar active, which the plugin defaults to hide that function. I Fullpage JS for those looking into it. Then I added this $( window ).scroll(function() { $( "#standard" ).css( "display", "none" ).fadeOut( "slow" ); });
– Tiffany
Nov 28 '18 at 23:16
add a comment |
Please take a moment to review How to Ask for details about the information that is expected to be included in a question for Stack Overflow.
– Taplar
Nov 28 '18 at 22:30
1
Hi Tiffany and welcome to Stack overflow. Someone (not me) has downvoted your question because you haven't given an example of what you have already tried, and you have given us links to a fully working site to wade through. Please provide a minimal, complete, and verifiable example. stackoverflow.com/help/mcve See also How to ask: stackoverflow.com/help/how-to-ask
– Yvonne Aburrow
Nov 28 '18 at 22:32
My apologies for not being more clear. Still learning everything to add. This is my current working site that I'm in the midst of dev on: stpaullux18re.wpengine.com
– Tiffany
Nov 28 '18 at 22:59
1
Look for haschange event... It may be what you look for.
– Louys Patrice Bessette
Nov 28 '18 at 23:08
1
I had to make the scroll bar active, which the plugin defaults to hide that function. I Fullpage JS for those looking into it. Then I added this $( window ).scroll(function() { $( "#standard" ).css( "display", "none" ).fadeOut( "slow" ); });
– Tiffany
Nov 28 '18 at 23:16
Please take a moment to review How to Ask for details about the information that is expected to be included in a question for Stack Overflow.
– Taplar
Nov 28 '18 at 22:30
Please take a moment to review How to Ask for details about the information that is expected to be included in a question for Stack Overflow.
– Taplar
Nov 28 '18 at 22:30
1
1
Hi Tiffany and welcome to Stack overflow. Someone (not me) has downvoted your question because you haven't given an example of what you have already tried, and you have given us links to a fully working site to wade through. Please provide a minimal, complete, and verifiable example. stackoverflow.com/help/mcve See also How to ask: stackoverflow.com/help/how-to-ask
– Yvonne Aburrow
Nov 28 '18 at 22:32
Hi Tiffany and welcome to Stack overflow. Someone (not me) has downvoted your question because you haven't given an example of what you have already tried, and you have given us links to a fully working site to wade through. Please provide a minimal, complete, and verifiable example. stackoverflow.com/help/mcve See also How to ask: stackoverflow.com/help/how-to-ask
– Yvonne Aburrow
Nov 28 '18 at 22:32
My apologies for not being more clear. Still learning everything to add. This is my current working site that I'm in the midst of dev on: stpaullux18re.wpengine.com
– Tiffany
Nov 28 '18 at 22:59
My apologies for not being more clear. Still learning everything to add. This is my current working site that I'm in the midst of dev on: stpaullux18re.wpengine.com
– Tiffany
Nov 28 '18 at 22:59
1
1
Look for haschange event... It may be what you look for.
– Louys Patrice Bessette
Nov 28 '18 at 23:08
Look for haschange event... It may be what you look for.
– Louys Patrice Bessette
Nov 28 '18 at 23:08
1
1
I had to make the scroll bar active, which the plugin defaults to hide that function. I Fullpage JS for those looking into it. Then I added this $( window ).scroll(function() { $( "#standard" ).css( "display", "none" ).fadeOut( "slow" ); });
– Tiffany
Nov 28 '18 at 23:16
I had to make the scroll bar active, which the plugin defaults to hide that function. I Fullpage JS for those looking into it. Then I added this $( window ).scroll(function() { $( "#standard" ).css( "display", "none" ).fadeOut( "slow" ); });
– Tiffany
Nov 28 '18 at 23:16
add a comment |
1 Answer
1
active
oldest
votes
0
Here is an example of how to change a class when the href changes to match the id of specific slide. I hope this helps!
$(window).on("hashchange",function(e){
if(window.location.hash == "#find-story-67-livingston-2"){
$("#my-menu").addClass("show");
} else {
$("#my-menu").removeClass("show");
}
})
answered Nov 29 '18 at 3:01
WeftWeft
27719
You can use window scroll event also, although the above answer also will work for you.
– Atul
Nov 29 '18 at 4:37
add a comment |
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53528982%2fjquery-class-change-on-href-change%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
Here is an example of how to change a class when the href changes to match the id of specific slide. I hope this helps!
$(window).on("hashchange",function(e){
if(window.location.hash == "#find-story-67-livingston-2"){
$("#my-menu").addClass("show");
} else {
$("#my-menu").removeClass("show");
}
})
answered Nov 29 '18 at 3:01
WeftWeft
27719
You can use window scroll event also, although the above answer also will work for you.
– Atul
Nov 29 '18 at 4:37
add a comment |
0
Here is an example of how to change a class when the href changes to match the id of specific slide. I hope this helps!
$(window).on("hashchange",function(e){
if(window.location.hash == "#find-story-67-livingston-2"){
$("#my-menu").addClass("show");
} else {
$("#my-menu").removeClass("show");
}
})
answered Nov 29 '18 at 3:01
WeftWeft
27719
You can use window scroll event also, although the above answer also will work for you.
– Atul
Nov 29 '18 at 4:37
add a comment |
0
0
0
Here is an example of how to change a class when the href changes to match the id of specific slide. I hope this helps!
$(window).on("hashchange",function(e){
if(window.location.hash == "#find-story-67-livingston-2"){
$("#my-menu").addClass("show");
} else {
$("#my-menu").removeClass("show");
}
})
answered Nov 29 '18 at 3:01
WeftWeft
27719
Here is an example of how to change a class when the href changes to match the id of specific slide. I hope this helps!
$(window).on("hashchange",function(e){
if(window.location.hash == "#find-story-67-livingston-2"){
$("#my-menu").addClass("show");
} else {
$("#my-menu").removeClass("show");
}
})
answered Nov 29 '18 at 3:01
WeftWeft
27719
edited Nov 29 '18 at 3:09
answered Nov 29 '18 at 3:01
WeftWeft
27719
answered Nov 29 '18 at 3:01
WeftWeft
27719
answered Nov 29 '18 at 3:01
WeftWeft
27719
27719
You can use window scroll event also, although the above answer also will work for you.
– Atul
Nov 29 '18 at 4:37
add a comment |
You can use window scroll event also, although the above answer also will work for you.
– Atul
Nov 29 '18 at 4:37
You can use window scroll event also, although the above answer also will work for you.
– Atul
Nov 29 '18 at 4:37
You can use window scroll event also, although the above answer also will work for you.
– Atul
Nov 29 '18 at 4:37
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53528982%2fjquery-class-change-on-href-change%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Please take a moment to review How to Ask for details about the information that is expected to be included in a question for Stack Overflow.
– Taplar
Nov 28 '18 at 22:30
1
Hi Tiffany and welcome to Stack overflow. Someone (not me) has downvoted your question because you haven't given an example of what you have already tried, and you have given us links to a fully working site to wade through. Please provide a minimal, complete, and verifiable example. stackoverflow.com/help/mcve See also How to ask: stackoverflow.com/help/how-to-ask
– Yvonne Aburrow
Nov 28 '18 at 22:32
My apologies for not being more clear. Still learning everything to add. This is my current working site that I'm in the midst of dev on: stpaullux18re.wpengine.com
– Tiffany
Nov 28 '18 at 22:59
1
Look for haschange event... It may be what you look for.
– Louys Patrice Bessette
Nov 28 '18 at 23:08
1
I had to make the scroll bar active, which the plugin defaults to hide that function. I Fullpage JS for those looking into it. Then I added this $( window ).scroll(function() { $( "#standard" ).css( "display", "none" ).fadeOut( "slow" ); });
– Tiffany
Nov 28 '18 at 23:16