10 Jun
4 videos to get your started with the basic concepts of JQuery. Some of these are for intermediate developers. You will definitely find valuable information on them. I certainly did, specially the deferred concepts.
15 May
A simple jQuery script that zooms into an image after 1 second.
check out the demo here
THE CSS
We define a masked area of 200×200 and an absolute position of the main picture to create
a viewport
1 2 3 4 5 6 7 8 9 10 11 12 13 | #window { width: 200px; height: 200px; overflow: hidden; position: relative; } #window img { width: 500px; position: absolute; top: -150px; left: -300px; } |
THE HTML
1 2 3 | <div id="window">
<img src="http://ufomuffin.com/files/etc/tree.jpg">
</div> |
THE JQUERY
We wait a second using delay(1000) and then we use the animate function from jQuery to change the width of the image creating a zoom effect. Notice that at the same time we’re going to the positions top: -150 and , left: -300 to position the viewport in a specific region.
1 2 3 4 5 6 7 8 | $(document).ready(function() { $('#window img').delay(1000).animate({width: 800}, 800, function() { $(this).css({ top: '-150px', left: '-300px' }) }) }); |
The Whole Thing
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | <!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Jquery Zoom / UFOMUFFIN.COM</title>
<style>
#window {
width: 200px;
height: 200px;
overflow: hidden;
position: relative;
}
#window img {
width: 500px;
position: absolute;
top: -150px;
left: -300px;
}
</style>
</head>
<body>
<div id="window">
<img src="http://ufomuffin.com/files/etc/tree.jpg">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#window img').delay(1000).animate({width: 800}, 800, function() {
$(this).css({
top: '-150px',
left: '-300px'
})
})
});
</script>
</body>
</html> |
23 Mar
If you’re new to JQuery, please take the time to read this article by Mike Gleason. He takes a different approach explaining the foundations, how it works (visual approach), compares it to other frameworks, and he even goes in to what AJAX is. Not your usual JQuery tutorial, recommended.
24 Feb
Great tips on using the best practice techniques to improve user interaction on your site.
21 Feb
jQuery 1.5 Visual Cheat Sheet is the refined and updated version of my popular jQuery Cheat Sheet. The new edition includes all the reference you will ever need for jQuery 1.5 API.
17 Jan
A nice useful collection of useful jquery & javascript snippets easy enough to understand and use quickly in your projects (more…)
4 Jan
A very simple method to obtain the href value from an unordered list, using JQUERY. (more…)
Social Links