Pogledajte određenu poruku
Staro 23. 10. 2010.   #1
apolo
novi član
Na probnom radu
 
Avatar apolo
 
Datum učlanjenja: 29.07.2009
Poruke: 13
Hvala: 4
5 "Hvala" u 1 poruci
apolo is on a distinguished road
Default Promena pozadine diva sa sadržajem koristeći fadeTo() + bug

Nadam se da neko može da mi odgonetne ovaj bug (nadam se da je rešivo). U pitanju je varijacija na temu promene pozadinske slike preko jQuery-ja, ali uz razliku što se u divu nalazi sadržaj. Skoro svi primeri su prazan div ili indentovan tekst.

Problem je kada se pokrene efekat, element koji treba da promeni pozadinu se postavi preko sadržaja. I kada se tranzicija završi, on onda postavi tekst iznad.

Ja želim da tekst uvek bude na vrhu.

Probao sam zoom, z-index, overflow... I svakakve druge kombinacije, bez sreće.

Kod.

HTML kôd:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Code snipet 5e</title>
		<style type="text/css">
			body
			{
				background: #FF9933;
			}
				#mainbox
				{
					position: relative;
					height: 400px;
					width: 800px;
				}
					.o_box
					{
						float: left;
						width: 149px;
						height: 149px;
						display: block;
						margin: 0 2px;
						background: url(codesnipet5e.png) 0 0 no-repeat; /* 298x149 */
					}
						.o_box h1
						{
							color: #fffbcc;
							font-size: 10pt;
							margin: -149px 0 0 10px;
							padding: 5px 0 0 0;
							text-transform: uppercase;
							font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
						}
						.o_box p
						{
							color: #FFFFFF;
							font-size: 8pt;
							margin: 8px 0 0 0;
							padding: 0 6px 0 10px;
							font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
						}
							.o_box p strong
							{
								border-bottom: 1px dotted #CCCCCC;
							}
						.hover
						{
							width: 149px;
							height: 149px;
							background: url(codesnipet5e.png) -149px 0 no-repeat; /* 298x149 */
						}
		</style>
		<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
		<script type="text/javascript">
		/**
		 * @author Alexander Farkas
		 * v. 1.02
		 */
		(function($) {
			$.extend($.fx.step,{
				backgroundPosition: function(fx) {
					if (fx.state === 0 && typeof fx.end == 'string') {
						var start = $.curCSS(fx.elem,'backgroundPosition');
						start = toArray(start);
						fx.start = [start[0],start[2]];
						var end = toArray(fx.end);
						fx.end = [end[0],end[2]];
						fx.unit = [end[1],end[3]];
					}
					var nowPosX = [];
					nowPosX[0] = ((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0] + fx.unit[0];
					nowPosX[1] = ((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1] + fx.unit[1];
					fx.elem.style.backgroundPosition = nowPosX[0]+' '+nowPosX[1];
		
				   function toArray(strg){
					   strg = strg.replace(/left|top/g,'0px');
					   strg = strg.replace(/right|bottom/g,'100%');
					   strg = strg.replace(/([0-9\.]+)(\s|\)|$)/g,"$1px$2");
					   var res = strg.match(/(-?[0-9\.]+)(px|\%|em|pt)\s(-?[0-9\.]+)(px|\%|em|pt)/);
					   return [parseFloat(res[1],10),res[2],parseFloat(res[3],10),res[4]];
				   }
				}
			});
		})(jQuery);
		</script>
	</head>
	<body>
		<div id="mainbox">
			<a href="#" title="Naslov">
				<div class="o_box">
					<h1>Naslov</h1>
					<p><strong>Istaknuto</strong> tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst.</p>
				</div>
			</a>
			<a href="#" title="Naslov2">
				<div class="o_box">
					<h1>Naslov</h1>
					<p><strong>Istaknuto2</strong> tekst2 tekst tekst tekst2 tekst 2tekst tekst tekst tekst tekst2 tekst tekst2 tekst tekst tekst2 tekst tekst tekst tekst tekst tekst tekst tekst2 tekst.</p>
				</div>
			</a>
			<a href="#" title="Naslov3">
				<div class="o_box">
					<h1>Naslov</h1>
					<p><strong>Istaknuto 3</strong> tekst3 tekst3 tekst tekst3 tekst tekst tekst tekst3 tekst tekst tekst3 tekst3 tekst tekst3 tekst tekst tekst tekst3.</p>
				</div>
			</a>
			<a href="#" title="Naslov4">
				<div class="o_box">
					<h1>Naslov</h1>
					<p><strong>Istaknuto 4</strong> tekst4 tekst4 tekst4 tekst4 tekst4 tekst4 tekst4 tekst4 tekst4 tekst4 tekst4 tekst4 tekst4 tekst4 tekst4 tekst4 tekst4.</p>
				</div>
			</a>
		</div>
		<script type="text/javascript">
			$(document).ready(function () {
				$('.o_box').prepend('<div class="hover" />').each(function () {
					var $span = $('> div.hover', this).css('opacity', 0);
					$(this).hover(function () {
						// on hover
						$span.stop().fadeTo(500, 1);
						}, function() {
						// off hover
						$span.stop().fadeTo(500, 0);
					});
				});
			});
		</script>
	</body>
</html>
P.S.
Pokušao sam da stavim spoiler tag, preko koda, ali nije htelo da radi.
U fajlu je i sličica.
Priloženi thumbnailovi
Kliknite na sliku za uvećanu verziju

Naziv:	codesnipet5e.png
Pregleda:	776
Veličina:	434 Bajtova
ID:	801  

Poslednja izmena od apolo : 23. 10. 2010. u 20:02.
apolo je offline   Odgovorite uz citat