MY NODE

Showing posts with label jQuery. Show all posts

Tuesday, August 31, 2010

Quick, Simple and Easy Image Gallery Using jQuery

This is a simple image gallery I wrote for a project. Its small and easy to implement. Ideal if you need to build a simple and quick gallery.
You can improve the code by adding a loading.gif

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>How to add table rows using jQuery</title>
<style>
.thumb{vertical-align:top; padding:2px; border:1px #CCC solid;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>

$(document).ready(function(){    
    
    $(".image").click(function() {    
        //$('#main').hide();
        var image = $(this).attr("href");
        $('#main').attr("src", image);
                
        $('#main').load(function() {            
              $('#main').fadeIn('slow');
        });
        
    return false;
    });
});    

</script>
</head>

<body>
<a href="images/image1.jpg" class="image"><img alt="Image1" src="thumb/image1.jpg" class="thumb" border="0"/></a>
<a href="images/image2.jpg" class="image"><img alt="Image2" src="thumb/image2.jpg" class="thumb" border="0"/></a>
<a href="images/image3.jpg" class="image"><img alt="Image3" src="thumb/image3.jpg" class="thumb" border="0"/></a>
<a href="images/image4.jpg" class="image"><img alt="Image4" src="thumb/image4.jpg" class="thumb" border="0"/></a>
<div id="container" style="height:400px; padding-top:20px;"><img id="main" src="images/image1.jpg" /></div>

</body>
</html>

View Demo

Sunday, August 29, 2010

Wait till a dynamically loaded image fully load using jQuery

I had this problem when I was creating simple jQuery gallery with thumbs. Once the thumb is clicked I wanted to wait till the image is fully loaded until I called the fadeIn.
we can use jQuery load to achieve this.

$('#image').hide();
$('#image').attr("src", image); //next image path
//still in hide
$('#image').load(function() {    
    $('#image').fadeIn('slow');
});

Thursday, August 26, 2010

How to add table row (tr) using jQuery

I think the easiest method is to find the last tr and insert the new row after the last tr.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>How to add table rows using jQuery</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script>

$(document).ready(function(){    
    
    $('#add').click(function(){
                
        $('#my_tbl tr:last').after('<tr><td>&nbsp;</td><td>&nbsp;</td></tr>');        
    });
});    

</script>
</head>

<body>

<table id="my_tbl" border="1" cellpadding="1" cellspacing="1">
    <tr>
        <td> Head1 </td>
        <td> Head2 </td>
    </tr>
</table>

<br />

<input type="button" id="add" value="Add Row" />

</body>
</html>

View Demo

The only place where this code does not work is when there are no tr's in the table to start with. If that is the case you can always add a dummy <tr></tr> block to the top to start with.

Please comment if you know a better solution.

Wednesday, August 18, 2010

Video thumb rotator with jQuery Cycle Plugin

This is a simple code I used to rotate video thumbs which were retrieved using the YouTube API.
I use the jQuery Cycle Plugin to do the rotation on mouse over.

http://jquery.malsup.com/cycle/

Make sure you download the cycle plugin
http://jquery.malsup.com/cycle/download.html

<html>
<head>
<title>Video thumb rotator with jquery Cycle Plugin</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.cycle.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    
    $('.adimagebg').cycle();
    $('.adimagebg').cycle('pause');
    
    $(".adimagebg").hover( function () {
        $(this).cycle({ 
            fx: 'fade',
            speed: 300,
            timeout:  1200
        });
    },
    function(){
        $(this).cycle('pause');
    });
});
</script>
</head>

<body>

    <div class="adimagebg">
        <a href="#"><img width="100" src="image1.jpg" border="0" /></a>
        <a href="#"><img width="100" src="image2.jpg" border="0" /></a>
        <a href="#"><img width="100" src="image3.jpg" border="0" /></a>
    </div>

</body>
</html>

View Demo

Saturday, August 7, 2010

jQuery - Get the element Title value of a clicked item

Like the previous post you can get the title value of a element easily as well.

$('.clsname').click(function(){
     var idval = this.title;
});

jQuery - Get the element ID value of a clicked item

This is small tip that I found useful when completing a new project. As usual with jQuery everything is simple as 1 2 3

$('.clsname').click(function(){
     var idval = this.id;
});

Thursday, July 29, 2010

jquery datepicker with current date and custom date format

I searched the net to find a more simpler solution to set the current date with jQuery UI datepicker but didn't find anything. So here is the solution I used. Mixture of both normal JavaScript and jQuery. You can also check out how to use a custom date format with jQuery UI datepicker.

var currentTime = new Date();
var month = currentTime.getMonth() + 1;
var day = currentTime.getDate();
var year = currentTime.getFullYear();
var d = year + "-" + month + "-" + day;

$('.date-pick').datepicker({ dateFormat: 'yy-mm-dd' }).val(d);

Saturday, May 8, 2010

jquery css problem getting border width - fixed

I had problem getting the border width by calling the css() normaly like this,

$('#id').css("border-width");

I don't know why this don't work but the following works :)

$('#id').css("borderLeftWidth");

Wednesday, March 4, 2009

How to create a popup DatePicker for a text box using jQuery

For this we can use a very nice widget created by jQuery.
First we will download the datepicker widget from the site
http://jqueryui.com/download

Only select the Datepicker widget to download

After downloading the zip file, extract the files into a folder called jquery.


<html>
<head>
 <title>jQuery UI Datepicker - Default functionality</title>
 
<link type="text/css" href="jquery/theme/ui.all.css" rel="Stylesheet" /> 
<script type="text/javascript" src="jquery/jquery-1.3.1.js"></script>
<script type="text/javascript" src="jquery/jquery-ui-personalized-1.6rc6.js"></script>

<script type="text/javascript">
 $(function() {
  $("#datepicker").datepicker();
 });
 </script>
</head>
<body>

<p>Date: <input type="text" id="datepicker"></p>

</body>
</html>

You can read more about this Datepicker from here.
http://jqueryui.com/demos/datepicker/