JQuery | THAT Web Design Agency Blog | Web Design and Web Marketing

Rotated Background with Slide Up Menu using JQuery and CSS

Posted on Mar 3, 2010 by Rich to Web Development

So you’re not really into flash?
Don’t know how to code flash?
Don’t want to know how to code flash?
Love jQuery?

Well all this is pretty much me. Now a days most of the things you can do in flash, you can know do with jQuery; well somewhat. But that doesn’t stop us developers from trying right? One of latest clients wanted a cool feature that I thought would be nicely shared with the rest of my web development community.

Let’s think of a box with rotating images inside. along with the images, we have a navigation menu that slides up / down while the images rotate. Pretty cool huh? well lets show you how I made this happen.

Check out the Demo

Lets begin with the Basics of what is needed:

1. JQuery/ custom js
2. css/html/images

Javascript

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="bg-rotate-slide-up-js.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	mainImageFlow();
});
</script>

CSS

body{margin:0;padding:0;}
#mainImageBox{position:relative;height:300px;margin-top:20px;margin-bottom:20px;margin-left:20%;}
#mainImageBox img{float:left;position:absolute;margin:0;padding:0;border:1px solid #6a39b3;}
#mainImageBox img.show{z-index:100}
.snapShot{margin:0;padding:9px;left:0;position:absolute;top:0;z-index:0;}
#mainImageBox #subNavBox{position:absolute;z-index:200;top:1px;left:1px;width:650px;height:300px;}
#mainImageBox #subNavBox .sNavWrap{float:left;position:relative;bottom:0;background-color:#6a39b3;margin:0 0 0 20px;padding:0;font-size:12px;text-align:center;top:269px;}
#mainImageBox #subNavBox .sNavWrap a{margin:0;padding:8px 10px;font-size:12px;font-family:Arial, Helvetica, sans-serif;color:#f9f9f9;text-decoration:none;text-align:center;display:block; text-transform:uppercase;font-weight:bold;}
#mainImageBox #subNavBox .sNavWrap .sSub{border-top:1px solid #ddd;margin:0;padding:0;}
#mainImageBox #subNavBox .sNavWrap .sSub a{display:block;margin:5px 0;padding:5px 0 8px 0;font-size:12px;font-family:Arial, Helvetica, sans-serif;color:#080808;text-decoration:none;text-align:center;display:block;text-transform:uppercase;font-weight:normal;}
.clear {clear: both;display: block;overflow: hidden;visibility: hidden;width: 0;height: 0;}.clearfix:after {clear: both;content:' ';display: block;font-size: 0;line-height: 0;visibility: hidden;width: 0;height: 0;}.clearfix {display: inline-block;}* html .clearfix {height: 1%;}.clearfix {display: block;}

HTML

<!-- begin main image box -->
<div id="mainImageBox">
    <img src="one.jpg" alt="One" width="650" height="300" class="snapShot show" />
    <img src="two.jpg" alt="Two" width="650" height="300" class="snapShot" />			
    <img src="three.jpg" alt="Three" width="650" height="300" class="snapShot" />
    <!-- begin sub nav slide up box -->
    <div id="subNavBox" class="sNav">
        <!-- list 1 -->
        <div class="sNavWrap">
          <div class="sHead">
            <a href="#">Header Link 1</a>
            <div class="sSub">
                <a href="#">sub link for 1</a>
                <a href="#">sub link 2 for 1</a>
                <a href="#">sub link 3 for 1</a>
            </div>
            <div class="clear"></div>
          </div> 
          <div class="clear"></div>                 
        </div>               
        <!-- list 2 -->
        <div class="sNavWrap">
          <div class="sHead">
            <a href="#">Header Link 2</a>
            <div class="sSub">
                <a href="#">sub link for 2</a>
                <a href="#">sub link 2 for 2</a>
                <a href="#">sub link 3 for 2</a>
            </div>
            <div class="clear"></div>
          </div> 
          <div class="clear"></div>                 
        </div> 
    </div>
    <!-- end sub nav slide up box -->
</div>
<!-- end main image box -->

Well building off of a carousel foundation I found, I stripped down to the bare minimum and ran from there. Here is all the Javascript written for this example:

Javascript (bg-rotate-slide-up-js.js)

$(document).ready(function(){
	/*****************************************************************************
		dealing with the navigation
	*****************************************************************************/	
 
	$(".sSub").each(function(){
		var newWidth = $(this).width();
		$(this).prev().css("width",newWidth);
		$(this).css("display","none");
		//alert( 300 - $(this).height() );
	});
	// Deal with Sub Nav
	$(".sNavWrap").hover(function(){
		// I Loath you IE fix
		if ($.browser.msie && $.browser.version.substr(0,1)<8){var minusPX = "33";}
		else{var minusPX = "32";}
 
		var newHeight = (300 - $(this).children().children(".sSub").height() ) - minusPX +"px";
		//alert(newHeight);
		$(this).animate({
			top: newHeight
		}, 300, function() {
			$(this).children().children(".sSub").show();
		}).stop(true, true);
		$(this).children().children(".sSub").slideDown(300);
	},function(){
      	$(this).animate({
			top: '269px'
		}, 300, function() {
			$(this).children().children(".sSub").hide();
		}).stop(true, true);
		$(this).children().children(".sSub").slideUp(300);
    });
 
 
 
}); // END THE DOM
 
 
 
/*****************************************************************************
	dealing with the rotating images
*****************************************************************************/	
function mainImageFlow()
{
	// set the opacity of image(s) to 0 (can't see them)
	$('#mainImageBox img').css({opacity: 0.0});
	// set the first image to be seen
	$('#mainImageBox img:first').css({opacity: 1.0});
	// set the function for 'mainImageGallery' to run every 3 seconds.
	setInterval('mainImageGallery()',3000);
}
function mainImageGallery()
{
	// if the images have no class (class='show') then show the first one anyway
	var current = ($('#mainImageBox img.show')?  $('#mainImageBox img.show') : $('#mainImageBox img:first'));
	//Get next image, if it reached the end of the slideshow, rotate it back to the first image
	var next = ((current.next().length) ? ((current.next().hasClass('sNav'))? $('#mainImageBox img:first') :current.next()) : $('#mainImageBox img:first'));	
	//Set the fade in effect for the next image, show class has higher z-index
	next.css({opacity: 0.0})
	.addClass('show')
	.animate({opacity: 1.0}, 1000);
	//Hide the current image
	current.animate({opacity: 0.0}, 1000)
	.removeClass('show');
	$("#subNavBox").removeClass('show');
}

Check out the Demo

OR

Download the zip file

Tags: CSS, html, jQuery

Base model for a PHP based website

Posted on Jan 7, 2010 by Rich to Web Development

There are characteristics that every web developer has. One of those things is the way a project is started. While some developers might use open source Content Management Systems / Blogging software like: Wordpress, Joomla, Movable Type or any of the other systems out there, some developers chose to have a foundation to their projects.

Here at THAT Agency, we write alot of custom code for our clients, but I personally still like building off of my own foundation. Here is my breakdown.

Note that we usually build in PHP.

css/
inc/
js/
img/
template.php

Seems pretty simple right? well lets look inside the folders themselves.

css

This folder includes 2 files (which you can merge into 1, but i like the two files). We have been really utilizing the 960 Grid System for our development standards, so the first css file (reset-960.css) is pretty much what you expect. It contains the condensed versions of reset as well as the 960 grid. I opted not to use the text.css file that is included in the 960 grid download but wrote my own (this you can change to your own).

The next file site.css contains some regular standard css elements:

/* important */
html{background-color:#F9F9F9;}
body{font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:1.3em;}
*{margin:0;padding:0;}
/* headers */
h1{font-family:Georgia, "Times New Roman", Times, serif;font-size:24px;font-weight:normal;}
h2{font-family:Georgia, "Times New Roman", Times, serif;font-size:22px;font-weight:normal;}
h3{font-family:Georgia, "Times New Roman", Times, serif;font-size:20px;font-weight:normal;}
h4{font-family:Georgia, "Times New Roman", Times, serif;font-size:18px;font-weight:normal;}
h5{font-family:Arial, Helvetica, sans-serif;font-size:16px;font-weight:bold;}
h6{font-family:Arial, Helvetica, sans-serif;font-size:14px;font-weight:bold;}
h1,h2,h3,h4,h5,h6{margin:10px 0;padding:0;display:block;clear:both;}
/* Text and links */
p{font-family:Arial, Helvetica, sans-serif;line-height:1.5em;margin:0 0 10px 0;padding:0;}
blockquote{font-style:italic;display:block;margin:20px 0;padding:10px;background-color:#fff;border-top:1px solid #ccc;border-bottom:1px solid #ccc;}
a,a:link,a:visited{color:#21759B;}
a:hover{color:orange;}
ul{margin:0 0 0 10px;}
ul li{margin:0 0 0 10px;padding:0;}
/* clear pieces */
.clear5{height:5px;}
.clear10{height:10px;}
.clear15{height:15px;}
.clear20{height:20px;}
.clear25{height:25px;}
.clear50{height:50px;}
.clear100{height:100px;}
/* Text Classes */
.textRight{text-align:right;}
.textLeft{text-align:left;}
.textCenter{text-align:center;}

inc

The inc(ludes) folder for starters contains 3 files:

header.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DEVELOPMENT TEMPLATE</title>
<link rel="stylesheet" media="all" type="text/css" href="/css/reset-960.css" />
<link rel="stylesheet" media="all" type="text/css" href="/css/site.css" />
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="/js/site.js"></script>
</head>

analytics.php
This file was created to house your analytics code for your website. I find it annoying to have to copy and past something as simple as that on every page of your website.

footer.php

</body>
</html>

Like the idea? Check it out for yourself and download the zip file. It contains 2 folders. 1 for HTML and the other PHP

Download the template-foundation zip

Tags: html, jQuery, php

Using jQuery to create a minimal sitemap section slider

Posted on Oct 21, 2009 by Rich to Web Development

Have you ever gone to a website and visited their sitemap page only to find an elongated page that you have to scroll forever to try to find what you are looking for? If you answer is “yes” then we are in the same boat. Well that got me to thinking. Why couldn’t we use the power of jQuery to basically organize the sitemap into sections and expand the section when you click on the link.

I have created this quick piece of code to accomplish just that.

Website Section Slider using jQuery

Well here is the fancy of it all:

First the guts. Here is the call to your jQuery file; of course we use the one google hosts and the actual jQuery Javascript code that makes this all possible. Note that this code should go inside the <head> tag.

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$("#sitemap h3").each(function(){
                $("#sitemap div").css("display","none");
		$(this).addClass("resting");
		$(this).click(function(){
			var question = $(this).attr("class");
			var answer = $(this).next();
			if(question === "resting"){
				$(this).removeClass("resting");
				$(this).addClass("active");
				}
			else{
				$(this).removeClass("active");
				$(this).addClass("resting");
				}
			$(answer).slideToggle();			
		});
	});
});
</script>

We continue by getting some basic CSS to 1. hide the actual website pages from the user and 2. to make it pretty. This should also go inside your <head> tag.

<style>
#sitemap h3{cursor:pointer;font-family:Arial, Helvetica, sans-serif;font-size:20px;font-weight:normal;margin:0 0 5px 0;padding:0;}
#sitemap h3.resting{color:#cc0;}
#sitemap h3.active{color:red;}
#sitemap div{margin:0;padding:5px 10px;}
#sitemap div{font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:1.3em;font-weight:normal;}
#sitemap div ul{margin:0 0 0 15px;padding:0;}
#sitemap div ul li a{display:block;color:#333;padding:3px 5px;margin:0;height:20px;line-height:20px;}
</style>

Now we can go ahead and add the actual sitemap pieces for the sitemap page. Granted this is html, but it wouldnt take too much work to convert it into php and get the info from mySql if your using some kind of content management system.

<!-- begin sitemap -->
<div id="sitemap">
	<!-- begin section -->
	<h3>Website Section 1</h3>
    <!-- begin pages -->
	<div>
    	<ul>
            <li><a href="#">Page 1</a></li>
            <li><a href="#">Page 2</a></li>
            <li><a href="#">Page 3</a></li>
            <li><a href="#">Page 4</a></li>
            <li><a href="#">Page 5</a></li>
        </ul>
    </div>
	<!-- begin section -->
	<h3>Website Section 2</h3>
    <!-- begin pages -->
	<div>
    	<ul>
            <li><a href="#">Page 1</a></li>
            <li><a href="#">Page 2</a></li>
            <li><a href="#">Page 3</a></li>
            <li><a href="#">Page 4</a></li>
            <li><a href="#">Page 5</a></li>
        </ul>
    </div>

Pretty simple right? of course. Well here is the live example of the jQuery Quick Sitemap Section Slider for you too see what it looks like.

Click the link if you would like to DOWNLOAD the jQuery Quick Sitemap Section Slider

Note: If javascript is disabled, the sitemap will show everything on the page; which goes back to the sitemaps everyone is used to.

Tags: jQuery

In the year 3000! ok maybe 2012 – The future of Development

Posted on Jun 8, 2009 by Rich to Technology Trends, Web Design

So I have been reading lately on the evolution of web development and how it will affect our culture as a whole. I have seen many blogs and articles state that mobile development will grow substantially. I totally agree with this item. Most websites now have evolved into thinking of mobile website presentation as an important part of their design and development. Some may argue in having a separate presentation for your mobile edition like yoursite.com/mobile or m.yoursite.com others might argue that something like “Progressive Enhancement” might be the solution. While others still might have their own reasons for doing what they do. I personally feel like there is no right answer. The biggest question to me is something that plagues us as developers and designers on the regular computer browsers. That is cross-browser compatibility. For example, I went from a sidekick slide to a G1 and now to the iPhone. Each phone supports different functionality and such. which makes it very difficult to have the mobile edition look the same across all phones. Yikes!

Another thing I have read about lately has been on the “I hope IE 6 Dies” mentality. While me as a Developer would truly hope so, we might not have that even in 2012. With the prices of these systems, licensing costs, lack of IT manpower or whatever else could be impeding the upgrade of computer systems in larger corporations we might still have to deal with this disease.

Frameworks Frameworks Frameworks. Developers have their preference. Some might tell you to learn all, some might say stick to one. At the end of the day, I can see them integrating concepts together to form the ultimate framework like voltron.js

I would talk about HTML5 and CSS3, but why. If not all browsers support it, then we are back to 2009.

Tags: CSS, CSS3, Dojo, HTML5, jQuery, Progressive Enhancement, Prototype

Fighting spam from inline email addresses using JQuery Plugin – Version 1.0

Posted on Mar 19, 2009 by Rich to Technology Trends, Web Development

This is a JQuery plugin I have been working on to try to eliminate; if not help, fight spam through bots and such going through websites and scraping email addresses.

Basically it works like this: You add the emails in a certain way in your code, be it yourname^yourcompany#com or however you want to add it. Then let the plugin work its magic. The code will be shown as above, but will behave as if you had typed in yourname@yourcompany.com. Simple huh? Well here we go:

Javascript

<script>
$(document).ready(function(){
// example 1
$('a[rel*=spemail]').spemail('|,:','linkbase');
// example 2
$('#email').spemail('|,:','mailbase');
// example 3
$('#plainemail').spemail('|,:','plainbase');
});
</script>

HTML

1
2
3

<p><strong>Example 1:</strong> <a href="yourname|yourcompany:com" rel="spemail"></a></p>
<p><strong>Example 2:</strong> <span id="email">yourname|yourcompany:net</span></p>
<p><strong>Example 3:</strong> <span id="plainemail">yourname|yourcompany:net</span></p>

As you can see in the examples above, the code in the DOM, will handle specific email pieces based on their ID or rel. Try it out and see. It works well.

Check out a live example of Fighting spam from inline email addresses using JQuery

or

Download the Fighting spam from inline email addresses using JQuery Plugin – Version 1.0 source files

Tags: DOM, email, Javascript, jQuery

Internal Links with Favicon using jQuery

Posted on Mar 9, 2009 by Rich to Technology Trends, Web Development

After thinking about doing something with favicons and links, I came up with this very simple jQuery Plugin that would allow all the internal links in your website to actually have your own favicon implemented on the left side of the link.

First of course, you will need jQuery, which you can always download on the jQuery website.

Then you will need the internalFavLink plugin.

Here are some screen shots:

DOM

Add to your DOM Call

RESULTS

Shown Results

So some things I thought about before adding this to the blog.

1. What if I don’t have a favicon? Well, then either create one from an image and use this favicon creator tool from Dynamic drive, add it to your site and you will be able to use this plugin.

2. What if my favicon is a .png and not an .ico file as in the plugin? This is simple as well, just find the code in the javascript file called favicon.ico and change it to yours.

3. What if I want the favicon to be after the link? This is also simple; in the plugin javascript, just change where it says “prepend” to “append”.

The plugin is very simple. So if anyone has any ideas on how to improve please let me know.

You can also see the Internal Favicon Link jQuery Plugin in action!

Tags: DOM, favicon, internal links, Javascript, jQuery

Up and Down slider using JQuery

Posted on Feb 2, 2009 by Rich to Web Development

To tell you the truth, I wish I could remember where I originally found this example because I would like to give credit where credit is due, but I really dont remember. Anyhow, this person’s example was a cool slider effect that stuck to the top of the page. Well I decided to take that and turn into into the same basic concept; only this time coded in JQuery. Oh Yes. I love JQuery.

The examle is pretty straight forward. So if you have any comments or concerns, definitley drop me a comment and I will try my best to answer them.

Here are the screen shots:

Slider in the "Off" Position

Slider in the "On" Position

I kept the same colors and such from the other example so if anyone knows where the original was from, please let me know.

Click Here to see this example in action.

Want to download the code? Of course you do, click here.

Originally seen @ (Antonio Lupetti’s moo-tools example)

Tags: DOM, Javascript, jQuery, toggle

Developer: jQuery Foundation .js

Posted on Jan 29, 2009 by Rich to Technology Trends, Web Development

As developers we always keep our little things that we always use or start a project in the same mannerisms. Coming up later, I will write about how we lay the foundation for a project with our project template. But for now, I would like to show you how we have our jQuery foundation file layed out. Above and beyond the scope of this base file, everything past this point is decided by the individual project.

We have done many websites and somethings always seem to arise. So I decided “Why not just have them in the base file from the beginning.” Right? of course.

So here is the file that we use for just such a thing.

So here is “jQuery Foundation .js”

JQuery:

This has quickly become my norm when dealing with a javascript framework. It is light, flexible and above anything else, easy to learn and implement.

When I use this, I have a set of things I always place inside the code that executes on the DOM.

1. External Links

Now many people do not like to use the target=”_blank” anymore, since it’s not standard anymore. Well why not use jQuery to make it happen.

$('a[rel="external"]').click( function() {
        window.open( $(this).attr('href') );
        return false;
});
// or
$('a[id="externalLink"]').click( function() {
        window.open( $(this).attr('href') );
        return false;
});

2. PDF’s

PDFs should open up without sending the visitor flying to a new window and all sorts of shenanigans like that.

$("a[href*=.pdf]").click(function() {
		$(this).attr({"target":"_self"});
		return false;
});

3. Confirm a Click event

This was just something that I add because well, sometimes you hit a link or a button or submit something by accident right? of course! we all do. Adding this little bit of code will help you try to avoid that, or at least deal with it a little better.

// IN DOM
$('a[rel="confirmDelete"]').click(confirmTheClick);
// OUTSIDE DOM
function confirmTheClick()
{
	var agree="Are you sure you wish to perform this action?\nCheck your work!";
	if ( confirm( agree ) )
		return true;
	else
		return false;
}

You can also download the quick and easy jQuery Foundation javascript file right here, so you can see it.

Do you have anything that you use? Drop us a comment we would love to see what ideas you have!

Tags: DOM, Javascript, jQuery

Refreshing an element at a set time interval using jQuery and a sprinkle of Ajax

Posted on Jan 13, 2009 by Rich to Web Development

Now lets say that you a web page that has a big Block of “something” and inside this “something” you would like to have some information change at a set time interval. Well with Jquery, some PHP and a sprinkle of Ajax, you can get this done quick fast and in a hurry.

The first thing you will need, is obviously the latest jQuery Javascript library file. and you will also need this light JQuery Timers Plugin. Now lets set up:

I am going to assume that you know a little about JQuery and say that you already know how to call from inside the “Head” tag. The following is basically the “meat and potatoes” if you will of what is going on.

Let’s Break it down.

1. First we say “Hey you with the class name of refreshMe, I am going to do something to you every 10 seconds. (SideNote * 1000 = 1 second; So 5,000 = 5 seconds).

2. Now we use JQuery’s built in Ajax functions to call the URL of the page we want to bring in and have it refresh the element with the class name of refreshMe with the information from this page that called. Follow? Good.

Now since for some deranged reason, I can’t get the code highlighter to work correctly Click here to see the page in action. You will be able to view source from there.

Or download it now.

Tags: AJAX, jQuery

Quick and painless Email spam protection using jQuery

Posted on Sep 11, 2008 by Rich to Web Development

I recently went to one of my favorite blogs and saw that the author had posted up a neat little trick to help prevent spammers and bots from crawling your site to gain those oh so valuable emails and begin to send you and everyone else who has an email on your site – spam. It’s a spammy spam world of emails and we as programmers need to try to prevent this.

We all know some clients want their emails on their websites.

Our scenario scene begins in the middle of an email conversation:

> Open scene

Us: “What about a contact form?”

Client: “No. I want people to be able to click on it and open up outlook.”

Us: “But some users may not have outlook. what if the user users gmail for example?”

Client: “Well I just want my email on there.” “well then ok.”

> End scene

So although we would try to persuade our clients not to list e-mails on the site, the old saying goes, “the client is always right.”

Well maybe with this little script, we can possibly come to an arrangement and help prevent this spamtrocity (Yes, I just made this word up) from occurring. I used jQuery to do the magic and I offered two different pieces, because to be honest, I just wanted to.

See it live

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
// First type see comment for example #1
el = $('#email_one');
el.each(function(){
el.attr('href','mailto:' + el.attr('href').replace('|','@').replace('/','').replace(':','.'));
el.attr('title',el.attr('href').replace('|','@').replace('/','').replace(':','.').replace('mailto.','Email: '));
});
// Second type see comment for example #2
$('#email_two').html('<a href="mailto:'+$('#email_two').html().replace('|','@').replace('/','').replace(':','.')+'" title="Email: '+$('#email_two').html().replace('|','@').replace('/','')+'">'+$('#email_two').html().replace('|','[at]').replace('/','')+'</a>');
});
</script>
</head>
<body>
<p>Example 1</p>
<!-- Example 1 :: Just a simple link with the class of email -->
<a href="/yourname|yourcompany:com" id="email_one" title="email me">safer email link</a>
<br/><br/><br/>
<p>Example 2</p>
<!-- Example 2 :: Inside a span with jut some simple info that will get converted to the email -->
<span id="email_two">/yourname2|yourcompany2:net</span>
</body>
</html>

Tags: jQuery, spam