...

View Full Version : Little help with JS



Aiwou
07-24-2012, 11:41 PM
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:



<!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

Old Pedant
07-25-2012, 12:40 AM
Why would you muck with slice?


<!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>

Old Pedant
07-25-2012, 12:50 AM
But I guess if you really wanted to use slice, I'd do it thus:


<!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>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum