(Ask) CSS & jquery Question

LewatN · February 24, 2012

Hello,

We are trying to create a navigation button using jquery, css.

We got everything working but we cannot make the images line up on the same line, next to each other to form a single (looking) navigation bar.

Code is below

Thanks before

--------------------------------------------

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>Untitled Document</title>
<script type="text/javascript" src="scripts/jquery.packed.js"></script>
<style type="text/css" media="screen">
* {margin:0;padding:0;list-style:none;}
body{font-family:"Trebuchet MS";font-size:13px;padding:2em;}
h1{font-size:28px;}
div{margin:0 0 2em 0;}
p, pre, ul, li{margin:0 0 1em 0;}
pre{padding:1em; border:solid 1px #ddd; background:#f8f8f8;}

/* BEGIN CSS */

.fadeThisFront {
	position:relative;
	display:block;
	height: 38px;
	width: 121px;
	background:url(images/on-off-event-front.png) 0 0 no-repeat;
}
 .hoverFront {
	position: absolute;
	top: 0;
	left: 0;
	display: none;
	height: 38px;
	width: 121px;
	background:url(images/on-off-event-front.png) 0 -38px no-repeat;
}

.fadeThis {
	position:relative;
	display:block;
	height: 38px;
	width: 257px;
	background:url(images/on-off-event.png) 0 0 no-repeat;
}
.hover {
	position: absolute;
	top: 0;
	left: 0;
	display: none;
	height: 38px;
	width: 257px;
	background:url(images/on-off-event.png) 0 -38px no-repeat;
}
/* END CSS */
</style>


<script type="text/javascript">
$(document).ready(function() {
// find the div.fade elements and hook the hover event
$('.fadeThis').hover(function() {
	// on hovering over find the element we want to fade *up*
	var fade = $('> .hover', this);

	// if the element is currently being animated (to fadeOut)...
	if (fade.is(':animated')) {
		// ...stop the current animation, and fade it to 1 from current position
		fade.stop().fadeTo(500, 1);
	} else {
		fade.fadeIn(500);
	}
}, function () {
	var fade = $('> .hover', this);
	if (fade.is(':animated')) {
		fade.stop().fadeTo(500, 0);
	} else {
		fade.fadeOut(500);
	}
});

// get rid of the text
$('.fadeThis > .hover').empty();
});
</script>

<script type="text/javascript">
$(document).ready(function() {
// find the div.fade elements and hook the hover event
$('.fadeThisFront').hover(function() {
	// on hovering over find the element we want to fade *up*
	var fade = $('> .hoverFront', this);

	// if the element is currently being animated (to fadeOut)...
	if (fade.is(':animated')) {
		// ...stop the current animation, and fade it to 1 from current position
		fade.stop().fadeTo(500, 1);
	} else {
		fade.fadeIn(500);
	}
}, function () {
	var fade = $('> .hoverFront', this);
	if (fade.is(':animated')) {
		fade.stop().fadeTo(500, 0);
	} else {
		fade.fadeOut(500);
	}
});

// get rid of the text
$('.fadeThisFront > .hoverFront').empty();
});
</script>
</head>

<body>


<strong class="fadeThisFront"><span class="hoverFront">This text is hidden</span></strong> 
<strong class="fadeThis"><img src="images/nav-divider.png" width="2" height="38" /><span class="hover">This text is hidden</span></strong>

</body>
</html

**Nathan** · February 24, 2012

Eeek...please either post the file or use the CODE tags around you code so we can easily see it.

LewatN · February 24, 2012

aw.

I can't use spoiler for codes

any one can help me to edit this post?

LewatN · February 24, 2012

my bad, sorry for ignored preview

**Nathan** · February 24, 2012

What do you mean?

I tried to edit, but the line breaks and such have already been changed so it's just 1 big block of code.

LewatN · February 24, 2012

done,

Any ideas/help would be great

**Nathan** · February 24, 2012

Give this a try, I added "float:left" to your CSS for .fadeThisFront and .fadeThis

<!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>Untitled Document</title>
<script type="text/javascript" src="scripts/jquery.packed.js"></script>
<style type="text/css" media="screen">
* {margin:0;padding:0;list-style:none;}
body{font-family:"Trebuchet MS";font-size:13px;padding:2em;}
h1{font-size:28px;}
div{margin:0 0 2em 0;}
p, pre, ul, li{margin:0 0 1em 0;}
pre{padding:1em; border:solid 1px #ddd; background:#f8f8f8;}

	/* BEGIN CSS */
	.fadeThisFront {
			position:relative;
			display:block;
			height: 38px;
			width: 121px;
			float:left;
			background:url(images/on-off-event-front.png) 0 0 no-repeat;
	}
	 .hoverFront {
			position: absolute;
			top: 0;
			left: 0;
			display: none;
			height: 38px;
			width: 121px;
			background:url(images/on-off-event-front.png) 0 -38px no-repeat;
	}

	.fadeThis {
			position:relative;
			display:block;
			height: 38px;
			width: 257px;
			float:left;
			background:url(images/on-off-event.png) 0 0 no-repeat;
	}
	.hover {
			position: absolute;
			top: 0;
			left: 0;
			display: none;
			height: 38px;
			width: 257px;
			background:url(images/on-off-event.png) 0 -38px no-repeat;
	}
	/* END CSS */
</style>

<script type="text/javascript">
$(document).ready(function() {
	// find the div.fade elements and hook the hover event
	$('.fadeThis').hover(function() {
			// on hovering over find the element we want to fade *up*
			var fade = $('> .hover', this);
			// if the element is currently being animated (to fadeOut)...
			if (fade.is(':animated')) {
					// ...stop the current animation, and fade it to 1 from current position
					fade.stop().fadeTo(500, 1);
			} else {
					fade.fadeIn(500);
			}
	}, function () {
			var fade = $('> .hover', this);
			if (fade.is(':animated')) {
					fade.stop().fadeTo(500, 0);
			} else {
					fade.fadeOut(500);
			}
	});
	// get rid of the text
	$('.fadeThis > .hover').empty();
});
</script>
<script type="text/javascript">
$(document).ready(function() {
	// find the div.fade elements and hook the hover event
	$('.fadeThisFront').hover(function() {
			// on hovering over find the element we want to fade *up*
			var fade = $('> .hoverFront', this);
			// if the element is currently being animated (to fadeOut)...
			if (fade.is(':animated')) {
					// ...stop the current animation, and fade it to 1 from current position
					fade.stop().fadeTo(500, 1);
			} else {
					fade.fadeIn(500);
			}
	}, function () {
			var fade = $('> .hoverFront', this);
			if (fade.is(':animated')) {
					fade.stop().fadeTo(500, 0);
			} else {
					fade.fadeOut(500);
			}
	});
	// get rid of the text
	$('.fadeThisFront > .hoverFront').empty();
});
</script>
</head>
<body>

<strong class="fadeThisFront"><span class="hoverFront">This text is hidden</span></strong>
<strong class="fadeThis"><img src="images/nav-divider.png" width="2" height="38" /><span class="hover">This text is hidden</span></strong>
</body>
</html

LewatN · February 25, 2012

thanks alot Nathan

ill send it to my friend

Sign In

(Ask) CSS & jquery Question

Recommended Posts

LewatN

Nathan

LewatN

LewatN

Nathan

LewatN

Nathan

LewatN

Join the conversation

Our Network

Quick Links

About Us

Browse

Activity