Page 1 of 2 12 Last
  1. #1

    Registered
    12/12/04
    Location
    Vlimmeren
    Posts
    343
    iTrader
    0
    Mentioned
    0 Post(s)

    automatisch scrollen X en Y

    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
    no votes  

  2. #2
    Zero Grav's Avatar
    Registered
    06/06/04
    Location
    Bilzen
    Posts
    8,805
    iTrader
    18 (100%)
    Mentioned
    0 Post(s)
    Reputation
    42/128
    Ariel Flesler: jQuery.ScrollTo is daar wel vrij geschikt voor.
    no votes  

  3. #3

    Registered
    12/12/04
    Location
    Vlimmeren
    Posts
    343
    iTrader
    0
    Mentioned
    0 Post(s)
    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.
    no votes  

  4. #4
    dJeez's Avatar
    Registered
    17/07/02
    Location
    Sol System
    Posts
    10,064
    iTrader
    1 (100%)
    Mentioned
    0 Post(s)
    Reputation
    27/78
    Quote Originally Posted by ::SaBeR:: View Post
    This quote is hidden because you are ignoring this member. Show
    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 .
    PSN: dJeezBE - Delicious bookmarks
    Disclaimer: I am currently suffering from severe CSD (Compulsive Sarcasm Disorder). - L'onion fait la farce - Facile largire de alieno
    Pastafarian by choice
    no votes  

  5. #5
    t0tec's Avatar
    Registered
    19/01/07
    Location
    Geraardsbergen
    Posts
    1,096
    iTrader
    3 (100%)
    Mentioned
    0 Post(s)
    Reputation
    0/7
    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).
    no votes  

  6. #6

    Registered
    12/12/04
    Location
    Vlimmeren
    Posts
    343
    iTrader
    0
    Mentioned
    0 Post(s)
    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>
    no votes  

  7. #7
    Zero Grav's Avatar
    Registered
    06/06/04
    Location
    Bilzen
    Posts
    8,805
    iTrader
    18 (100%)
    Mentioned
    0 Post(s)
    Reputation
    42/128
    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..
    no votes  

  8. #8

    Registered
    12/12/04
    Location
    Vlimmeren
    Posts
    343
    iTrader
    0
    Mentioned
    0 Post(s)
    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>
    no votes  

  9. #9

    Registered
    12/12/04
    Location
    Vlimmeren
    Posts
    343
    iTrader
    0
    Mentioned
    0 Post(s)
    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
    Last edited by ::SaBeR::; 12-09-2011 at 17:52.
    no votes  

  10. #10
    Zero Grav's Avatar
    Registered
    06/06/04
    Location
    Bilzen
    Posts
    8,805
    iTrader
    18 (100%)
    Mentioned
    0 Post(s)
    Reputation
    42/128
    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.
    no votes  

  11. #11

    Registered
    12/12/04
    Location
    Vlimmeren
    Posts
    343
    iTrader
    0
    Mentioned
    0 Post(s)
    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
    no votes  

  12. #12
    Zero Grav's Avatar
    Registered
    06/06/04
    Location
    Bilzen
    Posts
    8,805
    iTrader
    18 (100%)
    Mentioned
    0 Post(s)
    Reputation
    42/128
    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.
    Last edited by Zero Grav; 12-09-2011 at 21:25.
    no votes  

  13. #13

    Registered
    12/12/04
    Location
    Vlimmeren
    Posts
    343
    iTrader
    0
    Mentioned
    0 Post(s)
    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();
    Last edited by ::SaBeR::; 14-09-2011 at 15:01.
    no votes  

  14. #14
    Zero Grav's Avatar
    Registered
    06/06/04
    Location
    Bilzen
    Posts
    8,805
    iTrader
    18 (100%)
    Mentioned
    0 Post(s)
    Reputation
    42/128
    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
    no votes  

  15. #15

    Registered
    12/12/04
    Location
    Vlimmeren
    Posts
    343
    iTrader
    0
    Mentioned
    0 Post(s)
    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="http://www.9lives.be/forum/images/rgb.jpg" 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
    no votes  

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Log in

Log in