How can I achieve this behaviors onclick with jquery :
default state:
Anchor
click state
<div class="highlight">
Anchor
</div>
Well, you can use the jQuery "wrap" function:
$('#idOfAnchor').click(function(a) {
$(a).wrap($('<div/>').addClass('highlight'));
});
That seems like kind-of a funny idea however. Why not just add the class directly to the <a> element itself?
Oh sorry - your question says "clicked" but the explanation says "hover". That's going to be a little trickier, because you're going to want to get rid of that extra div when you mouse out. Again, if this were my page, I just wouldn't do that at all. What is it that you're trying to achieve?
edit again: ok now it says "click" again :-)
Fastest way to do this:
$('a').click(function() {
$(this).wrap($('<div/>', { 'class': 'highlight'}));
});
However, this is probably what you want, much simpler just use whatever CSS effect you want:
$('a').click(function() {
$(this).addClass('highlight'});
});
Checkout jQuery's wrap function.
$(this).wrap('<div class="highlight"></div>');
Why don't you just style a:hover?
Something like this in CSS:
.highlight a {
/* style */
}
.highlight a:hover {
/* hover style */
}
Then change your HTML to:
<a href="something.html" class='highlight'>Anchor</a>
Related
I seem to be struggling with this.
Im want to make other elements change with button hover.
what im trying to do is , when you hover on the "continue reading" button on the homepage , then for the title and post meta to change color.
The site url is:
http://staging.conversationlab.com/lions_valley/
You can use the hover() method on the more links to trigger a function that applies or removes styling to their siblings like...
$(".more-link").hover(
function() {
$(this).addClass("your-class-with-styling");
$(this).siblings(".post-meta").addClass("your-class-with-styling");
$(this).siblings("h2").addClass("your-class-with-styling");
},
function() {
$(this).removeClass("your-class-with-styling");
$(this).siblings(".post-meta").removeClass("your-class-with-styling");
$(this).siblings("h2").removeClass("your-class-with-styling");
}
);
I would probably add a class to the h2 to target, though, to make sure that it wouldn't conflict with any other h2s that MAY end up in those article sections at some point in the future.
You probably just need to add some css:
<style>
#buttonid:hover {
background-color:#ff0000;
}
</style>
where the #buttonid is declared on your button:
<button id="buttonid"> my button</button>
more info = better answer/s
You can see here how to do it. https://jsfiddle.net/5aybmjk7/
Basically I just added an ID / additional class to your code and then attached the relevant jquery that used mouseover and mouseout to highlight/unhighlight the title by adding or removing a class with CSS attached to it.
$('#here').mouseover(function () {
$(".highlightMe").addClass('colored');
});
$('#here').mouseout(function () {
$(".highlightMe").removeClass('colored');
});
jQuery('.et_pb_posts article').find('.more-link').on('hover', function() {
jQuery(this).find('.post-meta a').addClass('YOUR_CLASS')
});
Try that
This is a question that is related to a previous question of another member which can be found here.
This is the Javascript function to hide a div (which is an answer to the other member's question):
function hide(obj) {
var el = document.getElementById(obj);
el.style.display = 'none';
}
The HTML is:
<div id='hideme'>
Warning: These are new products
<a href='#' class='close_notification' title='Click to Close'>
<img src="images/close_icon.gif" width="6" height="6" alt="Close" onClick="hide('hideme')" />
</a>
</div>
My followup question to this is: how can I add a cool effect of transition? The result will be the div 'hideme' would close slowly. Is there a work around for this?
Thanks so much everyone! It would be highly appreciated!
Note: I'm a noob with Javascript. 0-0
$("#"+el).fadeOut(500);//el must be the id of the element
If you're using jQuery
function hide() {
$(this).parent().fadeOut();
}
As this is triggered by an event the 'this' variable will be set to the element from which it came, as you want the parent element to vanish when it's clicked this will do the trick
EDIT: For this to work you may have to play with your HTML and how many $(this).parent().parent()... you need but this would be the best way to go about it, then you don't need to pass the ID around
EDIT 2: So .parent() selects the element containing the selected element, so in this case $(this) refers to the button that was clicked as that's where the click event came from.
So $(this).parent() refers to the container element, in this case the a element and therefore the $(this).parent().parent() refers to the div element which you want to hide.
So you could give the image a class of 'closable' then do the following
$('.closable').click(function() {
$(this).parent().parent().fadeOut();
}
This means whenever you click something with the class closable it will go up the DOM tree two elements to (with .parent().parent()) and then fade it out.
This will allow you to remove the on click event from the image, you just need to put the handler above in the jQuery document.ready function which looks like:
$(document).ready(function() {
//Click function here
});
A popular choice for this would be JQuery UI's effect method.
With this, you can write some very simple Javascript to hide your div in a stylish manner, for example:
function hide(obj) {
$(obj).effect("scale");
}
EDIT:
Here's an example jsFiddle
Use jQuery to do transition effects:
$(function(){
$("a.close_notification").click(function(e){
e.preventDefault();
// stop other animations and hide, 500 milliseconds
// you can use the function fadeOut for that too
$("#hideme").stop().hide(500);
});
});
Let me define the problem a little bit more:
i have
<div class="contact">
<div id="form"></div>
<div id="icon"></div>
</div>
i want onclick on #icon, to change the class of .contact to .contactexpand( or just append it).
Then i want that the on body click to change the class back, but of course that shouldnt happen when clicking on the new class .contactexpand, and if possible that clicking on icon again changes the class back again.
I tried numerous examples and combinations but just couldn't get the right result and behavior.
Check this: Working example
Let's go step by step
I want onclick on #icon, to change the class of .contact to .contactexpand( or just append it). […] and if possible that clicking on icon again changes the class back again.
You want to use the toggleClass() method to achieve this. Simply:
$('#icon').on('click', function(e){
$(this).parent()
.toggleClass('contact')
.toggleClass('contactexpand');
});
Then i want that the on body click to change the class back
You will have to make sure that body removes contactexpand class and adds contact. At this point I would just give the container element an id (or class if you prefer), just to make things simpler. Then what you do is pretty simple:
$('body').on('click', function(e){
$('#thisdiv')
.removeClass('contactexpand')
.addClass('contact');
});
but of course that shouldnt happen when clicking on the new class .contactexpand.
This is the step that the other answers missed, I think. Since everywhere you click, you also click on the body element, you will always trigger the click event on the body, hence removing the contactexpand class and adding the contact one.
Enter event.stopPropagation(). This method will make sure that the events doesn't bubble up the DOM, and will not trigger the body click.
$('#thisdiv').on('click', function(e){
e.stopPropagation();
});
Working example
You can add a class to parent element like the following code.
$(".contact #icon").click(function(){
var element = $(this).parent(".contact");
element.removeClass("contact").addClass("contactexpand");
});
I like to the jQuerys toggleClass function like so:
$('#icon').click(function(){
$('#contactbox').toggleClass('contact');
$('#contactbox').toggleClass('contactexpand');
});
Or you could use addClass('className') and removerClass('className') if you would like to apend it rather than toggle it :)
Here is an example: http://jsfiddle.net/aUUkL/
You can also add an onclick event to the body of the page and use hasClass('className') to see whether or not to toggle the class when the body is clicked. You could use something like this (Although I havent tested this bit!):
$('body').click(function(){
if( $('#contactbox').hasClass('contactexpand') ){
$('#contactbox').addClass('contact');
$('#contactbox').removeClass('contactexpand');
}
});
You can do this
$('body').on('click', function(event) {
if ($(event.target).attr('id') == 'icon') {
$(event.target).parent().toggleClass('contactexpand');
} else {
$('.contact').removeClass('contactexpand');
}
});
Check out this jsfiddle
var $contact = $('.contact');
$contact.find('#icon').click(function(e, hide) {
e.stopPropagation();
$contact[hide ? 'removeClass' : 'toggleClass']('contactexpand');
});
$(document).on('click', function(e) {
if (e.srcElement === $contact[0]) return;
$contact.find('#icon').trigger('click', true);
});
http://jsfiddle.net/kZkuH/2/
So i have:
#selection_menu .secondary_options button:hover { color: #000066; }
and it works great on my site..
When one of these buttons is clicked, however, i run a javascript function that contains:
$('button').css("color","#FFFFFF");
if(!$sameTile)
$($tileSelector).css("color","#000066");
So that when the button is clicked, the highlight color sticks when the mouse is moved away.
The problem i am having is that after this is run for the first time, the buttons stop changing color when highlighting. How can i get around this? Or is this normal behavior?
I am trying to add a class and i can't get it to work: http://jsfiddle.net/sUKkb/1/
Some more of my code:
index: http://pastebin.com/7gYu9YG8
css: http://pastebin.com/Jz1bvzrr
Or this might be more helpful: http://staging.easyzag.com/style.css
view-source:http://staging.easyzag.com/index.php?section=drink
The issue here is that your jQuery is adding an inline style which will override the rule from your CSS. The other issue is $('button').css('color','#000666') is going to apply inline styles to ALL buttons.
I would suggest adding a rule in your CSS for the defaults and the sticky state like this:
button { color:#fff }
button:hover { color:#fff }
.sticky-state { color:#000066 }
Then in your jQuery you do this instead of what you're doing:
`$(/*add your selector here*/).addClass('.sticky-state');
I believe this is (generally) what you're after:
jsFiddle: http://jsfiddle.net/sUKkb/5/
HTML:
<button class="not-sticky">Hello</button>
JS:
$('button').on('click', function(e){
$(this).removeClass('not-sticky').addClass('sticky-state');
});
Note, this does require a relatively new version of jQuery (1.7+). You could also use:
$('button').live('click', function(e){
$(this).removeClass('not-sticky').addClass('sticky-state');
});
or
$('button').click(function(e){
$(this).removeClass('not-sticky').addClass('sticky-state');
});
for older versions of jQuery.
you can do it without jquery if that's giving you trouble.
add an onmouseover and an onmouseout handler for the hover effect and add an onclick that first cancels the onmousover and onmouseout and then sets the desired color.
Try this;
in your CSS;
.new_class{
color:#000066
}
in your JS
$('button').css("color","#FFFFFF");
if(!$sameTile){
$($tileSelector).removeClass()('.your_previous_class');
$($tileSelector).addClass('.new_class');
}
or you may try
$($tileSelector).css({ 'color':'#000066' });
here is the fiddle http://jsfiddle.net/sUKkb/2/ (without class)
and this one http://jsfiddle.net/sUKkb/3/ (with class)
and this one http://jsfiddle.net/sUKkb/4/ using ID instead of class to make buttons unique
And I think, what you want is a toggle solution like the fiddle below;
http://jsfiddle.net/sUKkb/7/
The setting is easy; I want to be able to add a class to (in this case) a button when onClick-event is fired. My problem is that I haven't found a way to pass the button itself as the parameter to the function. I'd like to do something like:
<asp:Button ID="Button" runat="server" onclick="addClassByClick(this)"/>
And then a javaScript function something like this:
function addClassByClick(button){
button.addClass("active")
}
I know I've got a lot of errors here, but that's why I'm posting. I've tried different scenarios with jQuery and without jQuery but I always end up with a broken solution (clicks suddenly stop coming through, class not added etc etc) so I decided to ask the pro's.
Any suggestion to what I can try? Thanks for reading editand all the help!
It needs to be a jQuery element to use .addClass(), so it needs to be wrapped in $() like this:
function addClassByClick(button){
$(button).addClass("active")
}
A better overall solution would be unobtrusive script, for example:
<asp:Button ID="Button" runat="server" class="clickable"/>
Then in jquery:
$(function() { //run when the DOM is ready
$(".clickable").click(function() { //use a class, since your ID gets mangled
$(this).addClass("active"); //add the class to the clicked element
});
});
Using jQuery:
$('#Button').click(function(){
$(this).addClass("active");
});
This way, you don't have to pollute your HTML markup with onclick handlers.
$(document).ready(function() {
$('#Button').click(function() {
$(this).addClass('active');
});
});
should do the trick.
unless you're loading the button with ajax.
In which case you could do:
$('#Button').live('click', function() {...
Also remember not to use the same id more than once in your html code.
$('#button').click(function(){
$(this).addClass('active');
});
Try to make your css more specific so that the new (green) style is more specific than the previous one, so that it worked for me!
For example, you might use in css:
button:active {/*your style here*/}
Instead of (probably not working):
.active {/*style*/} (.active is not a pseudo-class)
Hope it helps!