I am trying to call a function to add class hover to a link on the event when the carousel slide has the class active. The active class iterates over each item, toggling on and off. However the event handler i chose on() is not triggering the function to happen. How can i add the class when the item is active?
<div class="carousel">
<div class="item"><a id="link1"></a></div>
<div class="item"><a id="link2"></a></div>
<div class="item active"><a id="link3"></a></div>
</div>
// if slide active, add class hover to the link
var test = jQuery('.hover');
function linkHover(){
if(jQuery('.item.active').length != 0){
jQuery('#link3').addClass('hover');
}
};
jQuery(test).on( 'trigger', linkHover );
I think your making this more difficult than it needs to be. There should be a function that is called to switch the slide on the carousel. Inside that function just add:
$('.item').each(function() {
$(this).removeClass('hover');
$('.item.active').addClass('hover');
});
// if slide active, add class hover to the link
var test = $('.active');
function linkHover(){
if($('.item.active').length != 0){
$('#link3').addClass('hover');
}
};
linkHover();
.hover{color:red}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="carousel">
<div class="item"><a id="link1"></a></div>
<div class="item"><a id="link2"></a></div>
<div class="item active"><a id="link3">1</a></div>
</div>
Try like this
Related
I'm having trouble adding a link to a button inside a card. the card is wrapped in a div element which when clicked automatically expands and closes.
Is there anyway to remove this functionality just when clicking on the details button? So it acts as a normal link?
Here is the code:
https://codepen.io/candroo/pen/wKEwRL
Card HTML:
<div class="card">
<div class="card__image-holder">
<img
class="card__image"
src="https://source.unsplash.com/300x225/?wave"
alt="wave"
/>
</div>
<div class="card-title">
<a href="#" class="toggle-info btn">
<span class="left"></span>
<span class="right"></span>
</a>
<h2>
Card title
<small>Image from unsplash.com</small>
</h2>
</div>
<div class="card-flap flap1">
<div class="card-description">
This grid is an attempt to make something nice that works on touch
devices. Ignoring hover states when they're not available etc.
</div>
<div class="card-flap flap2">
<div class="card-actions">
Read more
</div>
</div>
</div>
</div>
JS:
$(document).ready(function () {
var zindex = 10;
$("div.card").click(function (e) {
e.preventDefault();
var isShowing = false;
if ($(this).hasClass("show")) {
isShowing = true;
}
if ($("div.cards").hasClass("showing")) {
// a card is already in view
$("div.card.show").removeClass("show");
if (isShowing) {
// this card was showing - reset the grid
$("div.cards").removeClass("showing");
} else {
// this card isn't showing - get in with it
$(this).css({ zIndex: zindex }).addClass("show");
}
zindex++;
} else {
// no cards in view
$("div.cards").addClass("showing");
$(this).css({ zIndex: zindex }).addClass("show");
zindex++;
}
});
});
You can check the target of the event and see if it is an <a> using is()
Something like:
$("div.card").click(function (e) {
// only run when not an `<a>`
if(!$(e.target).is('a')){
e.preventDefault();
//the rest of your code
....
}
});
I don't know Jquery but with javascript you can do this inside your code:
const links = document.querySelectorAll('.btn');
links.forEach(link => link.addEventListener('click', (e)=>e.stopPropagation()))
I have two div elements that are clickable. When I click one that contains "1" it will give it class="active", when I click one that contains "2" it will give it class="active" and remove class="active" from the 1st one. Basically it is like switch.
<div class="active">1</div>
<div class="">2</div>
then this block:
<div class="carousel-inner">
<div class="carousel-item " data-id="1" data="carousel-item"></div>
<div class="carousel-item " data-id="2" data="carousel-item"></div>
</div>
and after all this code: which is supposed to detach div that don't have data-id of "active" div. When switched, it's supposed to re-attach detached div and detach the second one.
<script>
$(document).ready(function(){
var a = $("div:contains('1')"),
b;
if (a.hasClass('active')){
b = $("[data-id!='1'][data='carousel-item']").detach();
}
else{
$(".carousel-inner").prepend(b);
}
});
</script>
however, it is not working. when I switch (class active moves from one div to another) nothing happens. only first div is detached but on switch it is not reattaching. Any ideas why ? Thanks for any help !
PS: 1. For certain reasons (FU mobirise) I'm not able to manipulate with those two divs with active class(give them onclick() attribute, new class or id and so on).
2. Sorry for my English.
Here is one possible solution. I changed around how you were doing the swap so it isn't doing a detach. But it should give you an idea of how to potentially do it, if you did want to do the detach anyway.
//emulate the external logic that swaps the active class
$(function(){
var $elements = $('.top');
$elements.on('click', function(){
$elements.not(this).removeClass('active');
$(this).addClass('active');
});
});
$(function(){
var $top = $('.top');
var $carousel = $('.carousel-inner');
var $carouselItems = $carousel.find('.carousel-item');
$top.on('click', function(){
var $this = $(this);
$carousel.prepend($carouselItems.filter(function(){
return $this.data('id') === $(this).data('id');
}));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="top active" data-id="1">1</div>
<div class="top" data-id="2">2</div>
<div class="carousel-inner">
<div class="carousel-item " data-id="1" data="carousel-item">Number 1</div>
<div class="carousel-item " data-id="2" data="carousel-item">Number 2</div>
</div>
I'm trying to get an if else statement that will allow me to run a function if the #selectedwhip div has the .active class. If it doesn't, I want it to run another function. I've just used the console to see if it will work but it only returns the else statement in the console.
The scenario is 3 images which act as links. By clicking the links they will add an active class to another div. By being active, an image will be inserted into the div. Clicking an image does add an active class to the div but it doesn't cause the if statement to log to the console.
Is there something that's preventing it from working?
jQuery
$(".carbutton").click(function(){
$("#selectedwhip").addClass("active");
});
$(function() {
if ($("#selectedwhip").hasClass("active")) {
console.log('active');
}
else {
console.log('unactive');
}
});
HTML
<div class="cars">
<h1>Title</h1>
<div class="section group trio-cars">
<div class="col span_1_of_3 carbutton" id="carbutton">
<a id="car1"><img src="img/frontleftbmw.jpg" width="100%"></a>
</div>
<div class="col span_1_of_3 carbutton" id="carbutton">
<a id="car2"><img src="http://placehold.it/350x150" width="100%"></a>
</div>
<div class="col span_1_of_3 carbutton" id="carbutton">
<a id="car3"><img src="http://placehold.it/350x150" width="100%"></a>
</div>
</div>
</div>
<div class="col span_1_of_3">
<div class="stats-image" id="selectedwhip">
</div>
</div>
you have to have a check function such as:
function check() {
if ($("#selectedwhip").hasClass("active")) {
console.log('active');
} else {
console.log('unactive');
}
}
$(function() {
$(".carbutton").click(function() {
$("#selectedwhip").addClass("active");
check();
});
});
Just noticed you have duplicate IDs carbutton and that makes it as a invalid markup creation. Every ID should have to be unique.
you have to be clear what do you want to do and when. because you're just executing a function immediately the page is ready
$(function() {
if ($("#selectedwhip").hasClass("active")) {
console.log('active');
}
else {
console.log('unactive');
}
});
the above code will check if selectedwhip it has active class in the first load of the page.
you have to attach this conditional to an event
I have a dropdown menu activated on click.
I use toggle to activate it when you click on the .hello_panel
HTML
<div class="container">
<div class="login_panel">
<div class="hello_panel">
<div class="hello_label">Hello </div>
<div class="hello_value">foofoo</div>
</div>
</div>
</div>
jQuery
$('.hello_panel').bind('click', function(){
$('.menu_popup').toggle();
})
if I click it it works fine, it does the show and hide effect when the .hello_panel
is clicked.
what I want is it to be shown if the .hello_panel is clicked and hidden back if when clicking anything else on the page except the .menu_popup
You can hide it whenever you click on the document
JavaScript
$(document).click(function () {
$('.menu_popup:visible').hide();
});
$('.hello_panel').bind('click', function (e) {
$('.menu_popup').toggle();
e.stopPropagation();
});
HTML
<div class="container">
<div class="login_panel">
<div class="hello_panel">
<div class="hello_label">Hello</div>
<div class="hello_value">foofoo</div>
</div>
</div>
</div>
<div style="display:none" class="menu_popup">menu_popup</div>
Demo
http://jsfiddle.net/6bo1rjrt/16/
Another way if you don't want to stopPropagation is passing a call back function that registers a once time click listener to that document to hide the menu
$('.hello_panel').bind('click', function () {
$('.menu_popup').show(function () {
$(document).one('click', function () {
$('.menu_popup:visible').hide();
});
});
});
Demo
http://jsfiddle.net/6bo1rjrt/17/
I'm trying to toggle a parent div when the div itself is being clicked. But I want to prevent child divs or elements from triggering the function. How can I do that?
//javascript (jquery enabled)
function toggle(parent_id) {
$('.'+parent_id).toggle();
}
<!-- html -->
<div class="parent parent1" onclick="toggle('parent1')">
<div class="child1"></div>
<div class="child2"></div>
</div>
<div class="parent parent2" onclick="toggle('parent2')">
<div class="child1"></div>
<div class="child2"></div>
</div>
Thanks!
UPDATE: I'm trying to toggle the specific div, hence using a function to pass the specific parent id.
ie. if I click on parent1, parent1 toggles;
if I click on parent2, parent2 toggles
The following should do the job:
$(".parent").click(function(e) {
if (e.target == this) {
$(this).toggle();
}
});
DEMO: http://jsfiddle.net/Md4U5/
That's easy, just extend #VisioN's answer, ensuring that all those divs have a class of parent:
$("[class~=parent]").click(function(e) {
if (e.target == this) {
$(this).toggle();
}
});