Bagesh Singh's Blog » javascript http://www.bageshsingh.com/bagesh-blog Shortest Distance to Web Solutions & Software Solutions Wed, 22 Feb 2012 18:42:12 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 Using Javascript to POST Data Between Pages http://www.bageshsingh.com/bagesh-blog/2011/08/using-javascript-to-post-data-between-pages/ http://www.bageshsingh.com/bagesh-blog/2011/08/using-javascript-to-post-data-between-pages/#comments Mon, 29 Aug 2011 18:27:32 +0000 Bagesh Singh http://www.bageshsingh.com/bagesh-blog/?p=1551 The following is a simple example of how to submit data from one HTML page to another using the POST method from Javascript. Normally, if data needs to be sent from one HTML page to another, it is done by appending the information to the query parameter of the the URL in the familiar “name=value” format. e.g.

1
<a href="post.aspx?user=peter&cc=aus">Click</a>

Although this works fine, in most cases, problems occur when there is a lot of data to send and the URL exceeds about 2000 characters. The other disadvantage is that the URL looks ugly. The traditional method to get around this is to POST the data using a form. e.g.

1
2
3
4
5
<form name="myform" method="post" action="post.aspx">
<input name="user" value="peter"/>
<input value="cc" value="aus"/>
<a href="javascript:myform.submit()">Click</a>
<form>

This works fine, however, it tends to make the formatting of the resulting HTML difficult and increases the size of the final HTML page significantly if there are lots of links on it.

The following javascript function takes the URL of the target page and an associative array of name/values paires and POSTs the data to the supplied URL by dynamically creating a form and then submitting it.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function postwith (to,p) {
  var myForm = document.createElement("form");
  myForm.method="post" ;
  myForm.action = to ;
  for (var k in p) {
    var myInput = document.createElement("input") ;
    myInput.setAttribute("name", k) ;
    myInput.setAttribute("value", p[k]);
    myForm.appendChild(myInput) ;
  }
  document.body.appendChild(myForm) ;
  myForm.submit() ;
  document.body.removeChild(myForm) ;
}

To insert a link into a page just use a normal anchor tag in the HTML and call the function.

1
<a href="javascript:postwith('post.aspx',{user:'peter',cc:'aus'})">click</a>

This works on Microsoft IE, Mozilla Firefox and OS X Safari.

]]> http://www.bageshsingh.com/bagesh-blog/2011/08/using-javascript-to-post-data-between-pages/feed/ 0 Check or Uncheck All in a Group of Checkbox in JavaScript http://www.bageshsingh.com/bagesh-blog/2011/08/check-or-uncheck-all-in-a-group-of-checkbox-in-javascript/ http://www.bageshsingh.com/bagesh-blog/2011/08/check-or-uncheck-all-in-a-group-of-checkbox-in-javascript/#comments Mon, 29 Aug 2011 18:25:27 +0000 Bagesh Singh http://www.bageshsingh.com/bagesh-blog/?p=1543 JavaScript code to be kept before head tag.

1
2
3
4
5
6
7
8
9
10
11
12
13
<SCRIPT LANGUAGE="JavaScript">
function CheckAll(chk)
{
for (i = 0; i < chk.length; i++)
chk[i].checked = true ;
}
function UnCheckAll(chk)
{
for (i = 0; i < chk.length; i++)
chk[i].checked = false ;
}
</script>

HTML Code:

1
2
3
4
5
6
7
8
9
10
11
12
<form name="myform" action="checkboxes.asp" method="post">
<b>Scripts for Web design and programming</b><br>
<input type="checkbox" name="check_list" value="1">ASP<br>
<input type="checkbox" name="check_list" value="2">PHP<br>
<input type="checkbox" name="check_list" value="3">JavaScript<br>
<input type="checkbox" name="check_list" value="4">HTML<br>
<input type="checkbox" name="check_list" value="5">MySQL<br>
<input type="button" name="Check_All" value="Check All"
onClick="CheckAll(document.myform.check_list)">
<input type="button" name="Un_CheckAll" value="Uncheck All"
onClick="UnCheckAll(document.myform.check_list)">
]]> http://www.bageshsingh.com/bagesh-blog/2011/08/check-or-uncheck-all-in-a-group-of-checkbox-in-javascript/feed/ 0 How to do Date format validation in PHP http://www.bageshsingh.com/bagesh-blog/2011/08/how-to-do-date-format-validation-in-php/ http://www.bageshsingh.com/bagesh-blog/2011/08/how-to-do-date-format-validation-in-php/#comments Mon, 29 Aug 2011 17:43:58 +0000 Bagesh Singh http://www.bageshsingh.com/bagesh-blog/?p=1459 Today Sushil asked me how can we validate the date which is entered from textbox in “YYYY-MM-DD” format. Well, we can validate the format of the date using regular expression but how to validate weather that date is valid date or not, such as “2007-02-29″ is the correct format of the date but it’s not the valid date.

 

To overcome that situation, I’ve used checkdate() function available in PHP for validation of date.

Function to validate date format in PHP

function checkDateFormat($date)
{
  //match the format of the date
  if (preg_match ("/^([0-9]{4})-([0-9]{2})-([0-9]{2})$/", $date, $parts))
  {
    //check weather the date is valid of not
        if(checkdate($parts[2],$parts[3],$parts[1]))
          return true;
        else
         return false;
  }
  else
    return false;
}

In the above function, first of all format of date is validated using regular expression. As you can see the in the preg_match() function, there are three expression each separated by “-” and there can be only digits of length of 4,2 and 2 in these expressions. If the date format is incorrect then this function returns “false” value. And, if the supplied string contains the valid date format then the part matching each expression are stored in the “$parts” array. Such as, if we supply “2007-03-12″ then “2007″, “03″ and “12″ are stored in the “$parts” array. After that, checkdate() function of PHP is used check weather the supplied date is valid date or not.

Example

echo checkDateFormat("2008-02-29"); //return true
echo checkDateFormat("2007-02-29"); //return false
]]> http://www.bageshsingh.com/bagesh-blog/2011/08/how-to-do-date-format-validation-in-php/feed/ 0 Blocking access to the login page after three unsuccessful login attempts http://www.bageshsingh.com/bagesh-blog/2011/08/blocking-access-to-the-login-page-after-three-unsuccessful-login-attempts/ http://www.bageshsingh.com/bagesh-blog/2011/08/blocking-access-to-the-login-page-after-three-unsuccessful-login-attempts/#comments Mon, 29 Aug 2011 17:21:30 +0000 Bagesh Singh http://www.bageshsingh.com/bagesh-blog/?p=1439 Sometimes you need to add an extra protection to password-protected website. This article explains how access to the login page can be restricted after three unsuccessful login attempts. This schema uses visitors IP address to store log attempts in the database and block access to login feature for 30 minutes after third unsuccessful attempt.

There are a number of reasons to restrict access. One reason is security. Quite often users try to guess login and password combination to get unauthorized access to the system. Another reason is extra load on server.

So let’s start. At first you need to create a new table in your database to store information about login attempts from a certain computer. SQL script creating such table in MySQL Server will be the following. For other databases it will slightly differ.

CREATE TABLE `LoginAttempts`
(
`IP` VARCHAR( 20 ) NOT NULL ,
`Attempts` INT NOT NULL ,
`LastLogin` DATETIME NOT NULL
)

It is assumed that you have already had an authorization page. Otherwise you can create it using PHP, SSI, and similar languages. There are no major difficulties in writing this program (script).

Authorization page should work with two tables: one table where information about registered users is stored and the other one where unsuccessful login attempts are listed.
Before verifying entered data, system has to check if the user exceeded attempts limit or not. If in the LoginAttempts table there are more than two records correspondent to one IP address, then error message will appear saying that access is blocked for a certain period of time. You can set time period at your discretion. Depending on your security policy it can vary from 1 minute to 24 hours or more. In the following example access will be blocked for 30 minutes.

<?php
function confirmIPAddress($value) {

$q = “SELECT attempts, (CASE when lastlogin is not NULL and DATE_ADD(LastLogin, INTERVAL “.TIME_PERIOD.
” MINUTE)>NOW() then 1 else 0 end) as Denied FROM “.TBL_ATTEMPTS.” WHERE ip = ‘$value’”;

$result = mysql_query($q, $this->connection);
$data = mysql_fetch_array($result);

//Verify that at least one login attempt is in database

if (!$data) {
return 0;
}
if ($data["attempts"] >= ATTEMPTS_NUMBER)
{
if($data["Denied"] == 1)
{
return 1;
}
else
{
$this->clearLoginAttempts($value);
return 0;
}
}
return 0;
}

function addLoginAttempt($value) {

//Increase number of attempts. Set last login attempt if required.

$q = “SELECT * FROM “.TBL_ATTEMPTS.” WHERE ip = ‘$value’”;
$result = mysql_query($q, $this->connection);
$data = mysql_fetch_array($result);

if($data)
{
$attempts = $data["attempts"]+1;

if($attempts==3) {
$q = “UPDATE “.TBL_ATTEMPTS.” SET attempts=”.$attempts.”, lastlogin=NOW() WHERE ip = ‘$value’”;
$result = mysql_query($q, $this->connection);
}
else {
$q = “UPDATE “.TBL_ATTEMPTS.” SET attempts=”.$attempts.” WHERE ip = ‘$value’”;
$result = mysql_query($q, $this->connection);
}
}
else {
$q = “INSERT INTO “.TBL_ATTEMPTS.” (attempts,IP,lastlogin) values (1, ‘$value’, NOW())”;
$result = mysql_query($q, $this->connection);
}
}

function clearLoginAttempts($value) {
$q = “UPDATE “.TBL_ATTEMPTS.” SET attempts = 0 WHERE ip = ‘$value’”;
return mysql_query($q, $this->connection);
}
?>

If attempts limit has not been reached, then the system will check, if the data entered are correct. If the data are verified, information about previous attempts is deleted, and for the next authorization user again will have three login attempts.

You can test this login system online or download completed php scripts and try to use them on your site.

]]> http://www.bageshsingh.com/bagesh-blog/2011/08/blocking-access-to-the-login-page-after-three-unsuccessful-login-attempts/feed/ 0 How to Pass JavaScript variables to PHP http://www.bageshsingh.com/bagesh-blog/2011/08/how-to-pass-javascript-variables-to-php/ http://www.bageshsingh.com/bagesh-blog/2011/08/how-to-pass-javascript-variables-to-php/#comments Mon, 29 Aug 2011 17:17:22 +0000 Bagesh Singh http://www.bageshsingh.com/bagesh-blog/?p=1433 JavaScript is mainly used as a client side scripting language, while PHP is a server side technology. Unlike Java or ASP.Net, PHP doesn’t have tools to make it work client side. That is why you need to combine JavaScript and PHP scripts to develop powerful web-applications.

One of the frequent problems is defining visitor’s screen resolution using JavaScript tools and passing this data to PHP-script. The following script provides solution for this problem:

<script type=”text/javascript”>

width = screen.width;
height = screen.height;

if (width > 0 && height >0) {
window.location.href = “http://localhost/main.php?width=” + width + “&height=” + height;
} else
exit();

</script>

Copy and paste this code snippet in the text editor, save it as index.htm and run it in your browser. After this code has been executed, a user is automatically redirected to the main.php page where screen resolution is displayed in the browser window.

The main.php looks as follows:

<?php
echo “<h1>Screen Resolution:</h1>”;
echo “Width  : “.$_GET['width'].”<br>”;
echo “Height : “.$_GET['height'].”<br>”;
?>

As you can see, passing JavaScript variables in PHP is similar to sending data using GET method.

]]> http://www.bageshsingh.com/bagesh-blog/2011/08/how-to-pass-javascript-variables-to-php/feed/ 0 Jquery Mouseover Tooltip Plugin http://www.bageshsingh.com/bagesh-blog/2011/07/jquery-mouseover-tooltip-plugin/ http://www.bageshsingh.com/bagesh-blog/2011/07/jquery-mouseover-tooltip-plugin/#comments Thu, 28 Jul 2011 18:49:36 +0000 Bagesh Singh http://www.bageshsingh.com/bagesh-blog/?p=1405 Let’s review a topic about how to create Jquery Mouseover Tooltip Plugin. Have you ever seen Jquery Mouseover Tooltip Plugin ? …

Like this below:

Link Nudging

Or,

Naruto Image

How to do ? …

1. Go to Dashboard, click Design, click Edit HTML

2. Find code of HTML below:

</head>

you can use (Ctrl+F) to find easily

3. Right Before </head> – place code of HTML below:

<!–Jquery-Tooltip-BEGIN–>
<script src=”jquery.js” type=”text/javascript”></script>
<script src=”jquery.hoverIntent.js” type=”text/javascript”></script> <!– optional –>
<script src=”jquery.cluetip.js” type=”text/javascript”></script>

<script type=”text/javascript”>
$(document).ready(function() {
$(‘a.tips’).cluetip();

$(‘#houdini’).cluetip({
splitTitle: ‘|’, // use the invoking element’s title attribute to populate the clueTip…
// …and split the contents into separate divs where there is a “|”
showTitle: false // hide the clueTip’s heading
});
});
</script>
<link rel=”stylesheet” href=”jquery.cluetip.css” type=”text/css” />
<!–Jquery-Tooltip-END-http://tutorialwebforblogger.blogspot.com–>

4. Click Save Template.

5. Example of how to use Jquery Mouseover Tooltip Plugin to other link:

<a href=”http://tutorialwebforblogger.blogspot.com/2010/03/jquery-link-nudging-plugin.html” id=”nudging” title=”Click to see how to create jquery link nudging plugin.”>Link Nudging</a>

6. Example of how to use Jquery Mouseover Tooltip Plugin to image:

<a href=”http://2.bp.blogspot.com/_rg7WY6fRQ4M/RtrIBP91cfI/AAAAAAAAATw/2L8EM1m5950/s1600/Naruto%252BWallpaper%252BUzumaki%252BNaruto%252B1.jpg” id=”naruto” title=”Click to see image of Naruto Uzumaki.”>Naruto Image</a>

Done, Now, you’ve already created Jquery Mouseover Tooltip Plugin.

]]> http://www.bageshsingh.com/bagesh-blog/2011/07/jquery-mouseover-tooltip-plugin/feed/ 0 Jquery Thumbnail Image with Heading and Caption http://www.bageshsingh.com/bagesh-blog/2011/07/jquery-thumbnail-image-with-heading-and-caption/ http://www.bageshsingh.com/bagesh-blog/2011/07/jquery-thumbnail-image-with-heading-and-caption/#comments Thu, 28 Jul 2011 18:48:00 +0000 Bagesh Singh http://www.bageshsingh.com/bagesh-blog/?p=1403 Let’s review a topic about how to create a Jquery Thumbnail Image with Heading and Caption.
Have you ever seen Jquery Thumbnail Image with Heading and Caption ? …

Like this below:

Click Here to See the Example

how to create a Jquery Thumbnail Image with Heading and Caption ? …

First Step;

1. Go to Dashboard, click Design, click Edit HTML

2. Find code of HTML below:

</head>

you can use (Ctrl+F) to find easily

3. Right Before </head> - place code of HTML below:

<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js”></script>
<script>$(document).ready(function () {

// transition effect
style = ‘easeOutQuart’;

// if the mouse hover the image
$(‘.photo’).hover(
function() {
//display heading and caption
$(this).children(‘div:first’).stop(false,true).animate({top:0},{duration:200, easing: style});
$(this).children(‘div:last’).stop(false,true).animate({bottom:0},{duration:200, easing: style});
},

function() {
//hide heading and caption
$(this).children(‘div:first’).stop(false,true).animate({top:-50},{duration:200, easing: style});
$(this).children(‘div:last’).stop(false,true).animate({bottom:-50},{duration:200, easing: style});
}
);

});</script>

4. Find code of HTML below:

 ]]></b:skin>

you can use (Ctrl+F) to find easily

5. Right Before ]]></b:skin> – place code of HTML below:

<!–Jquery-Thumbnail-BEGIN–>
.photo {
/* relative position, so that objects in it can be positioned inside this container */
position:relative;
font-family:arial;
/* hide those extra height that goes beyong the size of this container */
overflow:hidden;
border:5px solid #000;
width:350px;
height:186px;
}
.photo .heading, .photo .caption {
/* position inside the container */
position:absolute;
background:#000;
height:50px;
width:350px;
/* transparency for different browsers */
/* i have shared this in my CSS tips post too */
opacity:0.6;
filter:alpha(opacity=60);
-moz-opacity:0.6;
-khtml-opacity: 0.6;

}
.photo .heading {
/* hide it with negative value */
/* it’s the height of heading class */
top:-50px;
}

.photo .caption {
/* hide it with negative value */
/* it’s the height of bottom class */
bottom:-50px;
}

/* styling of the classes*/
.photo .heading span {

color:#26c3e5;
top:-50px;
font-weight:bold;
display:block;
padding:5px 0 0 10px;
}
.photo .caption span{
color:#999;
font-size:12px;
display:block;
padding:5px 10px 0 10px;
}
<!–Jquery-Thumbnail-END-http://tutorialwebforblogger.blogspot.com–>

6. Click Save Template.

Second Step;

1. Go to Dashboard, click Design, click Add a Gadget

2. Click ‘HTML/JavaScript’

3. Place code of HTML below – into ‘HTML/JavaScript’

<div>
<div><span>Blogfuel: Widgets and SEO</span></div>
<img src=”http://www.cmsnl.com/news/img/fuel_station_gas_nozzle.jpg” width=”340px” height=”175″ alt=”" />
<div><span>This is Example of Jquery Thumbnail Image with Heading and Caption</span></div>
</div>
]]> http://www.bageshsingh.com/bagesh-blog/2011/07/jquery-thumbnail-image-with-heading-and-caption/feed/ 0 Sliding Letters with jQuery http://www.bageshsingh.com/bagesh-blog/2011/07/sliding-letters-with-jquery/ http://www.bageshsingh.com/bagesh-blog/2011/07/sliding-letters-with-jquery/#comments Thu, 28 Jul 2011 18:46:50 +0000 Bagesh Singh http://www.bageshsingh.com/bagesh-blog/?p=1401 Example

In the following we will go through an example and we’ll start by the html for a little menu:

1 <div class="sl_examples">
2     <a href="#" id="example1" data-hover="Creativity">Illustrations</a>
3 </div>

We will use data-hover to indicate the word that should appear on hover. If you don’t use the data-hover then the same word will be used on hover.
Then we will style it in the following way, making sure that we have the right properties for the structure that will be generated:

01 .sl_examples{
02     float:left;
03     font-family: 'Bevan', arial, serif;
04     font-size:50px;
05     line-height:50px;
06     color:#f0f0f0;
07     margin-right:5px;
08     text-transform:uppercase;
09 }
10 .sl_examples a{
11     display:block;
12     position:relative;
13     float:left;
14     clear:both;
15     color:#fff;
16 }
17 .sl_examples a > span{
18     height:50px;
19     float:left;
20     position:relative;
21     overflow:hidden;
22 }
23 .sl_examples a span span{
24     position:absolute;
25     display:block;
26     left:0px;
27     top:0px;
28     text-align:center;
29 }
30 .sl_examples a span span.sl-w1{
31     color:#fff;
32     text-shadow:0px 0px 1px #fff;
33     z-index:2;
34 }
35 .sl_examples a span span.sl-w2{
36     color:#e82760;
37     text-shadow:-1px 1px 2px #9f0633;
38     z-index:3;
39 }

So, “sl-w1″ is the class for the first word letters and “sl-w2″ is the class for the second word letters.

Finally, we call the plugin:

1 $(window).load(function(){
2     $('#example1').hoverwords({ delay:50 });
3 });

The following settings can be used:

1 delay       : false,        // each letter will have different animation times
2 speed       : 300,          // animation speed
3 easing      : 'jswing',     // easing animation
4 dir         : 'leftright',  // leftright - current goes left, new one goes right || rightleft - current goes right, new one goes left,
5 overlay     : false,        // hover word is slided on top of the current word (just for the case when the hover word equals word)
6 opacity     : true          // animate the letters opacity

We hope you liked this little experiment and find it useful!

Download source


]]> http://www.bageshsingh.com/bagesh-blog/2011/07/sliding-letters-with-jquery/feed/ 0 CSS and jQuery Tutorial: Fancy Apple-Style Icon Slide Out Navigation http://www.bageshsingh.com/bagesh-blog/2011/07/css-and-jquery-tutorial-fancy-apple-style-icon-slide-out-navigation/ http://www.bageshsingh.com/bagesh-blog/2011/07/css-and-jquery-tutorial-fancy-apple-style-icon-slide-out-navigation/#comments Thu, 28 Jul 2011 18:45:56 +0000 Bagesh Singh http://www.bageshsingh.com/bagesh-blog/?p=1399 1. The HTML

The markup just consists of a div with an unordered list inside. The list elements contain a span for the icon and the link element:

01 <div class="navigation">
02  <ul class="menu" id="menu">
03     <li><span class="ipod"></span><a href="" class="first">Players</a></li>
04     <li><span class="video_camera"></span><a href="">Cameras</a></li>
05     <li><span class="television"></span><a href="">TVs</a></li>
06     <li><span class="monitor"></span><a href="">Screens</a></li>
07     <li><span class="toolbox"></span><a href="">Tools</a></li>
08     <li><span class="telephone"></span><a href="">Phones</a></li>
09     <li><span class="print"></span><a href="" class="last">Printers</a></li>
10  </ul>
11 </div>

2. The CSS

The style of the navigation container and the unordered list will be the following:

01 .navigation{
02     position:relative;
03     margin:0 auto;
04     width:915px;
05 }
06 ul.menu{
07     list-style:none;
08     font-family:"Verdana",sans-serif;
09     border-top:1px solid #bebebe;
10     margin:0px;
11     padding:0px;
12     float:left;
13 }
14 ul.menu li{
15     float:left;
16 }

Since we are making the list float, we will need some relative wrapper for the icons. You see, the icons which will be the background-images of the spans in our list, will have absolute positioning. That comes handy when you need to define a z-index, i.e. saying that some element is on top or under another one. Since we want the icons to appear on top and then dissapear under the link element, we will have to deal with z-indeces. And absolute positioning of elements in a relative container will makes things easier.

Now, let’s define the style for the link elements:

01 ul.menu li a{
02     text-decoration:none;
03     background:#7E7E7E url(../images/bgMenu.png) repeat-x top left;
04     padding:15px 0px;
05     width:128px;
06     color:#333333;
07     float:left;
08     text-align:center;
09     border-right:1px solid #a1a1a1;
10     border-left:1px solid #e8e8e8;
11     font-weight:bold;
12     font-size:13px;
13     -moz-box-shadow: 0 1px 3px #555;
14     -webkit-box-shadow: 0 1px 3px #555;
15     text-shadow: 0 1px 1px #fff;
16 }

We want to give the link elements a fixed width and some background gradient. The borders will create a nice inset effect.

The next hover class will be applied using jQuery, since the :hover pseudo class creates an unwanted effect: When the icon slides out it covers the link for a few milliseconds, making the hover style dissapear in that time. That is perceived as a flicker and we will avoid that by defining a class that we will simply add with jQuery when we do the icon slide out effect:

1 ul.menu li a.hover{
2     background-image:none;
3     color:#fff;
4     text-shadow: 0 -1px 1px #000;
5 }

The first and last link element should have a rounded border on the respective side, so we define two classes for those:

1 ul.menu li a.first{
2     -moz-border-radius:0px 0px 0px 10px;
3     -webkit-border-bottom-left-radius: 10px;
4     border-left:none;
5 }
6 ul.menu li a.last{
7     -moz-border-radius:0px 0px 10px 0px;
8     -webkit-border-bottom-right-radius: 10px;
9 }

The common style for all the icon spans will be the following:

01 ul.menu li span{
02     width:64px;
03     height:64px;
04     background-repeat:no-repeat;
05     background-color:transparent;
06     position:absolute;
07     z-index:-1;
08     top:80px;
09     cursor:pointer;
10 }

The single styles for the specific icons will contain the background-image and the x-position:

01 ul.menu li span.ipod{
02     background-image:url(../icons/ipod.png);
03     left:33px; /*128/2 - 32(half of icon) +1 of border*/
04 }
05 ul.menu li span.video_camera{
06     background-image:url(../icons/video_camera.png);
07     left:163px; /* plus 128 + 2px of border*/
08 }
09 ul.menu li span.television{
10     background-image:url(../icons/television.png);
11     left:293px;
12 }
13 ul.menu li span.monitor{
14     background-image:url(../icons/monitor.png);
15     left:423px;
16 }
17 ul.menu li span.toolbox{
18     background-image:url(../icons/toolbox.png);
19     left:553px;
20 }
21 ul.menu li span.telephone{
22     background-image:url(../icons/telephone.png);
23     left:683px;
24 }
25 ul.menu li span.print{
26     background-image:url(../icons/print.png);
27     left:813px;
28 }

As you can see, we are positioning the icons in such a way, that they are centered inside of the list element. The top position is 80px initially since we want to show them to the user when the page get’s loaded. Then we will hide them in a stair-like fashion to create an awesome effect!

3. The JavaScript

First, we want to create the effect of the icons dissapearing in a stair-like fashion and then we will define the hover function for the list elements:

01 $(function() {
02     var d=1000;
03     $('#menu span').each(function(){
04         $(this).stop().animate({
05             'top':'-17px'
06         },d+=250);
07     });
08
09     $('#menu > li').hover(
10         function () {
11             var $this = $(this);
12             $('a',$this).addClass('hover');
13             $('span',$this).stop().animate({
14                 'top':'40px'
15             },300).css({
16                 'zIndex':'10'
17             });
18         },
19         function () {
20             var $this = $(this);
21             $('a',$this).removeClass('hover');
22             $('span',$this).stop().animate({
23                 'top':'-17px'
24             },800).css({
25                 'zIndex':'-1'
26             });
27         }
28     );
29 });

When hovering, we add the class “hover” to the link element, make the icon appear from the top, and increase the z-Index, so that the icon stays on top of the link. When the mouse goes out, we do exactly the opposite, which creates the effect that the icon dissapears behind the link element. For that we will allow more time (800 milliseconds) because it’s such a fun effect that the user might want to enjoy a little bit!

And that’s all!
I hope you like and enjoy it!

Download source

 

]]> http://www.bageshsingh.com/bagesh-blog/2011/07/css-and-jquery-tutorial-fancy-apple-style-icon-slide-out-navigation/feed/ 0 jPaginate: how to add a Fancy jQuery Pagination Plugin http://www.bageshsingh.com/bagesh-blog/2011/07/jpaginate-how-to-add-a-fancy-jquery-pagination-plugin/ http://www.bageshsingh.com/bagesh-blog/2011/07/jpaginate-how-to-add-a-fancy-jquery-pagination-plugin/#comments Thu, 28 Jul 2011 18:44:44 +0000 Bagesh Singh http://www.bageshsingh.com/bagesh-blog/?p=1397 jPaginate

jPaginate is a jQuery pagination plugin that comes with a twist: animated page numbers. The user can slide through the available page numbers by clicking or just hovering over the arrows. Shortlinks to the first and last page are available as well.
You can call the plugin in the following way:

 

$(elementID).paginate()

You can configure the plugin with the following properties:

  1. count: The total number of pages
  2. start: With which number the visible pages should start
  3. display: How many page numbers should be visible
  4. border: If there should be a border (true/false)
  5. border_color: Color of the border
  6. text_color: Color of the text/numbers
  7. background_color: Background color
  8. border_hover_color: Border color when hovering
  9. text_hover_color: Text color when hovering
  10. background_hover_color: Background color when hovering
  11. images: If the arrows should be images or not (true/false)
  12. mouse: With value “press” the user can keep the mouse button pressed and the page numbers will keep on sliding. With value “slide” the page numbers will slide once with each click.
  13. onChange: The callback function when clicking on a page. As argument the number of the page clicked can be used.

Download jPaginate

]]> http://www.bageshsingh.com/bagesh-blog/2011/07/jpaginate-how-to-add-a-fancy-jquery-pagination-plugin/feed/ 0