newb question for scrolling image tiles

[Sly]

I don't know how to describe this so i may as well show.

What i'm trying to do is build a dynamic site. Which also means a scrolling menu that's put together on the user end.

I've done that by making a <div id=mainlist style=position:absolute>, and then using javascript to generate an html and then changing the mainlist html content.

That involves loading the list from an XML, and i'm trying to keep the explanation simple and my xml parser works so i'm skipping that part of the code in the sample.



However, the problem is that when i start scrolling it, the thing resizes.

http://codetest.+++++++++++++++/html/slide.html
[replace the + with f.r.e.e.h.o.s.t.i.a.com]

If you make it go past the left screen, it goes past it, like it should (It's a very long list), but when you go right, it splits into several lines and makes the site wider.

The div is just this

<div id="mainlist" style="position: absolute; top: 300px; left: 20px;">
<img src='images/icon0001.png'>
<img src='images/icon0002.png'>
<img src='images/icon0003.png'>
<img src='images/icon0004.png'>
<img src='images/icon0005.png'>
<img src='images/icon0006.png'>
</div>

And i'm just modifying the style.left with javascript.

I know i'm going about this wrong but i don't know how to ask techniques in a google search.

 

[Sly]

*sigh* nevermind. Someone tried it on their ipad and it wouldn't show up. I'll have to try something else.

http://codetest.+++++++++++++++/html/slide2.html<html>
<body scroll=no style="overflow: hidden">
<div id="mainlist" style="position: absolute; top: 300px; left: 20px;">
<nobr>
<img src='images/icon0001.png'>
<img src='images/icon0002.png'>
<img src='images/icon0003.png'>
<img src='images/icon0004.png'>
<img src='images/icon0005.png'>
<img src='images/icon0006.png'>
</nobr>
</div>
<input type="button" onmousedown='mainlistvel(+30)' onmouseup='mainlistvel(0)' onmouseout='mainlistvel(0)' value='left' style='position: absolute; top: 300px; left: 20px;'>
<input type="button" onmousedown='mainlistvel(-30)' onmouseup='mainlistvel(0)' onmouseout='mainlistvel(0)' value='right' style='position: absolute; top: 300px; right: 20px;'>
<script>
var mainlistid=document.getElementById("mainlist");
mainlistX=parseInt(mainlistid.style.left);
mainlistXVel=0;
function mainlistvel(num){
mainlistXVel=num;
}
window.setInterval(function(){
mainlistX+=mainlistXVel;
i=parseInt(mainlistid.style.left)
mainlistid.style.left = i+((mainlistX-i)*.1)+"px";
}, 33)
</script>
</body>
</html>

Curiously, what part of this wasn't compatible with the ipad? It works on FireFox, Chrome and Safari.

And what browser is the closest to the one used by the iPad? So i can actually see if a page will run on it.

 

[ShoeLace]

Safari should be the closest, this goes for the iPhone too. Cross browser compatibility with javascript is some of the most insanely painful things to do.

 

[Sly]

Safari should be the closest, this goes for the iPhone too. Cross browser compatibility with javascript is some of the most insanely painful things to do.

The <video> sample i made ran on the iPad, but not on Safari.

EDIT: I just tried it again, looked like it really doesn't work but i left it on for a while and it suddenly started running. Looks like Safari downloads the entire video before playing it back instead of streaming it. How do i force it to stream?

 

[Sly]

Is the ipod touch's browser the same as the ipad? Aside from the size will it run websites exactly the same as the ipad? I'm hoping i can get one second hand just for testing websites.