» »

jquery in div-i

jquery in div-i

1
2
»

Lion29 ::

seveda se da
Lead Angular & UI/UX developer

mk818764 ::

bi delil svoje znanje z nami(mano)?

Lion29 ::

ne... zadosti sem podpiral tvojo lenobo :)
Lead Angular & UI/UX developer

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....

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
Lead Angular & UI/UX developer

lisjak ::

Lion29 je izjavil:

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) Prosim za pomoč...
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>

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>
Lead Angular & UI/UX developer

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 ... :|

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
Lead Angular & UI/UX developer

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:
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";

Lion29 ::

kot prvo, zakaj mesas vse skup?
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?
Lead Angular & UI/UX developer

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 :)

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

lisjak ::

Looooooka je izjavil:

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.

Lion29 ::

lisjak je izjavil:



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..
Lead Angular & UI/UX developer

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?

lisjak ::

Looooooka je izjavil:

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...

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/

Lion29 ::

kaj bi sploh rad dosegel?

ti ims funkcije deklarirane a nikjer jih ne klices
Lead Angular & UI/UX developer

lisjak ::

kličem jih v
<li onclick="funk1()">
ampak ne dela

Zgodovina sprememb…

  • spremenil: lisjak ()

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)...

window["funk1"] = function(){
...
};


TLE je JSFIDDLE
Lead Angular & UI/UX developer

lisjak ::

Lion29 je izjavil:

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)?

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

function klik1(){
...
}

$(document).ready(function(){
  klik1();
});


dela bp
Lead Angular & UI/UX developer

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...

Zgodovina sprememb…

  • spremenil: amat ()

lisjak ::

amat je izjavil:

Č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 ?

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?

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
offtopic: sem včasih bil pristaš firefoxa, zdaj ga definitivno sovražim

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...

.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
Lead Angular & UI/UX developer

lisjak ::

Lion29
sem naredo tak... rezultat => NE dela v FF.

Lion29 ::

pokazi, bomo hitro nasli v kjerem grmu tici lisjak
Lead Angular & UI/UX developer

lisjak ::

css:
	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);
});
});

Lion29 ::

$(function() {


zakaj mas to?
Lead Angular & UI/UX developer

lisjak ::

Lion29 je izjavil:

$(function() {


zakaj mas to?


brezveze :) nekaj sem testiral, ker me je setInterval zajbaval, sem pozabo zakomentirat... isto dela brez tega

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...

lisjak ::

amat je izjavil:

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...

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.

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...

Zgodovina sprememb…

  • spremenilo: k--p ()

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/
1
2
»


Vredno ogleda ...

TemaSporočilaOglediZadnje sporočilo
TemaSporočilaOglediZadnje sporočilo
»

Kako narediti to stran "resposive"?

Oddelek: Izdelava spletišč
5612 (503) zzbil
»

Wampserver in Firefox

Oddelek: Izdelava spletišč
61151 (1031) jonystar
»

javascript jquey slidshow + dodatek (kako?)

Oddelek: Izdelava spletišč
6490 (427) frudi
»

PHP in JS problem :(

Oddelek: Programiranje
81359 (1167) l0g1t3ch
»

JavaScript + fade

Oddelek: Izdelava spletišč
161522 (1157) arjan_t

Več podobnih tem