Archive: jquery
-
Aug 29, 2011
Comments OffTextbox to accept only numbers (digits) using jquery
Few days back, my friend Parleen asked me how can we make a textbox which just accepts only numbers specially digits only. And, for his I come up with this solution of textbox which only accepts digits, and if you try to enter any alpha bates in it then it displays the error message with...
-
Jul 28, 2011
Comments OffJquery Mouseover Tooltip Plugin
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)...
-
Jul 28, 2011
Comments OffJquery Thumbnail Image with Heading and Caption
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...
-
Jul 28, 2011
Comments OffSliding Letters with jQuery
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...
-
Jul 28, 2011
Comments OffCSS and jQuery Tutorial: Fancy Apple-Style Icon Slide Out Navigation
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...
-
Jul 28, 2011
Comments OffjPaginate: how to add a Fancy jQuery Pagination Plugin
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...
-
Jul 28, 2011
Comments OffTwitter API and jQuery Showcase: Display your Followers or Friends
Today I was playing around with the Twitter API and created this little “widget” using jQuery and PHP. I know, there are already plenty of them, but I wanted to improve some details. Some of the features are: You can get your most recent 100 followers or friends Followers or friends are shown in...
-
Jul 28, 2011
Comments Offall Fixed Fade Out Menu: A CSS and jQuery Tutorial
1. The HTML The markup is pretty simple: we have a div with a list inside. The list items will be our links, the search input and the arrow buttons: 01 <div id="nav"> 02 <ul> 03 <li><a class="top" href="#top"><span></span></a></li> 04 <li><a class="bottom" href="#bottom"><span></span></a></li> 05 <li><a>Link 1</a></li> 06 <li><a>Link 2</a></li> 07 <li><a>Link 3</a></li> 08 <li><a>Link 4</a></li>...
-
Jul 28, 2011
Comments Offhow to add Beautiful Slide Out Navigation: A CSS and jQuery Tutorial
1. The HTML Structure The only thing we will need for the navigation is a simple unordered list with links inside of the list elements: 1 <ul id="navigation"> 2 <li class="home"><a title="Home"></a></li> 3 <li class="about"><a title="About"></a></li> 4 <li class="search"><a title="Search"></a></li> 5 <li class="photos"><a title="Photos"></a></li> 6 <li class="rssfeed"><a title="Rss Feed"></a></li> 7 <li class="podcasts"><a title="Podcasts"></a></li> 8 <li...
-
Jul 28, 2011
Comments Offhow to add Sweet Thumbnails Preview Gallery
The Markup The HTML structure is going to consist of a main container which will have the image wrapper for the big image, the navigation items and the dot list with the thumbnail preview: 01 <div id="ps_container" class="ps_container"> 02 <div class="ps_image_wrapper"> 03 <!-- First initial image --> 04 <img src="images/1.jpg" alt="" /> 05 </div> 06...
-
Jul 27, 2011
Comments OffjQuery Dialog Box Tutorial
Recently on a coding project for my day job I had a requirement to display a dialog box to confirm that when someone clicked a cancel link that they meant to do the cancel action. The dialog box was on a page that built a list of links with multiple cancel links, each with a...
-
Feb 03, 2011
Comments OffHow to Create a Simple Slider Using jQuery
Did you know what is jquery? Jquery is a cross browser JavaScript library designed to simplify the client-side scripting of HTML. Jquery is free, open source software, dual-licensed under the MIT License and the GNU General Public License. Jquery also provides capabilities for developers to create plugins on top of the JavaScript library. Because of...
-
Feb 03, 2011
Comments OffClick me Only Once – jQuery
I have seen a very frequently asked question by developers – How to execute an event only once. With jQuery, achieving this requirement is very simple using One Here’s how: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Click me once only</title> <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js"> </script> <script type="text/javascript"> $(function() { $("#Submit1").one('click', function() { $(this).val("No more alerts"); alert(''); }); }); </script>...
-
Feb 03, 2011
Comments OffjQuery events stop working in ASP.NET AJAX UpdatePanel
In a recent forum discussion, a user was facing an issue where his jQuery events would stop working after a partial page postback. Here’s the code that worked before a partial page update occurred <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { $('#link').click(function() { $('#a').toggle(550); }); }); </script> </head> <body> <form...
-
Feb 03, 2011
Comments OffDisable All or Selective Controls on a Page using jQuery
Disabling controls on a Page using jQuery is a cakewalk, thanks to the wonderful Selector API. Here’s an example. I have kept a couple of controls on the page and will show you some ways to disable all or selective controls on a Page using jQuery. <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Disable All Controls on a Page</title>...
-
Feb 03, 2011
Comments OffReplace Extensions of Images from .jpg to .png using jQuery
A recent requirement demanded that all the .jpg images on a page be replaced with .png’s. Here’s how to solve this requirement using jQuery <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Change Image Extensions</title> <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js"> </script> <script type="text/javascript"> $(function() { $("#replAll").click(function() { $('img').each(function() { var src = $(this).attr("src"); $(this).attr("src", src.replace(/\.jpg$/i, ".png")); }); }); }); </script> </head> <body>...
-
Feb 03, 2011
Comments OffUsing jQuery to find out Elements on the Page that do not have an ID attribute
In this post, I will demo a simple selector to find out elements on the page that do not have an ID attribute declared on them <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Input Elements that do not have an ID attribute</title> <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"> </script> <script type="text/javascript"> $(function () { $('div :not([id])').css("border", "2px Black solid"); // for only...
-
Feb 03, 2011
Comments OffSimple Image SlideShow using jQuery
I have seen a lot of users requesting for simple jQuery scripts for SlideShows. I saw a couple of them, but the scripts assumed that the number of image tags has to be fixed beforehand. The code given below is taken from my eBook “51 Recipes with jQuery and ASP.NET Controls”. Note: This code was...
-
Feb 03, 2011
Comments OffjQuery UI 1.8 with new Plugins and plenty of Bug fixes and improvements
jQuery UI 1.8 was released a couple of days ago (March 23rd 2010) with 5 new Plugins, one new effect and plenty of Bug fixes and improvements. Check the jQuery UI 1.8 Changelog for what has changed from jQuery UI 1.7.2 to 1.8. Here are some highlights of this release: 5 New Plugins Core &...
-
Feb 03, 2011
Comments OffRemove All Stylesheets from a Page using jQuery
Here’s a very simple piece of code that removes all stylesheet links from a Page using jQuery <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Remove All Stylesheets From a Page</title> <link href="CSS/RoundCorners.css" rel="stylesheet" type="text/css" /> <link href="CSS/FloatDes.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js"> </script> <script type="text/javascript"> $(function() { $("#removeAll").click(function() { $('link[rel=stylesheet]').remove(); }); }); </script> </head> <body> <div class="sub-level"></div> <br...