Step One – Create You HTML Template

One of the first things you will need for your html template is the jquery library script or an equivalent script. The google hosted jquery script or the jquery hosted latest script would work. I prefer to use the latest jquery script. The next thing that you will need to add is the css popup file and the js popup file. These will look like this in your head area.

   <link rel="stylesheet" href="PathToFile/popup.css" type="text/css" />
   <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
   <script type="text/javascript" src="PathToFile/popup.js"></script>

After you add these all that you will have to do is add the code to create the popup. Well you will have to first decide if you want to use a button or a link. Both of these will work all that you have to do is add the class button to them. Then you will have to create the popup container and the contents of the popup. This should look something link this:

   <div class="button"><input type="submit" value="Press This" /></div>
   <div class="popupContent">
      <a class="popupClose">x</a>
      <h1>This is a title for a popup!</h1>
      <p>What you want in the popup</p>
   </div>
   <div class="backgroundPopup"></div>

That is all for the html part. Now you will have to style the popup with the popup.css file.

Step Two – Design Your Popup With CSS

Inside of the popup.css file there are all of the classes that you will need to have setup. Hear is a list of the classes that you will need (popupContent, popupClose, and backgroundPopup). These classes will have to be coded like below:

   .backgroundPopup{
	display:none;
	position:fixed;
	_position:absolute; /* hack for internet explorer 6*/
	height:100%;
	width:100%;
	top:0;
	left:0;
	background:#000000;
	z-index:9998;
   }
   //You can style the background, border, width, and height of this how you want
   .popupContent{
	display:none;
	position:fixed;
	_position:absolute; /* hack for internet explorer 6*/
	height:auto;
	width:35em;
	background:#fff;
	z-index:9999;
	padding:2em;
	font-size:1.3em;
   }
   //Style this how you want
   .popupClose{
	font-size:1.4em;
	right:0.5em;
	top:0.2em;
	position:absolute;
	color:#000000;
	font-weight:700;
	display:block;
   }
   .popupClose:hover { cursor: pointer; }

Step Three – Build The jQuery Popup

Now that you hopefully have a sweet designed look for your popup we have to add the script to control the popup. All that you have to do for this is all the code below to your popup.js file.

var popupStatus = 0;
 
function loadPopup(){
   //Will only be loaded if the status is 0
   if(popupStatus==0){
      $(".backgroundPopup").css({"opacity": "0.8"});
      $(".backgroundPopup").fadeIn("slow");
      $(".popupContent").fadeIn("slow");
      popupStatus = 1;
   }
}
 
//This will disable the popup when needed
function disablePopup(){
   //Will only disable if status is 1
   if(popupStatus==1){
      $(".backgroundPopup").fadeOut("slow");
      $(".popupContent").fadeOut("slow");
      popupStatus = 0;
   }
}
 
//Centers the popup to your window size 
function centerPopup(){
   var windowWidth = document.documentElement.clientWidth;
   var windowHeight = document.documentElement.clientHeight;
   var popupHeight = $(".popupContent").height();
   var popupWidth = $(".popupContent").width();
   $(".popupContent").css({
      "position": "absolute",
      "top": windowHeight/2-popupHeight/2,
      "left": windowWidth/2-popupWidth/2
   });
   //this is needed for ie6
   $(".backgroundPopup").css({ "height": windowHeight });
}
 
//Click event controller
$(document).ready(function(){
   //Open the popup and center
   $(".button").click(function(){
      centerPopup();
      loadPopup();
   });
   //Close popup by clicking the x
   $(".popupClose").click(function(){ disablePopup(); });
   //Close popup by clicking outside the box
   $(".backgroundPopup").click(function(){ disablePopup(); });
   //Close popup by clicking escape
   $(document).keypress(function(e){
      if(e.keyCode==27 && popupStatus==1){
         disablePopup();
      }
   });
});

Now if you copy that code and add it to your popup.js file everything will work. This script declares the width of your browser and determines where to put the popup automatically. It also declares the closing abilities. There are three of these you can click the x, push escape, or click outside the popup. There is nothing left your popup should be working great. Now this is a really simple jQuery popup. There are tons of popups out there and tons of ways to do these but most aren’t this easy and light weight on your browser. If you would like to see a demo of this in action you can click here or you can download this demo and mess around with this your self.

Anyone that might use this and find some changes that make it better I would love to see these changes and put them up on the site with you getting credit. Please contact us.

Spread and Share

• 

How To Implement Cool Corners

First of all you must pull in jQuery into your website. The best way of doing this is by linking to http://code.jquery.com/jquery-svn.js in your header or footer link this:

//jQuery SVN Updated Version
<script src="http://code.jquery.com/jquery-svn.js" type="text/javascript"></script>

The next thing that you have to do is pull in Dave Methvin corners script. This can be done by downloading the script from Here. This also needs to be added to the header or the footer like this.

//Dave Methvin's
<script src="Location Of File On Your Server" type="text/javascript"></script>

Adding Final Code

In order to get these amazing different corners to work on your web page all you need to do is call out the classes of the spots you want to activate the corners. Also you need to decide which of the many types of corners you would like to use. Yes I said MANY TYPES. Dave Methvin created this script with many different kinds of corners you can choose from. For Instance Rounded, Beveled, Notched, Bite, Dog-ear, Sculpt, Sharp and many more. You can find all of the corner types at jQuery Corner Demo. Now back to the code, once you have decide on the type you need to add this after the Methvin’s script.

//Some Different Examples
<script type="text/javascript">
	jQuery(document).ready(function($) {
		$(".YOUR CLASS").corner("10px");
		$(".YOUR CLASS").corner("bevel 10px");
		$(".YOUR CLASS").corner("notch 10px");
		$(".YOUR CLASS").corner("cool 10px");
		$(".YOUR CLASS").corner("curl 10px");
		$(".YOUR CLASS").corner("sculpt 10px");
	});
</script>

Here is a download able and viewable demo of the script in action that I have created. This demo involves all of the above examples.

jQuery Cool Corners: Cool Corners Demo

Download: jQuery Cool Corners (12)

For even more about this great script I would read up on Methvin’s Gallery and also on Methvin’s Demo.

Development And Consulting

Contact Shane Strong for any of your web development, WordPress theme development, Magento development, PHP, and jQuery needs. You can view my portfolio for some of my work.

Spread and Share

• 

Add Your jQuery Scripts

We are going to use Google’s AJAX Library to add our jQuery library to our header. You may ask why we would do this well including the jQuery library from a external source will make less stress on your server and we all know that Google’s servers can handle the stress.

<head>
//Google Hosted
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.js" type="text/javascript"></script>
//Your Script
<script type="text/javascript">
   jQuery(document).ready(function($) {
      $(".cornerpeel").hover(function() { //Hover Over
         $(".cornerpeel img , .message").stop()
	 .animate({ //Expand the Message and the Hover Image
	    width: '138px',
	    height: '138px'
	 }, 600);
      } , function() {
         $(".cornerpeel img").stop() //Hover Out Go Back To Original
	 .animate({
	    width: '50px',
	    height: '50px'
	 }, 200);
	 $(".message").stop() //Hover Out Go Back To Original
	 .animate({
            width: '50px',
	    height: '50px'
	 }, 180); //This should be a tad faster than the image because IE is known to glitch
      });
   });
</script>
</head>

Create Your Styles

These are your styles and can be changed up depending on where your image is and what size you want to start out with.

.cornerpeel {position: relative;}
.cornerpeel img {
  width: 50px; 
  height: 50px;
  z-index: 101;
  position: absolute;
  right: 0; 
  top: 0;
}
.cornerpeel .message {
  width: 50px; 
  height: 50px;
  position: absolute;
  z-index: 100;
  right: 0; 
  top: 0;
  background: #fffcf9 url(http://www.shanestrong.com/jQuery/cornerpeel/rss.jpg) no-repeat right top;
  text-indent: -9999px;
}

Create Your Corner Peice

This is were you create your hoverable corner piece. This will be placed somewhere in your header area or right inside your body tag.

<div class="cornerpeel">
   <a href="http://feeds.feedburner.com/ShaneStrong">
      <img src="http://www.shanestrong.com/jQuery/cornerpeel/corner_img.png" alt="" />
      <span class="message">Subscribe To My Feed</span>
   </a>
</div>

Your Finished

Well that was it, that is all that you need to create your self a corner peel. If you would like to see this in action you can download my script at the bottom. There is a ton of things that you can do with jQuery that can make your site seem more flashy without having to find a flash developer. jQuery is one of the fastest growing languages around. If you have any tutorials that you would like to publish on my site please go to my contact page.

jQuery Corner Peel: Corner Peel Trial

Download: jQuery Corner Peel (1262)

Website Design , Development, and SEO Marketing

If by chance you are in need of any web design, web development, search engine optimization, or marketing done to one of your sites you can get in contact with me or you can contact Chosen. Chosen is a Lansing based Web Development, Web Design, Web Hosting, and Web Marketing firm. We are a small business but are growing in the Lansing Area for our Web Design and Development skills. We have done work for clients and companies. We prefer client work but we also take contract work. We have worked with most of the biggest web companies in the Lansing Area and all the way out to California. We would love to hear from you.

Sponsors

Start saving on printing services today. Visit our website to learn more about booklet printing today.

Spread and Share

• 

How to use jQuery Accordion

You do not have to use this for WordPress, you can use this on almost anything to make more space. Here is how you would go about using the Accordion widget.

Include your scripts

These should go into your head section of your web page.

<head>
//Default jQuery Style Sheet
<link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
//Google Hosted
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://jqueryui.com/ui/ui.accordion.js"></script>
</head>

What happens next?

Now you have to create your accordion script. This is going to be hard for anyone who has never worked with jQuery so get ready.

//Your accordion script
<script type="text/javascript">
$(function() {
    $("your_id or your_class").accordion();
});
</script>

That code can either go in your head section or your footer. Ok so I kind of lied about that part being hard to do. But this next part is going to be even harder yet.

//This is where you create you info
<div id="your_id" class="your_class">
//You only need either a class or a id.
//What ever you want to use the Accordion widget
//should have the same HTML element after your class
//or ID.
    <h3><a href="#">This will be the first area's heading</a></h3>
        <div>
            <p>This is your content in area 1</p>
        </div>
    <h3><a href="#">This will be the second area's heading</a></h3>       
        <div>
            <p>This is your content in area 2</p>
            <img src="http://www.shanestrong.com/wp-content/uploads/2009/07/jQuery-hover.jpg" />
        </div>
    <h3><a href="#">This will be the third area's heading</a></h3>
        <div>
            <p>This is your content in area 3</p>
            <p>Another paragraph</p>
        </div>
    <h3><a href="#">This will be the fourth area's heading</a></h3>
        <div>
            <p>This is your content in area 4</p>
            <ul>
                <li>List Item One</li>
                <li>List Item Two</li>
                <li>List Item Three</li>
            </ul>
        </div>
</div>

That is all there is to jQuery Accordion

The only thing left to do is check it out for yourself I have created a page that has all the code. If you would like to just see jQuery Accordion in action you can go to the link below. If you would like to save the page you can just go to it and (Right Click and go to Save Page As).

jQuery Accordion: jQuery Accordion Trial

Download: jQuery Accordion (13)

jQuery Accordion Extras

If you would like to learn more about this great jQuery widget just go to Here

Website Design , Development, and SEO Marketing

If by chance you are in need of any web design, web development, search engine optimization, or marketing done to one of your sites you can get in contact with me or you can contact Chosen. Chosen is a Lansing based Web Development, Web Design, Web Hosting, and Web Marketing firm. We are a small business but are growing in the Lansing Area for our Web Design and Development skills. We have done work for clients and companies. We prefer client work but we also take contract work. We have worked with most of the biggest web companies in the Lansing Area and all the way out to California. We would love to hear from you.

Spread and Share

• 

jQuery Hover State

So to show you how to do this I am going to use my site under my main post on the homepage I have some of my recent post. Now I want to have the full post area to have a jQuery hover state that changes the background. So I would do this.

$(document).ready(function() {
    //call the jQuery Hover Over and Out
    $('#YOURID').hover(over, out);
    //Tell the browser to change the background when hovered over
    function over(event) {
        $(this).css("background", "url('Path To Your Image')");
	$(this).css("cursor", "pointer");
    }
    //tell the browser to change the background to nothing when 
    //going outside the object area
    function out(event) {
	    $(this).css("background", "");
	}
});

jQuery Hover with a click event

If you want jQuery to do a hover state only then that will work for you but if you want to get the a tags href, so that when you click on the object area it will take you to that page. You would have to add this after your jQuery hover code. So now your jQuery code should be.

$(document).ready(function() {
    //call the jQuery Hover Over and Out
    $('#YOURID').hover(over, out);
    //Tell the browser to change the background when hovered over
    function over(event) {
        $(this).css("background", "url('Path To Your Image')");
	$(this).css("cursor", "pointer");
    }
    //tell the browser to change the background to nothing 
    //when going outside the object area
    function out(event) {
	$(this).css("background", "");
    }
    //This adds the click event to your object and tells it where to go
    $('#YOURID').click(function() {
	window.location=$(this).find("a").attr("href");
    });
});

This is very useful to get around the IE problem and if someone checks your site they can see that you know jQuery. If you need any help with this just let me know. I would be more than willing to help.

Website Design , Development, and SEO Marketing

If you by chance need web design, web development, search engine optimization, or marketing done to one of your sites you can get in contact with me or you can contact Chosen. Chosen is a Lansing based Web Development, Web Design, Web Hosting, and Web Marketing firm. We are a small business but are growing in the Lansing Area for our Web Design and Development skills. We have done work for clients and companies. We prefer client work but we also take contract work. We have worked with most of the biggest web companies in the Lansing Area and all the way out to California. We would love to hear from you.

Sponsors

Get your charm bracelets in time for the new year. LusterForever.com features a complete collection of such bracelets.

Spread and Share

• 

Lets do the easy toggles first

Top To Bottom

I am doing this for the comments section of most WordPress sites. First you have to give the identify what the outer most container is of your comments section. Mine is id comments. So just to the top of my comments section I need to create a button but you don’t have to use a button it is just the easiest to explain. So you should have something that looks like this.

<button id="comments_bottom">This Is A Toggle Button</button>
<div id="comment">
//Your Comment Code
</div>

You will notice that I gave the button a id that is so that jQuery can find it. Next you have to create your js file. I would name it something like toggle.js. It should look like this depending on which way you want your content to toggle.

//Top To Bottom
$(document).ready(function() {
	$("#comment").hide();
	$("#comments_button").click(function() {
		$("#comment").animate({height: "toggle"}, 1000);
	});
});
//Left To Right Or Right To Left
//In order to do either you must float your #comment 
//the direction you want your content to come from!
$(document).ready(function() {
	$("#comment").hide();
	$("#comments_button").click(function() {
		$("#comment").animate({width: "toggle"}, 1000);
	});
});
//Upper Left To Lower Right Or Upper Right To Lower Left
//These ones you also have to float from the direction 
//they are coming from!
$(document).ready(function() {
	$("#comment").hide();
	$("#comments_button").click(function() {
		$("#comment").animate({width: "toggle", 
                    height: "toggle"}, 1000);
	});
});

Now all you have to do is call your jQuery script and a jQuery library and your toggle up to down should work. I use the Google library because of how quick it is. You can find more info about the Google library here jQuery Library

Other Ways To Toggle

There are a few other ways to do a toggle like from bottom to top and bottom corners to top corners. There is also some other things that you can do with toggle like fading. jQuery has a lot of really easy and light things that you can do to your site to make it just that much better. If I were you I would take a look at their site jQuery.

Website Design , Development, and SEO Marketing

If you by change need web design, web development, search engine optimization, or marketing done to one of your sites you can get in contact with me or you can contact Chosen. Chosen is a Lansing based Web Development, Web Design, Web Hosting, and Web Marketing firm. We are a small business but are growing in the Lansing Area for our Web Design and Development skills. We have done work for clients and companies. We prefer client work but we also take contract work. We have worked with most of the biggest web companies in the Lansing Area and all the way out to California. We would love to hear from you.

Spread and Share

•