obniżanie strony o daną ilość px po kliknięciu na dowolny link, button na stronie Opcje

[mgalant]

jestem zielony w js a mam problem wymagający jego użycia.

Chciałbym, żeby po kliknięciu na dowolny link, strona przesuwała się po przejściu np o 500px w dół.

szukałem na forum, wiem że można to zrobić uzywając onclick, ale trudno mi to połączyć z jumpScroll do konkretnego miejsca.

Będę wdzięczny za pomoc.

[erix]

Zaraz, zawartość strony ma się przesuwać, czy przewijać?

[mgalant]

cała strona ma się przesunąć lub przwinąć, lub poprostu od razu wyświetlić na danej wysokości - powiedzmy 500px od szczytu, a dziać się ma to po kliknieciu na dowolny link i przejściu do jego celu. jest to sklep na joomla - virtuemart. U góry strony jest stały obszar którego nie chcę usuwać jest dosyc spory i żeby zobaczyc tresci po klinięciu na dowolny link czy to do produktu czy artykułu trzeba ręcznie przewijac stronę w dół żeby coś zobaczyć.

przy wejściu na stronę, strona ma się wyświetlać od góry (normalnie), natomiast po przejściu do dowolnej podstrony przewijac czy przesuwać do jej zawartości kóra znajduje się poniżej ok 500 px.

doszukałem się następujących informacji:

przeszukuje wszystkie linki i nadaje im funkcje:

CODE

var linki = document.getElementsByTagName('a');
for(i=0; i < linki.length; i++)
{
if (linki[i].className=='costam')
linki[i].onclick = costam; // nazwa funkcji bez ()!
/* można też użyć: linki[i].onclick = function() {return costam(para,metry);} */
}

oraz przeskok

CODE

function jumpScroll() {
window.scroll(0,150); // horizontal and vertical scroll targets
}

Jeśli ktoś byłby w stanie to jakoś złożyć do kupy byłbym wdzięczny.


przypomne, że zalezy mi żeby po kliknięciu na dowlony link strona przesunela sie do miejsca wyswietlania jego zawartosci - powiedzmy 500 px w dół.

[erix]

jest taki plugin do jQuery - scrollTo.

[mgalant]

ma może ktoś jeszcze jakieś pomysły?

[melkorm]

daj pusty link w tym kontenerze na który ma się strona przewinąć z atrybutem np:

[HTML] pobierz, plaintext 
<a name="zawartosc"></a>
[HTML] pobierz, plaintext 

a do linków dodaj na końcu:

[HTML] pobierz, plaintext 
<a href="normalny_link#zawartosc">Treść linku</a>
[HTML] pobierz, plaintext 

Ten post edytował melkorm 24.03.2011, 17:01:08

[mgalant]

podejrzewam, że nawet jakbym chciał, to nie dał bym rady zakotwiczyć wszystkich linków. Sklep ma już 500 produktów a najprawdopodobniej bedzie wiecej.
Przejrzałem kilka forum i wywnioskowałem, że chyba najlepiej będzie to zrobić za pomocą javascript, tylko że niestety brakuje mi wiedzy, żeby to wykonać.

Pytanie czy istnieje możliwość połączenia funkcji scrolljump z onclick - dla wszystkich linków?

[melkorm]

Tak, kod z jQuery:

Kod

$('a', $('#id_kontenera_z_linkami')).click(function(){
// tutaj kod z jumpTo
return false; // zablokowanie przekierowania href
});

Z plain JavaScript'em nie chce mi się myśleć o tej godzinie (IMG:style_emoticons/default/tongue.gif)

Ten post edytował melkorm 24.03.2011, 17:38:40

[mgalant]

no właśnie tylko jak to zastosować... żeby odnośniło się do wszystkich linków z automatu... kilka postów wyżej zamieściłem kod który znalazłem. "Wiem, że dzwoni, ale nie wiem w którym kościele" - w tym problem (IMG:style_emoticons/default/sad.gif)

naprawdę zależałoby mi na rozwiązaniu tego problemu...

[melkorm]

Napiszę coś w plain JS, ale to wieczorem.

[mgalant]

dzieki!

naprawde bede wdzieczny za udzielenie wskazowek!

[everth]

Nie potrzebujesz kotwiczyć linków - link z haszem przeszukuje też atrybuty z id. Jeśli kontener ma nadane id to po prostu stwórz link w postaci

[HTML] pobierz, plaintext 
<a href='url#moje_id'>Moj produkt</a>
 
<div id='moje_id'>Kontener produktu</div>
[HTML] pobierz, plaintext 

Automatycznie powinien przeskoczyć do produktu. Możesz też doklejać hasz w locie z pomocą JS przed przejściem.

Ten post edytował everth 27.03.2011, 18:26:33

[mgalant]

owszem wszystkie interesujace mnie tresci wyswietlaja sie w jednym kontenerze. Rozumiem, że podany przez Ciebie sposób ma na celu przejście do odpowiedniego kontenera na stronie. Ale jak w tym momencie spowodować , żeby dotyczyło to każdego linku na stronie?

[melkorm]

z tym kodem co podałeś to teoretycznie wystarczy zrobić:

Kod

var linki = document.getElementsByTagName('a');
for(i=0; i < linki.length; i++)
{
if (linki[i].className=='costam') {
linki[i].onclick = function() {  window.scroll(0,150); return false; };
}
}

Ten post edytował melkorm 30.03.2011, 14:21:50

[mgalant]

wklejam do sekcji head z <script type="text/javascript"> na początku i </script> na końcu i niestety n ie działa. (IMG:style_emoticons/default/sad.gif)

a wiecie może jak automatycznie do wszystkich istniejących linków zastosować rozwiązanie zaproponowane przez @evertha?
Tak żeby z automatu dopisać do nich #content?

To praktycznie rozwiązałoby mój problem, tylko trochę denerwujące jest to że widać ten przeskok do kontenera. szkoda, że strona od razu się nie wyświetla na odpowiednim poziomie po kliknięciu w link...