Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    1
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question Little help with JS

    Hello,

    I'm very new to JS and I'm trying to fiddle with basic functions, as for me, the best way how to learn something is to set some project/tasks and try to find solution (at least for php, this method worked pretty well).

    So I gave myself a task to create simple function but got stuck on (definitively very simple) problem.

    I'm trying to make a function which would display first three elements of array onload and onclick on left/right button would move whole selection (on left click it should display last, first and second item, on right click, it should display second, third and fourth items). Basically, it would show three elements all the time and you should scroll throw them using left/right button.

    As I started with JS yesterday, I don't know much (my previous experiences are simple onclick events...). This one seems more complex to me.

    So far I came up with first part, which looks something like this:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    </head>
    <body onload="load()">
    <script type="text/javascript">
    function load()
    {
    var images=new Array();
    images[0]="obr1.jpg";
    images[1]="obr2.jpg";
    images[2]="obr3.jpg";
    images[3]="obr4.jpg";
    
    var displayed=images.slice(-4,-1);
    
    var a=document.getElementById("test");
    a.innerHTML=displayed;
    }
    </script>
    
    <a href="#" onclick="left()">left</a>
    <p id="test"></p>
    <a href="#" onclick="right()">right</a>
    
    </body>
    </html>
    My problem is that I can't come up with proper function to change the slice start/end points onclick. Can someone please just hint how the function which would decrease/increase the slice points while checking the array lenght and ensuring that the slice will jump on first/last item if it would get out of range?

    I realise that the question is most likely ridiculous but for me it's not as it's my first 'practical lesson' of absolutely unknown language. Any help appreciated.
    Thanks in advance

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,200
    Thanks
    75
    Thanked 4,342 Times in 4,308 Posts
    Why would you muck with slice?
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    </head>
    <body>
    <span onclick="showThree(-1)">left</span>
    <p id="test"></p>
    <span onclick="showThree(1)">right</span>
    
    <script type="text/javascript">
    var images = ["obr1.jpg","obr2.jpg","obr3.jpg","obr4.jpg"];
    
    var curstart = 0;
    
    function showThree(moveby)
    {
        curstart = ( curstart + images.length + moveby ) % images.length;
    
        var displayed = []
        for ( var c = 0; c <= 2; ++c )
        {
            displayed.push( images[(curstart + c) % images.length] );                
        }
        document.getElementById("test").innerHTML = displayed.join(" :: ");
    }
    showThree(0);
    </script>
    
    </body>
    </html>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    Aiwou (07-25-2012)

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,200
    Thanks
    75
    Thanked 4,342 Times in 4,308 Posts
    But I guess if you really wanted to use slice, I'd do it thus:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    </head>
    <body>
    <span onclick="showThree(-1)">left</span>
    <p id="test"></p>
    <span onclick="showThree(1)">right</span>
    
    <script type="text/javascript">
    var imageList = ["obr1.jpg","obr2.jpg","obr3.jpg","obr4.jpg"];
    var listSize = imageList.length;
    
    var images = imageList.concat( imageList ); // double the array
    
    
    var curstart = 0;
    
    function showThree(moveby)
    {
        curstart = ( curstart + listSize + moveby ) % listSize;
        document.getElementById("test").innerHTML = images.slice( curstart, curstart + 3 );
    }
    showThree(0);
    </script>
    
    </body>
    </html>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Tags for this Thread

    Posting Permissions

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