|
(X)HTML, JavaScript, DHTML, XML, CSS Client scripting tehnologije, Dynamic HTML, Cascading Stylesheets, XML i standardi |
|
Alati teme | Način prikaza |
23. 10. 2010. | #1 |
novi član
Na probnom radu
Datum učlanjenja: 29.07.2009
Poruke: 13
Hvala: 4
5 "Hvala" u 1 poruci
|
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> Pokušao sam da stavim spoiler tag, preko koda, ali nije htelo da radi. U fajlu je i sličica. Poslednja izmena od apolo : 23. 10. 2010. u 19:02. |
|
|
Slične teme | ||||
Tema | Početna poruka teme | Forum | Odgovori | Poslednja poruka |
Google omogućio korisnicima odabir pozadine | Dzonny | Opušteno | 32 | 12. 06. 2010. 01:43 |
Clear:both ali samo unutar diva? | apash86 | (X)HTML, JavaScript, DHTML, XML, CSS | 4 | 23. 08. 2008. 13:49 |
koji cms koriste | staseprimate | Sva početnička pitanja | 10 | 24. 05. 2008. 21:04 |
Menjanje pozadine ili css-a u wordpressu | nelle | Sva početnička pitanja | 6 | 02. 08. 2007. 06:02 |