jQuery Toggle Handlers(Image Resize)


jQuery provides a few event-related convenience methods that makes it easier to use interaction behaviour 
on our pages.
toggle() method establishes a circular progression of click event handlers that are applied on successive click events.
On first click event first registered handler is called, on second click, the second is called, on third third is called and so on..
The function given below demonstrates a progression of event handlers. 

<script type="text/javascript">
      $(function(){

        $('img[src*=small]').toggle(
            function() {
              $(this).attr('src',
                $(this).attr('src').replace(/small/,'medium'));
            },
            function() {
              $(this).attr('src',
                $(this).attr('src').replace(/medium/,'large'));
            },
            function() {
              $(this).attr('src',
                $(this).attr('src').replace(/large/,'small'));
            }
        );

      });
    </script>

 Using it with HTML we have:
<!DOCTYPE html>
<html>
  <head>
    <title>jQuery .toggle() Example</title>
    <link rel="stylesheet" type="text/css" href="../styles/core.css"/>
    <script type="text/javascript" src="../scripts/jquery-1.4.js"></script>
    <script type="text/javascript">
      $(function(){

        $('img[src*=small]').toggle(
            function() {
              $(this).attr('src',
                $(this).attr('src').replace(/small/,'medium'));
            },
            function() {
              $(this).attr('src',
                $(this).attr('src').replace(/medium/,'large'));
            },
            function() {
              $(this).attr('src',
                $(this).attr('src').replace(/large/,'small'));
            }
        );

      });
    </script>
    <style type="text/css">
      img {
        cursor: pointer;
      }
    </style>
  </head>

  <body>

    <div>Click on the image to change its size.</div>
    <div>
      <img src="hibiscus.small.jpg" alt="Hibiscus"/>
    </div>  </body>
</html>

small




















large
Advertisements

Edit your page content with HTML 5


This is one of the new feature(attrib) of HTML 5 that makes the content of your own webpage editable. You can now edit text on your page just by using attribute “contenteditable” which is in its own way a super awesome feature in HTML 5!!

just go through this code below..


<html>

<head>

<title>

edit content

</title>

</head>

<body>

<p contenteditable=”true”> Edit this text by overwriting any part of it. </p>

</body>

</html>


….open your text editor and try out this piece of code. This is how content on a webpage is made editable.

This feature has also been used by popular social networking sites like Facebook where you can edit your own album name or your own previously saved comment.