We Keep Coding

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

get the style of the marker I clicked on in mapbox

I'm trying to get the style of the icon which I clicked on, in order to get its translate values.
I'm doing this because I want to create a div that will have the same location on the map as the icon who got clicked on.
this is my website so far:
http://www.david-halfon.com/radio/index.html
Basically, each time someone presses the yellow circle, a div should appear around it.
this is the code for events that happen when an icon is being clicked:
locale.on('click', function(e) {
$("#music").attr("src", prop.Url);
$(".player").show();
play();
sendWithAjax(prop.Country, prop.City);
$("h1").html(prop.Station);
$("h2").html(prop.Country);
$("h3").html(prop.City);
//console.log($(this).css("transform"));
//console.log($(this).attr("style"));
console.log($(this));
setTimeout(function(){ $("h4").html(globalVar);}, 500);
$(".plusB").show();
$(".shareB").show();
map1.setView(locale.getLatLng(), 4);
playNow = prop.Station;
playNowCountry = prop.Country
playNowCity = prop.City;
});
The comments are what I have tried to do so far but it does'nt seems to work.
When I'm trying to consloe.log(this) I get 'undefined'.
Thank you!!

The reason why you don't get the expected $(this).css(...) informations is that this is not a regular DOM object, as it clearly appears using Firebug:
The <img> you want to get style from is contained in the _icon member of this object, so you can use e.g.:
console.log($(this._icon).css('transform'));
console.log($(this._icon).attr('style'));
// and so on
This way (tested using Firebug on your website), it works fine.
BTW, I couldn't figure out why the click event targets this object rather than the <img>...
BTW again, this website is a great idea: cool!

Either toggling or remove class A and add class B on click with a delay

I have a jQuery mobile page that has a jQuery chat feature. Essentially I type something into the chat and then a few seconds later the bot responds.
Behind the chat feature and filling up the whole page is a class that has a background image, and I wish to have it so when I type into the text field and hit SEND the background image class toggles to another class which has a different background image. I also wish it to have like a 2-3 second delay.
I have tried
$(function () {
$("#chatSend").click(function () {
$(this).parent(".tasteTheRainbow").toggleClass("orNot");
});
});
Here is my JSfiddle...the background image does not show up but its there. https://jsfiddle.net/mattmega4/d9yodhtm/

One solution could be this:
$(this).closest(".tasteTheRainbow").fadeTo('fast', 0, function () {
$(this).toggleClass("orNot").fadeTo('fast', 1);
});
See the DEMO: https://jsfiddle.net/d9yodhtm/3/

I found a partial answer to my question. I can get the image to change, but not the delay, but I can keep looking into that. Here is the code:
$(document).ready(function(){
$("button#chatSend").click(function(){
$(".tasteTheRainbow").addClass("orNot");
});
});

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

html background ad

I have seen a lot of websites which "wrapper" width is 960px. As a background image they have an image which is clickable (some kind of advertise) and the whole webpage is over that image, like on this site.
Can you give me tutorial or something on that ?

Tom's code was a huge help, but I needed pointer cursor for this type of ad, but not for all the site, so I came up with this solution:
$('body').bind('click', function(e) {
if ($(e.target).closest('#container').size() == 0) {
alert('click');
}
}).bind('mouseover', function(e) {
if ($(e.target).closest('#container').size() == 0) {
$(this).css('cursor','pointer');
} else {
$(this).css('cursor','default');
}
});

In the first place you put the ad image as the website background then basically you have to capture the click on the whole body and check if it was in-or-outside of the page content. To do that you have to check if the event target element have the content wrapper (or wrappers if there are multiple) as one of its parent nodes - if not it means the click was outside of the page content.
If you'd like to do it here on StackOverflow you could do it with this bit of code.
$('body').bind('click', function(e){
if(!$(e.target).closest('#content').length) {
alert('ad outside content clicked');
}
});
Feel free to try it in your javascript console - SO is using jQuery so it will work - when you will click outside of the content area (at the edges of the screen) you will get alert that ad was clicked.
You'd obviously have to replace the alert with any kind of callback you'd have for your commercial - opening a new web page or whatever
Hope that helps
Tom
ps.
Keep in mind that this example is using jQuery for simplicity not native JS so you'd need the library for it to work.