Archief - automatisch scrollen X en Y

::SaBeR:: · 9 sep 2011

Hai,

ik zou het volgende willen proberen: Een site die een groot canvas is, waarop knoppen staan die je automatisch naar bepaalde punten laat scrollen.

Een beetje zoals deze: Bullet PR, Brighton PR company
maar dan in twee richtingen. Het probleem is wel, ik ken niets van javascript. Ik veronderstel toch dat ik dat ga nodig hebben. Weet iemand per toeval een goeie tutorial of kan iemand mij vertellen hoe daar aan te beginnen?

Alvast bedankt

Michael

Zero Grav · 9 sep 2011

Ariel Flesler: jQuery.ScrollTo is daar wel vrij geschikt voor.

::SaBeR:: · 9 sep 2011

hmm,

ok ik ben duidelijk total noob hierin.
Ik heb de .js files aan de html gehangen, maar ik snap niet hoe ik die dan kan aanroepen in de html.

al niet gewoon zo
<a title="$(...).scrollTo( '520px', 800 );" id="absolute-position" href="#">klik</a>

ik veronderstel dat ik mij hier is zwaar mee ga moeten bezig houden, of is er iemand met ne gouden tip.

dJeez · 9 sep 2011

::SaBeR:: zei:
hmm,

ok ik ben duidelijk total noob hierin.
Ik heb de .js files aan de html gehangen, maar ik snap niet hoe ik die dan kan aanroepen in de html.

al niet gewoon zo
<a title="$(...).scrollTo( '520px', 800 );" id="absolute-position" href="#">klik</a>

ik veronderstel dat ik mij hier is zwaar mee ga moeten bezig houden, of is er iemand met ne gouden tip.

De gouden tip is dat je wat tutorials van jQuery moet doornemen. Dan zal je snel beseffen dat het neerkomt op toewijzen van IDs op elementen en die gebruiken om - in uw geval - dynamisch wat scripts toe te voegen aan je links

.

t0tec · 9 sep 2011

Voor u scripts toe te voegen in html:

Code:

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/external.js"></script>

de external file gebruik je om je toepassing te maken. Je kan ook inline scripts schrijven in html maar dit is niet aangeraden om te doen.

De jQuery file bevat de broncode om jQuery te gebruiken. deze kan je afhalen van http://code.jquery.com/jquery-1.6.3.min.js

Zoek eerst is wat tutorials online (zijn er genoeg).

::SaBeR:: · 12 sep 2011

Ik zal zeker mijzelf wat verder onderrichten in JS en JQuery in de toekomst. Ik probeer alvast dit te begrijpen:

Dit staat in de .js:

Code:

var $scrollTo = $.scrollTo = function( target, duration, settings ){
		$(window).scrollTo( target, duration, settings );
	};

dus als ik een link title="$(window.scrollTo({top:800, left:700}, 800 );" meegeef zou er toch iets moeten gebeuren? (een beweging naar top:800, left:700, die 800 tijdseenheden in beslag neemt)

Ik heb de .js gelinkt in de html:

Code:

<script language="JavaScript" src= "js/jquery.scrollTo" ></script>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'></script> 
	<script type='text/javascript' src='js/jquery.scrollTo-min.js'></script> 
	<script type='text/javascript' src='js/init.js'></script>

Zero Grav · 12 sep 2011

Ge moet sowieso altijd eerst de JQuery library zelf linken voor ge een JQuery plugin gaat linken. Anders gaat die plugin mogelijk proberen te initialiseren voor de nodige functies aanwezig zijn.

En uw 'js/jquery.scrollTo' heeft geen bestandsextensie in uw link, dus zal wellicht ook niet ingeladen worden..

::SaBeR:: · 12 sep 2011

dank u voor de snelle reactie

de head ziet er zo uit

Code:

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'></script> 
<script language="JavaScript" src= "js/jquery.scrollTo.js" ></script>
<script type='text/javascript' src='js/jquery.scrollTo-min.js'></script> 
<script type='text/javascript' src='js/init.js'></script>

en de link zo:

Code:

<div style="margin-left: 200px; margin-top: 200px; font-size: 100px;"><a title="$(window).scrollTo( '520px', 800 );" href="#">2</a></div>

maar er gebeurt nog niets...

ik weet ook niet of ik deze nodig heb, en waarom:
<script type='text/javascript' src='js/jquery.scrollTo-min.js'></script>
<script type='text/javascript' src='js/init.js'></script>

::SaBeR:: · 12 sep 2011

ook als ik de library locaal plaats gebeurt er niets

(js/jquery-1.6.3.min.js)

en dit doet ook niets:

Code:

<div style="margin-left: 200px; margin-top: 200px; font-size: 100px;"><a title="$.scrollTo( '#target-examples', 800, {easing:'elasout'} );" href="#">2</a></div>
<div id="options-examples" class="section part" style="margin-left: 50px; margin-top: 2000px; font-size: 100px;">3</div>

Er is duidelijk iets erg basis dat ik over het hoofd aan het zien ben...

Alvast bedankt voor de hulp

Zero Grav · 12 sep 2011

Hetgeen ge over het hoofd ziet is dat een title gemaakt is om een titel in te zetten en niet om javascript in te deponeren.

'k Zal straks wel eens een voorbeeldje geven.

::SaBeR:: · 12 sep 2011

zoals ge ziet, volledig noob

ik had het uit de source code van de demopagina en nam maar aan dat dat wel zou werken dan
ja, dat was niet mijn slimste zet...

Ik kijk uit naar je voorbeeld

erg bedankt

Zero Grav · 12 sep 2011

Edit this Fiddle - jsFiddle - Online Editor for the Web (JavaScript, MooTools, jQuery, Prototype, YUI, Glow and Dojo, HTML, CSS)

De HTML is iets anders dan op jsfiddle omdat die site zelf voor mij de javascript inlaadt. Op uw eigen server is het iets zoals hieronder.

Code:

<!doctype html>
<html>
<head>
    <title>Saber</title>
    <meta charset="utf-8" />
    
    <!-- library en plugin inladen -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.js" type="text/javascript"></script>
    <script src="scripts/jquery.scrollTo-1.4.2-min.js" type="text/javascript"></script>
    <script src="scripts/main.js" type="text/javascript"></script>
    
    <link rel="stylesheet" href="css/main.css" type="text/css" />
</head>

<body>

    <div id="container">
    
        <ul id="nav">
            <li><a href="#boxOne">BoxOne</a></li>
            <li><a href="#boxTwo">BoxTwo</a></li>
            <li><a href="#boxThree">BoxThree</a></li>
        </ul>
        
        <div id="boxOne">One</div>
        <div id="boxTwo">Two</div>
        <div id="boxThree">Three</div>
    
    </div>

</body>
<html>

Het mooie hieraan is dat het ook werkt zonder javascript, dan scrollt het gewoon niet. Omdat ge kunt linken naar een id van een element als ge begint met een hashtag.

::SaBeR:: · 14 sep 2011

Enorm bedankt
Er wordt mij al een en ander duidelijk en ik kan dit al wel gebruiken denk ik.

Nog wel een hoop vragen en onduidelijkheden, waarvan ik het grootste deel zal moeten oplossen door javascript te leren

enkele die ik toch hier ga stellen:

*EDIT: ik ga eerst de iets meer prangende vragen stellen:
wanneer ik mijn links heb zoals hieronder werken de links niet. Ik kan wel hoveren maar niet klikken. Dit probleem verdwijnt wanneer ik de ID een andere naam geef dan degene die in de JS staat (nav), maar dan werkt uiteraard het automatisch scrollen gedeelte niet...
ik kan nog wel rechts klikken en de link in een nieuwe venster of tab openen.

Code:

<div id="nav">
        <a href="#">ONE<br/></a>
        <a href="#second">TWO<br/></a>
        <a href="#">THREE<br/></a>
        <a href="#">FOUR<br/></a>
        <a href="#">FIVE<br/></a>
        <a href="#">SIX</a>
</div>

wanneer ik dit

Code:

bind("click", function(e)

verwijder kan ik terug klikken op de links, maar gebeurt er uiteraard niets..
Ik weet ook niet goed wat dit deel doet:

Code:

.bind("click", function(e) {
        e.preventDefault();
        e.stopImmediatePropagation();

Zero Grav · 14 sep 2011

Dus, qua uitleg bij dat voorbeeld.

1. Ge moet uw href="#" laten linken naar de id van de box waar ge naartoe wilt scrollen. Dus als ge <div id="bla">content</div> hebt moet uw href linken naar #bla. Dat gedrag werkt standaard al, zonder javascript, maar om het te laten animeren hebt ge javascript nodig.

Die <a href="#"> linkt eigenlijk naar niets. Een hashtag is een teken dat gebruikt wordt voor links die nergens naartoe moeten linken. Standaardgedrag is dat ge dan gewoon terug naar de top van de pagina wordt gestuurd.

Dus zoals ge ziet heten in mijn voorbeeld de divs #boxOne, #boxTwo en #boxThree, waardoor mijn links ook href="#boxOne", "#boxTwo", "#boxThree" zijn.

2. Die bind("click", function(e) { ... }); is een JQuery manier om een event op te vangen. Dus als ge een clickevent op die link doet wordt de functie aangeroepen. e is het argument dat ik op vang en daarin zit het event opgeslagen.

3. Met e, waarin dus dat event is opgeslagen doe ik preventDefault, ik voorkom dus het normale gedrag van de link en ik stop dat het event nog doorgegeven wordt met stopImmediatePropagation (ook wel bubbling genoemd). De actie die normaal wordt uitgevoerd zit dus in e en ik stop die actie om mijn eigen code uit te voeren in de plaats.

'k Zou zeggen, neem u eens een basis JQuery tutorial door en er zal u al veel duidelijk worden. Learning jQuery - Tips, Techniques, Tutorials

::SaBeR:: · 14 sep 2011

dankuwel alvast.

ik zal zo snel ik tijd heb de gelinkte tuts eens doornemen

Ik snap dat # geen link is. Maar de tweede link naar #second werkt wel.
totdat ik de js class gebruik.
en wanneer er # als link gebruikt wordt, komt dit normaal wel achter de url te staan als je klikt, wat niet het geval is.

concreet:

dit is mijn menu. Wanneer ik op de tweede link klik gaat hij wel degelijk naar die plaats op de pagina. Maar wanneer ik mijn id=menu verander naar id=nav (zoals in de js), kan ik niet meer klikken

Code:

<div id="menu">
	<img src="https://www.beyondgaming.be/forums" alt="logo"><br><br><br><br><br><br><br>
    
    <a href="#">ONE<br></a>
    <a href="#second">TWO<br></a>
    <a href="#">THREE<br></a>
    <a href="#">FOUR<br></a>
    <a href="#">FIVE<br></a>
    <a href="#">SIX</a>
</div>

Ik weet niet of je iets bent met de chrome inspect: www.suburb.be/coolsconcepts/chromeinspect.png

Zero Grav · 14 sep 2011

Als ge uw div een id van menu gaat geven (hou er rekening mee dat die opbouw niet juist is trouwens, ge moet semantisch gezien met een lijst werken zoals in mijn voorbeeld) dan gaat JQuery er geen invloed op hebben. Omdat ik expliciet zeg dat em moet zoeken naar alle "a's die in #nav" zitten, dat is hetzelfde principe als CSS.

Maar dus, die # komt er niet achter omdat die e.preventDefault en e.immediatePropagation dat tegenhouden. Die link wordt daarom niet uitgevoerd, wat ook de bedoeling is. Echter, als hij daarna niets doet dan zit er ergens anders nog een fout of geeft em een error in javascript.

Dus nu moet ik op zijn minst de rest van uw html code zien, en best gewoon het voorbeeld online zetten aangezien ge blijkbaar de hosting ervoor hebt.

::SaBeR:: · 16 sep 2011

je bent al enorm bedankt voor je geduld.
Ik had de ID van menu toegekend, omdat anders de links niet werkten

Alleszins: hier kan je de site vinden:SITE
(zoals je kan zien werd me gevraagd een gooi te doen naar de nike parallax

misschien is er daar een js-conflict.)
en hier de files: FILES

de site werkt ook niet in internet explorer. De css wordt zelfs niet ingelezen. Ik weet ook dat ik wel nog een hoop opkuis werk heb

*EDIT: als iets semantisch niet correct is (zoals divs gebruiken voor een menu), heeft dit dan effectieve gevolgen?

Zero Grav · 16 sep 2011

'k Had zo'n site toch niet verwacht na al die vragen om eerlijk te zijn.

Maar tegelijk had ik dan ook wel niet zo'n codesoep verwacht toen ik ze uiteindelijk opendeed. Nu weet ik wel niet hoeveel eer voor die site naar u gaat, omdat in de content staat dat ze door Smashing Magazine is gemaakt.

Om op uw vraag van semantiek te beantwoorden. In se hoeft het niet te betekenen dat er effectieve gevolgen zullen zijn, maar het kan wel. Veel hangt af van de situatie en als ge dan met javascript begint te werken, wat een DOM gevoelige taal is zou ik het alleen maar aanraden alleszins. En 't staat natuurlijk ook mooier als ge geen 20 br's onder elkaar moet zetten.

Soit, 'k heb het hier even offline gehaald en wat zitten prullen en uiteindelijk gewoon ontdekt dat uw probleem erinzit dat ge 2 keer de JQuery library inlaadt. Eén keer via Google en één keer lokaal.

Nu ik de site heb gezien voel ik mij meer en meer als een gratis consultant. :unsure:

::SaBeR:: · 16 sep 2011

Credits gaan inderdaad naar smashing magazine. Zij hebben een fantastisch tutorial staan HIER om het parallax effect gebruikt in de alom bekend Nike Better World site effect te begrijpen.

De site die je ziet is enkel omdat mij gevraagd werd of ik zoiets zou kunnen maken, en ik heb het dus geprobeerd met bestaande afbeeldingen. Het was intrinsiek niet de bedoeling om hem effectief af te werken.

Ik ben je enorm dankbaar voor de hulp, omdat ik nu stilaan begin te begrijpen hoe de wondere wereld van dynamische pagina's in elkaar zit.

Als je ooit eens iets nodig hebt van mij, zal ik graag helpen. (photoshop, illustrator en indesign denk ik wel goed in te zijn, ik kan me ook behelpen in 3DS Max en Cinema 4D

)

GigaPixels · 17 sep 2011

Dikke merci voor da voorbeeld Zero Grav, keb hier al een hoop mensen moeten reppen maar blijkbaar is da nog ni genoeg dus binnen een paar dagen krijgt ge ne keer ne rep van mij ;-)

Archief - automatisch scrollen X en Y

::SaBeR::

Legacy Member

Zero Grav

Legacy Member

::SaBeR::

Legacy Member

dJeez

Legacy Member

t0tec

Legacy Member

::SaBeR::

Legacy Member

Zero Grav

Legacy Member

::SaBeR::

Legacy Member

::SaBeR::

Legacy Member

Zero Grav

Legacy Member

::SaBeR::

Legacy Member

Zero Grav

Legacy Member

::SaBeR::

Legacy Member

Zero Grav

Legacy Member

::SaBeR::

Legacy Member

Zero Grav

Legacy Member

::SaBeR::

Legacy Member

Zero Grav

Legacy Member

::SaBeR::

Legacy Member

GigaPixels

Legacy Member