473,806 Members | 2,229 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Click & drag a too-big page around in the browser window?

I have some pages I'm serving out that are about twice the size of the
browser window (IE only; intranet only). The user must use the
horizontal and vertical scroll bars to move the page around.

Is it possible to have a javascript that would allow the user to click
and drag the page around (kind of like the new Google maps)? I already
have a ton of scripting in these pages - a few more lines won't hurt
anything.

Maybe someone could give me an idea of what such a script might look
like?

Thanks.
Aug 22 '05 #1
5 1981
"Martin" <ma**********@c omcast.net> wrote in ...
I have some pages I'm serving out that are about twice the size of the
browser window (IE only; intranet only). The user must use the
horizontal and vertical scroll bars to move the page around.

Is it possible to have a javascript that would allow the user to click
and drag the page around (kind of like the new Google maps)? I already
have a ton of scripting in these pages - a few more lines won't hurt
anything.

Maybe someone could give me an idea of what such a script might look
like?

Thanks.


this works ok, needs the pointer to change to a hand for the proper effect.

Herc
<body onMousemove="mi crosoftMouseMov e()">

<script>
mousex = 0
mousey = 0

function microsoftMouseM ove() {
oldx = mousex
oldy = mousey
mousex = window.event.x
mousey = window.event.y
if (window.event.b utton == 1) {
document.body.s crollLeft = document.body.s crollLeft - mousex + oldx
document.body.s crollTop = document.body.s crollTop - mousey + oldy
}
window.event.re turnValue = false
}
</script>

<img src="test.gif" width=500><br>
<img src="test.gif" width=500>

</body>

Aug 22 '05 #2
Ivo
"Martin" wrote
I have some pages I'm serving out that are about twice the size of the
browser window (IE only; intranet only). The user must use the
horizontal and vertical scroll bars to move the page around.

Is it possible to have a javascript that would allow the user to click
and drag the page around (kind of like the new Google maps)? I already
have a ton of scripting in these pages - a few more lines won't hurt
anything.


Do you mean something like this:
< http://www.vansandick.com/familie/stamboom/slides.htm >

If so, then have a look at its script file here:
< http://www.vansandick.com/familie/stamboom/handtool.js >

or with some Javascript syntax highlighting:
< http://www.vansandick.com/view?famil...om/handtool.js >

hth
Ivo

Aug 22 '05 #3

Ivo wrote:
"Martin" wrote

I have some pages I'm serving out that are about twice the size of the
browser window (IE only; intranet only). The user must use the
horizontal and vertical scroll bars to move the page around.
why would you restrict people to use IE???
Is it possible to have a javascript that would allow the user to click
and drag the page around (kind of like the new Google maps)? I already
have a ton of scripting in these pages - a few more lines won't hurt
anything.

that would be "panning"?

If you have a wheel mouse where the wheel acts as third (middle) button,
you can use that (I mean, you're restricting your users anyway, while
this wouldn't restrict the users though ;-)
Do you mean something like this:
< http://www.vansandick.com/familie/stamboom/slides.htm >
I don't know if it's unintentional, but besides the tree branches not
being aligned, if there is a "pan" function it ain't working on my
IE6 version.
If so, then have a look at its script file here:
< http://www.vansandick.com/familie/stamboom/handtool.js >


function cbWindow(){
this.fail=1;
var n=window.naviga tor,an=n.appNam e.toLowerCase() ,ag=n.userAgent .toLowerCase();
if(ag.indexOf(" win")<0 || ag.indexOf("ope ra")>=0)
return;
var k=0,v_ie=0,v_nn =0;
if((k=ag.indexO f("msie"))>=0 ) v_ie=parseFloat (ag.substring(k +5));
else if(an.indexOf(" netscape")>=0) v_nn=parseFloat (n.appVersion);
_ie=_nn=_mz=0;
if(v_ie>=4)_ie= 1;
else if(v_nn>=5) _mz=1;
else if(v_nn>=4) _nn=1;
else return;
this.fail=0;
appName???? opera? win? netscape? aren't there any other browsers?
can't appName be spoofed?

oh, and on <http://www.vansandick. com/familie/stamboom/tijdbalk.htm>

if (navigator.appN ame != "Microsoft Internet Explorer")docum ent.write("Sorr y, the browser you are using may not understand the
script on this page.\nTry accessing this page in Internet Explorer.")

is somewhat restricting 8-o
Aug 22 '05 #4
On Mon, 22 Aug 2005 08:36:48 -0500, "Robi" <me@privacy.net > wrote:

Ivo wrote:
"Martin" wrote

I have some pages I'm serving out that are about twice the size of the
browser window (IE only; intranet only). The user must use the
horizontal and vertical scroll bars to move the page around.
why would you restrict people to use IE???
Because the pages in question use VML to display a lot of graphic
items. And VML works only in IE. And, as I noted, these pages are
displayed only on an intranet (of a single company). And, such useage
is limited to about 4-5 people - all of whom use IE.

A question for you: why do you need an explanation of my situation (of
which you know nothing about)? I was looking for a technical answer to
a technical question.
Is it possible to have a javascript that would allow the user to click
and drag the page around (kind of like the new Google maps)? I already
have a ton of scripting in these pages - a few more lines won't hurt
anything.
that would be "panning"?


Thanks you for the definition. I will be sure to use it the next time.
If you have a wheel mouse where the wheel acts as third (middle) button,
you can use that (I mean, you're restricting your users anyway, while
this wouldn't restrict the users though ;-)


I believe the wheel mouse is capable of "panning" only in a vertical
direction. This wouldn't help in "panning" the page sideways.
Do you mean something like this:
< http://www.vansandick.com/familie/stamboom/slides.htm >


I don't know if it's unintentional, but besides the tree branches not
being aligned, if there is a "pan" function it ain't working on my
IE6 version.


It works OK in my IE6.
If so, then have a look at its script file here:
< http://www.vansandick.com/familie/stamboom/handtool.js >


function cbWindow(){
this.fail=1;
var n=window.naviga tor,an=n.appNam e.toLowerCase() ,ag=n.userAgent .toLowerCase();
if(ag.indexOf(" win")<0 || ag.indexOf("ope ra")>=0)
return;
var k=0,v_ie=0,v_nn =0;
if((k=ag.indexO f("msie"))>=0 ) v_ie=parseFloat (ag.substring(k +5));
else if(an.indexOf(" netscape")>=0) v_nn=parseFloat (n.appVersion);
_ie=_nn=_mz=0;
if(v_ie>=4)_ie= 1;
else if(v_nn>=5) _mz=1;
else if(v_nn>=4) _nn=1;
else return;
this.fail=0;
appName???? opera? win? netscape? aren't there any other browsers?
can't appName be spoofed?

oh, and on <http://www.vansandick. com/familie/stamboom/tijdbalk.htm>

if (navigator.appN ame != "Microsoft Internet Explorer")docum ent.write("Sorr y, the browser you are using may not understand the
script on this page.\nTry accessing this page in Internet Explorer.")

is somewhat restricting 8-o


Aug 22 '05 #5
Herc -

I used your script (slightly modified). Does just what I want.

Thanks
On Mon, 22 Aug 2005 15:07:12 +1000, "|-|erc" <h@r.c> wrote:
"Martin" <ma**********@c omcast.net> wrote in ...
I have some pages I'm serving out that are about twice the size of the
browser window (IE only; intranet only). The user must use the
horizontal and vertical scroll bars to move the page around.

Is it possible to have a javascript that would allow the user to click
and drag the page around (kind of like the new Google maps)? I already
have a ton of scripting in these pages - a few more lines won't hurt
anything.

Maybe someone could give me an idea of what such a script might look
like?

Thanks.


this works ok, needs the pointer to change to a hand for the proper effect.

Herc
<body onMousemove="mi crosoftMouseMov e()">

<script>
mousex = 0
mousey = 0

function microsoftMouseM ove() {
oldx = mousex
oldy = mousey
mousex = window.event.x
mousey = window.event.y
if (window.event.b utton == 1) {
document.body.s crollLeft = document.body.s crollLeft - mousex + oldx
document.body.s crollTop = document.body.s crollTop - mousey + oldy
}
window.event.re turnValue = false
}
</script>

<img src="test.gif" width=500><br>
<img src="test.gif" width=500>

</body>


Aug 22 '05 #6

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

6
6660
by: David J Rose | last post by:
I am having trouble allowing a user to drag an item, whilst also allowing them to click the item. I am using mousedown, mousemove and mouseup. It works if I click the button carefully, but if there is any mouse movement, then it is interpreted as a drag, and the click does not work. What I want is a way to only do the drag if the mouse movement is above a threshold. Is this possible? Here is the basic code: private void...
1
954
by: Mike Chan | last post by:
>_< If I use the "Drag & Drop" function in the application, then the "Click" function no more work!!!! For example: Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click MessageBox.Show("C") End Sub
1
2316
by: Terry Olsen | last post by:
My first time using TreeViews. I have TreeView1 set up to display my directory structure just like Windows Explorer. I can drag & drop files and folders over to TreeView2. I can re-arrange the structure in TreeView2 (putting files in different folders and such...like you do when you create a structure for burning a CD). I have two questions. 1. How can I remember the full path from TreeView1 (when it comes time to actually do...
2
3481
by: misower | last post by:
var c = document.getElementById("PanelTree"); // PanelTree is a <div> element! var n = document.createElement("div"); n.setAttribute('id', 'nu'); n.setAttribute('style', 'position:absolute;left:0px;top:0px;'); var tmp2 = document.createTextNode('hello'); n.appendChild(tmp2);
1
1933
by: Tuanisviet | last post by:
Hey folks. I've built a table in a Java Applet that has several rows in it. I know you can click, hold down the button, then drag all the way through the table to select them all, BUT on release of the mouse, it blows up & leaves a Java stack trace. Is there any way I can fix the click & drag error? FYI, it only happens when I release the mouse in a area other then the table. I can't post the code because it involves too may files.
0
9718
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
9596
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
10617
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
10364
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
0
10109
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
9186
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
7649
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
5678
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
4328
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.