Tutorials Page 3

• Aug 31, 2009

  5 Ways to Make Ajax Calls with jQuery

  There are at least five ways to make AJAX calls with the jQuery library. For beginners, however, the differences between each can be a bit confusing. In this tutorial, we’ll line them up and make a comparison. Additionally. we’ll review how to inspect these AJAX calls with Firebug as well.

  Visit Tutorial Page

  
  

  Filed under: Ajax

• Aug 28, 2009

  Making a Content Slider with jQuery UI

  In this tutorial we’re going to be using the jQuery UI slider widget to create an attractive and functional content slider. We’ll have a container, which has a series of elements each containing different blocks of content. There will be too many of these elements to display at once, so we can use the slider to move the different content blocks in and out of view.

  Visit Tutorial PageSee Demo

  
  

  Filed under: DOM Manipulation, UI

• Aug 27, 2009

  Creating a Virtual jQuery Keyboard

  Very few websites provide their users with the option of using a virtual keyboard to key in (at the bare minimum) their passwords. Yes, a few banks do it, but considering how much personal information we store in various web applications these days, the safety of these accounts are of no less significance to us. This tutorial will explain how we can implement a simple virtual keyboard with some (well, okay, lots of!) help from jQuery.

  Visit Tutorial PageSee Demo

  
  

  Filed under: DOM Manipulation, UI, Utilities

• Aug 18, 2009

  5 CSS3 Techniques For Major Browsers using the Power of jQuery

  Many exciting new functions and features are being thought up for CSS3: text-shadow, box-sizing, opacity, multiple backgrounds, border-radius, border-image, etc… but cannot be done in older browsers. Here we use various jQuery plugins to create equivalent effects using jQuery.

  Visit Tutorial Page

  
  

  Filed under: Aesthetics, Browser Tweaks

• Aug 09, 2009

  Definition List Block Clickable

  A while ago I read a tutorial over at Web Designer Wall about making an entire <li> block clickable. On my personal website, I have a definition list with some links to other pages on the site. I wanted these definition lists to be block clickable and set about creating the same effect for them.

  Suppose you have a <dl> with an id=“defList” and you want to make the nested <dt> followed by a <dd> entirely clickable (as if they’re one element). You can assign a click function to <dd> and the <dt> together and when they’re is clicked, the function will find the <a> element that resides in the <dt> and redirect the browser location to its href attribute value.

  There is a specific format for this to work; you need to have the main link in the <dt> and the rest of your content in the <dd>.

  Here’s the HTML:

  
  <dl id=“defList”>
  	<dt><a href=“http://martineau.tv/portfolio/” title=“Zander’s Portfolio”>Zander’s Portfolio</a></dt>
  <dd>Design and development for the iPhone and other smartphones to video based websites.</dd>
  	<dt><a href=“http://jquerystyle.com” title=“jQuery Style”>jQuery Style</a></dt>
  	<dd>jQuery Style is a personal project aimed at web designers and developers. It is a showcase of websites that use jQuery in interesting ways.</dd>
  	<dt><a href=“http://txpcoder.com” title=”<txp:coder/>”><txp:coder/></a></dt>
  	<dd><txp:coder/> converts your designs or existing website into a fully functioning, content managed, Textpattern site.</dd>
  </dl>
  
  

  Here’s the jQuery code:

  $(”#defList dd”).click(function(){
  	  		window.location=$(this).prev().find(“a”).attr(“href”); return false;
  });
  

  Add the hover effect:

  To add a hover effect so that when you hover over either the <dt> or the following <dd>, add this:

  
  /* Add .hover class to the next <dd> when dt is hovered over */
  $(’#defList dt’).hover(function() {
      $(this).next().addClass(‘hover’).css({‘cursor’ : ‘pointer’});	
  }, function() {
      $(this).next().removeClass(‘hover’);
  });
  /* Add .hover class to previous <dt> when dd is hovered over */
  $(’#defList dd’).hover(function() {
      $(this).prev().addClass(‘hover’).css({‘cursor’ : ‘pointer’});
  }, function() {
      $(this).prev().removeClass(‘hover’);
  });
  
  

  You may also have noticed that there is also some added css that’s applied to the hover effect, this is to change the cursor to a pointer to appear as if its a actual link.

  This is only a little tute and created out of necessity for myself, if anyone thinks it’s useful, likes it or thinks there may be a more efficient way to do this, then please leave a comment.

  See Demo

  
  

  Filed under: DOM Manipulation

• Aug 04, 2009

  jQuery Sliding Boxes with custom captions

  All of these sliding box animations work on the same basic idea. There is a div tag (.boxgrid in my css) that essentially acts as a window where two other items of your choosing “peek” through.

  Visit Tutorial PageSee Demo

  
  

  Filed under: Animation and Effects, DOM Manipulation, Media, Navigation, Transitions, UI

• Jul 27, 2009

  Using jQuery to play Media Files

  Ok, so there’s probably a million and one ways to play media on your website, whether its with XML and FLASH, or FLASH and JavaScript, or just FLASH, but I’m going to show you the most productive way (I guess you could say that) of playing a MP3..

  Visit Tutorial PageSee Demo

  
  

  Filed under: Media

• Jul 08, 2009

  jQuery Fold Effect Concept And Explanation

  Making a fold effect in jQuery. Such effect can be apply to different context such as image gallery or even just add on effect for your design work.

  Visit Tutorial Page

  
  

  Filed under: DOM Manipulation, Slideshow

• 15 jQuery Tutorials For More Interactive Navigation

  Navigation is an essential component of a website. A good navigation system leads to a better user experience as user can find the information quickly and easily. Here are 15+ tutorials for creating interactive navigation for your website using the powerful JavaScript framework jQuery.

  Visit Tutorial Page

  
  

  Filed under: Navigation

• Jul 06, 2009

  Sexy Drop Down Menu with jQuery & CSS

  Studies show that top navigations tend to get the most visual attention when a user first visits a site. Having organized and intuitive navigation is key — and while most drop down menus may look aesthetically pleasing, developing them to degrade gracefully is also essential. In this tutorial I would like to go over how to create a sexy drop down menu that can also degrade gracefully.

  Visit Tutorial PageSee Demo

  
  

  Filed under: Navigation

• Jul 03, 2009

  Animate Image Filling Up Using jQuery

  Visit Tutorial PageSee Demo

  
  

  Filed under: DOM Manipulation, Media

• Jun 27, 2009

  jQuery FadeIn.FadeOut

  A good tutorial that helped me learn fading with jQuery. Check it out.

  Visit Tutorial PageSee Demo

  
  

  Filed under: Animation and Effects, Transitions

• Jun 26, 2009

  Validation Contact Form with Modal + Slide-in

  Visit Tutorial PageSee Demo

  
  

  Filed under: DOM Manipulation, Lightbox/Modal

• Image Flip

  A cool (almost 3D) effect to flip your images when clicked on.

  Visit Tutorial PageSee Demo

  
  

  Filed under: DOM Manipulation, Media, Slideshow

• Jun 23, 2009

  “Outside the Box” Navigation with jQuery

  Just about every website uses the regular navigation concepts we’re all used to. After awhile this can get pretty boring, especially for designers who thrive on creativity.

  Visit Tutorial PageSee Demo

  
  

  Filed under: DOM Manipulation, Navigation

• First
• < Prev
• 2
• 3
• 4
• Next >
• Last