Jquery Class change on Href change? - javascript

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...

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");
}
})

Related

How to change the href of a button depending on whether a class is active or not

I am struggling to use Js and Jquery to change the href of a button depending on whether a class is active or not. I am still new to Javascript so I'm not sure if this is the best way to go about this but any advice on how to get my current code working properly would be awesome.
Here is my code..
if ($("#carousel-item-1").hasClass('active')) {
$("#portfolio-btn").attr("href", "https...");
}
if ($("#carousel-item-2").hasClass('active')) {
$("#portfolio-btn").attr("href", "https...");
}
if ($("#carousel-item-3").hasClass('active')) {
$("#portfolio-btn").attr("href", "https...");
}
The code works for carousel-item-1. It sucessfully changes the buttons empty href attribute to the desired website address. But what can I do to get the other two working? The active class DOES change on the other carousel items so that's not the problem but my button doesn't change the href depending on which carousel item is active. It just stays at the first carousel items link. Thanks for any help
Without seeing the rest of your code, it's hard to advise, but basically you need to apply your if statement logic when a new slide is presented. At that time, the slide will be active and you can apply the attribute.
If you're using the jQuery carousel there is a event called slid.bs.carousel that is fired when a new slide transitions in. For example....
$("#myCarousel").on('slid.bs.carousel', function () {
// The carousel has finished sliding from one item to another
checkForActive()
});
function checkForActive() {
if ($("#carousel-item-1").hasClass('active')) {
$("#portfolio-btn").attr("href", "https...");
}
if ($("#carousel-item-2").hasClass('active')) {
$("#portfolio-btn").attr("href", "https...");
}
if ($("#carousel-item-3").hasClass('active')) {
$("#portfolio-btn").attr("href", "https...");
}
}

Jquery Accordion with Font Awesome Toggle

I've been looking through the boards, and haven't found a solution to help with my issue at hand. I have an accordion feature that features font-awesome. I want to be able to toggle between the font awesome classes fa-angle-up/fa-angle-down when the accordion button is clicked. This is simple enough, but where I'm running into a problem is that the first div in the accordion should be open on page load, while the others are closed. The code below is allowing the divs to toggle correctly, when one opens the other closes, but the font awesome toggle isn't firing correctly. Right now when I click on a button the first div closes/font awesome toggles correctly, but the button of the div to open, and the rest of the buttons in the accordion, font awesome icon all toggle class.
I'm pretty novice with jquery, so all help is appreciated. Like I said I've looked through the boards to see if any other post related to accordions/font awesome toggles could help me, but everything I tried wasn't working, however I possibly could have been implementing it wrong since I'm not the best with jquery.
Demo here of what I currently have: http://jsbin.com/zaqocu/1/
here is a working code :
$(document).ready(function(){
$(".accordion-toggle").click(function() {
if($(this).next("div").is(":visible")){
$(this).next("div").slideUp("slow");
$(this).children().toggleClass("fa-angle-up fa-angle-down");
} else {
$(".accordion-toggle").next("div").slideUp("slow");
$(".accordion-toggle i").attr("class", "fa fa-angle-down");
$(this).next("div").slideDown("slow");
$(this).children().toggleClass("fa-angle-up fa-angle-down");
}
});
});
You need to close all the tab before open the one who is clicked.
Have a good one.
http://jsbin.com/cizoziqiji/2/
Check out toggleClass().
For example,
jquery
$('mything').click(function(){
$(this).toggleClass('myclassOne myclassTwo');
});
So when you click, it will remove the current class you have, then add the new one. Click again and it will flip-flop.
Using your jsbin example. I just cleared the classes. I'm not a fan of using toggles, though I'm sure they'd work this way. Basically, any time you click on a headline, default ALL of the arrows to down, then if you are showing a headline, switch that class to up.
Here's the bin: http://jsbin.com/xuzorokaho/1/
I believe if I used toggle for this, it would toggle all arrows up or down depending on their last state, which could be down and supposed to stay down.
$(document).ready(function(){
$(".accordion-toggle").click(function() {
$(".accordion-toggle i").removeClass('fa-angle-up');
$(".accordion-toggle i").addClass('fa-angle-down');
if($(this).next("div").is(":visible")){
$(this).next("div").slideUp("slow");
} else {
$(this).find('i').removeClass('fa-angle-down')
$(this).find('i').addClass('fa-angle-up');
$(".accordion-content").slideUp("slow");
$(this).next("div").slideToggle("slow");
}
});
});

jQuery slideToggle for multiple divs

What I am trying to do is have four links that each will display and hide a certain div when clicked. I am using slideToggle and I was able to get it to work with really sloppy and repetitive code. A friend of mine gave me a script he used and I tried it out and finally was able to get something to happen. However, all it does is hide the div and wont redisplay. Also it hides all the divs instead of just the specific one. Here is a jsfiddle I made. Hopefully you guys can understand what I am trying to do and help! Thanks alot.
Here is the script I'm using.
$(document).ready(function () {
$(".click_me").on('click', function () {
var $faq = $(this).next(".hide_div");
$faq.slideToggle();
$(".hide_div").not($faq).slideUp();
});
});
http://jsfiddle.net/uo15brz1/
Here's a link to a fiddle. http://jsfiddle.net/uo15brz1/7/
I changed your markup a little, adding id attributes to your divs. The jquery, gets the name attribute from the link that's clicked, adds a # to the front, hides the visible div, then toggles the respective div. I also added e.preventDefault to stop the browser from navigating due to the hash change. As an aside, javascript don't require the $ prefix.
$(document).ready(function () {
$(".click_me").on('click', function (e) {
e.preventDefault();
var name = $(this).attr('name');
var target = $("#" + name);
if(target.is(':visible')){
return false; //ignore the click if div is visible
}
target.insertBefore('.hide_div:eq(0)'); //put this item above other .hide_div elments, makes the animation prettier imo
$('.hide_div').slideUp(); //hide all divs on link click
target.slideDown(); // show the clicked one
});
});
Welcome to Stack Overflow!
Here's a fiddle:
http://jsfiddle.net/uo15brz1/2/
Basically, you need a way to point to the relevant content <div> based on the link that's clicked. It would be tricky to do that in a robust way with your current markup, so I've edited it. The examples in the jquery documentation are pretty good. Spend some time studying them, they are a great way to start out.

Scrolling effect on click on a image

I'm trying to make a scrolling effect to a menu. To be precise i want to click on a image and when i click it the menu to scroll down by 1 with a fade effect or what ever effect to the next link.
Ahhh...Like a windmill wheel if u understand what i mean.:)
And couldn't find any info.
Here is my code :
<div class=".img-fade"><img src="http://www.lahondafire.org/nest/Volunteer%20Manual/Signs%20and%20Forms/Arrow.gif" width="180" height="170"><BR>
When i click on the arrow the links below start scrolling down by 1 and contact to be top and about me to be to bottom...</div>
<div class="menu">
About me<BR>
Portofolio<Br>
Contact
</div>
http://jsfiddle.net/WCtQn/242/
So when i click on that arrow to move the links from top to bottom or bottom to top,dosen't matter.
Thank you.
You can try this method. It reorders the list elements when the arrow is clicked
$('.img-fade').click(function() {
var last = $('a')[0];
last.remove();
$('br')[0].remove();
$('.menu').append("<br> " + last['outerHTML']);
});
You should learn how to use javascript/jQuery and show us what you've tried so far and what you're having trouble with next time you post here
If you want something fancier you could look to do something similar to this example, though I'd add some .stop()s to remove some errors it has
I'm no jQuery pro but I've come up with something that is close to what you're looking for. I spiced it up with a fade effect. I also removed the <br> tags and set the links to display: block;. You could modify what I have to something similar to what #Zeaklous has posted to remove them along with the element and add them back in.
http://jsfiddle.net/WCtQn/248/
$('.img-fade').on('click', 'img', function(){
var firstItem = $('.menu a').first();
firstItem.fadeOut(2000, function() {
$(this).remove();
$('.menu').append(firstItem);
$('.menu a').last().fadeIn(2000);
});
});

How to toggle every jQuery element except the clicked?

So I'm trying to achieve something seemingly very basic in jQuery. I have a number of "headers," and when I click on a header I want the info beneath that header to slide down, and all other header info to slide up (so that only one header is showing info at a time).
Here's sudo code of what I want to happen:
$('.more-info-header:not(.jquery-processed)').addClass('jquery-processed').click(function(e) {
$(this).children('.game-info-text').slideToggle("Slow");
[all other ('.game-info-text')].slideUp(fast)
});
For the life of me though, I can't figure out how to code that second line ([all other ('.game-info-text')]). Any help is much appreciated!
(I'm implementing this as a drupal behavior, which is why I have the "jquery-processed" class being added)
Something like:
$('.more-info-header:not(.jquery-processed)').addClass('jquery-processed').click(function(e) {
$(this).children('.game-info-text').slideToggle("Slow");
$('.more-info-header').not(this).children('.game-info-text').slideUp(fast);
// ^-- removes the clicked element from all `.more-info-header`
});
Reference: .not()
Sounds like you're after the jQuery UI Accordion plugin.
$('.more-info-header:not(.jquery-processed)')
.addClass('jquery-processed').click( function(e) {
var these = $(this).children('.game-info-text').slideToggle("slow");
$('.game-info-text').not(these).slideUp("fast");
});
With the not() function you can exclude the already selected elements.
Like this?
$('.more-info-header').click(function(e){
var target = e.target || e.srcElement;
$(this).children().not(target).find('.game-info-text').slideUp('fast');
$('.game-info-text', target).slideToggle("slow");
});

Categories