I'm using the script below to change a background image on click, but I'd like the transition to be a bit smoother with a fadein. Would that be possible?
Here is the script:
<script>
$(function(){
$("#button").on("click", function(e) {
e.preventDefault();
$('.class').css("background-image", "url('http://website.com/images/image.png')");
});
});
</script>
fadeOut the .class element first and use the callback function to change the css and to fadeIn again....
<script>
$(function(){
$("#button").on("click", function(e) {
e.preventDefault();
$('.class').fadeOut(1000,function(){
$(this).css("background-image", "url('http://website.com/images/image.png')").fadeIn('slow');
})
});
});
</script>
Try this, it will give you a nice fadeIn effect.
<script>
$(function(){
$("#button").on("click", function(e) {
e.preventDefault();
$('.class').fadeIn(800).css("background-image", "url('http://website.com/images/image.png')");
});
});
</script>
Related
My jQuery will not activate on click as it should. I am targeting all class a divs
http://jsfiddle.net/clarinetking/BbSMW/6/ (JSFiddle)
$(document).ready(function () {
$(".a").click(function () {
$(this).fadeOut(default:400);
});
});
Your fiddle does not have jQuery in it and you forgot quotes:
$(document).ready(function(){
$('div').mouseover(function(){
$(this).fadeOut('slow');
});
});
New fiddle: http://jsfiddle.net/qwertynl/KMjG6/
I've looked at the other questions on this topic, and know that I have to do something like this:
I've created buttons:
<button id="next"></button>
<button id="prev"></button>
And then at the bottom of the page, I have this (this was taken from the other question here):
<script src="js/impress.js"></script>
<script>impress().init();</script>
<script>
$("#next").click(function () {
api.next();
});
$("#prev").click(function () {
api.prev();
});
</script>
But it isn't working at all; can someone give me a hand with this?
it works, if next-prev are in inside impress div
$('#next').on('click', function(e){
impress().next();
e.stopPropagation();
});
$('#prev').on('click', function(e){
impress().prev();
e.stopPropagation();
});
Replace your script this way:
<script>
$("#next").click(function () {
impress().next();
});
$("#prev").click(function () {
impress().prev();
});
</script>
Have you included jQuery? If not, add this too:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
CODE:
<script type="text/javascript">
$(document).ready(function() {
$('.show_or_hide_link_clicker').click(function() {
$(".the_box_to_show").fadeIn(400);
});
});
</script>
When show_or_hide_link_clicker is clicked the_box_to_show is shown. How do I hide it if show_or_hide_link_clicker is clicked again or when the user clicks away?
Update: This is what I am doing now: http://jsfiddle.net/nFbnr/
Question: How can i remove the double click requirement ot show the div?
jQuery Toggle is what you're looking for.
$('.the_box_to_show').toggle();
When clicking anywhere, check if the element was on the propagation path. If not, the user clicked outside of it so you can hide it.
$(document).click(function(e) {
if ($(e.target).closest(".the_box_to_show").size() === 0) {
$(".the_box_to_show").hide();
}
});
http://jsfiddle.net/vdHAu/
$(document).click(function(e) {
if (!$(e.target).is(".the_box_to_show")) {
$(".the_box_to_show").hide();
}
});
$('.show_or_hide_link_clicker').click(function() {
$(this).hide();
$(".the_box_to_show").fadeIn(400);
});
An another way without delegate event to document level:
you have to set attribute tabindex to the box and CSS outline for style
http://jsfiddle.net/GV56b/
$(document).ready(function () {
$('.show_or_hide_link_clicker').click(function () {
$(this).hide();
$(".the_box_to_show").fadeIn(400, function () {
this.focus()
});
});
$(".the_box_to_show").on('blur',function(){
$(this).hide();
$('.show_or_hide_link_clicker').fadeIn(400);
});
});
check this out
$('.show_or_hide_link_clicker').click(function() {
$(this).hide();
$(this).addClass('active);
$(".the_box_to_show").fadeIn(400);
});
$(document).on('click', 'html', function(){
$(".the_box_to_show").fadeOut(400);
});
$(document).on('click', '.active', function(e){
e.stopPropagation();
});
Status: WORKING
Runs smoothly - click works
Jquery
$("document").ready(function(){
$("#test").click(function(){
alert("abc");
});
});
CSS
.blue {
background-color:blue;
}
Tag Body
<body>
<div class="blue" id="test">Testing code</div>
</body>
Status: NOT WORKING
Succeeds to add the file and div test within it but click doesn't work
Jquery
$("document").ready(function(){
$.get("new.php", {
// this math avoids IE from crashing
nbRandom: Math.random()
},
function(data){
$("body").html(data);
});
$("#test").click(function(){
alert("abc");
});
});
CSS
.blue {
background-color:blue;
}
Tag Body
<body>
</body>
Does anybody know how to do that?
The method get is asynchronous which means that the stream will continue while the ajax request is still running, the best solution is to put the click handler into the get callback.
$("document").ready(function(){
$.get("new.php", {
// this math avoids IE from crashing
nbRandom: Math.random()
},
function(data){
$("body").html(data);
$("#test").click(function(){
alert("abc");
});
});
});
You should delegate the event, from one of static parents of the element or document object.
$(document).on("click", "#test", function(){
alert("abc");
})
use delegate or on(recommend)
$(function() {
$('body').on('click', '#test', function() { alert('abc'); });
// or
// $('body').delegate('#test', function() { alert('abc'); });
});
problem is the the click function is called before the div with #test is appended...
call click function after the div is appended.. so that it gets that id... and the event
try this
$.get("new.php", {
// this math avoids IE from crashing
nbRandom: Math.random()
},
function(data){
$("body").html(data);
$("#test").click(function(){
alert("abc");
});
});
OR
the on function with selector as document..(i alway prefer to go with this)
$(document).on("click", "#test", function(){
alert("abc");
})
<script>
$("#menu-item-58").mouseover(function() { $("#simple_sidenav-3").css('visibility','visible'); });
$("#menu-item-58").mouseout(function() { $("#simple_sidenav-3").css('visibility','hidden'); });
</script>
#simple_sidenav-3 {
visibility:hidden;
}
simple_sidenav-3 is a hidden div.
So why doesn't it show when mouse is over #menu-item-58?
Please check it here http://mentor.com.tr/wp/?page_id=164
try this instead:
jQuery("#menu-item-58").mouseover(function() {
jQuery("#simple_sidenav-3").css('visibility','visible');
});
$ is undefined.
You haven't wrapped your code in the jQuery DOM ready function. Put this between your <script> tags:
$(document).ready(function()
{
$("#menu-item-58").mouseover(function() { $("#simple_sidenav-3").css('visibility','visible'); });
$("#menu-item-58").mouseout(function() { $("#simple_sidenav-3").css('visibility','hidden'); });
}
This will bind the mouse events to the elements when the document (page) has been loaded.
Try changing #simple_sidenav-3 from visibility:hidden; to display:none; Then call something like .slideDown() for a nice effect.
Also, here's some improvements to your code:
jQuery(function() { //waits till the document is ready
jQuery("#menu-item-58").mouseover(function () {
jQuery("#simple_sidenav-3").slideDown();
}).mouseout(function () { //no need to use $("#menu-item-58") twice
jQuery("#simple_sidenav-3").slideUp();
});
});