PDA

Click to See Complete Forum and Search --> : Making my own 'Google Maps'

Sykoi
02-08-2006, 07:45 PM
The title says it all, albeit some details: I'm currently attempting to create an overflowed div that will contain thousands of images and controllable by the keyboard... What for? You may never know! :D (Its honestly not a shot in the dark, its pretty obvious what its for and I will be sharing bits and pieces on this forum, if I ever manage to get it to work)

Right now I'm attempting to use some code I found, which uses window.event.keyCode, now this in itself is a problem, but I will discuss it later as my main problem, the problem that has got me pulling my hair out, needs attending to: I can't find an actual, good way, that works in all browsers, to scroll the contents of a div (With overflow:hidden)! I've tried 'posTop' (Microsoft and their custom style commands! BAH!), and I've tried marginTop/Top... Neither work more than once, as once you call one of these commands - it automatically changes the integer to a string... And as we all know, you can't increment strings :(

So I'm at my wit's end, what in gods name do I do? Do I spend hours writing a possibly complex function to take off the 'px' and change the string value back to an integer every time I need to? Or is there an obvious answer that I’m completely missing after my mindless hours toiling over w3schools.com’s list of CSS commands?


And now moving on to my not so pressing matter: How do I accept keyboard input, inside a div, and call functions from certain keys - while making sure this works in all browsers?

My code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script language="javascript">
document.onkeypress = keyhandler;

function keyhandler(e) {
if (document.layers)
Key = e.which;
else
Key = window.event.keyCode;
/*if (Key != 0)
alert("Key pressed! ASCII-value: " + Key);*/
if (Key == 115) {
alert(document.getElementById('map').style.marginTop);
//document.getElementById('map').style.posTop = document.getElementById('map').style.posTop - 10;
document.getElementById('map').style.marginTop = document.getElementById('map').style.marginTop - 10;
}
}
</script>
</head>
<body>

<div style="overflow:hidden; width: 500px; height: 500px;">
<div style="margin-top: 100px;" id="map">
<img src="world-time-zone-2.jpg" />
</div>
</div>
</body>
</html>



Well, thank you in advanced for attempting to help me.
Sykoi
02-09-2006, 01:44 PM
Is there no way?
ErolinDesigns
02-09-2006, 01:50 PM
I think you're code is fine. What's it doing wrong? or what is it actually doing? It'd be great to see an example.

You can't force every user to activate JavaScript.
Sykoi
02-09-2006, 02:02 PM
What's it doing wrong?

Answer, from my post:

I can't find an actual, good way, that works in all browsers, to scroll the contents of a div (With overflow:hidden)!



or what is it actually doing?


I'm currently attempting to create an overflowed div that will contain thousands of images and controllable by the keyboard



You can't force every user to activate JavaScript.

...I don't understand why you brought this up or why it matters :( - I never expected everyone to turn javascript on.
Sykoi
02-12-2006, 08:58 PM
Anyone?
Sykoi
02-14-2006, 01:09 PM
Maybe I should rephrase the question:
"How would I make a self contained div that can be moved around without scroll bars, like Google Maps"
A1ien51
02-14-2006, 01:59 PM
Basic idea that you need to do is this:

Create an easy naming scheme for the images. They need to be in a grid type of naming convention. This will make it easy to add images when it is scrolled.

Now wheter you are using drag commands or key events to move(scroll) the map you need to detect how far away the sides are from the view area. Now when it gets near the threshold (set distance from the side), you need to append new images to the page. Now it is easy if they are on the right or bottom since it does envolves adding them to the end and does not affect the scroll position of the layer.

With the top and left you would have to add the row/column and adjust the current scroll positoin for the width/height of it. This will cause the scroll position to not change and have the edges load before it comes into view.

It probably is easier for me to code it than explain it in words, but I am too busy to do it. I am sure people out there already have to code for it if you look hard enough. I was going to add it to my book, but I did not think it was worth its weight in paper.

Eric
cwolves
02-16-2006, 02:51 PM
a very simple example:

<div style="width:200px;height:200px;border:1px solid #000; overflow:hidden;position:relative;">
<div style="position:absolute;top:100px;left:0px;border:1px solid #009;" id="content">content</div>
</div>
<script>
function moveDiv(e){
if(window.event) e=e||window.event;
var obj = document.getElementById('content');
switch(e.keyCode){
case 37:
obj.style.left = (parseInt(obj.style.left)-5)+'px';
break;
case 38:
obj.style.top = (parseInt(obj.style.top)-5)+'px';
break;
case 39:
obj.style.left = (parseInt(obj.style.left)+5)+'px';
break;
case 40:
obj.style.top = (parseInt(obj.style.top)+5)+'px';
break;
}
}
document.getElementById('content').onkeydown=moveDiv;
</script>


note that google maps isn't actually a div with thousands of images in it. It has a div with maybe 30 images in it. (a 6x5 grid of 150x150 px images for example). When you scroll left/right/up/down beyond what is currently visible, the images that are far off the screen get deleted, and new ones get put on the other side of the div.

So if you're scrolling left, the images that get pushed off of the left side are deleted, and at the same time more are added to the right side, beyond what you can see.

This prevents them from having to load the entire world into one div :-)
Sykoi
03-19-2006, 10:59 PM
a very simple example:

<div style="width:200px;height:200px;border:1px solid #000; overflow:hidden;position:relative;">
<div style="position:absolute;top:100px;left:0px;border:1px solid #009;" id="content">content</div>
</div>
<script>
function moveDiv(e){
if(window.event) e=e||window.event;
var obj = document.getElementById('content');
switch(e.keyCode){
case 37:
obj.style.left = (parseInt(obj.style.left)-5)+'px';
break;
case 38:
obj.style.top = (parseInt(obj.style.top)-5)+'px';
break;
case 39:
obj.style.left = (parseInt(obj.style.left)+5)+'px';
break;
case 40:
obj.style.top = (parseInt(obj.style.top)+5)+'px';
break;
}
}
document.getElementById('content').onkeydown=moveDiv;
</script>


note that google maps isn't actually a div with thousands of images in it. It has a div with maybe 30 images in it. (a 6x5 grid of 150x150 px images for example). When you scroll left/right/up/down beyond what is currently visible, the images that are far off the screen get deleted, and new ones get put on the other side of the div.

So if you're scrolling left, the images that get pushed off of the left side are deleted, and at the same time more are added to the right side, beyond what you can see.

This prevents them from having to load the entire world into one div :-)

Thanks :) was waiting so long for a reply I forgot about this.
Anyways, I tried the code and it isn't working for me, what keys are 37-40?
Sykoi
04-22-2006, 12:46 AM
Anyone?
Sykoi
04-27-2006, 11:45 AM
Anyone at all?
Sykoi
04-28-2006, 01:36 AM
Bump
David Harrison
04-28-2006, 04:49 PM
So I'm at my wit's end, what in gods name do I do? Do I spend hours writing a possibly complex function to take off the 'px' and change the string value back to an integer every time I need to? Or is there an obvious answer that I’m completely missing after my mindless hours toiling over w3schools.com’s list of CSS commands?Well, you COULD spend hours on it, or you could use parseInt();var someString = "1336px";

var someNumber = parseInt(someString);

alert(someNumber+1);