On hover functionality is not moving perfect. This is my code and when a mouse is placed over Details* text then whole div color changed to black. But the functionality is not working fine. I want whenever mouse is placed over details text then it should call the hover function but right now its not working fine. Any recommendations?
$('#disclaimer').hover(
function () {
$('#wrapper').addClass('hovered');
}, function () {
$('#wrapper').removeClass('hovered');
}
);
Try this :
script :
$('#disclaimer').hover(
function () {
$('#wrapper').addClass('hover');
}, function () {
$('#wrapper').removeClass('hover');
}
);
style :
.hover {
display : block;
background-color : black;
}
/* new css */
.hover #Image_Car { display: none; }
.hover #ctaBtn { display: none; }
.hover #Image_logo { display: none; }
.hover #headlineText { display: none; }
Fiddle : http://jsfiddle.net/U4EF8/7/
$("#searchput").hover(function() {
$('#wrapper').addClass("hover");
}, function() {
$('#wrapper').removeClass("hover");
});
Here is the Code :
$(document).ready(function(){
$( "#disclaimer" )
.mouseover(function() {
$('#wrapper').addClass('hovered');
})
.mouseout(function() {
$('#wrapper').removeClass('hovered');
});
});
and my html is :
<div id="wrapper"></div>
<div id="disclaimer" style="border:1px solid black;">
hello
</div>
Here is the working example : http://jsbin.com/heduqesu/2/edit , you can check in console that class is added and removed on mouse enter and mouse leave event . Hope this helps . Cheers!
did you already try this ?
$('#disclaimer').mouseenter(
function () {
$('#wrapper').addClass('hovered');
}
);
$('#disclaimer').mouseleave(
function () {
$('#wrapper').removeClass('hovered');
}
);
or with pure css
#disclaimer:hover {
//put any attribute on "hovered" class here
}
or maybe i don't understand your question enough.
Related
Hi I'm new to jquery and just trying to put a simple script together to show/hide my mobile menu on click. It works fine however, it only works once until you refresh your browser.
Jquery:
$(document).ready(function () {
//your code here
$(".nav").addClass("hidenav");
$(".menutrigger").click(function () {
$(".nav").removeClass("hidenav").addClass("slidenav");
$(".menutrigger").click(function () {
$(".nav").removeClass("slidenav").addClass("hidenav");
});
});
});
CSS:
#media (max-width: 767px) {
.slidenav {
display: block;
}
.hidenav {
display: none;
}
}
It is because you are defining multiple click events
This should work
$(document).ready(function()
{
//your code here
$(".nav").addClass("hidenav");
var flag = 0;
$(".menutrigger").click(function()
{
if(flag == 0)
{
flag = 1;
$(".nav").removeClass("hidenav").addClass("slidenav");
}
else
{
flag = 0;
$(".nav").removeClass("slidenav").addClass("hidenav");
}
});
});
declaring multiple onClick events won't work and will be overridden by last one. you can do all those things in on onclick callback by checking whether your class is there or not
$(document).ready(function () {
//your code here
$(".nav").addClass("hidenav");
$(".menutrigger").click(function () {
if ($(".nav").hasClass("hidenav")){
$(".nav").removeClass("hidenav").addClass("slidenav");
} else if ($(".nav").hasClass("slidenav")){
$(".nav").removeClass("slidenav").addClass("hidenav");
}
});
});
Have you tried toggleClass ?
$('.menutrigger').click(function (e) {
$('.demo').toggleClass("hidenav");
});
it will compress your code to just 1 line.
have a look at this fiddle
To know more about .toggleClass(). see the jQuery API doc
I want to change margin of one tag when mouse is hovered on its parent.
mouseIsOver() method doesn't making any change.
function der(){
if($(".experience-div li").mouseIsOver()){
$(".star").css('margin-right','10px');
}
}
der();
I changed it to is() method, still nothing has changed.
>
function der(){
if($(".experience-div li").is(":hover")){
$(".star").css('margin-right','10px');
}
}
der();
There is no mouseIsOver function in jQuery or the DOM.
You can use jQuery's hover:
function der(){
$(".experience-div li").hover(
function() {
$(".star").css('margin-right','10px');
},
function() {
$(".star").css('margin-right','auto'); // Or whatever it should be when not hovered
}
);
}
der();
I wouldn't recommend manipulating the style directly like that, though, I'd use a class:
function der(){
$(".experience-div li").hover(
function() {
$(".star").addClass('hovered');
},
function() {
$(".star").removeClass('hovered')
}
);
}
der();
With
.star.hovered {
margin-right: 10px;
}
Live Example:
function der() {
$(".experience-div li").hover(
function() {
$(".star").addClass('hovered');
},
function() {
$(".star").removeClass('hovered')
}
);
}
der();
.star.hovered {
margin-right: 10px;
color: red;
}
<div class="star">I'm the star</div>
<div class="experience-div">
<ul>
<li>Hover me</li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
To listen to events (such as mouseover) in jQuery you need to use the .on function:
$(".experience-div")
.on('mouseenter', 'li', function () {
$(".star").css('margin-right', '10px');
})
.on('mouseleave', 'li', function () {
$(".star").css('margin-right', '0');
});
You don't need to use JS to complete this. you simply need to add a :hover state to the class in question.
I have one question about Jquery hidden fuction.
I have two different Demo from codepen.io
First DEMO css animation will working. but .wrap is not to be hidden when i click second time .note a.
Second DEMO .wrap is hidden but not with animation. I want when i click .note a for close .wrap then .wrap going to be a hidden with css animation like first DEMO.
how about this
is this what you wanted?
$(document).ready(function() {
var circle = $('.circle');
var wrap = $('.wrap');
$(".note a").click(function(e) {
e.preventDefault();
$('.wrap').is(':hidden') ? $('.wrap').show() : setTimeout(function(){$('.wrap').hide()},500);
if (wrap.hasClass('bounceInUp')) {
wrap.removeClass('bounceInUp').addClass('bounceOutDown');
}
else {
wrap.addClass('animated bounceOutDown');
wrap.removeClass('bounceOutDown').addClass('bounceInUp');
}
if (circle.hasClass('bounceInLeft')) {
circle.removeClass('bounceInLeft').addClass('bounceOutRight');
}
else {
$('.circle').addClass('animated bounceOutRight');
circle.removeClass('bounceOutRight').addClass('bounceInLeft');
}
});
});
Use a setTimeout function http://codepen.io/akshay-7/pen/gbgYvx
$('.wrap').is(':hidden') ? $('.wrap').show() : setTimeout(function(){
$('.wrap').hide();
},2000);
Lets say I have 10 with red color on my page, and they have same class which is called 'myspan'.
Here is what I want:
Click an element, and then the clicked one change its color to green.
what I did:
<script>
$(document).ready(function(){
$('.myspan').click(function(){
aaa = !aaa;
if(aaa){
$(this).css('color','green');
} else {
$(this).css('color','red');
}
});
})
</script>
This works! It almost achieve what I want. When I click one element, it changes to green successfully. But I have to click twice for another red element to make it green. I hope you guys know what I mean if you watch the code. Does anyone have any idea about how to solve the problem?
You can use .toggleClass() instead.Try this:
$(".myspan").click(function () {
$(this).toggleClass("red");
});
CSS:
.myspan{ color: green; }
.myspan.red{ color: red; }
Working Demo
You need to have a state for each span separately so instead of using a common variable you can use the .data() api like
$(document).ready(function () {
$('.myspan').click(function () {
var $this = $(this),
aaa = $this.data('aaa');
aaa = !aaa;
$this.css('color', function () {
return aaa ? 'green' : 'red';
})
$this.data('aaa', aaa);
});
})
Demo: Fiddle
I would not use any variable, as long as your script's function is going to say that simple. Better try it like this:
Javascript:
$(document).ready(function () {
$('.myspan').click(function () {
if ($(this).hasClass('color-red')) {
$(this).removeClass('color-red').addClass('color-green');
} else {
$(this).removeClass('color-green').addClass('color-red');
}
});
})
CSS:
.myspan {
}
.color-red {
color:red;
}
.color-green {
color:green;
}
Working Fiddle: http://jsfiddle.net/2729p/
This saves the need to use a state saving variable and makes it more modular.
Try below code
<script>
$(document).ready(function(){
$('.myspan').click(function(){
var colorVal = $(this).css('color');
if(colorVal === 'red'){
$(this).css('color','green');
} else {
$(this).css('color','red');
}
});
})
</script>
You would be better off using toggleClass
<span class="myspan">Test</span>
JQuery:
$('.myspan').click(function () {
$(this).toggleClass("green");
});
CSS:
.myspan{
color: red;
}
.green {
color: green
}
Example
Im trying to make the divs change class from "normal" to "thin" ONLY if they have the class "normal". But somehow they just change back and forth, the IF statement seems to be written completely wrong :)
Here is the code
<div class="normal">1</div>
<div class="normal">2</div>
<div class="normal">3</div>
<div class="normal">4</div>
<div class="normal">5</div>
<div class="normal">6</div>
CSS:
.normal{
float:left;
height:200px;
width:100px;
border:1px dotted gray;
}
.thin{
float:left;
width:50px;
height:200px;
border:1px dotted gray;
background-color:#5a5a5a;
}
jQuery
$(document.body).click(function () {
$("div").each(function () {
if ($(this).hasClass("normal")) {
$(this).toggleClass("thin", 300); //Problem here?
} else {
this.style.color = "red";
}
});
});
#Egis as per your requirement the code should like below :
$(document.body).toggle(
function () {
$("div.normal").animate({
width: "50px",
}, "slow", function(){ $(this).addClass("thin"); });
},
function(){
$("div.normal").animate({
width: "100px",
}, "slow", function(){ $(this).removeClass("thin"); });
}
);
DEMO
I hope this is what you are looking for, Good Luck !!
ToggleClass (http://api.jquery.com/toggleClass/) will both add and remove the class. So instead, you want to remove the class "normal" and add the class "thin":
$(this).removeClass("normal").addClass("thin");
Regarding the animation, it looks like you are using the jQueryUI project (sorry I missed the tag, the first time around): http://jqueryui.com/toggleClass/ which allows you to specify an animation duration. With that in mind, you can include the durations:
$(this).removeClass("normal", 300).addClass("thin", 300);
You didn't remove the 'normal' class after you have first reached the code block of your if and your div will always have the 'normal' class, so your condition in your if will always be true.
Use removeClass for that purpose.
Also, if you want to change the class from 'normal' to 'thin', use the addClass for adding thin instead of toggle.
EDIT:
Maybe this is what you want:
$(document.body).click(function () {
$("div").each(function () {
if ($(this).hasClass("normal")) {
$(this).removeClass("normal");
$(this).addClass("thin");
}
else if ($(this).hasClass("thin")) {
$(this).removeClass("thin");
$(this).addClass("normal");
} else {
this.style.color = "red";
}
});
});