Scrolling window through link at other frame?

[Artimidor]

I have a little question, which shouldn't be much of a problem for someone who is very preficient with HTML. Unfortunately I lack the knowledge here. Can someone help out?

The problem is this:

I'd like to display a map picture within a frame, which is larger than the frame itself. The idea is to turn off the ugly scrollbars at the map frame and click on arrows (up, down, left, right) in another frame so that the frame window scrolls in the desired direction.

Anyone got an idea here?

Many thanx in advance,
Artimidor

[Vladdy]

Why frame???
Any block element with overflow set hidden will do.
After you put the image element inside such block element use top and left properties of image style to adjust position

[Mr J]

See if this helps you out

[Artimidor]

Hmmm... Seems like the example in the zip file doesn't work at older Netscape versions like e.g. 4.5.

[Mr J]

Sorry .... but I do not have netscape, only IE 5.5

[Artimidor]

Can you perhaps make the block idea more precise, Vladdy? Code example or something?

Artimidor
The Santharian Dream
http://www.santharia.com

[Vladdy]

<div style="width:100px;height:200px;overflow:hidden">
<img id="map" src="map.gif" style="position:relative;top:0px;left:0px;">
</div>
<a href="javascript: with(document.getElementById('map')){ style.top = (offsetTop -1) + 'px'}" style="background:url(uparrow.gif); height:32px;width;32px;"></a>
<a href="javascript: with(document.getElementById('map')){ style.top = (offsetTop +1) + 'px'}" style="background:url(downarrow.gif); height:32px;width;32px;"></a>
<a href="javascript: with(document.getElementById('map')){ style.left = (offsetLeft -1) + 'px'}" style="background:url(leftarrow.gif); height:32px;width;32px;"></a>
<a href="javascript: with(document.getElementById('map')){ style.left = (offsetLeft +1) + 'px'}" style="background:url(rightarrow.gif); height:32px;width;32px;"></a>

just do not expect it to work with antiques (NS 4.x) and wannabes (Opera).

[vin]

Hi,

I am just a beginner and found this string while searching for answers for a problem I am having with scrolling frames. Unfortunately, Vladdy's reply was beyond my understanding and so I would appreciate it if anyone can give more information on this subject. Here is my problem:

I have obtained some code to control the scrolling (up/down) of the page from buttons on the page. However, I would like to modify the script so that I can scroll the Main frame from buttons within the side frame.

Here is the page address: http://comnet.web1000.com/default.htm



And here is the code:

<p><img border="0" src="Control.jpg" usemap="#FPMap0" width="79" height="73"><map name="FPMap0">


<area href="javascript:" onmouseover="myspeed=-thespeed" onmouseout="myspeed=0" shape="polygon" coords="36, 23, 36, 61, 19, 59, 7, 51, 0, 41, 5, 29, 21, 22">
<area href="javascript:" onmouseover="myspeed=thespeed" onmouseout="myspeed=0" shape="polygon" coords="40, 27, 40, 61, 53, 62, 63, 56, 74, 47, 76, 38, 68, 30, 58, 25, 46, 21, 41, 23">
</map></p>



<div id="staticbuttons" style="position:absolute;">
&nbsp;
</div>

<script>

//Page Scroller (aka custom scrollbar)- By Dynamic Drive
//For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
//This credit MUST stay intact for use


var Hoffset=70 //Enter buttons' offset from right edge of window (adjust depending on images width)
var Voffset=80 //Enter buttons' offset from bottom edge of window (adjust depending on images height)
var thespeed=1 //Enter scroll speed in integer (Advised: 1-3)




var ieNOTopera=document.all&&navigator.userAgent.indexOf("Opera")==-1
var myspeed=0

var ieHoffset_extra=document.all? 15 : 0
var cross_obj=document.all? document.all.staticbuttons : document.getElementById? document.getElementById("staticbuttons") : document.staticbuttons

function positionit(){
var dsocleft=document.all? document.body.scrollLeft : pageXOffset
var dsoctop=document.all? document.body.scrollTop : pageYOffset
var window_width=ieNOTopera? document.body.clientWidth+ieHoffset_extra : window.innerWidth+ieHoffset_extra
var window_height=ieNOTopera? document.body.clientHeight : window.innerHeight

if (document.all||document.getElementById){
cross_obj.style.left=parseInt(dsocleft)+parseInt(window_width)-Hoffset
cross_obj.style.top=dsoctop+parseInt(window_height)-Voffset
}
else if (document.layers){
cross_obj.left=dsocleft+window_width-Hoffset
cross_obj.top=dsoctop+window_height-Voffset
}
}

function scrollwindow(){
window.scrollBy(0,myspeed)
}

function initializeIT(){
positionit()
if (myspeed!=0){
scrollwindow()
}
}

if (document.all||document.getElementById||document.layers)
setInterval("initializeIT()",20)

</script>


If anyone knows a more simple script do achieve the desired result I would also appreciate that too.

Thanks,

Vin

[Mr J]

The following can go in any frame other than the frame to be scrolled

MAIN is the name of the frame to be scrolled

<script language="javascript">
<!--
upme=""
downme=""
function up(){
parent.MAIN.window.scrollBy(0,10)
upme=setTimeout("up()",100)
}

function down(){
parent.MAIN.window.scrollBy(0, -10)
downme=setTimeout("down()",100)
}

function stopme(){
clearTimeout(upme)
clearTimeout(downme)
}
// -->
</script>


<a href="#null" onmouseover="up()" onmouseout="stopme()">up</a> <a href="#null" onmouseover="down()" onmouseout="stopme()">down</a>

[vin]

Thanks for that Mr J.

Do I have to add something to this script? I put it into my navigation frame but it doesn't work. Instead of scrolling, when I click on the up or down links it loads the navigational side frame into the main frame replacing whatever was in the main frame.

What part of the script do I need to change to get it to scroll?

Vin

[vin]

I am still struggling with this seemingly simple code. Here is every thing that I put in my navigational left side frame:

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>CONTENTS</title>
<base target="main">
</head>

<script language="javascript">
<!--
upme=""
downme=""
function up(){
parent.MAIN.window.scrollBy(0,10)
upme=setTimeout("up()",100)
}

function down(){
parent.MAIN.window.scrollBy(0, -10)
downme=setTimeout("down()",100)
}

function stopme(){
clearTimeout(upme)
clearTimeout(downme)
}
// -->
</script>

<body>

<a href="#null" onmouseover="up()" onmouseout="stopme()">up</a> <a href="#null" onmouseover="down()" onmouseout="stopme()">down</a>

</body>

</html>


This keeps giving me errors no matter how I rearrange it.

Don't I have to add any code to the Main frame on the right or to the Frames page?

[Mr J]

Vin

At the lines

parent.MAIN.window.scrollBy(0,10)

And

parent.MAIN.window.scrollBy(0, -10)


Have you change the word MAIN to that of the framename to be scrolled?

[vin]

Thanks Mr J,

The problem was that MAIN in upper case was not being recognised. After changing it to lower case it worked. I fiddled with the variables and mannaged to get a nice smooth scroll. Thanks again, this is exactly what I was looking for.

Vin

[emehrkay]

The following can go in any frame other than the frame to be scrolled

MAIN is the name of the frame to be scrolled

<script language="javascript">
<!--
upme=""
downme=""
function up(){
parent.MAIN.window.scrollBy(0,10)
upme=setTimeout("up()",100)
}

function down(){
parent.MAIN.window.scrollBy(0, -10)
downme=setTimeout("down()",100)
}

function stopme(){
clearTimeout(upme)
clearTimeout(downme)
}
// -->
</script>


<a href="#null" onmouseover="up()" onmouseout="stopme()">up</a> <a href="#null" onmouseover="down()" onmouseout="stopme()">down</a>
great code, exactly what i was looking for. question: is there anyway for me to do this while i mouse over an iframe, lets say i spilt it into three. the middel left frame would make it go left the middle no action and the right right. i have it working with mouseover links/images. i was wondering if i can mouseover someting like an iframe

[Mr J]

I don't think you can successfully use an event on the actual frame but I would image that you could use the document within it and reference the script in the parent.

Or you could reference the mouse position in relation to the iframes offsetTop and offsetLeft.
Splitting the width of the iframe into three and adding to the offsetLeft to give you the co-oordinates.

Something like

width = iframeWidth / 3

coord1 = iframe.offsetLeft + width
coord2 = iframe.offsetLeft + (width * 2)

You would then check for where the mouse was

if(mouseLeftPos > iframe.offsetLeft && mouseLeftPos < iframe.offsetLeft + coord1){
do this
}

The same would have to be done for the mouses top position.

Just off the top of my head mind you

[emehrkay]

I don't think you can successfully use an event on the actual frame but I would image that you could use the document within it and reference the script in the parent.

Or you could reference the mouse position in relation to the iframes offsetTop and offsetLeft.
Splitting the width of the iframe into three and adding to the offsetLeft to give you the co-oordinates.

Something like

width = iframeWidth / 3

coord1 = iframe.offsetLeft + width
coord2 = iframe.offsetLeft + (width * 2)

You would then check for where the mouse was

if(mouseLeftPos > iframe.offsetLeft && mouseLeftPos < iframe.offsetLeft + coord1){
do this
}

The same would have to be done for the mouses top position.

Just off the top of my head mind you
your logic makes sense but i wouldnt know how to impliment it fully in javascript. would you mind helpin me out a bit more?
sohhpics.com/main.php //verybare just getting the coding out of the way before we move on to the visual design