This window says a final good bye and wishes them to return to the website to read more contents before they exit or try to exit the browser window where your website is being displayed. The modal window appears on top on all the content before you leave the website. Below is a short objective of the tutorial and the explanation follows.

Contents

OBJECTIVE OF THE TUTORIAL:

  • Create a Exit popup Modal Box
  • Create the popup only on hovering the mouse near the exit button of the browser
  • Create a overlay effect for the popup window

EXPLANATION:

The tutorial uses the jQuery plugin version jquery.min.js and the modal window script by name jquery.simplemodal.js which actually does most of the rendering.

The credit for this tutorial actually goes to Eric Martin.

The final JavaScript which does the initialization of the modal window on exit is init.js.

The example uses two jQuery plugins and a initialization script.

Here is the init.js script below:

JAVASCRIPT Code: init.js

$(document).ready(function() {$(document).mousemove(function(e) {if(e.pageY <= 5){// Launch MODAL BOX$(‘#exit_content’).modal({onOpen: modalOpen, onClose: simplemodal_close});}});}); /** * When the open event is called, this function will be used to ‘open’ * the overlay, container and data portions of the modal dialog. * * onOpen callbacks need to handle ‘opening’ the overlay, container * and data. */function modalOpen (dialog) {                    dialog.overlay.fadeIn(‘fast’, function () {                                         dialog.container.fadeIn(‘fast’, function () {                                                             dialog.data.hide().slideDown(‘fast’);                                         });                    });}    /** * When the close event is called, this function will be used to ‘close’ * the overlay, container and data portions of the modal dialog. * * The SimpleModal close function will still perform some actions that * don’t need to be handled here. * * onClose callbacks need to handle ‘closing’ the overlay, container * and data. */function simplemodal_close (dialog) {                    dialog.data.fadeOut(‘fast’, function () {                                         dialog.container.hide(‘fast’, function () {                                                             dialog.overlay.slideUp(‘fast’, function () {                                                                                 $.modal.close();                                                             });                                         });                    });}

The main function which triggers the exit modal window on mouse hover is given below:

$(document).mousemove(function(e) {if(e.pageY <= 5){// Launch MODAL BOX$(‘#exit_content’).modal({onOpen: modalOpen, onClose: simplemodal_close});}});

The HTML used in my demo is given below, which is simple to understand:

HTML Code:

<!DOCTYPE html><html lang=”en”> <head> <link type=’text/css’ href=’css/basic.css’ rel=’stylesheet’ media=’screen’ /> <script type=”text/javascript” src=”js/jquery-1.3.2.min.js”></script> <script type=”text/javascript” src=”js/jquery.simplemodal.js”></script>  <script type=”text/javascript” src=”js/init.js”></script> <title>Exit Modal Popup Window | DesignHuntR Demo</title> </head><body> <div style=”display: none; padding: 10px;” id=”exit_content”><h1>Goodbye visitor!</h1><h3>Thanks for visiting us!</h3><br />Aenean cursus vehicula augue. Pellentesque tincidunt. Donec auctor, justo quis commodo iaculis, eros libero suscipit ipsum, et lobortis mauris erat ac arcu. Praesent dolor libero, porta id, feugiat vitae, porttitor pharetra, elit. Quisque ullamcorper, elit vitae rhoncus rhoncus, massa erat porttitor felis, sit amet viverra diam purus quis tellus. Ut sed massa sed nibh mollis aliquam. Nullam rutrum. Sed a risus. Donec ligula diam, auctor tempus, convallis ut, ultricies eget, massa. Duis rutrum, diam id gravida consectetur, justo augue pellentesque velit, sit amet scelerisque nunc erat vel sapien. Proin ullamcorper. Vestibulum hendrerit pellentesque metus. Mauris tempor nunc at sapien.</div></div><!– End Wrapper –> </body> </html>

You can view the complete source of the demo by viewing the page source.

When the HTML page is ready and loaded the init.js gets initialized and checks if the mouse cursor is moving anywhere near the exit button of the browser. In this example the top position is set to 5px in the init.js, which can be altered according to your needs. Please let us know if you want any other details regarding the working of the modal window by commenting.

 

50+ Fresh Go Green Website Designs – ingenious designs

Go Green website designs are really something which can refresh your mind and brain. During the process of my design hunt, I found some really nice looking greenly vegetation in the website designs. Am pleased to share them with the world on DesignHuntR. Here are some colorful green website designs with vegetation magic.

·         Noupe

·         Terrace Concept

·         Outdoor Italia

·         Lipton Green Tea

·         HFCA Design Studio

·         Aussie BBQ Legends

·         Season Of Love Song

·         Last Game

·         Vape Derm

·         Nature Green Holiday Home

·         Frankel Media

·         AquaWoods

·         Kooba

·         Fran Boot

·         Ecoki iPhone

·         Golden Leaf Design

·         Naturalone

·         Pasta Toscana

·         Hrasti

·         Purple Tree Farm

·         Lendl Allen V

·         Silverbackapp

·         Schneider Garten

·         Ozon3

·         Tree Growing

·         Robbinsfamilyfarm

·         Juan Diego Velasco

·         Howards Hill

·         Magnifica

·         Abricot Cannelle

·         Event Garden

·         Tayzz

 

7 Must Have Tools For Web Designers – ingenious designs

There are thousands of web designing tools available for designers. Many company makes a new one for their employees, customers and users. But, few of them succeed and rock in the design sphere. We will see the few of those design tools which if learnt can make you a rock star designer.

The design tools we discuss are some of the most widely used for web designing and development. Some tools are used as a skill in their resumes and job offerings are based on those skills as well.

Here is the list of top 7 Web Design tools:

DREAMWEAVER

Adobe Dreamweaver is a web development and design tool formerly developed by Macromedia. It is one of the most powerful web design tool and the most recommended for designing a website. Adobe Dreamweaver is not free and needs a purchase.

ADOBE PHOTOSHOP

Adobe Photoshop is a graphic editing software which is used for designing web page UI and other elements developed by Adobe systems. The latest release is called the Adobe Photoshop CS6 where CS stands for Creative Suite. Adobe Photoshop software is not free and hence needs a purchase.

FIREBUG

Firebug is a web design tool for the Firefox browsers which aims in editing the HTML, CSS, and JavaScripts for the purpose of web development and web designing. Firebug is free and is opensource.

PANIC CODA

Panic Coda is web development software developed for Mac OS X. It is a commercial software which is powerful web design and development tool. The software has also won the 2007 Apple Design Awards.

GIMP

GIMP is an open source graphic editing software similar to Photoshop. This is the only software which is as good and powerful as Photoshop. If you are not able to afford an Adobe Photoshop software, we recommend you to go with Gimp software which is compatible with Unix, Windows and MAC OS X.

FIREWORKS

Adobe Fireworks is also a commercial software which is again from Adobe Systems, which was originally developed by Macromedia. Fireworks is a vector and graphic editor for web designers and developers. It focuses the web design community by providing a fast UI developments and website prototypes.

NOTEPAD++

Notepad++ is an open source software used for text editing and source code editing. This software is available only for Windows as of now. Useful for designing by HTML, CSS and JavaScript in your Windows system easily.

Though there are many other image editing, web designing and graphic designing software. These are the ones which comes to our mind when we refer to web development arena. If you know better software not listed here, please let us know by commenting.

Stay tuned for more cool stuffs.