Ajax Updates

Posted by education training on Monday, December 21, 2009

Ajax Updates

Simple JS

Posted: 21 Dec 2009 10:48 AM PST

SimpleJS is a simple and light javascript library which proposes functions ready to use to make the the exploitation of ajax easier. First developed for the beginners and the small projects, SimpleJS is a free library which can’t be compared with Prototype or other professional framework.

SimpleJS size 5ko and does not require any external framework.

The functions are simplified as much as possible. SimpleJS has been tested on IE6, IE7( beta), Firefox 2.0 and Opera 9.02.

The current version of SimpleJS is 0.02.beta The Ajax functions included in SimpleJS are based on SACK of Gregory Wild-Smith

To use SimpleJS you only have to insert the file simple.js to your page with this piece of script:

<script type="text/javascript" src="simple.js"></script>

Functions:
* $ajaxload()
* $ajaxreplace()
* $opacity()
* $shiftOpacity()
* $pulsate()
* $highlight()
* $textColor()
* $morphColor()
* $toggle()
* $blindup(), $blinddown()

SimpleJS is a javascript library simple and light proposing functions ready with the use to facilitate the exploitation of ajax.

New Version: 0.1 beta

simple.js : simpleJs base library (5ko)
simpleajax.js : ajax functions (6ko)
simpleacco.js : accordion effects (1 ko)
simpleslish.js : easy create SlidShow (2ko)


Demo: http://simplejs.bleebot.com/
Download: http://simplejs.bleebot.com/SimpleJSpack.zip
Source: http://simplejs.bleebot.com/

Related Listings:

  1. Simple JS Script SimpleJS is a simple and light javascript library which proposes...
  2. Ajax Simple Upload Browsers force us to use file inputs ( ) for...
  3. Simple WYSIWYG Editor The Simple WySiWyG Editor for your small light and simple...

Bookmark Script Us for Your Website using Javascript

Posted: 21 Dec 2009 09:03 AM PST

For your website to have traffic, people should remember your site and visit again. This problem was solved long time ago with browser’s Bookmarks. Still, people are lazy and usually are not using it, unless you remind them. So a Bookmark us script on your site is very useful.

I will show you how you can easily create such a script for your site. The next script is compatible with the major browsers and easy to implement. Let us begin!

Place the following script into your < head >section in the page you need to use it:

 <script type="text/javascript">  function bookmark_us(url, title){  if (window.sidebar) // firefox     window.sidebar.addPanel(title, url, ""); else if(window.opera && window.print){ // opera     var elem = document.createElement('a');     elem.setAttribute('href',url);     elem.setAttribute('title',title);     elem.setAttribute('rel','sidebar');     elem.click(); } else if(document.all)// ie     window.external.AddFavorite(url, title); } </script>

Next, place the following code in order to show the link that opens browser’s bookmark window:

  <a href="javascript:bookmark_us('http://www.mobidhoom.com','Free Mobile Games, Themes, Ringtones, SMS')">Bookmark us!</a>

That is all! You have now a full working bookmark us script.

Of course, you will have to replace the link and title with your own. Also, instead of a text (in this case “Bookmark us!”) you can use a picture or any other text you want.


**Note: If your title contains quotes, you should escape them with backslash:

   <a href="javascript:bookmark_us('http://www.reconn.us','You\'ll find here lots of free resources!')">Bookmark us!</a>

Enjoy..!

Related Listings:

  1. Jquery Bookmark Script The bookmark sharing functionality can easily be added to a...
  2. jSocialize -bookmark widget BASIC STEPS Copy the images folder to your root folder....
  3. Heatmap For Your Website ClickHeat is a visual heatmap of clicks on a HTML...

Wrap Content Around Images: jQSlickWrap

Posted: 21 Dec 2009 03:06 AM PST

If you’ve ever felt the need to wrap stuff around an irregularly-shaped image using CSS’s float, you may have been somewhat disappointed to find out that it’s forced to wrap around the image’s bounding box, rather than the actual contents of the image.

Tell me about what it can do…

* Client-side, Sliced and Diced Sandbags using HTML 5’s new
* CSS-based padding.
* Sandbag “resolution” is configurable.
* Written with Progressive Enhancement in mind.
* Optional “bloom” mode provides ultra-precise padding.

What browsers does it work on?

jQSlickWrap requires that your browser support HTML 5’s element, and in particular it needs to have support for the toDataURL() function on canvases (meaning it won’t work with excanvas, for now). jQSlickWrap is known to work on the following browsers:

* Mozilla Firefox 3.5+
* Google Chrome
* Apple Safari 4+

If you happen to know that it works on additional browsers, let me know on twitter.
How does it work?
Man with a shovel.

Not interested in the nitty gritty low down on how jQSlickWrap works its “magic”? Skip ahead to the examples.

As stated in the features list above, jQSlickWrap implements a client-side version of the Sliced and Diced Sandbags method of wrapping text around an irregularly-shaped object (all bundled in a nice tidy jQuery plugin, of course).

To do this, it needs to have access to the individual pixels of the images it’s operating on — which is why for jQSlickWrap to work, you need to have a browser that supports HTML 5’s new element.
Here’s an overview of the algorithm:

1. If necessary, pre-load the image.
2. Determine the CSS styles for the image (float and padding).
3. Create a element and set its dimensions to the size of the image plus its padding.
4. Draw the image onto the canvas in the top-left location.
5. Figure out the “background” color of the image by examining the pixel data at the top-left corner of the image.
6. Fill the < c anvas> with this background color.
7. Re-draw the image contents onto the < c anvas>, but now in the correct location as specified by its padding.
8. Iterate through the image to find the “edge” of the image’s contents at each row – save this width. (the size of a row is defined to be the resolution in the settings to a call to slickWrap).
9. Using the widths collected in the previous step, generate < div > elements of those sizes.
10. Float the < div>s to the correct side, and set their clear style to the same side.
11. Set the background-image to a non-repeating image described by a call to canvas.toDataURL() for the original’s containing element.
12. Hide the original image.
Basic SlickWrapping
All you need to SlickWrap your images is to call the slickWrap function on the results of a jQuery query:

 <html>     <head>         <title>jQSlickWrap Demo 1</title>         <script src="./jquery-1.3.2.min.js" type="text/javascript"></script>         <script src="./jquery.slickwrap.js" type="text/javascript"></script>         <style type="text/css">             .wrapReady {                 float: left;             }         </style>         <script type="text/javascript" charset="UTF-8">             $(document).ready(function(){                 $('.wrapReady').slickWrap();             });         </script>     </head>     <body>         <img src="./myImage.jpg" class="wrapReady" />         <p>Lots of text goes here..</p>     </body> </html>

Note: the images selected by the query should have some sort of float styling applied to them. Either float: right or float: left

SlickWrapping With Style
jQSlickWrap is capable of figuring out what kind of padding you want to use when you SlickWrap an image by looking at each image’s styling. Just make sure you’ve got the padding css style on your image:

 <html>     <head>         <title>jQSlickWrap Demo 2</title>         <script src="./jquery-1.3.2.min.js" type="text/javascript"></script>         <script src="./jquery.slickwrap.js" type="text/javascript"></script>         <style type="text/css">             .wrapReady {                 float: left;                 padding: 30px;             }         </style>         <script type="text/javascript" charset="UTF-8">             $(document).ready(function(){                 $('.wrapReady').slickWrap();             });         </script>     </head>     <body>         <img src="./myImage.jpg" class="wrapReady" />         <p>Lots of text goes here..</p>     </body> </html>

Specifying Settings
In addition to being able interpret some settings from the CSS styling on image elements, it is also possible to specify several other settings to customize the way SlickWrapping will be done.
Settings:

1. bgColor – The background color to use when examining the contents of the images resulting from a query. If no value is given, jQSlickWrap will try to determine the background color of the image from the image’s top-left pixel.
2. cutoff – The maximum allowable “distance” between a pixel’s color and the background color that will qualify that pixel as being considered as part of the background. Defaults to 5.
3. resolution – The height of the
elements to be created. Default value is 20.
4. bloomPadding – Whether or not to use the advanced “bloom” algorithm to calculate precise padding distances. This is very slow in the current version, so the default value is false.

 <html>     <head>         <title>jQSlickWrap Demo 3</title>         <script src="./jquery-1.3.2.min.js" type="text/javascript"></script>         <script src="./jquery.slickwrap.js" type="text/javascript"></script>         <style type="text/css">             .wrapReady {                 float: left;                 padding: 30px;             }         </style>         <script type="text/javascript" charset="UTF-8">             $(document).ready(function(){                 $('.wrapReady').slickWrap({                     bgColor: {              // use red as the background color                         r: 255,                         g: 0,                         b: 0,                         a: 255                     },                     cutoff: 10,             // let there be a tolerance of 10                     resolution: 15,         // create s of height 15                     bloomPadding: false     // let's not use bloom                 });             });         </script>     </head>     <body>         <img src="./myImage.jpg" class="wrapReady" />         <p>Lots of text goes here..</p>     </body> </html>

Demo: http://jwf.us/projects/jQSlickWrap/example3.html
Download: http://code.google.com/p/jqslickwrap/downloads/detail?name=jquery.slickwrap.min.js
Source: http://jwf.us/projects/jQSlickWrap/

Related Listings:

  1. slideViewer Images – JQuery Plugin What’s this? slideViewer is a lightweight (1.5Kb) jQuery plugin wich...
  2. Animated Innerfade Images This plugin for jQuery is an extension to the work...
  3. Making A Slick Content Slider Introduction Web masters constantly search for ways to optimize the...

Beautiful And Free Ajax Poll Script

Posted: 21 Dec 2009 02:58 AM PST

Dracon Ajax Poll is a free PHP-MySQL-Ajax poll script which is simply beautiful.

The script is totally skinnable, has multi-language support & can also use XML as the data source rather than MySQL.


Once an option is voted, total votes are displayed with a charming effect.

It records the IPs used in order to prevent repeated-votes as a security measure.

At the backend, there is again a totally Ajaxed admin interface which is easy to use.

It is possible to add unlimited polls & unlimited options to any poll, edit & delete them.



Demo: http://poll.dracon.biz/
Source: http://www.dracon.biz/dracon_poll.php

Related Listings:

  1. A poll system with PHP and mySQL If you have been doing the other tutorials on this...
  2. A poll system with PHP and mySQL If you have been doing the other tutorials on this...
  3. Dynamic Poll with jQuery When you combine some neat functionality courtesy of PHP with...

0 comments:

Post a Comment

Note: Only a member of this blog may post a comment.