Forum » Izdelava spletišč » jquery in div-i
jquery in div-i
![](https://static.slo-tech.com/stili/bel_rudis.png)
mk818764 ::
Ej, sorry, nisem len, poleg delam 10 drugih stvari, pa bi rad to cimprej zaključil. Drugače sem kar dobro znajdem z googlom, samo me res čas daje. Mogoče si bi kdaj tako, da te je čas priganjal.
No, bom že našel če nočeš, samo bo trajalo. Že včeraj sem izgubil pol dneva z tistim sendmailom. Pa če mi ne bi pomagal, bi še ziher dost časa stran vrgel, ker mi res ni kapnilo da mora biti id namesto name. Ja, osnove jquery-ja mi manjkajo. Ni cajta....
No, bom že našel če nočeš, samo bo trajalo. Že včeraj sem izgubil pol dneva z tistim sendmailom. Pa če mi ne bi pomagal, bi še ziher dost časa stran vrgel, ker mi res ni kapnilo da mora biti id namesto name. Ja, osnove jquery-ja mi manjkajo. Ni cajta....
![](https://static.slo-tech.com/stili/avatar_gray.gif)
Lion29 ::
no, kul... tut jaz nimam casa... nimam casa zase, se manj pa da bi tebi vse k riti prinesu... menim, da sem tiz e ogromno pomagla in dal ogromno napotkov... ce sam ne bos pogruntal, bos vedno druge fehtal za pomoc...
ce bos pac zelel poogruntat, si bos mogu vzet cas
ce bos pac zelel poogruntat, si bos mogu vzet cas
Founder and CTO @ Article-Factory.ai
![](https://static.slo-tech.com/stili/avatar_gray.gif)
lisjak ::
edited:
JSFIDDLE 1
JSFIDDLE 2
Pozdrav!
Rad bi uporabil ta način za prikazovanje divov, ampak ko to prekopiram iz jsfiddle v datoteko in jo poženem, nekak noče delovat in nevem kaj delam narobe
![:8)](https://static.slo-tech.com/smeski/icon_redface.gif)
tule je koda:
<html> <head> <style type="text/css"> #panel_wrapper>div{ padding:10px; width:200px; height:200px; margin: 20px 0; text-align: center; vertical-align: middle; line-height: 200px; border:1px solid black; display: none; } </style> <script src="http://code.jquery.com/jquery-1.9.1.min.js"> $("#tabs a").click(function (e) { e.preventDefault(); //preprecimo izvajanje default obnasanja $("#panel_wrapper div.panel").hide(); //skrijemo vse s classom "panel" var rel = $(this).attr('rel'); //dobimo ven rel vrednost $("#panel_wrapper div#"+rel).show(); //prikazemu ustrezni panel }); $("#tabs a:eq(0)").trigger("click"); </script> </head> <body> <ul id="tabs"> <li><a href="#" rel="div1">Test 1</a></li> <li><a href="#" rel="div2">Test 2</a></li> <li><a href="#" rel="div3">Test 3</a></li> </ul> <div id="panel_wrapper"> <div id="div1" class="panel">div 1</div> <div id="div2" class="panel">div 2</div> <div id="div3" class="panel">div 3</div> </div> </body> </html>
![](https://static.slo-tech.com/stili/avatar_gray.gif)
Lion29 ::
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script language="Javascript"> $("#tabs a").click(function (e) { e.preventDefault(); //preprecimo izvajanje default obnasanja $("#panel_wrapper div.panel").hide(); //skrijemo vse s classom "panel" var rel = $(this).attr('rel'); //dobimo ven rel vrednost $("#panel_wrapper div#"+rel).show(); //prikazemu ustrezni panel }); $("#tabs a:eq(0)").trigger("click"); </script>
Founder and CTO @ Article-Factory.ai
![](https://static.slo-tech.com/stili/avatar_gray.gif)
lisjak ::
<!DOCTYPE html> <html> <head> <style type="text/css"> #panel_wrapper>div{ padding:10px; width:200px; height:200px; margin: 20px 0; text-align: center; vertical-align: middle; line-height: 200px; border:1px solid black; display: none; } </style> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script type="text/javascript" > $("#tabs a").click(function (e) { e.preventDefault(); //preprecimo izvajanje default obnasanja $("#panel_wrapper div.panel").hide(); //skrijemo vse s classom "panel" var rel = $(this).attr('rel'); //dobimo ven rel vrednost $("#panel_wrapper div#"+rel).show(); //prikazemu ustrezni panel }); $("#tabs a:eq(0)").trigger("click"); </script> </head> <body> <ul id="tabs"> <li><a href="#" rel="div1">Test 1</a></li> <li><a href="#" rel="div2">Test 2</a></li> <li><a href="#" rel="div3">Test 3</a></li> </ul> <div id="panel_wrapper"> <div id="div1" class="panel">div 1</div> <div id="div2" class="panel">div 2</div> <div id="div3" class="panel">div 3</div> </div> </body> </html>
Še vedno ne prikazuje divov ...
![:|](https://static.slo-tech.com/smeski/icon_confused.gif)
![](https://static.slo-tech.com/stili/avatar_gray.gif)
Lion29 ::
pismo no... najbolje, da ti napisem vsako vrstico kode...
poglej si osnove jqueryja in kako se ga klice... ne mores klicat funkcionalnosti na DOM objektu, ce ga se ni...
googlaj
$(document).ready
poglej si osnove jqueryja in kako se ga klice... ne mores klicat funkcionalnosti na DOM objektu, ce ga se ni...
googlaj
$(document).ready
Founder and CTO @ Article-Factory.ai
![](https://static.slo-tech.com/stili/avatar_gray.gif)
lisjak ::
Hvala !!!
Imam še eno malo obsežnejše vprašanje...
Rad bi nardil, da se ob kliku na izbran div, spremeni ozadje celemu body-u in sicer tako da, če je prikazan div 1, se ozadje spreminja naključno z tranzicijami (prehaja ena naklj. slika v drugo v naključnem času).. če kliknem drugi div, se prikaže druga slika...
Sedaj imam stvar rešeno tako bolj pogojno užitno. Problem se pojavi, če resize-am okno, potem se tranzicije zgubijo, občasno se pojavi vmes črna slika... skratka tale setTimeOut() je skrajno sumljiv in verjetno obstaja kaka elegantnejša rešitev (jquery), zato vas prosim za pomoč/nasvet.
Moja koda:
Imam še eno malo obsežnejše vprašanje...
Rad bi nardil, da se ob kliku na izbran div, spremeni ozadje celemu body-u in sicer tako da, če je prikazan div 1, se ozadje spreminja naključno z tranzicijami (prehaja ena naklj. slika v drugo v naključnem času).. če kliknem drugi div, se prikaže druga slika...
Sedaj imam stvar rešeno tako bolj pogojno užitno. Problem se pojavi, če resize-am okno, potem se tranzicije zgubijo, občasno se pojavi vmes črna slika... skratka tale setTimeOut() je skrajno sumljiv in verjetno obstaja kaka elegantnejša rešitev (jquery), zato vas prosim za pomoč/nasvet.
Moja koda:
function setupPicChange() { if (ime==2) { delay=Math.floor(Math.random()*600)+2000; } else if (ime==3) { delay=Math.floor(Math.random()*400)+1200; } else { delay=Math.floor(Math.random()*200)+600; } keepTime=setTimeout("changePic()", delay); } function changePic() { if (curPos == 1) { ime=Math.floor(Math.random()*4)+1; document.body.style.backgroundImage="url('ozadje_strela"+ime+".jpg')"; document.body.style.webkitTransition="background 0.5s ease"; document.body.style.mozTransition="background 0.8s ease"; document.body.style.oTransition="background 0.5s ease"; document.body.style.transition="background 0.5s ease"; } else if (curPos == 2) { document.body.style.backgroundImage="url('kolaz_dark.jpg')"; clearTimeout(keepTime); } else if (curPos == 4) { document.body.style.background="#000FF url('racunalnik.jpg') repeat"; } setupPicChange(); } function meritve() { curPos=1; changePic(); document.body.style.backgroundRepeat="no-repeat";
![](https://static.slo-tech.com/stili/avatar_gray.gif)
Lion29 ::
kot prvo, zakaj mesas vse skup?
CSSji naj bodo posebi, js psoebi, html posebi
to tle je izredno grdo, sploh ce uporabljas jQuery
zakaj ima moz 0.8 drugi pa 0.5?
naredi css rule
in pol z jqueryjem togglas class na bodiju
jquery ima nekaj pluginov za setTimeout ki pa niso nic bolj uporabni ali elegantni kot setTimeout
zakaj pa sploh rabis timeoute tle?
CSSji naj bodo posebi, js psoebi, html posebi
document.body.style.webkitTransition="background 0.5s ease"; document.body.style.mozTransition="background 0.8s ease"; document.body.style.oTransition="background 0.5s ease"; document.body.style.transition="background 0.5s ease";
to tle je izredno grdo, sploh ce uporabljas jQuery
zakaj ima moz 0.8 drugi pa 0.5?
naredi css rule
.bgtransition{ ... }
in pol z jqueryjem togglas class na bodiju
if(...){ $('body').addClass('bgtransition'); ... }else{ $('body').removeClass('bgtransition'); ... }
jquery ima nekaj pluginov za setTimeout ki pa niso nic bolj uporabni ali elegantni kot setTimeout
zakaj pa sploh rabis timeoute tle?
Founder and CTO @ Article-Factory.ai
![](https://static.slo-tech.com/stili/avatar_gray.gif)
Looooooka ::
Pa ne pozabi, da css transicije delajo od vsakega browserja drugace(opera, firefox svoji prefixi, internet explorer pod 10 jih mislim, da sploh ne podpira)....v tem primeru je edina celovita resitev javascript.
Razen ce te pac predpotopniki ne brigajo
Razen ce te pac predpotopniki ne brigajo
![:)](https://static.slo-tech.com/smeski/icon_smile.gif)
![](https://static.slo-tech.com/stili/avatar_gray.gif)
lisjak ::
zakaj pa sploh rabis timeoute tle?
Zato, ker neznam drugače naredit, da bi se klicala funkcija v naključnem času... (se pravi, da se ozadje spreminja neodvisno v naključnem času, dokler je klikjen div 1 (izbira iz menija)).
Zaenkrat uporabljam goli JS... ampak je to dokaj slaba rešitev
![](https://static.slo-tech.com/stili/avatar_gray.gif)
lisjak ::
Pa ne pozabi, da css transicije delajo od vsakega browserja drugace(opera, firefox svoji prefixi, internet explorer pod 10 jih mislim, da sploh ne podpira)....v tem primeru je edina celovita resitev javascript.
Razen ce te pac predpotopniki ne brigajo![]()
Vem ja, IE < 10 bojo pač brez tranzicij meli :) sami so si krivi :) sej efekt bo še vedno podoben, pač malo manj lep.
![](https://static.slo-tech.com/stili/avatar_gray.gif)
Lion29 ::
Vem ja, IE < 10 bojo pač brez tranzicij meli :) sami so si krivi :) sej efekt bo še vedno podoben, pač malo manj lep.
edino pravilno..
Founder and CTO @ Article-Factory.ai
![](https://static.slo-tech.com/stili/avatar_gray.gif)
Looooooka ::
Zato, ker neznam drugače naredit, da bi se klicala funkcija v naključnem času... (se pravi, da se ozadje spreminja neodvisno v naključnem času, dokler je klikjen div 1 (izbira iz menija)).
timer, ki klice funkcijo, ki sprozi menjavo samo ce je pac div kliknjen? in lahko laufa non stop.pa znotraj funkcije lahko komot se randomly sleepas par sekund, da ne bo skoz ob istem casu?
![](https://static.slo-tech.com/stili/avatar_gray.gif)
lisjak ::
Zato, ker neznam drugače naredit, da bi se klicala funkcija v naključnem času... (se pravi, da se ozadje spreminja neodvisno v naključnem času, dokler je klikjen div 1 (izbira iz menija)).
timer, ki klice funkcijo, ki sprozi menjavo samo ce je pac div kliknjen? in lahko laufa non stop.pa znotraj funkcije lahko komot se randomly sleepas par sekund, da ne bo skoz ob istem casu?
Ne razumem točno kaj hočeš povedat... tak zaj deluje ja s setTimeout(). Funkcija se kliče z onclick na izbiro v meniju, potem pa setTimeout kliče funkcijo, ki spreminja ozadje... (sej v kodi je dobro razvidno kaj želim)
Jaz bi rad kako boljšo rešitev...
![](https://static.slo-tech.com/stili/avatar_gray.gif)
lisjak ::
Lion29
zdaj sem probal skombinirat tvoj jquery in moje JS funkcije, pa nekak noče delovat...
mogoče veš v čem je trik ?
http://jsfiddle.net/2msJs/15/
zdaj sem probal skombinirat tvoj jquery in moje JS funkcije, pa nekak noče delovat...
mogoče veš v čem je trik ?
http://jsfiddle.net/2msJs/15/
![](https://static.slo-tech.com/stili/avatar_gray.gif)
Lion29 ::
kaj bi sploh rad dosegel?
ti ims funkcije deklarirane a nikjer jih ne klices
ti ims funkcije deklarirane a nikjer jih ne klices
Founder and CTO @ Article-Factory.ai
![](https://static.slo-tech.com/stili/avatar_gray.gif)
Lion29 ::
1. ce uporabljas jquery nikakor ne kklici funkcij inline
2. tvoj primer ne dela, ker js fiddle naredi wrapper za onload oz. ready event... in funkcija je izven scope-a.... torej po domace povedano ni definirana na rootu ampak znotraj $(document).ready...
tak da moras funkcije definirat na window objektu (kao root)...
TLE je JSFIDDLE
2. tvoj primer ne dela, ker js fiddle naredi wrapper za onload oz. ready event... in funkcija je izven scope-a.... torej po domace povedano ni definirana na rootu ampak znotraj $(document).ready...
tak da moras funkcije definirat na window objektu (kao root)...
window["funk1"] = function(){ ... };
TLE je JSFIDDLE
Founder and CTO @ Article-Factory.ai
![](https://static.slo-tech.com/stili/avatar_gray.gif)
lisjak ::
1. ce uporabljas jquery nikakor ne kklici funkcij inline
2. tvoj primer ne dela, ker js fiddle naredi wrapper za onload oz. ready event... in funkcija je izven scope-a.... torej po domace povedano ni definirana na rootu ampak znotraj $(document).ready...
tak da moras funkcije definirat na window objektu (kao root)...
window["funk1"] = function(){
...
};
TLE je JSFIDDLE
ok, mi je približno jasno :) hvala ti zaenkrat!
Sem ugotovil, da je lažje funkcije skopirat not v $(document).ready(function(), kot pa vse spreminjat v window[].
Morda kakšen link za dober tutorial, kjer bi si lahko bolje razjasnil te osnove (jquery - DOM objects - selectors - events)?
![](https://static.slo-tech.com/stili/avatar_gray.gif)
Lion29 ::
ma tutorialov za jquery je na miljone... ogromno jih je ok
funkcije lahko spises PRED ready, ker se ne klicejo... so samo deklarirane ... klices jih pa potem ob kliku....
ker pa fiddler ne omogoca to, ker naredi sam ready wrapper, moras pac potem prek windowa, ali pa znotraj ready scopa
tak da v normalnem okolju
dela bp
funkcije lahko spises PRED ready, ker se ne klicejo... so samo deklarirane ... klices jih pa potem ob kliku....
ker pa fiddler ne omogoca to, ker naredi sam ready wrapper, moras pac potem prek windowa, ali pa znotraj ready scopa
tak da v normalnem okolju
function klik1(){ ... } $(document).ready(function(){ klik1(); });
dela bp
Founder and CTO @ Article-Factory.ai
![](https://static.slo-tech.com/stili/avatar_gray.gif)
amat ::
Če dodam - sicer mal pozno... Če se le da - probaj čim več efektov prenest na .css in tist kar ne moreš u css naredit delaš v .js (seveda če je tako kot pišeš zgoraj - da te ne briga za predpotopne browserje) - v bistvu kar se tiče IEjev - folk ma lahko izkloplen .js, pol si pa tam...
IE - pa itak nikoli ne bo nudil neke normalne podpore vsebinam.
Npr. eno izmed vprašanj je blo na začetku o div-ih
npr: če znotraj elementa li definiramo nek div - in to večkrat ponovimo, da imamo seznam ...
--> potem lahko v css rešimo težavo, da na nekem mestu prikazujemo samo določen div ki je povezan s svojim staršem (li), ko je ta starš aktiven:
...
li .nasDiv{
display:none;
width:100px;
height:100px;
.
}
...
li:hover > .nasDiv{
display:block;
width:100px;
height:100px;
...
}
.Seveda je vse skupaj fajn met v nekem elementu ki to strukturo malo lepše uredi, oz jo drži na nekem mestu...
V bistvu se ful reči da uredit v css.
p.s. V jquery izbiraš elemente npr po ključu $( 'značka.njenClass' ) ali pa samo $('nekClass') in po tem s tem hendlaš naprej...
IE - pa itak nikoli ne bo nudil neke normalne podpore vsebinam.
Npr. eno izmed vprašanj je blo na začetku o div-ih
npr: če znotraj elementa li definiramo nek div - in to večkrat ponovimo, da imamo seznam ...
--> potem lahko v css rešimo težavo, da na nekem mestu prikazujemo samo določen div ki je povezan s svojim staršem (li), ko je ta starš aktiven:
...
li .nasDiv{
display:none;
width:100px;
height:100px;
.
}
...
li:hover > .nasDiv{
display:block;
width:100px;
height:100px;
...
}
.Seveda je vse skupaj fajn met v nekem elementu ki to strukturo malo lepše uredi, oz jo drži na nekem mestu...
V bistvu se ful reči da uredit v css.
p.s. V jquery izbiraš elemente npr po ključu $( 'značka.njenClass' ) ali pa samo $('nekClass') in po tem s tem hendlaš naprej...
Zgodovina sprememb…
- spremenil: amat ()
![](https://static.slo-tech.com/stili/avatar_gray.gif)
lisjak ::
Če dodam - sicer mal pozno... Če se le da - probaj čim več efektov prenest na .css in tist kar ne moreš u css naredit delaš v .js (seveda če je tako kot pišeš zgoraj - da te ne briga za predpotopne browserje) - v bistvu kar se tiče IEjev - folk ma lahko izkloplen .js, pol si pa tam...
IE - pa itak nikoli ne bo nudil neke normalne podpore vsebinam.
Npr. eno izmed vprašanj je blo na začetku o div-ih
npr: če znotraj elementa li definiramo nek div - in to večkrat ponovimo, da imamo seznam ...
--> potem lahko v css rešimo težavo, da na nekem mestu prikazujemo samo določen div ki je povezan s svojim staršem (li), ko je ta starš aktiven:
...
li .nasDiv{
display:none;
width:100px;
height:100px;
.
}
...
li:hover > .nasDiv{
display:block;
width:100px;
height:100px;
...
}
.Seveda je vse skupaj fajn met v nekem elementu ki to strukturo malo lepše uredi, oz jo drži na nekem mestu...
V bistvu se ful reči da uredit v css.
p.s. V jquery izbiraš elemente npr po ključu $( 'značka.njenClass' ) ali pa samo $('nekClass') in po tem s tem hendlaš naprej...
hvala za nasvet! sicer te osnovne sem že pogruntal (to s starši je že bilo v postu od Lion29)... sicer se trudim čim več nardit v css, ampak za željen efekt je pa treba uporabit JS ali Jquery. Npr.: da ti prikazuje dive ob kliku na seznam (brez uporabe asp.net masterpages, ali php template) nevem kak bi drugače lahko še nardil kot z uporabo JS/Jquery. Drugi primer je za spreminjanje ozadja... sicer če majo izklopljen JS za ozadja ni problem, med tem pa, če divov ne prikazuje, pol je stran neuporabna... Ni zdaj čisto res, da mi je vseeno za starejše brskalnike, se trudim da bi blo čimbolj kompatibilno na vseh brskalnikih... kar pripelje do naslednjega problema:
document.body.style.webkitTransition="background 0.5s ease";deluje perfektno v chromu
document.body.style.MozTransition="background 0.5s ease 0.5s";pa ne deluje v firefoxu, pa sem probal vse mogoče varijante, čeprav naj bi firefox podpiral tranzicije..
ima kdo kako idejo ?
![](https://static.slo-tech.com/stili/avatar_gray.gif)
amat ::
Razumem kaj bi rad naredil...
V osnovi se mi zdi potencialna rešitev da preko jquery ali js handlaš samo class neke značke. Npr na začetku določiš display:none in nek default background vsem div-om, potem pa ko imaš klik na seznam mu (div-u) samo (verjetno preko indeksa - pogledaš vse dive in jih daš v neko polje, ali kako drugače) dodaš bodisi class ali id.
vse efekte(npr: display:block) tranzicije potem delaš v css - ker itak style bere brskalnik od tam. (npr postopno prelivanje barv, postopno prikazovanje)
Meni se zdi bol enostavno tako, da skripte uporabiš samo za "hendlat" atribute značk v html-ju. Vse animacije pa preneseš v css.
p.s. a je veliki M? mozTransition ali MozTransition?
V osnovi se mi zdi potencialna rešitev da preko jquery ali js handlaš samo class neke značke. Npr na začetku določiš display:none in nek default background vsem div-om, potem pa ko imaš klik na seznam mu (div-u) samo (verjetno preko indeksa - pogledaš vse dive in jih daš v neko polje, ali kako drugače) dodaš bodisi class ali id.
vse efekte(npr: display:block) tranzicije potem delaš v css - ker itak style bere brskalnik od tam. (npr postopno prelivanje barv, postopno prikazovanje)
Meni se zdi bol enostavno tako, da skripte uporabiš samo za "hendlat" atribute značk v html-ju. Vse animacije pa preneseš v css.
p.s. a je veliki M? mozTransition ali MozTransition?
![](https://static.slo-tech.com/stili/avatar_gray.gif)
lisjak ::
p.s. a je veliki M? mozTransition ali MozTransition?
naj bi bil veliki M, sem pa probal tud mali, pa še 100 drugih variant
npr:
$('body').css({transitionProperty: "background", transitionDuration: '1s', transition-timing-function: ease, transition-delay: '0.5s'});
ali pa:
$('body').css('-moz-transition', 'all 0.5s ease-in-out');
firefox vse ignorira
![8-O](https://static.slo-tech.com/smeski/icon_eek.gif)
offtopic: sem včasih bil pristaš firefoxa, zdaj ga definitivno sovražim
![](https://static.slo-tech.com/stili/avatar_gray.gif)
Lion29 ::
ce si ti nesposoben ni FF kriv
http://www.zachstronaut.com/posts/2009/...
sicer pa smo ti ye povedali... te stvari nastavi v CSS fajlu in doloci nek class....
recimo...
in pol v JS samo pripnes ta class
ne bo nobenih problemov
http://www.zachstronaut.com/posts/2009/...
sicer pa smo ti ye povedali... te stvari nastavi v CSS fajlu in doloci nek class....
recimo...
.transformed { -webkit-transform: rotate(15deg) scale(1.25, 0.5); -moz-transform: rotate(15deg) scale(1.25, 0.5); -ms-transform: rotate(15deg) scale(1.25, 0.5); transform: rotate(15deg) scale(1.25, 0.5); }
in pol v JS samo pripnes ta class
$('body').addClass('transformed');
ne bo nobenih problemov
Founder and CTO @ Article-Factory.ai
![](https://static.slo-tech.com/stili/avatar_gray.gif)
lisjak ::
css:
JS:
body { background-color: black; background-image: url('ozadje_strela2.jpg'); background-repeat: no-repeat; font-family:Lucida Sans Unicode; background-size: 100% Auto ; } .transitions { -webkit-transition: all 1s ease 0.5s; -moz-transition: all 1s ease 0.5s; -ms-transition: all 1s ease 0.5s; transition: all 1s ease 0.5s; }
JS:
jQuery(document).ready(function() { $("#id1").click(function(){ backgroundColors = ['ozadje_strela1.jpg','ozadje_strela2.jpg','ozadje_strela3.jpg','ozadje_strela4.jpg','ozadje_strela5.jpg']; delay = Math.floor(Math.random()*400)+1200; $(function() { timer = setInterval(function() { var thisWord = temp; temp = Math.floor(Math.random() * backgroundColors.length); var thisBackground = backgroundColors[temp]; if (temp==1) { delay = (Math.random()*600)+2000; } else if (temp==2) { delay=Math.floor(Math.random()*400)+1200; } else { delay=Math.floor(Math.random()*100)+200; } $("body").css('background-image', 'url('+thisBackground+')'); // $('body').css({transitionProperty: "background", transitionDuration: '1s', transition-timing-function: ease, transition-delay: '0.5s'}); // $('body').css('-moz-transition', 'all 0.5s ease-in-out'); $('body').addClass('transitions'); // document.body.style.webkitTransition="background 0.5s ease"; // document.body.style.MozTransition="background 0.5s ease 0.5s"; // document.body.style.oTransition="background 0.5s ease"; // document.body.style.transition="background 0.5s ease"; },delay); }); }); $("#id2").click(function(){ $("body").css('background-image', 'url("kolaz_dark.jpg")'); clearInterval(timer); }); });
![](https://static.slo-tech.com/stili/avatar_gray.gif)
lisjak ::
![](https://static.slo-tech.com/stili/avatar_gray.gif)
amat ::
Katero verzijo mozille maš? Na spletu malo pravjo o tem da je nek hrošč...
Drgač podoben problem je ta:
link
Meni drugače transition v FF deluje b.p. že od negdaj in nikol nisem naletel na neke probleme. Sicer pa je nek problem tudi s temi defoult vrednostmi tranzicij pri ff, ki jih noče hendlat - more bit nek dogodek, da jih začne obravnavat (logično) -nekateri drugi browserji nastavjo default sami.
npr: ti dodaš body class .transition in to je zanj potem default ...
probaj sedaj za občuteh našrimat še .transition:hover in neke druge efekte glede -moz-transition noter in pol to malo stestiraj - glih za videt da delujejo trazicije v ff...
Drgač podoben problem je ta:
link
Meni drugače transition v FF deluje b.p. že od negdaj in nikol nisem naletel na neke probleme. Sicer pa je nek problem tudi s temi defoult vrednostmi tranzicij pri ff, ki jih noče hendlat - more bit nek dogodek, da jih začne obravnavat (logično) -nekateri drugi browserji nastavjo default sami.
npr: ti dodaš body class .transition in to je zanj potem default ...
probaj sedaj za občuteh našrimat še .transition:hover in neke druge efekte glede -moz-transition noter in pol to malo stestiraj - glih za videt da delujejo trazicije v ff...
![](https://static.slo-tech.com/stili/avatar_gray.gif)
lisjak ::
Katero verzijo mozille maš? Na spletu malo pravjo o tem da je nek hrošč...
Drgač podoben problem je ta:
link
Meni drugače transition v FF deluje b.p. že od negdaj in nikol nisem naletel na neke probleme. Sicer pa je nek problem tudi s temi defoult vrednostmi tranzicij pri ff, ki jih noče hendlat - more bit nek dogodek, da jih začne obravnavat (logično) -nekateri drugi browserji nastavjo default sami.
npr: ti dodaš body class .transition in to je zanj potem default ...
probaj sedaj za občuteh našrimat še .transition:hover in neke druge efekte glede -moz-transition noter in pol to malo stestiraj - glih za videt da delujejo trazicije v ff...
Imam verzijo 19. Sem probal nardit hover scale transition, deluje BP. Očitno je bug v FF samo za transition background...
![](https://static.slo-tech.com/stili/avatar_gray.gif)
lisjak ::
ok, sem obupal nad transition background... in zdaj bi rad naredil enak efekt kot zgoraj, samo da bo odzadaj div in img... na tak način kot je tukaj: http://jsfiddle.net/jfriend00/cwP5Q/
Prosim, če mi kdo lahko pomaga to pretvorit, da bo prikazovalo naključno sliko in da bo interval za vsako sliko tud naključen.
Prosim, če mi kdo lahko pomaga to pretvorit, da bo prikazovalo naključno sliko in da bo interval za vsako sliko tud naključen.
![](https://static.slo-tech.com/stili/avatar_gray.gif)
k--p ::
Ce hoces,da je slika nakljucna, izmed tistih 5, popravi vrstico, namesto curImage++ daj:
curImage=Math.floor(Math.random()*5);
podobno lahko v setInterval vstavis za drugi argument to funkcijo: Math.floor(Math.random()*2000 +2000) za nakljucen cas med 2 in 4 sekunde. Ne vem pa, kako se lahko drugace to dela oz. kaj je dobra praksa, ker sem sele zacel z JS...
curImage=Math.floor(Math.random()*5);
podobno lahko v setInterval vstavis za drugi argument to funkcijo: Math.floor(Math.random()*2000 +2000) za nakljucen cas med 2 in 4 sekunde. Ne vem pa, kako se lahko drugace to dela oz. kaj je dobra praksa, ker sem sele zacel z JS...
Zgodovina sprememb…
- spremenilo: k--p ()
![](https://static.slo-tech.com/stili/avatar_gray.gif)
lisjak ::
hvala za odgovor...
sem že prej tak probal, pa ni čist tak kot bi moglo bit... če testiram s svojimi slikami, se vidi bela megla med prehodi...
očitno ni glih pravi crossfade, ampak najprej fadeout in potem fadein, pol pa se vidi megla vmes
Na teh slikah se niti ne opazi, na mojih ki so večje in temnejše je pa moteče.
Ve kdo kak bi to popravo ? al pa kako boljšo jquery rešitev ?
Tu je koda: http://jsfiddle.net/cwP5Q/86/
sem že prej tak probal, pa ni čist tak kot bi moglo bit... če testiram s svojimi slikami, se vidi bela megla med prehodi...
očitno ni glih pravi crossfade, ampak najprej fadeout in potem fadein, pol pa se vidi megla vmes
Na teh slikah se niti ne opazi, na mojih ki so večje in temnejše je pa moteče.
Ve kdo kak bi to popravo ? al pa kako boljšo jquery rešitev ?
Tu je koda: http://jsfiddle.net/cwP5Q/86/
Vredno ogleda ...
Tema | Ogledi | Zadnje sporočilo | |
---|---|---|---|
Tema | Ogledi | Zadnje sporočilo | |
» | Kako narediti to stran "resposive"?Oddelek: Izdelava spletišč | 961 (852) | zzbil |
» | Wampserver in FirefoxOddelek: Izdelava spletišč | 1791 (1671) | jonystar |
» | javascript jquey slidshow + dodatek (kako?)Oddelek: Izdelava spletišč | 779 (716) | frudi |
» | PHP in JS problem :(Oddelek: Programiranje | 1680 (1488) | l0g1t3ch |
» | JavaScript + fadeOddelek: Izdelava spletišč | 1870 (1505) | arjan_t |