setTimeOut and hover - javascript

I was playing around with learning some JavaScript and this small code didn't work for me. If I take out the setTimeout function, the hover works again.
Why doesn't the hover work?
https://jsfiddle.net/jzhang172/1n8gqeom/
setTimeout(
function(){
$(".div").css("background","blue");}, 100);
.div{
background:black;
height:50px;
width:50px;
}
.div:hover{
background:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div"></div>

$(".div").css("background","blue");}, 100);
With this line of code, you are adding inline style to the .div, so it has higher specificity.
Try something like this:
setTimeout(
function() {
$(".div").addClass('someClass');
}, 100);
.div {
background: black;
height: 50px;
width: 50px;
}
.div:hover {
background: red;
}
.someClass {
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div"></div>

css priority。 inline style > class style, so, cover
.div:hover{
background:red !important;
}

Related

jQuery timed notification onclick

I'm looking to have the fade animation happen plus have the height of .hideme also growing from 0px to 30px during the ().delay(2000).
Instead of .hideme appearing as display: block; on click, I want it's height to go from 0px to 30px for ().delay(2000) while also keeping the fade animation.
$(document).ready(function() {
$("#post-draft1").hide();
$("#post-button1").click(postNotification);
});
function postNotification() {
$("#post-draft1").fadeIn("slow").delay(2000).fadeOut("slow");
}
.hideme {
background: blue;
height: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="post-button1">Save Click</button>
<div class="hideme" id="post-draft1">This is a test div</div>
$(document).ready(function() {
$("#post-draft1").hide();
$("#post-button1").click(postNotification);
});
function postNotification() {
// $("#post-draft1").fadeIn("slow").delay(2000).fadeOut("slow");
$("#post-draft1").show().animate({height: '30px',opacity: 1},1000).delay(2000).animate({height: '0px',opacity: 0},1000);
}
.hideme {
background: blue;
height: 0px;
opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="post-button1">Save Click</button>
<div class="hideme" id="post-draft1">This is a test div</div>
To animate the height you could use the .animate() jQuery method.
$('.hideme').animate({height:'30px'});
But first, you have to set the height to a minor value:
.hideme {
background: blue;
height: 0px;
}
Instead of .delay() you could use the callback of fadeIn to animate the height of .hideme when fadeIn completes:
$("#post-draft1").fadeIn("slow", function(){
$('.hideme').animate({height:'30px'});
});
See: http://api.jquery.com/animate/

'toggleClass` - how to `toggle` between 2 different `class` names

I would like to toggle 2 different classes. (A b), but i am not getting the result.
what is the issue with my code?
$('button').on('click', function () {
$('div').toggleClass("A B");
});
div{
height:20px;
}
.A{
border:1px solid red;
}
.B{
border:1px solid blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
<button>Color Change</button>
Give your div a 'starter' class. Otherwise the first will 'toggle both on', the next 'toggle both off' etc.
Since both are setting the border, the last applied class is being used, whilst the other is being ignored, so hence you won't see the 'red' border.
Think of it like toggling between one class - on or off. If you start with no class, then the button will add the class (understandably).
If you're toggling with two classes, the same rules apply. You start with both off, then the button will toggle both on - and due to the order of css applied/specificity of css, the second will overwrite the first css definition.
So, in order to 'switch', you need to start with one in the 'on' position, and one in the 'off' position. And there you go! once the button is pressed, one will toggle from on to off, and the other vice versa.
$('button').on('click', function() {
$('div').toggleClass("A B");
});
div {
height: 20px;
}
.A {
border: 1px solid red;
}
.B {
border: 1px solid blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="A"></div>
<button>Color Change</button>
$('button').on('click', function () {
$('div').toggleClass("A B");
});
div{
height:20px;
}
.A{
border:1px solid red;
}
.B{
border:1px solid blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="A"></div>
<button>Color Change</button>
No need to toggle both the classes. One class you need to assign and another class you can toggle.
HTML
<div class="A"></div>
<button>Color Change</button>
JQUERY
$('button').on('click', function () {
$('div').toggleClass("B");
});
CSS
div{
height:20px;
}
.A{
border:1px solid red;
}
.B{
border:1px solid blue;
}
JSFIDDLE DEMO
If you seen here the logic is simple. When you click the button it add the additional class called B into the div. Once you click the button your div code will become like this <div class="A B"></div>
So it is important that the order of A and B in your CSS. For example if you move B class to the top of A class then you won't get the desired result.
Not working CSS:
div{
height:20px;
}
.B{
border:1px solid blue;
}
.A{
border:1px solid red;
}
Otherwise you can use the important keyword, so that it will not worry about the order, but not good in the practice.

jQuery toggleClass doesn't switch class

i've been trying to understand toggleClass function by making this simple script, yet it didn't work the way I expected it to.
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<style type="text/css">
body {
font-family: "Kozuka Gothic Pro";
}
.red {
background: red;
}
.blue {
background: blue;
}
div {
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div class="blue"></div>
<script>
$("div").click(function() {
$(this).toggleClass("red");
});
</script>
</body>
However, if i changed the div class to red and the toggleClass argument to "blue" it works, can anybody explain me this? I'm hoping to hear from you. Thanks in advance!
You need to add both blue and red class in toggleClass function to change both like,
$("div").click(function() {
$(this).toggleClass("red blue");
});
$("div").click(function() {
$(this).toggleClass("red blue");
});
body {
font-family: "Kozuka Gothic Pro";
}
.red {
background: red;
}
.blue {
background: blue;
}
div {
width: 200px;
height: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="blue"></div>
What happens when you use only red in togleclass function then it will applied but the change would not overwrite because of the blue class and the blue background shown as it is. So, if you want your code to work then in that case you need to use !important in red-background like,
.red {
background: red !important;
}
$("div").click(function() {
$(this).toggleClass("red");
});
body {
font-family: "Kozuka Gothic Pro";
}
.red {
background: red !important;
}
.blue {
background: blue;
}
div {
width: 200px;
height: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="blue"></div>
Note that I am just informing you (by second alternative) why your code was not working. You must go with my first option.
$("div").click(function() {
$(this).toggleClass("red");
$(this).toggleClass("blue");
});
body {
font-family: "Kozuka Gothic Pro";
}
.red {
background: red;
}
.blue {
background: blue;
}
div {
width: 200px;
height: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="blue"></div>
$("div").click(function() {
$(this).toggleClass("red");
$(this).toggleClass("blue");
});
Try this : pass both red and blue class, it will remove if present and add if not. So for first time it will add red but will remove blue.
$("div").click(function() {
$(this).toggleClass("red blue");
});
The toggleClass() method toggles between adding and removing one or more class names from the selected elements.
This method checks each element for the specified class names. The class names are added if missing, and removed if already set - This creates a toggle effect.
Explanation Below
it act as - if div have class "red" then REMOVE class "red" else ADD "red" class from div
The problem arises due to order of the css styles, as last css style will affect the output, so as css on class blue is declared last, so blue class is given precedence over red class.
So, to solve this, you should try to have only one class on the div, so that the order of the css should not matter.
$("div").click(function() {
$(this).toggleClass("red blue");
});
The toggleClass() will remove the class if it is assigned to the element, or it will add it if it is not assigned to the element. Try this snippet as a demo:
$(document).ready(function() {
$("div").click(function() {
if ($(this).hasClass("red")) {
alert("I am red! I'm turning red off.");
$(this).toggleClass("red");
} else if ($(this).hasClass("blue")) {
alert("I am blue! I'm turning blue off.");
$(this).toggleClass("blue");
} else {
alert("I am blank! Turning red on.");
$(this).toggleClass("red");
}
});
});
body {
font-family: "Kozuka Gothic Pro";
}
.red {
background: red;
}
.blue {
background: blue;
}
div {
width: 200px;
height: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="blue"></div>

Make text fade in and stay visible until mouse leaves the container

I'm tying to make text fadeIn and stay visible while the mouse pointer is in the container and only when the mouse pointer leaves the designated area, only then must the text fadeOut but for some reason its not working, the text will fadeOut even when the mouse is inside the container.
I'm using Jquery lib 1.10.1 as well as Jquery ui 1.11.0
Here is the code:
HTML
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<div class="hold">
<div class="conti">
<div class="arrow-right"></div>
</div>
<div class="text-fade"></div>
</div>
CSS
.hold{
width: 142px;
background: yellow;
overflow: hidden;
padding:10px;
}
.conti{
width: 30px;
}
.arrow-right {
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid green;
}
.text-fade{
display: none;
float: right;
margin-top:-30px;
margin-left: 10px;
margin-right:10px;
}
JS
$('.hold').mouseenter(function () {
$('.arrow-right').effect("bounce", { direction:'right', times:3 }, 700);
$('.text-fade').text("this is a test text").fadeIn(1000).css('display',"block");
});
$('.hold').mouseout(function () {
$('.text-fade').fadeOut(1000);
});
This is the link to my fiddle example
mouseout is triggered by children, use mouseleave instead
$('.hold').mouseenter(function () {
// var d = $('.arrow-right');
// d.effect("bounce", { direction:'right', times:3 }, 700);
$('.text-fade').text("this is a test text").fadeIn(1000);
});
$('.hold').mouseleave(function () {
$('.text-fade').fadeOut(1000);
});
JS fiddle updated
Put the text directly into ".text-fade" and give some transition to the ".text-fader" class. Then change the text color via JS.
Here's the code for changing from #FFFFFF to #000000 and back again:
$('.hold').mouseenter(function () {
$('.arrow-right').effect("bounce", { direction:'right', times:3 }, 700);
$('.text-fade').css('color', '#000000');
});
$('.hold').mouseout(function () {
$('.text-fade').css('color', '#FFFFFF');
});
You are using the wrong functions, its mouseenter() and mouseleave()
working fiddle here
your javascript
$('.hold').mouseenter(function () {
$('.text-fade').text("this is a test text");
$('.text-fade').fadeIn(1000);
$('.text-fade').show();
});
$('.hold').mouseleave(function () {
$('.text-fade').fadeOut(1000);
});
also that bounce function you had seems to cause some problems that I could not find out why so I removed it

container width much larger then content

I have a bunch of content that floats left in a container, and I'd like for the container to hug the content, but for some reason it's much wider then the content and I have no idea why. I have it set up in a fiddle here http://jsfiddle.net/vG8NY/6/ the red and blue bordered containers should hug the right edge of the circle.
The code is very simple and is as follows:
HTML:
<div class="hot_spot-container">
<div class="content-spot">
<img class="hotspot-cir" src="http://www.klossal.com/sixred/discovery/images/hotspot-left.png" />
<div class="hotspot-content"></div>
<img class="hotspot-cir" src="http://www.klossal.com/sixred/discovery/images/hotspot-right.png" />
<br class="clear-fix" />
</div>
</div>
CSS:
.hot_spot-container {border:1px solid blue;
position:absolute;
}
.content-spot {
border:1px solid red;
display:inline-block;
}
.hotspot-cir {
float:left;
height:100%;
width:auto;
}
.hotspot-content {
float:left;
background:#ec6e47;
}
.clear-fix {
clear:both;
}
JS
$(".content-spot").css({
height:$(window).height() * ".2"
});
try this:
$(".content-spot").css({
height:$(window).height() * ".2",
width:$(window).height() * ".2"
});
when you change height of content-spot it's width still fixed and need to get resize too.
DEMO
you can use this code too:
$(".hotspot-cir").css({
height:$(window).height() * ".2"
});
DEMO
You must define the width for the element to which you have set the position: absolute; so you should use something like this:
.hot_spot-container {border:1px solid blue;
position:absolute;
/* any width you want or if you don't know the width then define auto.*/
width: 45px;
}
if you make
.hot_spot-container {display:inline-block}
instead of it having position:absolute it does what you want it to. if you want position absolute you need to give it a width
Try this
I removed your javascript and made this changes
.content-spot {
border:1px solid red;
display:inline-block;
width: auto;
}
.hot_spot-container {
border:1px solid blue;
position:absolute;
display: inline-block;
}

Categories