Feb 28, 2011

Create Tabbed HTML using JQuery - $.TABIFY

Description:
It is very easy to use Tabify. All you need to do is to create an ul-list, fill it with a couple of li-elements with containing links (tabs) and create a couple of matching content divs. In the example below notice how the href-attribute on the link elements corresponds to the content div IDs.



Usage:
$('ul').tabify();
<ul id="menu">
<li class="active"><a href="#contentHome">Home</a></li>
<li><a href="#contentGuestbook">Guestbook</a></li>
<li><a href="#contentLinks">Links</a></li>
</ul>
<div id="contentHome">Content for Home</div>
<div id="contentGuestbook">My guestbook</div>
<div id="contentLinks">Links</div></pre>
// All divs but #contentHome will be hidden since the menu option 'Home' has the class name 'active.
VIEW DEMO
DOWNLOAD
at No comments:

In-place editing without input tag - JQuery (contentEditable property)

Usage
First, add jQuery, plugin and style sheet to your page.

<link href="editableText.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="../jquery.editableText.js" type="text/javascript"></script>

Next, pass the elements you want to make editable to the plugin. In this example I marked editable elements with "editableText" class.

jQuery(function($){
 $('.editableText').editableText({
 // default value
 newlinesEnabled: false
 });
 // we will add more code here
 });

Now you should create a function that will do something with the new value of the editable element. Bind it to the element using change event.

// bind an event listener that will be called when
 // user saves changed content
 $('.editableText').change(function(){
var newValue = $(this).html();
 // do something
// For example, you could place an AJAX call here:
$.ajax({
 type: "POST",
 url: "some.php",
 data: "newfieldvalue=" + newValue,
 success: function(msg){
 alert( "Data Saved: " + msg );
 }
 });
 });

VIEW DEMO
at No comments:

Text Limit Validation JQuery

Here is a very simple script which allows you to plug-n-play the code for putting a client end text limiter.

Here are the following steps:
Usage 1
  • Download the minified js
  • Write HTML - <textarea></textarea>
  • Write JS - $('textarea').textLimit(100)
Usage 2
  • Download the minified js
  • Write HTML -
    <textarea></textarea>
    <span></span>
    <textarea></textarea>
    <span></span>
  • Write JS -
    $('textarea').textLimit(100,function( length, limit ){
    $(this).next().text( limit - length );
    });
VIEW DEMO
at No comments:

Apply background without CSS background option

$('element').border( options );

JQUERY:
$('.test-1').border('5px');
$('.test-2').border('10px red .3');
$('.test-3').border('11px black .6');
$('.test-4').border('0 #fff000');

HTML/CSS:
<style type="text/css">
.test-1 {
 width:400px;
 background:#cccccc;
 padding:20px;
 margin:20px;
 }
 .test-2 {
 position:absolute;
 z-index:11;
 top:115px;
 left:450px;
 width:100px;
 height:100px;
 background:#dddddd;
 }
 .test-3 {
position:relative;
 top:100px;
 left:400px;
 width:200px;
 height:50px;
 background:#eeeeee;
}
 .test-4 {
position:absolute;
 z-index:20;
 padding:20px;
 top:10px;
 left:410px;
 }
 </style>
 <div class="test-1">
 Some content<br />
 Some content<br />
 Some content
 </div>
 <div class="test-2">
 ...
 </div>
 <div class="test-3">
 Over here.....
 </div>
 <div class="test-4">
 no background color
 </div>
 <div style="height:110px;"></div>

at No comments:

How to create a Floating Div

Write this in <head> tag:
  1. <script type="text/javascript" src="/js/jquery-min-1.4.4.js"></script>
  2. <script type="text/javascript" src="/js/floating-1.5.js"></script>

write this in <body> tag:

  1. <div id="floatdiv" style="
  2. position:absolute;
  3. width:200px;height:50px;top:10px;right:10px;
  4. padding:16px;background:#FFFFFF;
  5. border:2px solid #2266AA;
  6. z-index:100">
  7. This is a floating javascript menu.
  8. </div>
  10. <script type="text/javascript">
  11. jQuery(document).ready(function($) (
  12. {
  13. $('#floatdiv').addFloating(
  14. {
  15. targetRight: 10,
  16. targetTop: 10,
  17. snap: true
  18. });
  19. });
  20. </script>


at No comments:

jQuery BlockUI (block user during AJAX call)

The jQuery BlockUI Plugin lets you simulate synchronous behavior when using AJAX, without locking the browser[1]. When activated, it will prevent user activity with the page (or part of the page) until it is deactivated. BlockUI adds elements to the DOM to give it both the appearance and behavior of blocking user interaction.

Usage is very simple; to block user activity for the page:

$.blockUI();
Blocking with a custom message:
$.blockUI({ message: '<h1><img src="busy.gif" /> Just a moment...</h1>'});
Blocking with custom style:
$.blockUI({ css: { backgroundColor: '#f00', color: '#fff'} });
To unblock the page:
$.unblockUI();
If you want to use the default settings and have the UI blocked for all ajax requests, it's as easy as this:
$(document).ajaxStart($.blockUI).ajaxStop($.unblockUI);


at No comments:

Feb 27, 2011

WOW- Slider - JQuery slider with amazing effects and flashy features

WOW Slider is packed with a point-and-click wizard to create fantastic sliders in a matter of seconds without coding and image editing.

Features
  • # Awesome and unique transitions: Blinds, Fly, Squares, Explosion, Fade, Slices, Basic
  • # Stylish pre-made designs: Noir, Pulse, Crystal, Noble, Chrome, Block
  • # Lightweight (4-12Kb uncompressed)
  • # Prev/Next controls
  • # Bullet navigation
  • # Customizable speed, delay, size etc.
  • # Cross-browser compatibility
  • # Search engine friendly
  • # Clean and valid markup
at No comments:

Creating Radial Menu using Jquery

JQuery Radial menu can be created to benefit to novice users to make they remember the position of the menu and function or functionality of the website. It is quite fancy in looks and can be placed anywhere on the page. It can also be rotated in any direction.

Features:
  • Can be placed anywhere
  • Fancy in looks
  • Almost everything is adjustable in the plugin.
  • Can be rotated in any direction.
  • Menu items can be shuffled.

at No comments:

Custom Context Menu - Jquery

wdContextMenu is is very lightweight jquery plugin for right click menu, which allows you to generate a custom menu on users right click event.

Try a Demo

Download Context Menu Library
at No comments:

Vertical List Slider

It lets you show long list of elements managing pagination, it can work with elements already in the DOM of your page or loading them via ajax when needed. And it works with mouse wheel of course.

View demo

Project page:
at No comments:

Feb 24, 2011

iPhone CSS - tips for building iPhone websites

Steps

  • This first bit of code is a PHP browser sniffing snippet, we’ll use some CSS media queries for that. What we’ll use this code for is serving the markup with an iPhone specific meta tag and to shorten the current page’s title.

    <?php
    $browser = strpos($_SERVER['HTTP_USER_AGENT'],"iPhone");
    if ($browser == true){
    $browser = 'iphone';
    }
    ?>

    Now to imply that condition if browser is iPhone

    <?php if($browser == 'iphone'){ ?>DO THIS<?php } ?>

  • Saving to the application screen of the iPhone - shorting the page title.
    Changing conditional page title:
    <?php if($browser == 'iphone'){ ?>   <meta name="viewport"   content="width=device-width,   minimum-scale=1.0, maximum-scale=1.0" /> <?php } ?>

    The home screen icon
    Just upload a 57×57px icon (usually a larger version of your favicon) to your server root. Name the icon as apple-touch-icon.png, and the iPhone will sort the rest out.

  • Stopping user pinch-zooming

    The second use for the PHP snippet is to serve the iPhone a meta tag which disables the user pinch-zoom that Mobile Safari offers:

    <?php if($browser == 'iphone'){ ?>
    <meta name="viewport"
    content="width=device-width,
    minimum-scale=1.0, maximum-scale=1.0" />
    <?php } ?>
  • Styling
    The first thing you need to do is make sure the HTML link element that points to your main stylesheet does not have a media attribute:
  • <link rel="stylesheet" type="text/css" href="/path/to/style.css" />

    We can just add our iPhone styles directly onto the end of the main stylesheet, and inherit all the styles set for desktop viewing.

  • /*--- Main CSS here ---*/
    /*------------------------------------*\
    IPHONE
    \*------------------------------------*/
    @media screen and (max-device-width: 480px)
    { /*--- iPhone only CSS here ---*/ }

  • The navigation
    If you have a navigation menu in which all the items are floated and made horizontal, insert the following:
  • @media screen and (max-device-width: 480px)
    { body{...} div{...} #nav,#nav li{   float:none!important;
    clear:both!important;   margin:0 0 20px 0!important;
    display:block;   padding:0;   text-align:left!important;
    width:100%; } #nav{   border:1px solid #ccc;
    padding:5px;   -webkit-border-radius:5px; }
    #nav li{   margin:0!important; } #nav li a{   display:block; } }

    This then will give you a vertical navigation menu which has a 100% width and the actual links themselves have a larger hit area (applied viadisplay:block;), meaning that it’s prominent at the top of each page and easier for users to select single items.

    Images

    As images inherently have a set pixel width (i.e. their own width) there is a high chance that they will break out of the wrapper area (as a lot of images will be above 480px wide). To combat this simply add the following:

    @media screen and (max-device-width: 480px)
    { body{...} div{...} #nav,#nav li{...}
    img{   max-width:100%;   height:auto; } }
at No comments:
Subscribe to: Posts (Atom)

Test post after a long time

i want to see the post