Top Bar (kao joomla)

[ manix @ 11.06.2008. 22:04 ] @

Potreban mi je skript za pomeranje diva...

Dakle, div se nalazi u nekoj minus top poziciji, recimo da je visina diva 800px a pocetna pozicija top=-780, i na klik treba da se spusti na top=0px ali da bude animiran ili ti da se krece odredjenom brzinom od -780 do 0.
Na drugi klik se vraca na pocetno top=-780px. Ja sam to uspeo da napravim ali sa direktnom pozicijom sa -780 na 0 i obrnuto.
Koci me animacija...

Hvala!

[ Aleksandar Ružičić @ 11.06.2008. 23:06 ] @

skines jQuery biblioteku i to resavas jednostavo sa:

Code:

$(function()
{
   $('#id-buttona').click(function()
   {
      $('#id-diva').animate({top: (this.animationState = !this.animationState) ? 0 : -780}, 'slow');
   })
   [0].animationState = false;
});

mozes i da dodas jos jedan parametar 'swing' posle 'slow' ako hoces malo drugaciju animaciju, a za jos vise takvih efekata (tzv easing efekata) pogledaj Easing plugin

[ manix @ 12.06.2008. 02:55 ] @

Imao sam neku grescicu ali sada je sve ok!

Hvala veliko!

_{[Ovu poruku je menjao manix dana 12.06.2008. u 04:06 GMT+1]}

[ manix @ 13.06.2008. 01:00 ] @

Imam jedan mali problemcic...

Zapravo danas sam probao ovo u iexploreu i prilicno koci, trza ili ti ne ide glatko dok u operi i mozili radi super.

Da li ima neko resenje za to. Inace ova biblioteka je extra, gledao sam na sajtu....
Takoje sam stavio link i njegov id sam pokusao da stavim umesto dugmica ali tako ne radi...

[ Aleksandar Ružičić @ 13.06.2008. 11:59 ] @

za ie pokusaj da dodas ovo u js:

Code:
try { document.execCommand('BackgroundImageCache', false, true); } catch (o) {}

a sto se tice linka treba da radi isto kao i sa buttonom (zapravo bilo koji element ce da ti vrsi posao) samo sto bi taj link trebao da ima podesen href="javascript:void(null)" da ne bi ucitao drugu stranu...

a ne moras samo id da koristis, mozes bilo koji css selektor, recimo $('.classname') da selektujes sve elemente koji imaju klasu classname i sli, pogledaj sve selektore na http://docs.jquery.com/Selectors

[ manix @ 14.06.2008. 02:13 ] @

[quote]Aleksandar Ružičić: za ie pokusaj da dodas ovo u js:

Code:
try { document.execCommand('BackgroundImageCache', false, true); } catch (o) {}

ne pomaze ovo :( ... a bas je katastrofa sporo!

[ manix @ 14.06.2008. 09:04 ] @

Zapravo sam pronasao uzrok problema...

Uzrok je stara IE boljka sa ALPHA slisicama ili ti transparentnim png slikama. Da bi to izgledalo onako kako sam zamislio postavio sam u pozadinu png slicicu kojoj je opacity 75% i tako sam dobio poluprovidan panel. To super izgleda ali u IE pravi problem.

Pomisljo sam da ne stavljam slicicu vec u css-u da promenim opacity pozadine ali to ne ide jer u tom divu imam drugi u kome su odredjeni sadrzaji pa tako se i oni vide toliko koliki je opacity diva u kome se nalaze.
Postojli li neka druga varijanta da promenim opacity samo tom pozadinskom divu a da div sa sadrzajem bude vidlji 100% bez obzira sto je u tom pozadinskom.

Mozda mnogo izmisljam? :o)

[ Aleksandar Ružičić @ 14.06.2008. 22:43 ] @

mozes na sledeci nacin:

Code:

<div id="topbar-container">
  <div id="topbar-background"></div>
  <div id="topbar-content">
   
  </div>
</div>

ovo ti je potreban css (samo unezi vrednosti umesto W i H):

Code:

#topbar-container
{
   position: relative;
   width: W;
   height: H;
}

#topbar-background
{
   position: absolute;
   left: 0;
   top: 0;
   width: W;
   height: H;
   background: ....
}

#topbar-content
{
   position: absolute;
   left: 0;
   top: 0;
   width: W;
   height: H;
}

i onda samo podesis zeljeni opacity (pomocu jquery-a):

Code:

$('#topbar-background').css('opacity', .75);