Category Archives: JQuery

Image Masking using JQuery

Hi all

Its been really long time since I wrote my last post, have been pretty busy, have learned lot of new things. hopefully will try to them with you all soon.

Recently I was asked to complete a very challenging task for one of my project – replicating a Bow Builder (already built in Flash) using HTML, JQuery & CSS.
The Bow Builder has three parts 1) a band, 2) a bow & 3) a flower, and user can select among the available color for each part.

Before starting the task I had a feeling that this is going to be a tough job and as usual I turned to “GOOGLE” for help & like most of the time I found what was needed.

The solutions I found was using different layers of div and Image masking feature and luckily I found a JQuery plugin for the same, that’s the reason I love JQuery ūüėČ

You can see a demo of what i created here

Hope this helps someone with a same requirement, any queries please contact me and I will try to help ūüôā

Cheers
Ankit

Twitter like Message Alerts using JQuery

Hello Reader, 

Today I am here to share a cool way of showing message alerts on you your websites.  

It is very common to show custom message alerts to users/visitors on a website on the occurence of some events like validation errors on login or sign up forms or on data add/update or delete. Most of the times we use the common javascript alert() function to show such message which shows an ugly message box to the users or try to use a ready made third party tools which does similar task but loads your webpages with JS scripts and hampers the speed of your website and somtimes the performace of your web applications too. 

But why should you show those ugly message box or load your webspage with extra JS files when you have easy solutions with jQuery. 

jQuery is a lightweight cross-browser JavaScript library that emphasizes interaction between JavaScript and HTML. Used by over 27% of the 10,000 most visited websites, jQuery is the most popular JavaScript library in use today.
 

So here goes the code you implement on your webpages to show smart message alerts to visitor of your website. 

Step 1 

Download (if you dont already have) the latest version of jQuery script from http://jquery.com/ and include it on your webpage. 

Step 2 

Include this div at the top inside the body tag of your webpage 

Step 3 

Include the following CSS style in you stylesheet file. This controls the appearance and position of the Message Alert container. 

#divSlideMessage{
height:40px;width:99.8%;background-color:#ffffff;color:#000;font-family:”Trebuchet MS”, Tahoma; font-size:18px; text-align:center;display: none;border:1px solid #562c2c; margin:0 0 0 0;padding-top:10px;}

Step 4

Include this javascript function in you webpage

function ShowNotification(message, showwait, hidewait) {
$(“#divSlideMessage”).oneTime(showwait, function() {
$(this).html(message);
$(‘#divSlideMessage’).slideDown(“normal”);
$(‘#divSlideMessage’).focus();
}).oneTime(hidewait, “soon”, function() {
$(this).slideUp(“fast”);
});
}

Step 5 (Final Step)

Now use ShowNotification(message, showwait, hidewait) function in place alert() or any other function that you were using to show the message alerts.

ShowNotification accepts three arguments

message – your alert message

showwait Рtime in milliseconds, after how long the message should be shown

hidewait Рtime in milliseconds, after how long should it dissappear

Hope this helps, please feel free to contact me in case you find any problem.

Thanks for reading! ūüôā

Animated Banner With JQuery

Hi All

Today I would like to share some of my experience with JQuery. JQuery is a fantastic lightweight javascript library that makes it possible to do complex things very fast and easily. Animation is one such thing. Animations using JQuery adds up to the looks of your webpage without actually increasing much load on it and also you do not really have to put a lot of efforts for it. It is simple to understand and implement JQuery plugins. It offers a lot of plugins for AJAX, Animations and Effects, UI, Timers and many more. All of them are easily available and free to download here.

In this post I am sharing my source code for creating a simple, useful yet beautiful animated banner with JQuery.

Here is the source:

HTML:

<div id=”container”>
<div id=”imageDiv1″ class=”bottom”><img id=”image1″ src=”images/image1.gif” alt=”” /></div>
<div id=”imageDiv2″ class=”right”><img id=”image2″ src=”images/image5.gif” alt=”” /></div>
</div>

CSS:

#container{
margin-top:150px;
height:135px;
width:215px;
border: 1px solid #000;
text-align:center;
overflow:hidden;
position:relative;
}

.right{
top:-140px;
right:-220px;
position:relative;
}

.bottom{
top:140px;
right:0px;
position:relative;
}

JQuery:

I am adding the query script .js file here with the post. Download the javascript file banner-script.js here.

Please replace the images in this file with yours.

This is really easy and very useful. If you have any queries or you face any problem feel free to contact me.

Hope this is useful for you, thanks for reading ūüôā

Updated on 15th January, 2011

Now you can also see the demo here.