Stop CSS animation with jQuery? - javascript

Does anyone know why this isn't working? I just want my button to stop the background animation when it is clicked. Please help me.
$(document).ready(function(){
$("#togglebackgroundbutton").click(function(){
$("-webkit-keyframes bg").toggleclass("paused");
});
});
</script>
<style>
body {
background-color:green;
-webkit-animation-name:bg;
-webkit-animation-iteration-count:infinite;
-webkit-animation-duration:2s;
}
#-webkit-keyframes bg {
from{background-color:green;}
50%{background-color:yellow;}
to{background-color:green;}
}
.paused {
-webkit-animation-play-state:paused;
}

$(document).ready(function(){
$("#togglebackgroundbutton").click(function(){
$("body").toggleClass("paused");
});
});
You should toggle class on body. Also its toggleClass and not toggleclass

Related

jQuery changing body's background color

This is frustrating and I can't figure this out.
I just need to change/toggle back/foreground color
for the entire body when user clicks on a link, 'theme'.
Following is my html file.
...
<style>
highlight {
background-color: black;
color: white;
}
</style>
<script>
$(document).ready(function () {
$('.theme').on('click', function () {
$(document.body).toggleClass("highlight");
//$(document.body).css({"background-color": "black"});
});
});
</script>
When I use $().css({...}), it works but when I try to use
class to be able to toggle, it doesn't. Please help.
Agree with Rayon. "highlight" in the style is not a class if missing the period in front. jQuery is not able to toggle the "highlight" class since there's no "highlight" class to toggle. The code works here: http://liveweave.com/T6c7Mz
change the following line
$(document.body).toggleClass("highlight");
with
$("body").toggleClass("highlight");
This will work
HTML
Click Me
CSS
body { background-color:red; }
.highlight
{
background-color:yellow;
}
JQUERY
$("#theme").click(function() {
$("body").toggleClass("highlight");
});
Here is the working code
http://jsfiddle.net/CLwE5/119/

Bootstrap Hovering

Is it possible to do simply on bootstrap framework the following thing?
Example having a few buttons and when one is hovered the others change to light grey or something. Sorry but I can't find it on w3 schools or in the web.
Should javascript be used?
Thanks!
Possible without javascript:
http://jsfiddle.net/ap8vT/284/
.wrapper:hover .default {
opacity: .5;
}
.wrapper .default:hover {
opacity: 1;
}
You can define those styles whatever you want.
I used jquery to do functionality
HTML
<button class="default">Default</button>
<button class="default">Submit</button>
<button class="default">Delete</button>
<button class="default">Blue Pill</button>
</div>
Js
$(document).ready(function(){
$("button").mouseenter(function(e){
$("button").each(function(){
if($(e.target).text() != $(this).text()){
$(this).addClass('defaulta');
}
});
});
$("button").mouseleave(function(){
$("button").each(function(){
$(this).removeClass('defaulta');
});
});
});
JS FIDDLE LINK

Hide DIV until page loads using visibility property

I have a DIV (.container) and a button (.btn) which i want to hide until the page is fully loaded.I managed to do it by using dispay:none on a small jquery snippet, but it would be better if i could use visibillity:hidden because the page wouldnt shift (like it does with display:none).
basically, I have:
<style>
.container {visibility:hidden;}
.btn {visibility:hidden;}
</style
Is there any nice soul that could help me with jquery part so it only shows once the page is fully loaded?
Here is what you need to do
$(window).load(function() {
$('.container').css('visibility','visible');
$('.btn').css('visibility','visible');
});
OR you could just add a class to the the container as well
$(window).load(function() {
$('.container').addClass("show");
});
and then for your css
.container.show { visibility: visible; }
.container.show .btn { visibility:visible; }
You can create a class just for visibility but make sure it is after the other rules so it will overwrite it. Like so
.container {visibility:hidden;}
.btn {visibility:hidden;}
.my_class { visibility: visible; }
The jquery in this case would be
$(window).load(function() {
$('.container').addClass("my_class");
});
You can try this:
Javascript:
$(window).load(function(){
$('.container, .btn').addClass('visible');
});
CSS:
.visible { visibility: visible; }
Hope help you!
Don't overthink it! :)
$(function() {
$('.container').show(); // show .container and .btn
$('.btn').show();
});
Have you tried something like this?
$(document).ready( function() {
$(".container).show( "fast" );
}

Javascript change colour of divs, and then colour of the div's focus

I am making a html forum and am using javascript to change the colour of the forum, I have three divs, one is blue, green and red.
When each div is clicked, the javascript will change the colour of the elements.
I would like to change the colour of the submit button's focus with the .css() function in javascript, but the focus part doesn't work.
Here is my javascript code:
$("#green").click(function() {
$(".mailheader").css("background","#a3d300");
$(".submit").css("background","#a3d300");
$(".submit:focus").css("background","#98cf00");
});
$("#blue").click(function() {
$(".mailheader").css("background","#00b4ff");
$(".submit").css("background","#00b4ff");
$(".submit:focus").css("background","#04a6e9");
});
$("#red").click(function() {
$(".mailheader").css("background","#ff0000");
$(".submit").css("background","#ff0000");
$(".submit:focus").css("background","#ea0202");
});
So I have tried $(".submit:focus").css("background","#ea0202"); for chaning the background of the focus, but it doesn't work. anyone know how to fix this? thanks
Check this
DEMO
HTML
<div class="mailheader"></div>
<div id="green"></div>
<div id="blue"></div>
<div id="red"></div>
<input type="button" value="submit" class="submit" />
CSS
#green, #red, #blue {
height:50px;
width:100px;
}
#green {
background-color:green;
}
#red {
background-color:red;
}
#blue {
background-color:blue;
}
jQuery
$("#green").click(function () {
$(".mailheader").css("background", "#a3d300");
$(".submit").css("background", "#a3d300");
$(".submit").focus(function () {
$(".submit").css("background", "#04a6e9");
})
});
$("#blue").click(function () {
$(".mailheader").css("background", "#00b4ff");
$(".submit").css("background", "#00b4ff");
$(".submit").focus(function () {
$(".submit").css("background", "#ea0202");
})
});
$("#red").click(function () {
$(".mailheader").css("background", "#ff0000");
$(".submit").css("background", "#ff0000");
$(".submit").focus(function () {
$(".submit").css("background", "#98cf00");
})
});
You are setting styles directly on the element. Why not set a css class on the elements and handle all the changes via css. That is much cleaner and easier to use.
eg. when '#green' is clicked add a class 'Green' to the submit button. (see http://api.jquery.com/addClass/ ) (be sure to remove the other classes)
Then in css you can set #MySubmitButton.Green{.. your green styles..} and use all the pseudo css classes you like. Things like #MySubmitButton.Green:hover {color:#FF00FF;}
Hope this helps...
jQuery can't change pseudo-elements' style
Fix (I used the .html() function for the :focus's style, using a <style> tag in the body or elsewhere):
<script>
...
$(".submit").css("background","#ff0000");
$("body style.changeColor").html("
.submit:focus {background: #ea0202};
");
...
</script>
<body>
<style class="changeColor">
</style>
</body>
And I were you, I rather change all other .css() functions into text inside the .html() string.
$("body style.changeColor").html("
...
.submit {background: #ff0000};
.submit:focus {background: #ea0202};
");

jQuery .addClass and .fadeIn?

So, I have these h1 elements that are links and I want to add a class to them and fade that class in once the element has been hovered over, and then onMouseOut have the class removed, whilst fading the class. But using the fade function does nothing for me. Seeing as it hides the element. Any ideas?
jQuery(".categories h1 a").hover(
function () {
jQuery(this).fadeIn("slow").addClass("active");
},
function(){
jQuery(this).fadeOut("slow").removeClass("active");
});
});
Thanks!
EDIT:::
jQuery("h1").hover(function() {
jQuery(this).stop().animate({ backgroundColor: "#a7bf51"}, 800);
},function() {
jQuery(this).stop().animate({ backgroundColor: "#FFFFFF"}, 800);
});
});
Try using jQuery UI .addClass and .removeClass.
$(function() {
$(".categories h1 a").hover(function() {
$(this).stop(true,true).addClass("active", 500);
}, function() {
$(this).stop(true,true).removeClass("active", 100);
});
});
DEMO (For some reason, it doesn't animate properly(fade) for the first time.. but then onwards it works fine)
Edit: Updated for completeness.
You can also use .animate to get the desired effect. See below,
$(function() {
$(".categories h1 a").hover(function() {
$(this).stop().animate({
backgroundColor: "#a7bf51"
}, 800);
}, function() {
$(this).stop().animate({
backgroundColor: "#FFFFFF"
}, 800);
});
});
DEMO
If you dont wanna use jquery UI because it will be an extra load, you can do the following :
(was useful to me when the 'hidden' bootstrap class is used in my app)
Fade In slowly while removing the class :
$('.myClass').removeClass('hidden').fadeOut(0).fadeIn(10000)
Fade Out slowly, add the class and then fade back in:
$('.myClass').fadeOut(1000, function(){
$(this).addClass('hidden'); //or any other class
}).fadeIn(10000)
hope this will simplify someone's task!
Sounds like you want the styles of the class to fade in. You should look into animate() for that: http://api.jquery.com/animate/
fadeIn simply fades in the element.
I don't think you can cross fade between classes, but you can use the animate function. animate allows you to affect any css variable over a specified time.
http://api.jquery.com/animate/
I know that removes some styling from the css file, but again, I don't think jQuery will cross fade between classes.
If you have the jQuery UI library loaded, you can set an extra param for the toggleClass function.
Set your opacity's via css.
h1 a {
opacity:0.8;
}
h1 a.hovered {
opacity: 1.0;
}
then
jQuery(".categories h1 a").hover(function(e) {
$(this).toggleClass('hover', 1000);
}
The 1000 is the millisecond counter on the event. So the effect should fade to 1.0 opacity when hovered in a second and fade out in 1 second when not hovered.
Try this, and here's the jsFiddle (enter link description here) :
<script type="text/javascript">
jQuery(".categories h1").hover(function () {
jQuery(this).stop().animate({ "background-color": "#a7bf51"}, 800);
jQuery(this).addClass("active");
jQuery(this).find("a").fadeIn("slow");
},
function() {
jQuery(this).stop().animate({ "background-color": "#FFFFFF"}, 800);
jQuery(this).addClass("active");
jQuery(this).find("a").fadeOut("slow");
});
</script>
<style type="text/css">
.categories h1 {
background-color: rgb(200, 200, 200);
display: block;
padding: 5px;
margin: 5px;
width: 100px
}
.categories h1 a {
display: none;
}
</style>
<div class="categories">
<h1>Item 1</h1>
<h1>Item 2</h1>
<h1>Item 3</h1>
</div>​

Categories