My question is similar to the one Robert Anderson asked. That was solved beautifully by David Thomas. Here's that JS Fiddle demo.
$('a.button').click(function(e){
e.preventDefault();
$('a.clicked').removeClass('clicked');
$(this).addClass('clicked');
});
But instead of toggling one link color on click, I'd like to toggle three separate colors for three separate link buttons, on each click returning the other links to their default color. Basically exactly what the JS Fiddle does, but toggling three classes rather than one. I'm still a jquery novice and can't make it happen.
More details: these are div links on the page's navbar, so the user isn't navigating to a new page. The idea is that the link button to div1 or div2 will be "lit up" or "colored" on the top nav bar to make clear what section the user is looking at.
http://jsfiddle.net/f36Wq/26/
Simple way - store the click class you want on a data tag on the link and then retrieve it for use.
$('a.button').click(function(e){
e.preventDefault();
$('a').removeClass('clicked clicked2 clicked3');
var $this = $(this), cls = $this.data('clckcls');
$(this).addClass(cls);
});
Related
I have an href link in a card div that creates a modal pop-up with all the information I need for a project. i'm currently trying to trigger the click even on that link whenever any part of the div is clicked. This is for a school assignment so I can only use Vanilla JS and JQuery. the card class is the div and the extra class is the link to click.
I've seen 'stop propagation' for these type of events but that's not quite what 'm looking for.
$(".card").click(function(){
$(this).$(".extra").trigger('click');
});
I get an error from the code at .$(".extra") trying to find the instance of the extra class in the specific div.
Please try:
$('.card').click(function(){
$(this).find('.extra').trigger('click');
});
I've been trying every single tutorial I found online and none seems to work for me.
I've got these buttons:
<a href='faq.php'><div class='button'>
<div class='button_top'>
</div>
<div class='button_bot'>
FAQ
</div></a>
http://jsfiddle.net/6G8bk/
and I'd like that the top of the button would stay highlighted if the page url is same as href of the button.
Ty for any answers in advance!
Here's the fixed jsfiddle with jquery I tried but still won't work: http://jsfiddle.net/6G8bk/4/
A few things:
In your jQuery, you're trying to select all <a> elements that have a parent class of button, and according to your HTML you do not have (the button class is a child of the <a> element).
The page's URL won't work in JSFiddle because it will get the JSFiddle link, which will be different from the one on your website.
Since you want button_top to be visible on hover, you'll need to use JavaScript. As fas as I know, you can't manipulate another element on hover with pure CSS.
Here is a working Fiddle of what I think you want. I've left comments in the code that might help you.
http://jsfiddle.net/6G8bk/6/
You can retrieve the current url page by using $_SERVER["SCRIPT_NAME"] and comparing it to each element of the menu.
If it match, you put another class in the menu element with CSS rules to have the layout you want.
I am developing a website and would like to add some jQuery functionality to a page. Basically, the page has a sidebar with a menu (showing all sections of this one page). I have added the functionality that when you click a menu item, the main section scrolls down to the proper section.
I've managed to add an active class on these menu items when they are clicked using jQuery. See:
$('#category-list li a').click(function(){
$('#category-list li a').removeClass("category-list-active");
$(this).addClass("category-list-active");
});
But I'd like to add the same functionality for when the user scrolls down the page (AKA when one section hits the top of the page, the corresponding menu item get's the active state class).
Since the site is in development for a client, I can't really show it but if I need to I can re-create something similar.
Thanks in advance,
Andy
You can try something like this
var fl = $("#your-section").offset().top;
$(window).scroll(function() {
if(this.scrollTop() > fl) {
// do your stuff
}
})
You may have to play with the offset to find the exact position where the transition should take place.
I have created a simple jquery popup.
Throughout my site I have several btns that each link to a different pop up.
My question:
Is there a way to link all buttons to there relevant popups without having to list every button and div by name as I begun to do so below?
Or alternatively the shortest way to list all buttons and divs without having to write the click event for each?
$(function() {
$('.Btn1').click(function(e) {e.preventDefault();
$('.Pop1').fadeIn();});
$('.Btn2').click(function(e) {e.preventDefault();
$('.Pop2').fadeIn();});
var modalBgd = $('.PopBgd')
$('.PopClose, .PopBgd').click(function(e) {e.preventDefault();
modalBgd.fadeOut();});
});
you could provide the id/class of the popup within a data element in the link like this:
open popup 1
open popup 2
that'll reduce your javascript to this:
$('.openpopup').click(function(e) {
e.preventDefault();
$($(this).data('popup')).fadeIn();
});
Depends on how your links/button/clickable elements look like. I would do something like this: select all of these elements and just apply the event handler to them e.g.
$(".popup").click(...);
You can use a more sophisticated selector to it but the idea is always the same. Remember that a element can have multiple classes to it.
I'm a bit new to jQuery and I have difficulties in achieving a function so I really hope somebody could guide me a bit. What I basically want to do is to highlight 2 elements simultaneously (via toggleClass).
Basically I have a repeating div (#post) which contains a title, thumb and description div. What I would like to do is once I hover on the title or the thumb div the elements to get a new additional class (xxxHover). So basically once the user hovers the mouse on the title/thumb div the title/thumb div (both of them) get a new class called (xxxHover where xxx stands for the div name - in this case titleHover/thumbHover).
I might not be the best in explaining so I've prepared a jsFiddle as well:
http://jsfiddle.net/yLqnd/12/
As you can see my problem is to restrict the scripts for the current element only (#post in our case). If it helps or matter I have to say that this will be integrated into a WordPress website (so the HTML structure is basically in the loop.php), that's why I would like to restrict the 2x highlight effect only per item (#post).
Thanks a mill in advance for any idea!
http://jsfiddle.net/oscarj24/yLqnd/13/
Here's an updated jsFiddle:
Instead of being so specific, any div's inside will now toggle the class
jsFiddle Link
Basically I pushed it all together:
$(".post div").mouseover(function(){
$(this).closest('.post').find('div').toggleClass('thumbHover');
}).mouseout(function(){
$(this).closest('.post').find('div').toggleClass('thumbHover');
});
I think you can get the effect you're looking for by using .siblings() in jQuery.
$(".title").mouseover(function(){
$(this).toggleClass("titleHover");
$(this).siblings(".thumb").toggleClass("thumbHover");
});
This will limit the toggleClass to only the .thumb that resides in the same .post.
http://api.jquery.com/siblings/
simples, just do it on the parent of both elements:
$(".post").mouseover(function(){
$(this).find('div').toggleClass('thumbHover');
}).mouseout(function(){
$(this).find('div').toggleClass('thumbHover');
});