Kako fiksirati meni kad scrollamo stranicu da ostane vrhu?

[Babaroga007]

Zna li neko kako ovo da napravim? Da fiksiram meni a prilikom scrollanja da ostane na vrhu. Postavio sam pitanje na glavnom forumu, međutim dobio sam neke upute ali prilično sam loš sa kodiranjem te ne mogu da inplementiram?  Ovo su upute sa foruma:

For the responsiveness, you will need to upload bootstrap.css file inside your template's css folder.
You can get the files from here: http://twitter.github.io/bootstrap/

After you upload them, you need to go to your template and open index.php file.
Paste this following script inside it.

Kod [Odaberi] Expand

<script>
      $(document).ready(function(){
         var aa=$('.navbar');
         $(window).scroll(function(){
            if($(this).scrollTop()>136){
               aa.addClass("navbar-fixed-top");
            }
            else{
               aa.removeClass("navbar-fixed-top");
            }
         });
      });
   </script>



Make sure that you include jquery in the head tag and it should be the first script to get loaded on your site so, it should be the first line after head tag.

Here, "navbar" is the class which is currently applied on your menubar, you can change it according to the class you have applied on your module. You can also use ids in this case instead of class, your choice (just use # instead of . when using id).

Now, inside your head tag, also include the path of the bootstrap css file you have just uploaded.

It is done, things should work now.

Pozdrav :)

[triolatice]

Da bi ti se dao dovoljno upotrijebljiv odgovor i u postavljanju pitanja moraš biti malo precizniji.
Nemoj predpostavljati da mi znamo odgovor na tvoje pitanje i prije nego što si ga postavio, jer mi nemamo čarobne kugle pokraj sebe , pa ni obične metalne one zatvorske kao u filmovima sa bračom Dalton.

Mi neznamo koji ti predložak koristiš, niti to možemo sami ustanoviti, jer neznamo dali je ta stranica online ili nije, dali je to za sada na tvome lokalnom računalu. Možda si to pitanje postavio na joomla.org , ali mi neznamo kako si točno tamo postavio pitanje. Nema linkova na pitanje. No uz pomoć čarobne kugle dolazimo do ovoga ; http://forum.joomla.org/viewtopic.php?f=615&t=799138 .
Pogledavši malo te odgovore i pogledavši tvoje webstranice,  imaš dosta priejdloga kako to napraviti , pa i upute za to.

Malo se stvari kompliciraju budući da se tvoj menu ne nalazi na samome vrhu, pa se mora onda pribjeći upotreba jQuery-a. Nije problem fiksirati menu , ali ga treba fiksirati kada dođe u gornji rub stranice, ne ranije , jer bi to neobićno izgledalo, pa ćak lićilo na neku grešku.

Ako nikako to ne riejšiš , neka to riješi netko tko će to znati napraviti.

[oKRamxII]

Neznam je li tako za svaki template, ali ja sam svoj riješio jednostavnije, uz pomoć CSS-a, tako da se postavi pozicija "fixed" uz 100% width i to je to.

Javi samo koji template koristiš i koristiš li meni od templatea ili si nešto posebno stavljao, možda se može nešto jednostavnije od ovih kodova napraviti.

[Babaroga007]

Neznam je li tako za svaki template, ali ja sam svoj riješio jednostavnije, uz pomoć CSS-a, tako da se postavi pozicija "fixed" uz 100% width i to je to.

Javi samo koji template koristiš i koristiš li meni od templatea ili si nešto posebno stavljao, možda se može nešto jednostavnije od ovih kodova napraviti.

Problem je sljedeći. Sa css-om jednostavno se fiksira pa kao što je rekao triolatice izgleda kao greška. Dobio sam neka uputsva na forumu jooml.org http://forum.joomla.org/viewtopic.php?f=615&t=799138. Ali se ne snalazim nešto najbolje u implementaciji ovih kodova. Sam templejt u sebi ima postavke za meni. Koristio sam od Joomla xtc templejt.

[oKRamxII]

Da, ovo je teži slučaj, nisam dosad pokušavao igrati s time, ali da, u ovom slučaju css nije sam po sebi dovoljan... Jer definitivno je lakše kad imaš meni na vrhu i onda samo tamo i ostaje...

Ne mogu ti nažalost onda previše pomoći, kažem, nemam iskustva s ovim, a još gore što trenutačno nemam vremena da bi se išao igrati s ovim, možda kad malo uhvatim budem probao.

Vidi eventualno hoće li ti ove neke upute koje na službenom Joomlinom forumu dobivaš pomoći, makar uzmi u obzir da možda nešto neće funkcionirati radi toga što osoba A koristi drugačiji template od tvog. To ne mora igrati ulogu, ali i može. Neznam koliko znaš "vaditi" kodove jer npr. na ovoj stranici je napravljeno ono što tražiš: http://happycog.com/ pa pogledaj ako se znaš služiti Chromeom i "inspectanjem elemenata" uz "view page source"...

Znam da ti ne dajem neko riješenje, ali ako ne bude išlo, razmisli da se ne zajebavaš sa tim svim skupa i samo postaviš meni na vrh, a ovo mjesto suziš i posvetiš socijali...

I ako sam skužio, koristiš Joomlu 1.5 tako da ti je topic na pogrešnom mjestu.

[Babaroga007]

Ok, hvala ti na odvojenom vremenu. Pokušavao sam sa Inspect-om skužiti na nekim stranicama, ali bezuspješno. Nadam se da ću naći neko rješenje.

LP

[Dario]

Za početak instaliraš jQuery easy na svoju Joomlu - upute možeš pročitati ovdje.

Nadalje... s obzirom da je Joomlin "nativan" JavaScript Framework mooTools, a ne jQuery - jQuery mora biti u no conflict modu (objašnjeno u uputama na linku iznad), a s obzirom da je u tom modu, nemožeš njegove selectore koristiti u obliku u kojem ti je ekipa napisala, već bi on morao glasiti:

Kod [Odaberi] Expand


<script>
      jQuery(document).ready(function(){ // ostatak koda aktivira se tek kad se kompletna stranica učita - ne dirati
         var navBarElement = jQuery('.navbar'); // ovo će pregledati kompletan kod stranice i pronaći element s css klasom "navbar" te spremiti taj element kao objekt u varijablu navBarElement
         jQuery(window).scroll(function(){ // event koji aktivira funkciju ispod kad upotrebiš scroll na stranici (bila scroll na mišu ili scrolanje strelicama)
            if(jQuery(this).scrollTop()>136){ // dakle... ako si odskrolao 136 pixela od vrha stranice (nastavak red ispod)
               navBarElement.addClass("navbar-fixed-top"); //na navBarElement (odnosno na element s klasom "navbar") dodat će se klasa "navbar-fixed-top"
            } else {
               navBarElement.removeClass("navbar-fixed-top"); // u protivnom (dakle ako si "iznad" tih 136px) klasa će s dotičnog elementa biti maknuta
            }
         });
      });
   </script>


Kao što vidiš napravio sam ti komentare pokraj koda da se možeš lakše snaći jer sumnjam da ti je baš ovaj JS razumljiv, i jedino što ti sada ostaje je CSS-om riješiti fixnu poziciju... dakle nešto kao

Kod [Odaberi] Expand


.navbar-fixed-top {
    position: fixed;
    top: 0;
}

Nadam se da će dalje ići :)

[Babaroga007]

Ovako, nakon instalicije jQuery-a ovaj kod lijepim u index.php templejta? A ovaj css? S obzirom da je templejt malo komplikovan u PP ti šaljem da vidiš.  :)

[Dario]

Čuj nemoj se ljutiti, ali nemam ti ja baš vremena gledat i popravljat tuđe stranice, niti smo zato ovdje tako da ćeš se morati snaći... gore ti je odrađeno 95% svega što trebaš..... Javascript ubaciš u head tag glavnog template fajla (pred sam kraj, odnosno prije zatvaranja HEAD tag-a) - nije baš najidealnije rješenje, ali ako ću ići objašnjavati i taj dio - pogubit ćeš se :)
CSS možeš stavit na kraj svog glavnog template fajla ili u style tag na isto jeste gdje i JavaScript....

[Onebeat]

Ovako, nakon instalicije jQuery-a ovaj kod lijepim u index.php templejta? A ovaj css? S obzirom da je templejt malo komplikovan u PP ti šaljem da vidiš.  :)

Bok,

slazem se sa kolegom oko toga da ti je dano 95% riješenja a ovih 5% je integracija :)

Što se tiče komplikacije oko template - svaki template koristi istu logiku samo drugačije dođe krajnjeg riješenja - ljepota programiranja  ^-^

[Babaroga007]

Momci hvala vam na odvojenom vremenu. Dario [ORION] nemam se šta ljutiti :D. Uglavnom nakon što sam instalirao Jquery easy plugin uradio sam sljedeće:

1.U index.php fajlu sam dodao <head> tag zalijepio scriptu.
2.Ovaj css kod dodao sam u style1 u templejtu jer njega koristim

međutim ništa se nije desilo :)

LP

[Dario]

A jesi promjenio ime klase elementa koji hoćeš fixirati ?

Kod [Odaberi] Expand


var navBarElement = jQuery('.navbar'); // ovo će pregledati kompletan kod stranice i pronaći element s css klasom "navbar" te spremiti taj element kao objekt u varijablu navBarElement


Prepostavljam da elementa s klasom "navbar" na tvojoj stranici nema, već se radim o nečem drugom što hoćeš fixirati, zato sam ti napravio komentare u jQuery-ju pa si možeš prilagodit... također treba onda i css malo podesiti....

Nebi bilo loše da imamo link na srtanicu pa da vidimo malo :)

[triolatice]

Pomalo me to i nervira, što se u postavljanju pitanja odmah ne daje i URL posebno ako je site dostupan. U ovome slučaju to je http://asu.web.ba/ .  Kada postoji razlog da se neda URL ako nije dostupan , da se daje koji je to template, npr ako je javno dostupan, ili slično. Pa svi oni koji imaju volje i znanja tada to mogu onda i pogledati. Ovako svi moramo tražiti odgovore kao da guramo "ruku u vreču sa zmijama". Možda izvućemo onu koja nije otrovna.

[Dario]

To se slažem, uvest ćemo uskoro "žute kartone" pa će ljudi dobivati banove na par dana.... Postoji razlog zašto u svakoj kategoriji postoji sticky tema s pravilima postanja thread-a, al očito da ljudi baš i ne čitaju pa ćemo morati poduzeti neke mjere oko toga jer ovo više nema smisla.....

[Dario]

Evo evo ti je kod koji će raditi na tvojoj stranici, samo ubaci na prava mjesta (opisano negdje u prethdnom postu).... Sad si fino usporedi s onim gdje su komentari iznad pa vidi kako što i zašto da znaš za ubuduće....

Kod [Odaberi] Expand


<script>
      jQuery(document).ready(function(){
         var navBarElement = jQuery('#shadowbordertop');
         jQuery(window).scroll(function(){
            if(jQuery(this).scrollTop()>257){
               navBarElement.addClass("navbar-fixed-top");
            } else {
               navBarElement.removeClass("navbar-fixed-top");
            }
         });
      });
   </script>


Kod [Odaberi] Expand


#shadowbordertop.navbar-fixed-top {
    position: fixed;
    top: 0;
    width: 100%;
}


[Babaroga007]

Uspjelo je :) Momci mnogo vam hvala na strpljenju! Dario [ORION] kralju :)

Uljepšali ste mi dan :D

LP