473,698 Members | 2,611 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Making a drag-scroller cross-browser compatible

4 New Member
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
  1. document.onmousedown = function(){
  2.     var e = arguments[0]||event;
  3.     var x = e.pageX;
  4.     var y = e.pageY;
  5.  
  6.     document.onmousemove = function(){
  7.         scrollTo(e.pageX - x), y - e.pageY);
  8.     }
  9.  
  10.     document.onmouseup = function(){
  11.         document.onmousemove = null;
  12.     }
  13. }
  14.  
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
6 2526
pbmods
5,821 Recognized Expert Expert
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
4 New Member
Thanks for welcome and help pbmods.

Any ideas about a possible sollution. Cheers ;D
Aug 16 '07 #3
iam_clint
1,208 Recognized Expert Top Contributor
Example
Expand|Select|Wrap|Line Numbers
  1. <script>
  2. //Example provided by iam_clint (www.thescripts.com)
  3. var x=0;
  4. var y=0;
  5. var posx=0;
  6. var posy=0;
  7. var isNN = detectBrowser();
  8. if (isNN=="firefox") { isNN = true; } else { isNN = false; }
  9. function detectBrowser() {
  10.     var browser=navigator.userAgent;
  11.     if (browser.indexOf("Firefox")>0) { return "firefox"; }
  12.     if (browser.indexOf("MSIE")>0) { return "ie"; }
  13. }
  14.  
  15. document.onmousedown = handleMouseDown;
  16. function handleMouseDown(e) {
  17.     if (detectBrowser()=="firefox") { document.captureEvents(Event.MOUSEMOVE); }
  18.     MousePos(e);
  19.     posx=document.body.scrollLeft+x;
  20.     posy=document.body.scrollTop+y;
  21.     document.onmousemove = doScrolling;
  22.     document.onmouseup = handleMouseUp;
  23.     return false;
  24. }
  25.  
  26.  
  27. function handleMouseUp() {
  28.     document.onmousemove = null;
  29.     document.body.style.cursor = "";
  30. }
  31.  
  32. function doScrolling(e){
  33.     MousePos(e);
  34.     document.getElementById("xy").style.top = document.body.scrollTop;
  35.     document.getElementById("xy").style.left = document.body.scrollLeft;
  36.     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);
  37.     scrollTo(posx-x, posy-y);
  38.     document.body.style.cursor = "move";
  39.     return false;
  40. }
  41. function MousePos(e) {
  42.     x = isNN ? x = e.pageX : x = window.event.clientX;
  43.     y = isNN ? y = e.pageY : y = window.event.clientY; 
  44. }
  45. </script>
  46. <body>
  47. <div id="xy" style="position: absolute; top: 0px; left: 0px; width: 180px;"></div>
  48. <table height="5000" width="5000"><tr><td>TEST</td></tr></table>
  49. </body>
  50.  
Aug 16 '07 #4
frankenstein
4 New Member
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
4 New Member
http://joshstudio.com/blog
Aug 19 '07 #6
pbmods
5,821 Recognized Expert Expert
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

Sign in to post your reply or Sign up for a free account.

Similar topics

1
1888
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 script. When I drop a file onto the application, the python script is called with the following arguments,
8
4099
by: slawek | last post by:
Hi i have following stylesheet: ..linklist { width: 100%; font-size: 75%; background: #EEEEEE; margin: 5px; height: 300px; overflow: auto;
0
1080
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 pressing down right mouse button and releasing the button. 2) I'm dragging another item: I'm locating another node, pressing down right mouse button, and start dragging the item. Now the selection (the blue rectangle) jumps back to the item that...
0
1386
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 wanted to add it to the toolbox and make sure it worked before I started making my changes. Well, I've added it to the toolbox, but when I try to drag it from the toolbox to the webform, my cursor turns into a circle with a slash accross it and...
0
2520
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 have one type of objects assigned to the tag property. The third level holds another kind of nodes. Also this level has one type of objects assigned to the tag property. The objects that are assigned in the third level nodes, are child objects of...
2
1516
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 unstable/unmaintainable (or not enterprise ready). I'm sure I understand this. Isn't the code created by these wizards exactly the same code that one would have to implement manually? Shouldn't both ways yield the same (or at least similar...
2
6542
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 become part of a software for workflow management. When I run the program, DragEnterEvent works as expected, but the DropEvent does not seem to be working. I'm not an experienced Python hacker, and am unable to trace out any problems with the...
1
2305
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, including between controls and windows. In the past when I've implemented Drag and Drop in other projects, I've always passed the item being dragged (for example the listviewitem or the treenode) to the DoDragDrop and then retrieved it in the...
6
5563
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 of my project. To be honest, I am a beginner and hence unawares about many of the stuff. So here is my problem: I am working on a "PUBLIC TRANSPORT INFORMATION SYSTEM" (In India we dont have one yet for most cities). Currently I am doing it as part...
1
4475
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 transfer. I want to transfer a class defined by me (lets just call it myCustomObj). I've tried subclassing Transfer but I don't have a clue what to put inside Transfer's methods, particularly isSupportedType() and nativeToJava(). Can anyone help me...
0
8683
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
9170
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
9031
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
7740
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...
0
5862
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
4372
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
1
3052
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
2
2339
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
2007
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

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.