THAT Agency Web Design Firm
 
Blog Home | Request Proposal
THAT Agency Design Studio Blog

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 now do with jQuery; well somewhat. But that doesn’t stop us developers from trying right? One of our latest clients wanted a cool feature that I thought would be nicely shared with the rest of the 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.

bg-rotate-slideup-nav-closed
Check out the Demo

Lets begin with the Basics of what is needed:

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

Javascript
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"><!--mce:0--></script>
<script src="bg-rotate-slide-up-js.js" type="text/javascript"><!--mce:1--></script>
<script type="text/javascript"><!--mce:2--></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 class="snapShot show" src="one.jpg" alt="One" width="650" height="300" />
    <img class="snapShot" src="two.jpg" alt="Two" width="650" height="300" />
    <img class="snapShot" src="three.jpg" alt="Three" width="650" height="300" />
    <!-- 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>
</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>
</div>
</div>
 
 
<!-- end sub nav slide up box --></div>
 
 
<!-- end main image box -->

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 &amp;&amp; $.browser.version.substr(0,1)&lt;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');
}

bg-rotate-slideup-nav-open
Check out the Demo

OR

Download the zip file

Update: Per your requests, here is an updated script and CSS code that gives your menu an animated scrolling effect. This code has also been cleaned up quite a bit from the previous version.

$(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 &amp;&amp; $.browser.version.substr(0,1)&lt;8){var minusPX = "33";}
		else{var minusPX = "32";}
 
		var newHeight = $(this).height() - minusPX +"px";
		//alert(newHeight);
		$(this).stop().animate({
			bottom: newHeight
		}, 'slow')
	}, function(){
      	$(this).stop().animate({
			bottom: '0'
		}, 'slow')
    });
 
}); // 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');
}

And the modified CSS:

body{margin:0;padding:0;}
#mainImageBox{position:relative;height:300px;margin-top:20px;margin-bottom:20px;margin-left:20%; overflow: hidden;}
#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;bottom:0;left:0;width:650px; height: 30px;}
#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;}
#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;}

Tags: , , , , ,

Share this article

TwitterTwitter
FacebookFacebook
De.licio.usde.licio.us
de.licio.usDigg
StumbleUponStumbleUpon
TechnoratiTechnorati
Script & StyleScript&Style

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

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

<!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: , , , ,

Share this article

TwitterTwitter
FacebookFacebook
De.licio.usde.licio.us
de.licio.usDigg
StumbleUponStumbleUpon
TechnoratiTechnorati
Script & StyleScript&Style
THAT ServicesTHAT Marketing THAT Case Study THAT Client List THAT SolutionTHAT Agency THAT Contact Site Map Privacy

Copyright ©2006-2012 THAT Agency, LLC, a web design firm and web develelopment company. All Rights Reserved.
Website design services