Connect With WRD
feed via e-mail
feed via e-mail

Posts Tagged ‘jQuery’

Pure is an unobtrusive JavaScript template engine for HTML.

It aims to make HTML dynamic as templates can be created with only JavaScript, HTML & CSS.

Pure JavaScript Template Engine Logo

Pure is fast & runs on the browser/client side. It currently supports JSON (XML to be supported soon).

This JavaScript template engine can be used as a jQuery plugin (soon Dojo, DOMAssistant, MooTools, Prototype).

Pure provides a detailed "getting started" information supported with helpful examples.

js-hotkeys is a jQuery plugin which enables you to create keyboard triggered events.

Update: The plugin is based on shortcut.js. You may want to use this for not being restricted with jQuery.

This is a very nice feature if you want to provide users more browsing flexibility. And also, it can be used in JavaScript testing environments like triggering a test function by clicking CTRL + t.

JavaScript Keyboard Control

A simple usage of the plugin is:

$.hotkeys.add('Ctrl+a',function(){/*DO YOUR DUTY*/});
$.hotkeys.remove('Ctrl+a');

A demo of this jQuery keyboard control plugin can be found here.

jqPuzzle is a jQuery plugin which enables you to create sliding puzzles from any image.

The created JavaScript puzzle can have the shuffle & solution options besides the moves made & seconds played.

JavaScript Puzzle

jqPuzzle is highly configurable as the options in the interface can be enabled/disabled, number of rows & columns of the puzzle to be created can be defined & more.

How to use?

After inserting the jquery.jqpuzzle.js & jquery.jqpuzzle.css files to your webpage, simply give the class="jqPuzzle" to any image. That’s all.

Almost every web project needs a "launch page (under construction page)" or a page to show when the website is under maintenance.

Rather than creating a new one from scratch for every project, here is a free launch page with an Ajax newsletter.

Don't forget to bookmark this resource at del.icio.us.

Free Launch - Under Construction Page

Demo
Download

E-mails are saved in a .txt file with ";" delimiters. So they can be used anytime with a simple copy-paste.

Important: Before using this free launch page, change the name of the text file to anything hard to guess and also update the name of this text file in newsletter.php file's 1st line.

You can use this template as is or update it easily to fit your needs.

Features of this free launch page:

  • Ajaxed interface
  • Server-side e-mail validation (secure)
  • E-mails are saved in a text file with ";" delimiter. So, when your website is launched, you can simply copy and paste them to your favorite e-mail application and announce the launch.
  • Configurable error & success messages
  • Cross-browser (tested in all major browsers)

Requirements:

PSD files of bubbles are included in the download package.

This launch page is free to use (no links required) but can not be distributed from any other website or sold.

If you share it as a resource in your website, please link to this post. Thanks.

Live search is a great way of improving usability, specially if you have a serious amount of data to search. No going back & further and your users can see the results as they type.

QuickSilver has a great interface which accepts abbreviations as the input like writing wrdprss rather than WordPress.

JavaScript Live Search

John Nunemaker had published a QuickSilver style Prototype live search and the ported it to jQuery.

John Resig (creator of jQuery) played with it more and re-ported it to jQuery (which seems to be the final version for now : ) ).

Update (07.08.2008): And a MooTools version of the code.

jQuery Table Drag and Drop plugin simply adds drag’n drop functionality to tables.

Table drag’n dropping can’t be handled by standard drag’n dropping utilities as you need to move the whole row, not just the cell that receives the mouse events and re-parenting the row also requires specific code.

jQuery Table Drap Drop

This drag and drop plugin:

  • Allows the user to reorder rows within a table.
  • Individual rows can be marked as non-draggable and/or non-droppable.
  • Rows can have as many cells as necessary and the cells can contain form elements.

Standard usage is very simple:

$("#table-1").tableDnD();

After every drag’n drop event the new ordering values of the columns are returned as an array which you can send it as an Ajax query for updating the database.

Floating a banner or content definitely increases the visibility of them. But have some limitations (which we’ll remove).

In general, floating banners are used when there is no other content at their column as they are always at the "float" (position:fixed) state.

This is a better & smarter solution that will float the banners when needed, re-position them and can be used in any type of banner – content combinations.

And, best of all, you don’t need to set any fixed heights in the code.

JavaScript Floating Smart Banner

We’ll be using jQuery but these simple functions can easily be ported to other JavaScript frameworks.

Before reading further, here are the examples. Check both example 1 and example 2 and scroll down.

Logic of this smart floating banners:

  • Position of element (probably div) holding the banners won’t be mentioned as "fixed" in the beginning.
  • We insert an identifier element to understand the exact original position of the end of the contents.
  • When a user scrolls, with a JavaScript function, we check if the last part of the content is visible or not.
  • If not visible, we set the position of the div holding the banner to fixed.
  • If visible we re-set the position to relative (or absolute).
  • That’s all.

The HTML:

A standard 2 column webpage.

<div class="mainWrap">
    <div class="leftWrap">contents</div>
    <div class="rightWrap">
        <div class="banner">banner</div>
        <div class="smartBannerIdentifier"></div>
    </div>
</div>

The CSS:

The important part is, we are not setting CSS "fixed" position to the banner.

.mainWrap {
    width: 500px;
    margin: 0 auto;
}
.leftWrap {
    float: left;
    width: 250px;
    background-color: #CCCCCC;
}
.rightWrap {
    float: right;
    width: 250px;
    background-color:#666666;
}
.banner {
    width: 250px;
    background-color: #FF0000;
}

JavaScript:

We have a function which simply:

  • Understands if the scrolled amount is bigger than the "smartBannerIdentifier" which defines the end of contents.
  • If yes, sets the CSS position of the banner to fixed.
  • If no, sets the CSS position of the banner to relative and "top" to the original value using the smartBannerIdentifier’s offset value.

$(document).ready(function(){
  $(window).scroll(function(){
    if  ($(window).scrollTop() > $(".smartBannerIdentifier").offset({ scroll: false }).top){
      $(".banner").css("position", "fixed");
      $("#banner").css("top", "0");
    }
   if  ($(window).scrollTop() <= $(".smartBannerIdentifier").offset({ scroll: false }).top){
      $(".banner").css("position", "relative");
      $(".banner").css("top", $(".smartBannerIdentifier").offset);
    }
   });
});

Dependencies:

JavaScript function used requires some objects from jQuery 1.2.6+. For lower jQuery versions, you’ll need the dimensions plugin.

Using this JavaScript floating banners you can:

  • Definitely show your banners or content more with a simple non-flickering method.
  • Order your contents and banners in any way and it will work.
  • Can do some special tricks like adding effects when they begin to float or else.

Download JavaScript Floating Banners

Script is tested on major browsers at Windows OS. I’m not sure about the compatibility on Mac and others but must be ok as it uses standard jQuery functions. If you live any problems, just share them at the comments.

P.S. Download includes 2 example files.

This is a jQuery plugin which enables you to preload images mentioned in CSS.

It is useful to prevent the flickering & loading period happens when an image is being loaded at rollover states, Ajax loaders, toggle effects & more.

CSS Image Preloading

The plugin can pull any image in the CSS independent from the folders they are placed in.

Tip:

Here is a version of this image preloading script ported to Prototype.

Sliding menus are very effective in areas where we have limited space .

This is a sliding top menu built with jQuery which can be fired through the open & close buttons or with any tag with the related class name.

You can also use it as an info box, login area & more.

Click here to see the final working demo of this jQuery sliding menu.

It presents the menu when closed like this:

Sliding Top Menu

And when opened:

jQuery Sliding Menu

Demo
Download

 

Click here to see the final working demo of this jQuery sliding menu.

 

Step 1 – HTML:

<div id="sliderWrap">
    <div id="openCloseIdentifier"></div>
    <div id="slider">
        <div id="sliderContent">
            Isn't this nice?
        </div>
        <div id="openCloseWrap">
            <a href="#" class="topMenuAction" id="topMenuImage">
                <img src="open.png" alt="open" />
            </a>
        </div>
    </div>
</div>

 

Step 2 – CSS:

<style type="text/css">
body {
margin: 0;
font-size:16px;
color: #000000;
font-family:Arial, Helvetica, sans-serif;
}
#sliderWrap {
margin: 0 auto;
width: 300px;
}
#slider {
position: absolute;
background-image:url(slider.png);
background-repeat:no-repeat;
background-position: bottom;
width: 300px;
height: 159px;
margin-top: -141px;
}
#slider img {
border: 0;
}
#sliderContent {
margin: 50px 0 0 50px;
position: absolute;
text-align:center;
background-color:#FFFFCC;
color:#333333;
font-weight:bold;
padding: 10px;
}
#header {
margin: 0 auto;
width: 600px;
background-color: #F0F0F0;
height: 200px;
padding: 10px;
}
#openCloseWrap {
position:absolute;
margin: 143px 0 0 120px;
font-size:12px;
font-weight:bold;
}
</style>

 

With the CSS file there are few major points:

  • #slider has to be positioned absolutely, so it can overlay the other content.
  • #slider has a negative top-margin which hides it.
  • #sliderContent is positioned absolutely to not to crack the open/close buttons
  • #openCloseWrap holding the buttons are positioned absolutely too.

Step 3 – jQuery / JavaScript:

<script type="text/javascript">
$(document).ready(function() {
    $(".topMenuAction").click( function() {
        if ($("#openCloseIdentifier").is(":hidden")) {
            $("#slider").animate({
                marginTop: "-141px"
                }, 500 );
            $("#topMenuImage").html('<img src="open.png"/>');
            $("#openCloseIdentifier").show();
        } else {
            $("#slider").animate({
                marginTop: "0px"
                }, 500 );
            $("#topMenuImage").html('<img src="close.png"/>');
            $("#openCloseIdentifier").hide();
        }
    }); 
});
</script>

The main trick is changing the top margin of #slider and update the open / close images.

We have an empty element named openCloseIdentifier which shows us whether the menu is open or closed. We simply hide it when the menu is open and show when it is closed.

Then all we do is:

if openCloseIdentifier = hidden then close the menu or if openCloseIdentifier = visible then open the menu.

Sliding effect can be fastened by changing the 500 value in JavaScript to a smaller number or else.

P.S. Down & up arrow icons are from the Crystal Clear icon set.

ThemeRoller is a web based application that helps theming jQuery UI components.

Using ThemeRoller, you can create your theme for your web applications within minutes. It’s completely intuitive, comes wich rich controls to change the color and design of each state.

jQuery ThemeRoller

You can preview your theme as:

  • Date picker
  • Slider
  • Accordion menu
  • Tabbed menu
  • And a dialog box

and download as a ZIP file.

In addition, ThemeRoller also includes a theme gallery to browse for downloads and inspiration. Creating a theme for your application doesn’t get any easier than this; it’s simply that amazing.

Uptime Robot
feed-holder
FeedBurner
PSD2HTML.com