I have an image in a html document and when the webpage loads i want the image to bounce. I have a jquery function that does this only when the image is clicked on. I can't figure out how to make this work onLoad...
Here is the code
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<style type="text/css">
div { margin-left: 500px; margin-top: 200px; width: 100px; height: 80px; position: relative; }
</style>
<script>
$(document).ready(function() {
$("#logo").click(function () {
$(this).effect("bounce", { times:4, distance:200 }, 400);
});
});
</script>
</head>
<body>
<div id="logo"><img src="http://visionhelp.files.wordpress.com/2012/01/soccer-ball.jpg"/> </div>
</body>
</html>
Thanks for checking this out. Much appreciated! :)
$(document).ready(function () {
$("#logo").effect("bounce", { times:4, distance:200 }, 400);
});
or, using a more modern style of document ready function:
$(function () {
$("#logo").effect("bounce", { times:4, distance:200 }, 400);
});
This work for you:
$(window).load(function() {
$('#logo').effect("bounce", {
times: 4,
distance: 200
}, 400).click(function() {
$(this).effect("bounce", {
times: 4,
distance: 200
}, 400);
});
})
With a jsFiddle example
Just trigger the click event on page load. Try this
$(document).ready(function() {
$("#logo").click(function () {
$(this).effect("bounce", { times:4, distance:200 }, 400);
})
.click();//Will trigger the click event on page load
});
If you don't want this effect on logo click but just on page load then use this.
$(document).ready(function() {
$(this).effect("bounce", { times:4, distance:200 }, 400);
});
Related
I have a text area. Whenever someone will click on the text-area then the height will be increased and clicking again anywhere in the screen height will be decrease.
<textarea id="revbox" style="height: 50px; width: 260px;"></textarea>
<script>
$('textarea#revbox').focus(function () {
$('textarea#revbox').animate({ height: 150 }, 1000);
});
</script>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
But the code is not working. How can i do that?
Your code is good for the focus event, and you only need to add similar code for the blur event. Try this:
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<textarea id="revbox" style="height: 50px; width: 260px;"></textarea>
<script>
$('textarea#revbox').focus(function () {
$('textarea#revbox').animate({ height: 150 }, 1000);
});
$('textarea#revbox').blur(function () {
$('textarea#revbox').animate({ height: 50 }, 1000);
});
</script>
Please note that you need to include jQuery at the top (preferably in the <header>).
try using mouseenter and mouseleave events:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="revbox" style="height: 50px; width: 260px;"></textarea>
<script>
$('textarea#revbox').on("mouseenter",function () {
$('textarea#revbox').animate({ height: 150 }, 1000);
});
$('textarea#revbox').on("mouseleave",function () {
$('textarea#revbox').animate({ height: 50 }, 1000);
});
</script>
I used a JQuery waiting spinner demo from Github and modified it to my liking. I want the spinner to initiate automatically as soon as the page appears (giving time for the larger images on the page to load), however at the moment one has to click 'start waiting' for the spinner to appear.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<link href="waiting.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
margin: 50px;
}
.content {
margin-bottom: 50px;
max-width: 500px;
}
button.waiting-done {
display: none;
}
</style>
<!--script src="../libs/jquery/jquery.js"></script-->
<script src="jquery-2.0.2.min.js"></script>
<script src=" jquery.waiting.min.js"></script>
<script type="text/javascript">
$(function () {
var content = $('.content').first().html();
$('button').on('click', function () {
$(this).toggle().siblings('button').toggle();
if ($(this).hasClass('waiting-done')) {
$(this).siblings('.content').waiting('done')
.html(content.substring(0,Math.random() * content.length) + '...');
}
});
});
</script>
</head>
<body>
<div id="demo-fixed">
><button type="button" class="waiting">► start waiting</button>
><button type="button" class="waiting-done">■ waiting done</button>
<div class="content">
</div>
</div>
<script type="text/javascript">
$('#demo-fixed button.waiting').on('click', function () {
var that = this;
$(this).siblings('.content').waiting({ fixed: true });
setTimeout(function() {
$(that).siblings('button').click();
}, 3000);
});
</script>
</body>
</html>
This is my first post so I hope I've given enough info for people to understand. I could copy the JQuery but there's too much and i'm not sure on the relevant part.
Thanks in advance for any help.
jQuery has a nice tool built in for that -- you'll want to read the documentation
$(document).ajaxStart(function() {
//start spinner
});
$(document).ajaxStop(function() {
//stop spinner
});
$(document).ajaxError(function(event, jqXhr, ajaxSettings, thrownError) {
// handle the error
});
i am trying to do a single page navigation, but unable to show and hide other containers.
basicall, it is 3 links . i capture the click event and set the appropriate container hide or show with sliding effect.
code is shown below. Thanks for help.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.current
{
display: block;
}
#about_container, #principles_container, #programs_container
{
display: none;
}
</style>
<script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('[id^=btn_]').click(function (event) {
event.preventDefault();
//here you can also do all sort of things
var elementToShowId = this.id;
elementToShowId = elementToShowId.replace("btn_", "") + "_container";
alert(elementToShowId);
if ($('.current').exists()) {
$(".current").hide('slide', { direction: 'right',
complete: function () {
show(elementToShowId);
$(this).removeClass('current');
}
}, 500, null);
}
else {
show(elementToShowId);
}
if ($('.active').exists()) {
$(".active").removeClass('active');
}
$(this).addClass('active');
});
});
function show(elementId) {
$("#" + elementId).show('slide', { direction: 'left', complete: function () {
$(this).addClass('current');
if (elementId == "contact") {
initializeMap();
}
}
}, 500, null);
}
</script>
</head>
<body>
<ul>
<li><a id="btn_about" href="#about"><strong>About</strong></a></li>
<li><a id="btn_principles" href="#principles"><strong>Principles</strong></a></li>
<li><a id="btn_programs" href="#programs"><strong>Programs</strong></a></li>
</ul>
<div id="home_container" class="current">
Home</div>
<div id="about_container">
about</div>
<div id="principles_container">
principles</div>
<div id="programs_container">
programs</div>
</body>
</html>
U can try this:
#about_container, #principles_container, #programs_container
{
display: none !important;
}
Hi I am trying to open one div on mouse hover of second div.
The div 1 is display is none by default but when user hover on div 2 the div 1 will be displayed.
But it's not working.
My code :
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<style>
.testtmpblock{
display: none;
background-color: black;
height: 100px;
width: 100px;
}
.tmpd{
height: 100px;
width: 100px;
background-color: blue;
}
</style>
<script>
$(document).ready(function () {
$(document).on('mouseenter', '.tmpd', function () {
$(this).find(".testtmpblock").show();
}).on('mouseleave', '.tmpd', function () {
$(this).find(".testtmpblock").hide();
});
});
</script>
</head>
<body>
<div class="tmpd">
kjkjkj
</div>
<div class="testtmpblock">
data
</div>
</body>
</html>
div testtmpblock will be appear on hover of div tmpd but it's not working.
I have also write Script for it.
Any guidance that where I am wrong ?
You need to use next instead of find as find is used for desendants and your required element is not descendant.
Live Demo
$(document).ready(function () {
$(document).on('mouseenter', '.tmpd', function () {
$(this).next(".testtmpblock").show();
}).on('mouseleave', '.tmpd', function () {
$(this).next(".testtmpblock").hide();
});
});
You can avoid next if only single element has class testtmpblock
$(document).ready(function () {
$(document).on('mouseenter', '.tmpd', function () {
$(".testtmpblock").show();
}).on('mouseleave', '.tmpd', function () {
$(".testtmpblock").hide();
});
});
If the divs are next to each other you do this with CSS only:
.testtmpblock {
display: none;
}
.tmpd:hover ~ .testtmpblock {
display: block;
}
If you want to animate it you can use CSS3 transitions.
99% of time you can get away with CSS only, and the animations will be faster with transitions. It's all about how you handle the markup. If you make the hidden element a child then it's always doable with just CSS, for example:
<div class="tmpd">
kjkjkj
<div class="testtmpblock">
data
</div>
</div>
And you'd use a selector like so:
.tmpd:hover .testtmpblock {}
try next()
$(document).on('mouseenter', '.tmpd', function () {
$(this).next(".testtmpblock").show();
}).on('mouseleave', '.tmpd', function () {
$(this).next(".testtmpblock").hide();
});
$(document).ready(function () {
$('body').on('hover','.tmpd', function () {
$(".testtmpblock").show();
}, function () {
$(".testtmpblock").hide();
}
);
});
This jQuery code will highlight the div box when clicked.
I want to get the highlight on load, how can I do that?
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<style type="text/css">
div { margin: 0px; width: 100px; height: 80px; background: #666; border: 1px solid black; position: relative; }
</style>
<script>
$(document).ready(function() {
$("#div1").click(function () {
$(this).effect("highlight", {}, 3000);
});
});
</script>
</head>
<body">
<div id="div1"></div>
</body>
</html>
Put the statement for highlight in document.ready at the same level you are binding click event..
Live Demo
$(document).ready(function() {
$("#div1").effect("highlight", {}, 3000); //this will highlight on load
$("#div1").click(function () {
$(this).effect("highlight", {}, 3000);
});
});
Alternatively, this way might be a little cleaner in that if you add some other effects that you want to show on the click state, you only need to define them one time.
$(document).ready(function() {
$("#div1").click(function () {
$(this).effect("highlight", {}, 3000);
});
$('#div1').click();
});
Javascript
$(document).ready(function() {
$("#div1").effect("highlight", {}, 3000);
});
This will highlight the div1 when the document is ready. If you also want a click handler, you can keep it and put in whatever code you want (ie. you can also keep the effect in there as well, if you want to).
Fiddle