Archive

Archive for the ‘JQuery’ Category

CrossSlide – jQuery Plugin for Cross-fade Animations

September 21, 2010 Leave a comment

CrossSlide

CrossSlide is a jQuery plugin implemented in 2kB of Java-script code. Some common slide-show animations, traditionally only available via Adobe Flash™ or other proprietary plugins. CrossSlide builds upon jQuery’s animation facility, so it is as portable across browsers as jQuery itself (that is, a lot!)

You can read more at http://tobia.github.com/CrossSlide/

Advertisements
Categories: Image Slider, JQuery Tags: ,

jQuery Image Slider

July 27, 2010 1 comment

I have tried many java-script/jQuery based image/banner sliders. But Nivo Slider is very good as compared to other freely available plugins. Transitions are very smooth and almost all features can be controlled by parameters. The slogan “The Most Awesome jQuery Image Slider”, on Nivo Slider site, seems very realistic and true.

Nivo Slider works great on Chrome, FireFox and Safari, it gives some problem on IE though.

You can find more about this fantastic plugin at http://nivo.dev7studios.com/

Categories: JQuery Tags: ,

Using jQuery with DotNetNuke 04.xx.xx

jQuery support is available in 5.0 and later versions of DotNetNuke (read more) . If you are working in older versions of DotNetNuke you can include jQuery yourself to your DNN Skin and get all jQuery benefits.

Recently I tried jQuery 1.4.x with DotNetNuke 04.09.xx in a DNN Skin. jQuery was installed successfully and it was working fine. But i noticed that some of the DNN core functionality was broken. Major issue was that once i logged in as admin action menu of modules were no more visible and there were some java-script errors.

I found out that java-script based menus were having conflict with jQuery. These issues were resolved by following two steps:

  1. Call jQuery.noConflict(); before calling jQuery methods
  2. Use fully qualified jQuery instead of $ sign e.g. jQuery(document).ready(function(){…});

Now jQuery is fully compatible and functional with older versions of DotNetNuke and all of the existing functionality is intact.

You can find more about jQuery.noConflict() at http://api.jquery.com/jQuery.noConflict/

Categories: DotNetNuke, JQuery

JQUERY WATERMARK PLUGIN

I have tried many options to show watermark text in text-boxes. I found following option to be the best one as it works on client-side and does not alter the value of the text boxes and neither uses hidden fields. This plugin can work with any server side technology including ASP, ASP.Net, PHP etc. You simply need to enter the watermark text as title attribute of the text box and leave rest to this plugin.

This watermark plugin can be used on text, password and textarea elements, and because it does not alter the value of the fields, it can be safely applied without affecting form submits or AJAX calls.

Read more at http://plugins.jquery.com/project/updnWatermark

Categories: JQuery

CATALooK Product Thumbnails

July 21, 2010 2 comments

While designing a skin for CATALook (eCommerce Module for DotNetNuke), there was a scenario where product additional images were shown in the product details page. CATALook displays some default images as thumbnails, clicking the default image opens actual image in light box.

Default Product Thumbnails

Default Product Thumbnails

Now if we want to replace the default thumbnail with actual thumbnail, CATALooK does not provide support for this. To achieve this, i edited the CATALooK skin to add ID to parent TD where the product image thumbnails control was added. You can search for the text <cat:MEDIAMENU id=”MEDIAMENU2″ Runat=”server”> in /DesktopModules/CATALooKStore/Skins/SKIN_FOLDER/ItemPane.ascx. Now we can use this ID in Java-script to replace the default image with actual product image. Following is the screenshot after adding the ID and Java-script.

Actual Product Thumbnails

Actual Product Thumbnails

Sample Java-script method can be downloaded here.
jQuery version can be downloaded here.

Categories: DotNetNuke, Javascript, JQuery Tags: ,