Making a drag-scroller cross-browser compatible

I've not seen any real sollutions to this yet. I found something similar on this forum but the posted sollutions didn't work.

I would like to make a drag to scroll for my blog, using JS. So far I have written the following (for use in Firefox):

Expand|Select|Wrap|Line Numbers

 
document.onmousedown = function(){

    var e = arguments[0]||event;

    var x = e.pageX;

    var y = e.pageY;
 
    document.onmousemove = function(){

        scrollTo(e.pageX - x), y - e.pageY);

    }
 
    document.onmouseup = function(){

        document.onmousemove = null;

    }

}

BTW I am totally new to JS so go easy on me ;D

I have the sollution for IE, however can't get the above working properly in Firefox. The logic is here but it appears to scroll in large jerks downwards. Any ideas?

Check this page out for a script I located (IE only). It shows what my objective is:
http://javascript.internet.com/page-...roll-page.html

I would be greatful for any help getting this multi-browser compatible :D

Aug 16 '07 #1

Subscribe Post Reply

2513

pbmods

5,821

Expert 4TB

Heya, frankenstein. Welcome to TSDN!

Changed thread title to better describe the problem (did you know that threads whose titles contain three words or less actually get FEWER responses?).

Aug 16 '07 #2

frankenstein

Thanks for welcome and help pbmods.

Any ideas about a possible sollution. Cheers ;D

Aug 16 '07 #3

iam_clint

1,208

Expert 1GB

Example

Expand|Select|Wrap|Line Numbers

 
<script>

//Example provided by iam_clint (www.thescripts.com)

var x=0;

var y=0;

var posx=0;

var posy=0;

var isNN = detectBrowser();

if (isNN=="firefox") { isNN = true; } else { isNN = false; }

function detectBrowser() {

    var browser=navigator.userAgent;

    if (browser.indexOf("Firefox")>0) { return "firefox"; }

    if (browser.indexOf("MSIE")>0) { return "ie"; }

}
 
document.onmousedown = handleMouseDown;

function handleMouseDown(e) {

    if (detectBrowser()=="firefox") { document.captureEvents(Event.MOUSEMOVE); }

    MousePos(e);

    posx=document.body.scrollLeft+x;

    posy=document.body.scrollTop+y;

    document.onmousemove = doScrolling;

    document.onmouseup = handleMouseUp;

    return false;

}
 
function handleMouseUp() {

    document.onmousemove = null;

    document.body.style.cursor = "";

}
 
function doScrolling(e){

    MousePos(e);

    document.getElementById("xy").style.top = document.body.scrollTop;

    document.getElementById("xy").style.left = document.body.scrollLeft;

    document.getElementById("xy").innerHTML = "x: "+x+" y: "+y+"<br>posx: "+posx+" posy: "+posy+"<br>x-posx: "+Math.floor(x-posx)+" y-posy: "+Math.floor(y-posy);

    scrollTo(posx-x, posy-y);

    document.body.style.cursor = "move";

    return false;

}

function MousePos(e) {

    x = isNN ? x = e.pageX : x = window.event.clientX;

    y = isNN ? y = e.pageY : y = window.event.clientY; 

}

</script>

<body>

<div id="xy" style="position: absolute; top: 0px; left: 0px; width: 180px;"></div>

<table height="5000" width="5000"><tr><td>TEST</td></tr></table>

</body>

Aug 16 '07 #4

frankenstein

Wow! That's awesome. Thank you so much. I will post a link when I have the design complete :D

Aug 16 '07 #5

frankenstein

http://joshstudio.com/blog

Aug 19 '07 #6

pbmods

5,821

Expert 4TB

Heya, Frankenstein.

Very nice. Works great in Safari :)

Good luck with your project, and if you ever need anything, post back anytime :)

Aug 19 '07 #7

Similar topics

MacOS X drag & drop?

by: Han-Wen Nienhuys | last post by:

Hi there, this might not be the right group to ask, but I'm looking for some hints on making a drag & droppable application on MacOS X. I succeeded in producing a bundle that calls a python...

Python

Making stylesheets (CSS) with self-adjusting height

by: slawek | last post by:

Hi i have following stylesheet: ..linklist { width: 100%; font-size: 75%; background: #EEEEEE; margin: 5px; height: 300px; overflow: auto;

HTML / CSS

Drag and drop in tree views

by: Andy | last post by:

I'm just making a small app with two tree views using drag and drop functionality. However, there is a small problem: 1) I select a node using the mouse: I'm locating the node, selecting it by...

.NET Framework

Can't drag custom control from toolbox onto webform in vs.net

by: Dave | last post by:

I'm creating a custom control. To start, I created the control in a seperate project in the same solution. I didn't change anything from the template vs.net creates for a web custom control, I...

ASP.NET

Mouse cursor to be changed when drag & drop

by: haegens | last post by:

I am making a .NET Application which has a TreeView Control in it. I have 3 levels of nodes. The toplevel is a rootnode which contains all other nodes. The second level holds one kind of nodes that...

Visual Basic 4 / 5 / 6

Problems with drag and drop ASP.NET 2.0 applications?

by: dejavue82 | last post by:

Dear ASP.NET programmers, I have noticed many asp.net 2.0 programmers mention that web applications created with the use of Visual Studio wizards and by draging and droping fom the toolbox are...

ASP.NET

Drag and Drop with PyQt4

by: Harshad | last post by:

Hi, I'm writing a program using Python 2.4 and PyQt4. The aim is to implement drag and drop from filesystem and display a list of files dragged on to the listWidget. This function will later...

Python

Passing data for Drag & Drop

by: SteveDouglas | last post by:

Hi all, I am currently writing an application in VB.NET that has a lot of controls (treeviews/listviews/labels and so forth) that represent "things" that need to be draggable from place to place,...

.NET Framework

C# - Image and Viewport - Drag Move, Pixel Positons etc

by: 123shailesh | last post by:

Hello everyone, I need some help. I have been working on it for some time but havent been able to think of any solution. Even had thought of making do without it, even though it was a major part...

.NET Framework

Custom Transfer type for drag and drop? (SWT)

by: JHuman | last post by:

Hi there, At the moment I'm making an application where I drag an item in a List to a Canvas (all in SWT). However, I don't wish to use TextTransfer or ByteArrayTransfer for the drag and drop data...

Java

Merging data from multiple Excel files

by: ryjfgjl | last post by:

In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...

Data Management

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

Changing the language in Windows 10

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

Windows Server

Problem With Comparison Operator <=> in G++

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,...

C / C++

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

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

General

AI Job Threat for Devs

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,...

Career Advice