Szablon w stylu one page - przenosi do połowy artykułu

[kingu80]

Witajcie,
Próbuję zrobić prostą stronę, wizytówkę w style one page. Ponadawałem w menu odpowiednie klasy, artykuł na tą samą klasę i efekt jest taki że owszem, po kliknięciu na menu następuje przeniesienie ale nie na jego początek, lecz na środek co jest strasznie słabe. Czy mogę ewentualnie poprosić o jakąś podpowiedź. Z góry śliczne dzięki.

http://www.ilonov.vot.pl/

[siristru]

Nie przenosi wcale na środek :) Przenosi zgodnie z założeniem czyli tak by rozpoczęcie kontenera z odpowiednim ID "maintop-2"

http://prntscr.com/nu1ldo

Masz także bały pasek z menu który przykrywa ci stronę. Zatem po kliknięciu dobrze przewija stronę tylko, że nagłówek z menu przesłania treść.

To czego potrzebujesz to offset - czyli przewinięcie do danej pozycji - grubość nagłówka.

Najlepiej do tego wykorzystać jQuery:


$('html, body').animate({scrollTop: $('#contact').offset().top -100 }, 'slow');

[kingu80]

Właśnie tak też myślałem że to coś przez ten nagłówek jest nie tak. Rozumiem że kod który pisałeś muszę wrzucić do głównego html-a strony? Przepraszam że pytam ale szablon był kupowany bo gdybym pisał go sam to pewnie bym wiedział. Nie chcę nic tam namieszać :).

[kingu80]

Czy jak dodam do głównego pliku strony index.html kawałek:


<script>
jQuery(document).ready(function() {
$('html, body').animate({scrollTop: $('#contact').offset().top -100 }, 'slow'); });
</script>

powinno być ok?

[siristru]

Hola, hola! Nie tak szybko! :)

1. Nie do index.html tylko do index.php swojego szablonu, tuż przed zamknięciem </body>

2. A masz taki kontener #contact? Musisz kod dopasować do swojego przypadku a masz ich kilka przecież.

[kingu80]

Hola, hola! Nie tak szybko! :)

1. Nie do index.html tylko do index.php swojego szablonu, tuż przed zamknięciem </body>

2. A masz taki kontener #contact? Musisz kod dopasować do swojego przypadku a masz ich kilka przecież.

No tak tak, masz rację. Chodzi o ten główny kontener na stronie? Bo tych kontenerów jest sporo i teraz nie wiem na który patrzeć. Czy to chodzi o tego diva z najwyższego poziomu?

[siristru]

Nie, zobacz do jakiego kontenera przenosi konkretny klik w menu. Np. maintop-2.

[kingu80]

Nie, zobacz do jakiego kontenera przenosi konkretny klik w menu. Np. maintop-2.

Aaa, rozumiem. I ten kod musi być wielokrotnością odwołań i w każdym ma być inna nazwa kontenera? Myślałem że to chodzi o jakiś nadrzędny, nie te mniejsze :)

[siristru]

Dokładnie tak. Można by się pokusić o jakiś bardziej zgrabny kod, który pokrywa wszystkie przypadki ale powielenie tego kilka razy z innym ID kontenera tez będzie działać.

[kingu80]

Czy w php jakoś inaczej deklaruje się funkcje? Pytam ponieważ ja głównie angulara znam i js, php kompletnie, wrzuciłem ten kod o którym pisałeś w takiej postaci:


<script>
jQuery(document).ready(function() {
$('html, body').animate({scrollTop: $('#contact').offset().top -100 }, 'slow'); });
</script>

i mam komunikat że $ is not a function. Rzecz jasna przewijanie nie działa prawidłowo ale to pewnie stąd że jest ten błąd i teraz nie wiem czy to kwestia tego kodu, aczkolwiek pogrzebałem trochę na stackoverflow i ludzie też go używają w takiej formie w jakiej pokazałeś więc nie sądzę aby to była kwestia tego kodu. Bardziej moja wina że coś nie tak załadowałem.

Rzecz jasna kontener podmieniłem na swój :)

[siristru]

Zamień znaki $ na "jQuery" (w kodzie opuść cudzysłów) :)

[kingu80]

Tak jest :). A czy jakieś parametry tu muszę jeszcze sobie sam ustawiać? Bo teraz generalnie efekt mam taki sam jaki miałem, czyli klikam np About Us i przenosi mnie w dół, ucina o ten pasek. W adresie pojawia się oczywiście mój kontener czyli #maintop-2. Jak zrobię refresha na tej stronie, przy ładowaniu, startuje idealnie, równo obcina. Tylko przy przenoszeniu coś nie tak jest. Czy muszę może jeszcze w jakimś pliku odpowiadającym za obsługę menu to samo wkleić?

[siristru]

Zmień:


jQuery(document).ready(function() {

na


jQuery("#click-contact").click(function() {

Gdzie click-contact to powinno być id linka np:


<a id="click-contact" href="#contact">Contact</a>

[kingu80]

EDIT do poprzedniego posta (nie aktualny, można usunąć).

Ok, zrobiłem dokładnie jak napisałeś. id linka wziąłem sobie z konsoli:
9595

co mi dało finalnie poniższy kod:


<script>
jQuery("iceMenu_335").click(function() {
jQuery('html, body').animate({scrollTop: jQuery('#maintop-2').offset().top -100 }, 'slow');
});
</script>

I to wygląda już całkiem spoczko. Powiedz proszę, czy można jakoś wysterować wysokość jak ma sie to przenosić? Bo w tej chwili ten kontener jest troszeczkę za nisko, tzn na samej górze jest pół centymetra poprzedniego. I jest jeszcze jeden dziwny efekt z którym kompletnie nie mogę sobie poradzić. Możesz wejść na stronę i zobaczyć sobie. Pierwsze kliknięcie w menu ABOUT AS powoduje że kontener zjeżdża niżej, dopiero gdy kliknę drugi raz to się podnosi. I tak jest z każdą pozycją menu. Zawsze pierwsze kliknięcie powoduje że przenosi za nisko kolejne już są ok. Dotyczy się to całej strony nie konkretnej pozycji w menu czyli wchodzę na stronę pierwszy raz, klikam na którykolwiek odnośnik, strona przejeżdża z nisko, klikam drugi raz, ustawia się już ok i później mogę sobie klikać po menu jak chce i przenosi prawidłowo.

[siristru]

Hmmm, nie wiem... działa niezgorzej. Może w drugim kliknięciu ignoruje offeset albo jeszcze jakieś jQuery na twojej stronie na to wpływa. trudno mi powiedzieć.