jQuery BootAlert – A Simple Bootstrap Alert Function

Did anyone miss a javascript function that can show a modal box based on Twitter Bootstrap css library that also can inject contents to the alert box dynamically whenever require ?

Well, I did. I was writing some ajax calls to post some data to an php file and show the output received. One solution came to my mind was the jQuery Apprise plugin. I used this plugin in some of my projects. It’s pretty good.

However, the current project was heavily using the Twitter Bootstrap framework so to match with the current theme, bootstrap modal is what I preferred.

This simple jQuery function will inject a bootstrap modal window to the page and show the message that we want the user to see. The script was developed in hurry for a project so just the basic functionality is included. I plan to extend this code snippet soon when I get free time.

bootalert

View Demo of BootAlert

Download the source code at BitBucket
View project at BitBucket

jQuery Back Button

This is a jQuery code snippet to simulate a back button based on the users last web page.


$(function(){}
$('.back').click(function(){
parent.history.back();
return false;
});
});

This will trigger Back button on all elements with the class name “back”. If you would like to specify an element just use the element name

$('#back').click(function()

If you would like to attach the code to only links that has the class name “back”, simply change to

$('a.back').click(function()

Hope this helps

A Beautiful Document Presentation Using HTML,CSS & jQuery

Today, I had to create a document presentation. Usually I select Microsoft Powerpoint or Google Presentation to make the presentation. This time, I went ahead and created my own document presentation template using HTML, CSS and jQuery. I want to share it here.

The demo can be found below

I had the basic idea of the template in my mind, and I wanted to add some jQuery effects so that I can include all the slides in just one page.

If you want to download the entire source code, you can click on the download button below

Hope you will find it useful for your presentation

Preload Images Using jQuery

Have you ever noticed that pages and images you’ve visited in the past always load faster than a page you’re visiting for the first time? This is because your browser cache the file when you visit the page for the first time and get the file from its cache when you visit the page second time. This makes the page loading faster.

Preloading images is good in certain situations especially if the user is on low speed internet connection or the image size is quite high. A simple jQuery code can help you to do this without any complications.

Continue reading “Preload Images Using jQuery”