jQuery addClass on click to specific element - javascript

I am trying to animate a menu item.
On move over it expands left, and on mouse out it contracts back.
This works fine.
I am also trying to add a class on click to give the button a specific color but it doesn't seem to work.
Here is a fiddle http://jsfiddle.net/g3ra912j/
css:
#menu1 .active {
background-color: #00f;
}
script:
$("#menu1").click(function () {
$(this).toggleClass("active")
})
onclick it supposed to turn blue, but it doesn't.
What am I doing wrong?
Thanks

You have an extra space in your CSS. Should be
#menu1.active {
background-color: #00f;
}
since you are adding the class .active to the same element as has the id menu1. The original CSS would target an element with class .active inside #menu1.

i had to deal with the same problem. use addClass('active') instead toggleClass. just have an if condition to check if the element already has active class before adding active class
let me know if it works.
and about the css bobdye was right

Related

Is there a css equivalent of onclick from the html element? [duplicate]

This question already has answers here:
Can I have an onclick effect in CSS?
(14 answers)
Closed 6 years ago.
In javascript, you can easily execute onclick events directly from the html element:
<div onclick="..javascript here.."></div>
I know that you can change the css styles with the <style> tag, but I was wondering if you were able to execute it similarly to the example below:
<div onclick="..css here.."></div>
if you want to do it purely through css you have to use :active or maybe :focus:
div:hover { color: red; } /* mouse-over */
div:active { color: red; } /* mouse-down (this cause also focus) */
input:focus{ color: red; } /* got focus (by tab key or mouse-down) */
/* for <a> element: */
a:link { color: red; } /* unvisited links */
a:visited { color: red; } /* visited links */
Note: the :active does not stay permanent after the user release the mouse button for elements that does not take focus (like as a div) but it works for elements like as text inputs or buttons. there is a workaround for it called "Checkbox Hack" where you use a connected label and checkbox input and some other element you are trying to control..
Also, if you want to change css class or inline styles, you could do as following:
<div onclick="this.style['border'] = '2px solid red';">Click me</div>
There is, but the element needs to have a tabindex attribute.
With a tabindex on the element you can use:
element:focus {
/* some_CSS; */
}
'some_CSS' will kick in when the element is clicked.
You can use javascript to change the style of a div or any other element. But I donot know whether there is a way to change css by onclick event without using javascript.
I can explain my method.
<script>
function change_css(){
document.getElementById('change_css').className='newClassName';
}
</script>
<div onclick="change_css()" class="initial_class">content</div>
The above code will help you change the style by changing the class, provided you have already created a class with css. It replaces all the previously provided classes for that div and add the new one.
To add an additional class to the div without replacing the existing classes, use the following statement in javascript:
document.getElementById('change_css').className+=' newClassName';

How to make one element get hovered when hover on other element

I need such a scenario at where if anyone hover on a div, another div will be hovered. Just like:
HTML
<div class="box"></div>
<div class="link-box">
Touch the Grey Box and I get hovered!
</div>
CSS:
.link-box a:hover {
color: red;
}
Foddle Work
If anyone hover on the div.box, div.link-box will get hovered I mean get the red color. Is it possible? Please, don't tell it like this CSS way:
.box:hover .link-box a {
color: red;
}
My scenario is not like this. I've more complex scenario. So, it's only possible with jQuery. As I ain't good at jQuery, I can't write the script. That's why I need your help. What's the jQuery for it? May be, something like this?
$('.box').hover(function(){
$('.link-box').hover();
});
..............................................Update..................................
All the answer is related with CSS. Basically, div.link-box is such a complex div at my webpage that if anyone hover on the div.link-box many action happened, like pop-up box coming, multiple child elements of div.link-boxwill change. All happened with jQuery + CSS. And I need all the hover action of div.link-box when anyone hover on div.box. I just make here div.link-box as a link to make you understand my problem. But, basically it's not just css change. So, is it possible to bring all div.link-box hover action by hover on another div/button/link just like div.box by jQuery ?
As long as they stay in the same layout you can use the adjacent selector (+) in css.
Updated Fiddle
.link-box a:hover, .box:hover + .link-box a{
color: red;
}
The important thing to remember about the adject selector is that the two divs have to have the same parent, and the box has to immediately precede the second div.
More information on the adjacent selector
Edit:
Another option would be to wrap both divs in another div, and use the hover of the wrapper div.
This second option doesn't have the drawbacks of using the adjacent selector. As long as the anchor is anywhere inside of the wrapper, it will be styled when any part of the wrapper is hovered.
FIDDLE
Like so:
<div class='box-wrapper'>
<div class="box"></div>
<div class="link-box"> Touch the Grey Box and I get hovered!
</div>
</div>
with the following style:
.box-wrapper:hover a {
color: red;
}
Create a CSS class called "hover" (to affect you a make it .hover a)
.hover a
{
color: red;
}
Then your JQuery would read:
$('.box').hover(function(){
$(".link-box").toggleClass("hover");
});
Instead of the :hover css selector, I would use classes.
CSS:
.hover{
color:red;
}
JS:
$('.box').hover(
function(){
$('.link-box').addClass('.hover');
},
function(){
$('.link-box').removeClass('hover');
}
);

Javascript/Jquery on event trigger <div class=>

I've got a text/html slideshow with Javascript however upon cycling of new text I also need the script to trigger the :hover class on the menu item corresponding to the content present in the slideshow.
For a visual example please see: http://i.stack.imgur.com/mkyMJ.png
I've uploaded the JS code to http://pastebin.com/Kp4a7VXP for viewing.
Would really appreciate your help on this guys! :)
Thanks so much!
Kind Regards,
Jake
It may not make sense to try to mimic the hover state, so it may be better to have a css class such as .active added to the element you want the hover state for, and then include the css from the hover state in that class.
I'm assuming you have a CSS like
.item{
/* normal appearance */
}
and
.item:hover{
/* appearance when mouse over */
}
but as far as I know, there's no way to trigger the pseudo class :hover via javascript. But you can use a standard class for this like (but for semantics I would name it like .currentSlide or .activeSlide)
.item:hover,
.item.hover{
/* appearance when mouse over
or selected */
}
and then you can add and remove that class using javascript for the current slide element, like:
currentSlideDiv.classList.add("hover");
EDIT:
You can use a function like this, and call highlightCurrentSlideName(currentContentItem); inside NextClick() and PreviousClick()
function highlightCurrentSlideName(slideIndex){
var slideNameList = jQuery('.contentmenu a');
jQuery(slideNameList).removeClass('current'); //unhighlight all slide names
var currentSlide = slideNameList[slideIndex]; //select a slide name by a numeric index
jQuery(currentSlide).addClass('current'); //highlight that element
}
and add a class on your CSS file, and style it whatever you want.
.contentmenu a.current{
color: lightblue;
background-color: gray;
}
PS: I'm not a jQuery programmer I always write pure javascript, just noticed you have it there already.

Change Unordered list item's color on focus?

How can we change an unordered list's item color when it is focused with tab or clicked with mouse using CSS ?
Edit:
Check JSFiddle
.form li input:focus
{
background-color:yellow;
}
Check that...
If your interested, this jQuery may work, please someone step in and correct it if its wrong!
$(".form li input").click(function(){
$(this).closest("li").css("background-color","yellow");
});
$(".form li input").blur(function(){
$(this).closest("li").css("background-color","white");
});
I don't know if it is possible with focussed list-items, because I guess it's not intended to be focussed. One thing you could do is to change the color on mouseover:
li:hover { color: #F00; background-color: #0F0; }
IF so try to use glowing tab .. which is newest and fastest technique to change hover tab.. IT will take position as argument. on hover event.
Here is your pure CSS solution http://jsfiddle.net/Starx/a93Rb/, only compatible with FF for now. You can make it compatible for the remaining browsers.
$( document ).ready(function()
{
// catch a click on any of the <li> items
$('li').click(function(){
// store a reference to the specific <li> that
// was clicked.
var $li = $(this);
// toggle the class (if it's applied, it's removed.
// if it's removed, re-apply it)
$li.toggleClass('highlight');
// Remove below code so that on click the highlight will be fixed
// Now, if it's applied, remove the class from any
// other <li> (single item clicked at a time)
if ($li.hasClass('highlight')){
$li.siblings().removeClass('highlight');
}
});
});

Show and Hide a DIV with CSS or Javascript?

I just saw a demo that had this jquery code to show and hide a dive on hover, can't this be done with just regualr css though? And if you can do it with css is there any advantage of doing it with javascript?
$('.comment').hover(function() {
$(this).children('.delete').show();
}, function() {
$(this).children('.delete').hide();
});
CSS hover works fine with anchor tags, but IE6 does not recognize hover events on things like li tags.
If you were using an anchor tag, however, you could achieve the same effect in CSS:
a.comment .delete { display: none; }
a.comment:hover .delete { display: block; }
You can do this with CSS but IE6 only supports the :hover pseudo-class on anchor tags (A), so it's not as common.
Jody is correct. Check out the docs for the CSS Display property.
There is more functionality that the .hover will do. If you provide it more than 2 functions it will cycle through all the functions.
Example
$('.comment').hover(
function(){$(this).children('.delete.first').show()},
function(){$(this).children('.delete.first').hide()},
function(){$(this).children('.delete.second').show()},
function(){$(this).children('.delete.second').hide()}
);
That would show one set of children the first time they hover, then hide, and the next time show a different set of children.
The hover function also works over multiple elements, and only fires if the mouse has left all the elements (not just when it leaves one and moves to another)
I dynamically create something like this on the server side. I'm sure there is a more efficient/prettier way but this usually serves my needs. Basically hides all the divs and un-hides the one that needs to be shown (passed as arg in function from onClick event).
function toggleTab(id)
{
document.getElementById('divEnrollment').style.display='none';
document.getElementById('divSearch').style.display='none';
document.getElementById('divMeeting').style.display='none';
document.getElementById('divBenefit').style.display='none';
document.getElementById('div' + id).style.display='block';
document.getElementById('spnEnrollment').style.color='blue';
document.getElementById('spnSearch').style.color='blue';
document.getElementById('spnMeeting').style.color='blue';
document.getElementById('spnBenefit').style.color='blue';
document.getElementById('spn'+id).style.color = 'red';
}

Categories