Sideovergang

[rimby]

MEGA

Siden har en nydelig sideovergang, dersom du trykker på en av tabsene nedenfor
Ganske sikker på at det brukes jquery
men finner ikke helt ut av hvordan de har gjort det

Noen som vet?

 

[adeneo]

Det er jo bare animering av scrolling, med HTML5 history API'en for å bytte adresser.

Med andre ord så forlater du aldri siden selv om adressefeltet endrer seg, og resten er bare å endre litt på noe CSS og scrollTop, så blir det slik.

Og ja, jQuery er brukt!

 

[rimby]

hvordan kan det være animert scrolling når hver av tabsene utfører samme animasjonen.
4 forskjellige siden sider kan ikke okkupere samme samme "plass" på samme tid
Så dersom det du sier skulle ha vært sant måtte animasjonen ha scrollet forbi de første sidene for å komme til siden den sender deg til. Noe den ikke gjør!

Jeg fikk til å fade sider inn og ut med jquery:

$(document).ready(function() {
	
	$("body").css("display", "none");

    $("body").fadeIn(2000);
    
	$("a.transition").click(function(event){
		event.preventDefault();
		linkLocation = this.href;
		$("body").fadeOut(1000, redirectPage);
	});

		
	function redirectPage() {
		window.location = linkLocation;
	}
	
});

Men har begrenset med kunnskaper om jquery og javascript så vet ikke helt hvordan jeg skal lage den overgangen man ser på MEGA

 

[adeneo]

Selvfølgelig kan fire sider okkupere samme plass på samme tid, det er bare snakk om plassering?

Her er et veldig kjapt eksempel : http://jsfiddle.net/san99/embedded/result/

og koden : Edit this Fiddle - jsFiddle

 

[rimby]

hah takker.. hadde virkelig ikke trodd det kunne gjøres på den måten.
Men av en eller annen grunn får jeg ikke javascriptet til å fungere lokalt.

<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/scroll.js"></script>

Dette ligger i header og scriptene ligger i mappa.
Trengs det noen plugins til jquery for dette?

 

[adeneo]

Har du husket å pakke det inn i en document ready funksjon, jsfiddle gjør det automatisk?

$(function() {
    $("#menu li").on('click', function() {
        var h = $(window).height() - 200;
        $("#side2").children('div').eq($(this).index()).show().siblings().hide();
        $('body, html').stop().animate({scrollTop: h},800, "easeInOutBack");
        $('#top').fadeIn(500);
    }); 

    $('#top').on('click', function() {
        $('body, html').stop().animate({scrollTop: 0},800, "easeInOutBack");
        $('#top').fadeOut(500);    
    });​
});

Det var også bare et kjapt eksempel, og det brukes easing på animasjonene, altså der det står "easeInOutBack", og dette krever enten jQuery easing plugin eller jQuery UI, jeg har aktivert sistnevnte i jsfiddle, men du kan også prøve uten easing med

.animate({scrollTop: h},800);

i stedet.

 

[rimby]

TAKK! nå fungerer det

 

[rimby]

Et nytt problem, scrolling fungerer nå ikke. Så dersom jeg fyller en underside med informasjon utenfor bildet får jeg ikke scrollet ned til den. På MEGA har han lagt inn en egen scrollfunksjon gjennom jquery som bare kommer opp på undersidene, noen ide om hvordan dette er gjort?

 

[adeneo]

Akkurat hvordan det er gjort gidder ikke jeg å lete etter, da feiten har gjort det samme som jeg pleier å gjøre, pakket all javascript i en fil : http://static.kim.com/mega/release/js/main.js?v=8
noe som gjør at det er plundrete å finne frem, men scrollbaren kan styles slik i webkit, men ettersom den ser lik ut i IE er det bare et javascript triks.

Nettsiden består jo bare av noen få elementer, HTML5 boilerplate headern, og et en stor javascript fil hvor alt av form og funksjon ligger, så alt du ser på den siden er stort sett generert i javascript, funksjoner elementer, scrollbar osv.

Det finnes plugins for slikt, for eksempel : jScrollbar jquery plugin - Customize your own scrollbar with jQuery UI : MyjQueryPlugins

Ellers så er det ikke spesielt innviklet å lage en scrollbar, her er et fem minutters eksempel som virker sånn halvveis : Edit this Fiddle - jsFiddle

 

[rimby]

I used forever but i finally got 1 that worked

 

[adeneo]

Det er bra, det finnes mange plugins for scrollbars, så noe må da virke, men det kan være litt plundrete, og jeg har laget javascript scrollbars fra bunnen av og å få noe som virker knirkefritt overalt er uhyggelig mye jobb, så en plugin er normalt enklere.

Eksempelet over var bare full fart for å vise hvordan det egentlig virker, og det er ikke spesielt innviklet, når museknappen trykkes ned aktiveres en funksjon i mousemove som bruker musepekerens posisjon, som vi henter med event.pageX og event.pageY, til å plassere scrollbaren og scrolle siden. Det er samme prinsippet som brukes i drag&drop, så da har jeg avslørt den hemmeligheten også ?

 

[rimby]

Ja jeg endte opp med å bruke en plugin
jQuery custom content scroller – malihu | web design
Eneste problemet var at jeg ikke fikk den til å fungere helt optimalt i IE
Den viste kun scrollbaren i ett av undersidene, men det er mulig jeg klarer å komme rundt det problemet ved å ikke putte så mye innhold på sidene at scrolling trengs.

Uansett
Har prøvd en stund nå lage det slik at den aktive tabben har en annen farget enn de andre.
Tidligere løste jeg dette ved at hver html fil har en liste der et av elementene har en id="selcted", men siden jeg nå har kun en html fil er jeg ikke sikker på hvordan dette kan løses

 

[adeneo]

$(this).addClass('selected').siblings('li').removeClass('selected');

Løser som regel det problemet?

DEMO

 

[rimby]

Fungerte utmerket, men tror ikke du oppdaterte demon din med denne koden
Brukte samme metode for å fjerne selected når "hjem" knappen trykkes

Under innhold1 har jeg lagt til et par bilder jeg ønsker skal sende meg til en nye undersider med mer innhold. Jeg prøvde å opprette en ny side kalt side 3 med nye div-er, kalt innhold5 osv
Prøvde på dette

	$("#innhold1 img").on('click', function() { 
        $("#side3").children('div').eq($(this).index()).show().siblings().hide(); 
    });

Men eneste jeg kom fram til var at bildene sente meg til innhold1-4
eller at innhold 5 la seg oppå alt annet slik at ingenting fungerte.
Jeg skjønner enda ikke helt hvordan alt fungerer med plassering osv..

 

[adeneo]

Nå er det litt vanskelig å se ut ifra det hvordan du har satt det opp, men det den koden gjør er at dersom noen trykker på et bilde som ligger i elementet med ID innhold1 så kjøres "click" funksjonen, og innad i denne vil "this" være bildet som ble trykket på.

Det betyr at du finner alle "div" elementer direkte under #side3, altså tilsvarende css selectoren "#side3 > div", og så med eq() velger kun en av de, den med samme index som bildet som ble trykket på.

Altså:

<div id="side3">
    <div></div>  <!-- index 0 -->
    <div></div>  <!-- index 1 -->
    <div></div>  <!-- index 2 -->
    <div></div>  <!-- index 3 -->
</div>

Du velger den som har samme index som bildet?
Du kan alltid sjekke slike ting ved å logge det til konsollen:

console.log($(this).index());

og se hvilken index "this" har.

Du viser så den div'en du har valgt, mens du gjemmer alle søsken, altså de med annen index i eksempelet ovenfor, men de må ligge ved siden av hverandre og ikke være nøstet under hverandre for å være søsken, ellers vil de være "parent" eller "child" osv.