Scott Rockers' Blog » jQuery http://scottrockers.com/blog Website Designer and Developer, Flash, Wordpress, jQuery, and Other Scripts Mon, 22 Aug 2011 21:48:12 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 Coronado Cupcakery Website http://scottrockers.com/blog/portfolio/freelance-projects/coronado-cupcakery-website http://scottrockers.com/blog/portfolio/freelance-projects/coronado-cupcakery-website#comments Thu, 10 Feb 2011 16:41:13 +0000 admin http://scottrockers.com/blog/?p=1175

A few weeks ago, I finished developing and designing another website called Coronado Cupcakery. The cupcakery, located in Coronado, California has a fun but clean feel to it and the owner, Rosalina, wanted to have a similar look and feel for their website. Rosalina was a great client and I loved designing and developing her site. Some of the things I love about the site are the clean lines, classic text, and lots of color (I kept the background white for a clean look, and so that the colors and pictures would pop off the page). The website includes everything from a flavors page, to an ordering form, to a gallery of some of their most impressive work…. all organized in a fashion that is user friendly and easy to navigate.

Another part of the site I like a lot is the navigation. To create it, I used nettuts How to Build a Lava-Lamp Style Navigation Menu but I edited the files some so that the hover effect didn’t cover the entire menu item, but instead just kept an thick underline underneath the menu item. I really like the effect and I think I might recreate it as a flash menu.

Cya

]]> http://scottrockers.com/blog/portfolio/freelance-projects/coronado-cupcakery-website/feed 0 Change of Status.com Website http://scottrockers.com/blog/portfolio/work-projects/change-of-status-website http://scottrockers.com/blog/portfolio/work-projects/change-of-status-website#comments Thu, 19 Aug 2010 19:55:45 +0000 admin http://scottrockers.com/blog/?p=1127

I have finished redesigning another website called changeofstatus.com. The purpose of the site is to help simplify and minimize the confusion involved in an employee’s change of status (sometimes called a “life event”) as it pertains to their various healthcare benefit plans. When someone gets married or looses a dependent, usually things like this are considered life events and allow the employee to change their benefit package accordingly, so they are not paying for something they do not need. Also on the change of Status website there is a tool that converts the complicated employee change of benefits status matrix to an easy-to-use, three-step wizard, allowing employees, employers and administrators to determine what life events are permitted under IRS rules and regulations. I redesigned the site completely, you can see the site images above. The image on the right is the ‘before’ image, and the image on the left is the ‘after’. I used this template before on other company websites and I thought I do the same for this site to keep the branding consistent overall.

The site uses the jQuery Cycle Plugin for the banner rotater so that its visible even on devices like phones that don’t run Flash. Also, the website is completely SEO friendly. This is another case where I put my SEO checklist to work and it has helped tremendously. Previously the site was around 500 hits a month. Now even after a couple weeks, it has raised to over 1,500 hits a month. I’ll post the google analytics pictures as soon as I can.

Cya

]]> http://scottrockers.com/blog/portfolio/work-projects/change-of-status-website/feed 0 Fade In and Fade Out in jQuery http://scottrockers.com/blog/resources/tutorials/fade-in-and-fade-out-in-jquery http://scottrockers.com/blog/resources/tutorials/fade-in-and-fade-out-in-jquery#comments Tue, 27 Apr 2010 15:36:26 +0000 admin http://scottrockers.com/blog/?p=1055 I have been working a lot more with jQuery lately, so I thought I would show you how to do the simple fade in or fade out jQuery hover effect that occurs to the navigation when you go to the Google homepage. You know the one that I am talking about, its occurs when your mouse goes over the page of the google homepage, all the navigation at the top appears.

For the first example, I will show you how to make the fade in jQuery hover effect. Hover over the box below to see the effect.

 

The rest of the content of the page

To do this, first place this jQuery code in the <head></head> section of your html file.

1
2
3
4
5
6
7
8
9
10
11

//the first line gets the latest jquery scripts
<script src="http://code.jquery.com/jquery-latest.js"></script>
//this function is called when the page is ready
<script>
$(document).ready(function() {
        //first hide the div with the id of googlenav
	$("div#googlenav").hide();
        //then when you rollover the specified div fade in the googlenav
	$("div#googlediv").hover(function(){$("div#googlenav").fadeIn('slow');});
});
</script>

Then add this html code into the <body></body> of your html document

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<div id="googlediv" style="width:500px; height:200px; border:1px solid #ffffff;">
<div id="googlenav">
	<ul>
    <li><a href="#">Web</a></li>
    <li><a href="#">Images</a></li>
    <li><a href="#">Videos</a></li>
    <li><a href="#">Maps</a></li>
    <li><a href="#">News</a></li>
    <li><a href="#">Shopping</a></li>
    <li><a href="#">Gmail</a></li>
  </ul>
</div>
<div style="margin:0px auto; width:500px; text-align:center;">
<p>&nbsp;</p><p>The rest of the content of the page</p>
</div>
</div>

You can style the content hover you like, I tried to keep all the links inline like google does. Here is my styling, you can add this in the <head></head> section too.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<style type="text/css">
#googlenav {
	padding:0px;
	margin:0px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	border-bottom:1px solid #c9d7f1;
	height:26px;
	position:absolute;
	width:500px;
}
#googlenav ul {
	padding:3px 0px;
	margin:0px;
	padding-left:15px;
}
#googlenav ul li{
	display:inline;
	padding:0px 3px;
	margin:0px;
}
</style>

Now google fades in their links and navigation when you roll over the page, not a specific div. So if you wanted it to be exactly like that, you would target the page instead of that particular div. So in your jQuery instead of this:

$("div#googlediv").hover(function(){$("div#googlenav").fadeIn('slow');});

You would put this:

$(document.body).hover(function(){$("div#googlenav").fadeIn('slow');});

And style accordingly. Now if you want to fade out in jQuery, instead of fadeIn(), you would use the fadeOut() function. And Remember you don’t have to hide the content first, so the jQuery would look like this.

1
2
3
4
5
6
7
8
9

//the first line gets the latest jquery scripts
<script src="http://code.jquery.com/jquery-latest.js"></script>
//this function is called when the page is ready
<script>
$(document).ready(function() {
        //then when you rollover the specified div fade in the googlenav
	$("div#googlediv").hover(function(){$("div#googlenav").fadeOut('slow');});
});
</script>

An example of the fadeOut function is below using the code above.

 

The rest of the content of the page

That’s really about it, if this helps you out please leave a comment.

Cya

]]> http://scottrockers.com/blog/resources/tutorials/fade-in-and-fade-out-in-jquery/feed 4 HRA105.com Website http://scottrockers.com/blog/portfolio/work-projects/hra105-com-website http://scottrockers.com/blog/portfolio/work-projects/hra105-com-website#comments Wed, 17 Mar 2010 17:55:52 +0000 admin http://scottrockers.com/blog/?p=991 I have finished working on another site for work, called HRA105.com. It’s a informational and marketing website for HRAs (Health Reimbursement Arrangements).  The pictures on the left are the redesign and updated site, and the pictures on the right is what it use to look like. As you can see I did a lot of updates to the site. First off, I created all the banner images and made a simple jQuery Rotating banner with a simple fading transition with the jQuery Cycle Plugin. This is a really nice feature because it will show up in all browsers including iPhones. Secondly,  I used Stu Nicholls’ great horizontal navigation called Professional Dropdown #2. I would of created my own navigational menu but it just saves so much time using other’s free stuff and this is just a really  nice and simple menu to use and setup. The problem with the original site was that the navigation was non-existent. You had to click on the flash portion at the top and then click “click here to read more” and then the subpages had tons of white space between paragraphs that made no since and it was hard to find what you wanted. The most important part of any website is that its easy to get around and find what you want, if the user can’t use your site they will leave it in a matter of seconds. Also, I made all the subpages consistent and made the site a standard 1024px by 768px instead of a stretch to fit liquid layout so it looks the same on all computers. Its cross browser compatible as well and I performed my SEO checklist on the site as well.

Cya

]]> http://scottrockers.com/blog/portfolio/work-projects/hra105-com-website/feed 0 jQuery Cycle Plugin – A Slideshow Creator Javascript File http://scottrockers.com/blog/resources/tutorials/jquery-cycle-plugin-a-slideshow-creator-javascript-file http://scottrockers.com/blog/resources/tutorials/jquery-cycle-plugin-a-slideshow-creator-javascript-file#comments Tue, 16 Feb 2010 18:19:09 +0000 admin http://scottrockers.com/blog/?p=905

Here is another useful script that I wanted to write a quick post about. Its called jQuery Cycle Plugin, and its an additional javascript file that basically allows you to create a slideshow very easily and it supports many different types of transition effects. It ‘s dual licensed under the MIT and GPL licenses which is great so you can use it in basically any project. If you don’t want to use Flash this is a really simple way to setup a slideshow that will show in all browsers. Some of the transitions are: scrollup, scrollleft, scrollright, scrolldown, shuffle, and turndown. The images above is an example of it in action, and here is the code to it, really simple.

There are two things you need to add to your <head> section in your html, the css and javascript import lines:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<style type="text/css">
.banner {  
    height:  82px;  
    width:   82px;  
    padding: 0;  
    margin:  0;  
} 
 
.banner img {   
    border:  1px solid #fff;   
    width:  80px; 
    height: 80px; 
    top:  0; 
    left: 0 
} 
.banner img { display: none } //these lines hide all the rest of the pictures on startup 
.banner img.first { display: block } //except the first image
 
</style>
1
2
3
4
5
6
7
8
9
10
11

<!-- include jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.72.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$('.banner').cycle({
			fx: 'scrollLeft' //  transition type, scrollleft
		});
	});
</script>

And here is the image code, just add this anywhere in your <body>, just make sure the class name is the same as what the javascript is looking for:

1
2
3
4
5
6
7

<div class="banner"> 
    <img src="http://scottrockers.com/blog/wp-content/uploads/2010/02/233158.jpg" width="80" height="80" /> 
    <img src="http://scottrockers.com/blog/wp-content/uploads/2010/02/271131.jpg" width="80" height="80" /> 
    <img src="http://scottrockers.com/blog/wp-content/uploads/2010/02/216505.jpg" width="80" height="80" /> 
    <img src="http://scottrockers.com/blog/wp-content/uploads/2010/02/260178.jpg" width="80" height="80" /> 
    <img src="http://scottrockers.com/blog/wp-content/uploads/2010/02/115908.jpg" width="80" height="80" /> 
</div>
]]> http://scottrockers.com/blog/resources/tutorials/jquery-cycle-plugin-a-slideshow-creator-javascript-file/feed 1 jQuery: The Write Less, Do More Javascript Library http://scottrockers.com/blog/resources/useful-websites/jquery-the-write-less-do-more-javascript-library http://scottrockers.com/blog/resources/useful-websites/jquery-the-write-less-do-more-javascript-library#comments Fri, 12 Feb 2010 16:57:32 +0000 admin http://scottrockers.com/blog/?p=892

Keeping up with the latest trends in web development is tough sometimes, only because there are new things always being created. jQuery is  one of the newer creations that have come up in the last several years and its not going away. It is the most popular JavaScript library in use today. If you don’t know what jQuery is then here is a brief description: jQuery is a JavaScript Library that is fast and concise that makes HTML document traversing, event handling, animating, and Ajax interactions for rapid web development much easier. “jQuery is designed to change the way that you write JavaScript.” It’s lightweight, around 23kb, and cross browser compliant and compliant with CSS3 as well. You can create sliding banners, dropdown navigations, and much more with it. I am trying to learn more and more of it everyday, and its pretty exciting. jQuery is provided under the MIT and GPL licenses which means you can use it in your commercial projects like selling of themes and stuff. There are several good tutorials and other helpful resources on their website and I would highly recommend it and learning some yourself.

Cya

]]> http://scottrockers.com/blog/resources/useful-websites/jquery-the-write-less-do-more-javascript-library/feed 0