Devin R. Olsen Web Developer http://www.devinrolsen.com From Developer to Developer Information and Sharing Wed, 27 Jan 2010 20:23:28 +0000 http://wordpress.org/?v=2.8.4 en hourly 1 How to Build jQuery Lava Lamp Menu Tabs http://www.devinrolsen.com/build-jquery-lava-lamp-menu-tabs/ http://www.devinrolsen.com/build-jquery-lava-lamp-menu-tabs/#comments Fri, 25 Dec 2009 09:05:00 +0000 Devin R. Olsen http://www.devinrolsen.com/?p=567 equation


Tutorial Example

How to Build jQuery Lava Lamp Menu Tabs from Devin R. Olsen on Vimeo.

This effect is called “animated rounded menu tabs”. It’s a neat little effect that will work in all browsers including IE6+. somethings to note is that this technique uses a single image for its four corners and is stretchy in both width and height!

We are also using the jQuery JS lib to ensure our JS works across all browsers but also to cut down on the amount of JS we uses to make this great effect. Here is the link I use in the video tutorial to use the jQuery lib from Google’s online repository.

http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js

Here is the full source if you want to just get down to studying the code.

<!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>Devin R. Olsen - Lava Lamp Menu Tabs</title>
<style type="text/css">
#nav {width:500px;  background:#333; margin:0px; padding:0px 0px 0px 20px; color:#fff; position:relative;}
#nav li {float:left; display:inline; list-style:none; line-height:35px; position:relative; z-index:3;}
#nav li a { padding:0px 10px 0px; cursor:pointer; font-size:12px; display:inline; color:#fff;}

#nav li.rounder { position:absolute; left:0px; top:0px; margin:0px; padding:0px; display:none; z-index:2;}
#nav li.rounder img {position:absolute;}
.cornersWrap {position:relative; height:25px; width:auto; margin-top:5px; background:#fff;}

#nav, #nav li, #nav li a, #nav li.rounder {height:35px;}

#tl,#tr,#bl,#br {position:absolute; width:8px; height:8px; overflow:hidden;}

#tr,#tl {top:0px;}
#br,#bl {bottom:0px;}

#tr,#br {right:0px;}
#tl,#bl {left:0px;}

#tr img,#br img {left:-8px;}
#bl img,#br img {top:-8px;}
</style>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$("#nav li a").mouseover(function(){

		$("#nav li a").each(function(count){
			$(this).css({color:"#fff"});
		});

		$(this).css({color:"#000"});

		var offL =  $(this).offset().left - $("#nav").offset().left;
		var offW = $(this).width() + parseInt($(this).css("paddingLeft")) * 2;

		$("li.rounder").stop().animate({left:offL+"px", width:offW+"px"},295,function(){

			//IE6 1px Fix
			var trOff = $("#tr").offset().left + parseInt($("#tr").css("width"));
			var wrapWOff = $(".rounder").offset().left + parseInt($(".rounder").css("width"));

			var brOff = $("#br").offset().top + parseInt($("#br").css("height"));
			var wrapHOff = $(".cornersWrap").offset().top + parseInt($(".cornersWrap").css("height"));					

			if(wrapWOff > trOff){
				$("#tr,#br").attr("class","rFix");
			}	

			$(".rFix").css({right:"-1px"});

			if(wrapHOff > brOff){
				$("#br,#bl").attr("class","bFix");
			}
			$(".bFix").css({bottom:"-1px"});
		});
	});
});
</script>
</head>

<body>
	<div>
    	<ul id="nav">
        	<li><a href="#">Short</a></li>
            <li><a href="#">Longer</a></li>
            <li><a href="#">Kinda Long</a></li>
            <li><a href="#">Kinda Longer</a></li>
            <li><a href="#">Really Longer</a></li>
            <li><a href="#">A Really Lot Longer</a></li>
            <li class="rounder">
            	<div class="cornersWrap">
                    <div id="tl"><img src="http://www.devinrolsen.com/wp-content/themes/typebased/images/rounder.gif" /></div>
                    <div id="tr"><img src="http://www.devinrolsen.com/wp-content/themes/typebased/images/rounder.gif" /></div>
                    <div id="bl"><img src="http://www.devinrolsen.com/wp-content/themes/typebased/images/rounder.gif" /></div>
                    <div id="br"><img src="http://www.devinrolsen.com/wp-content/themes/typebased/images/rounder.gif" /></div>
                </div>
            </li>
        </ul>
    </div>
</body>
</html>
]]> http://www.devinrolsen.com/build-jquery-lava-lamp-menu-tabs/feed/ 4 How to build a jQuery lightbox! http://www.devinrolsen.com/how-to-build-a-jquery-lightbox/ http://www.devinrolsen.com/how-to-build-a-jquery-lightbox/#comments Thu, 17 Dec 2009 05:56:59 +0000 Devin R. Olsen http://www.devinrolsen.com/?p=562 Today I want to talk about EVERYTHING lightbox. I want to show you how to build your own lightbox using jQuery and CSS. Not only build it but explain to you the road blocks and work arounds any normal developer would run into. We will go over each step on how to make the lightbox work in IE6, IE7 and IE8 as well as all other browsers.

Here is the completed code if you just want to study the little guy.

<!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>Everything You Need to Know About a Lightbox!</title>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<style type="text/css">
#lightBox {width:100%; margin:50px 0px; text-align:center; display:none;}
#lightWrap {width:400px; background:#000; border:2px #ccc solid; margin:auto; color:#fff; position:relative;  z-index:2;}

#shade {width:100%; height:100%; position:absolute; top:0px; left:0px; background:#000; -moz-opacity:0.5; -khtml-opacity:0.5; opacity:0.5; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); display:none; z-index:1;}

#closeBox { width:16px; height:16px; line-height:15px; background:#F36; position:absolute; top:5px; right:10px; cursor:pointer;}
</style>
<script>
$(document).ready(function(){

	$("#action").click(function(){
		$("#lightBox").fadeIn("fast");

		if($("body").height() > $("body").offset().height){
				var sH = $("body").height();
			}else{
				var sH = $("body").offset().height;
		}

		$("#shade").css({height:sH+'px',}).slideDown("fast");

		$("#closeBox").click(function(){
			$("#lightBox").fadeOut("fast");
			$("#shade").slideUp("fast");
		});

	});

});
</script>
</head>

<body>
<button id="action">Click Me</button>

<div id="lightBox">
	<div id="lightWrap">
    	<div id="closeBox">X</div>
    	<h2>HELLO This is my very own custom built lightbox!!</h2>
    </div>
</div>

<div id="shade"></div>

</body>
</html>

Thanks Everyone!

]]> http://www.devinrolsen.com/how-to-build-a-jquery-lightbox/feed/ 5 Drag 2 Share with CSS and jQuery http://www.devinrolsen.com/drag-2-share-css-and-jquery-tutorial/ http://www.devinrolsen.com/drag-2-share-css-and-jquery-tutorial/#comments Tue, 15 Dec 2009 04:43:47 +0000 Devin R. Olsen http://www.devinrolsen.com/?p=556 Download your copy HERE!

Ok here we are going to learn how to build the “Drag 2 Share” feature you see on my blogs. This little guy is just what your visitors need to feel like they are having fun when sharing. In its own little way it finally makes sharing FUN!

]]> http://www.devinrolsen.com/drag-2-share-css-and-jquery-tutorial/feed/ 5 Magento – How to import and export your products http://www.devinrolsen.com/magento-import-and-export-products/ http://www.devinrolsen.com/magento-import-and-export-products/#comments Sat, 12 Dec 2009 20:02:17 +0000 Devin R. Olsen http://www.devinrolsen.com/?p=531 Here I will show you how to use Magento’s product  importing and exporting feature. I will first export a simple product out to obtain an overview of Magento’s required CSV format. Then I will demonstrate how to import all your product into Magento with this single CSV file.

Thanks!
Devin R. Olsen

]]> http://www.devinrolsen.com/magento-import-and-export-products/feed/ 3 Magento Cache Management Overview and Tips http://www.devinrolsen.com/magento-cache-managment-overview-and-tips/ http://www.devinrolsen.com/magento-cache-managment-overview-and-tips/#comments Sat, 12 Dec 2009 09:34:32 +0000 Devin R. Olsen http://www.devinrolsen.com/?p=525 Here we are going to demonstrate how to use Magento cache management system. I will also show you how to do a hard cache flush of your magneto cache.

Enjoy!
Devin R. Olsen

]]> http://www.devinrolsen.com/magento-cache-managment-overview-and-tips/feed/ 1 Installing Magento Commerce and XAMPP on Windows 7 http://www.devinrolsen.com/installing-magento-commerce-and-xampp-on-windows-7/ http://www.devinrolsen.com/installing-magento-commerce-and-xampp-on-windows-7/#comments Sat, 12 Dec 2009 08:40:58 +0000 Devin R. Olsen http://www.devinrolsen.com/?p=496 In order to have your localhost be directed as www.localhost.com, go to the bottom of your c:/Windows/System32/drivers/etc/host host file and include this:

127.0.0.1    www.localhost.com

Hit save and refresh Apache. Your local host should now be accessible to by going to http://www.localhost.com instead of http://127.0.0.1.

Download XAMPP 1.6.7 (PHP 5.2) Here!

Also you many notice or experince the error I recived when I tried to view the front end for the first time after installing the sample data. Simple goto your localhost folder magento/var/cache/ and delete all the folders in this cache directory. Hit refresh and you should be good to go.

Hope this helps someone out there.

Thanks and Enjoy.

Devin R. Olsen

]]> http://www.devinrolsen.com/installing-magento-commerce-and-xampp-on-windows-7/feed/ 4