www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 18

Thread: Can this javascript for 'Click/Grab and Drag' work on Firefox?

  1. #1
    Join Date
    Aug 2009
    Posts
    20

    Can this javascript for 'Click/Grab and Drag' work on Firefox?

    This is Newbie speaking..

    I have a horizontal website made up of only images placed next to one another. I want the user clicking anywhere on the screen and displacing or moving it in whichever direction. So mostly, they'd click on the right of the screen and pull the screen towards the left and control what they see. There will be no auto-animation/scroll or mouse-over function.

    I have sourced the following script:
    http://javascript.internet.com/page-...roll-page.html

    However I can only get it to work on Internet Explorer. Is there any way I can achieve cross-browser compatibility?

    Thank you very much!

  2. #2
    Join Date
    Aug 2009
    Posts
    17
    firefox and other browsers uses e.pageX and e.pageY or event.pageX for x positon and event.pageY for y position

    function onMove(event)
    {
    event = event || window.event;

    if(event.pageX || event.pageY)
    {
    return { x:event.pageX, y:event.pageY }

    }
    return {
    x:event.clientX + document.body.scrollLeft - document.body.clientLeft,
    y:event.clientY + document.body.scrollTop - document.body.clientTop
    }

    }

  3. #3
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    Quote Originally Posted by nazzy View Post
    firefox and other browsers uses e.pageX and e.pageY or event.pageX for x positon and event.pageY for y position

    function onMove(event)
    {
    event = event || window.event;

    if(event.pageX || event.pageY)
    {
    return { x:event.pageX, y:event.pageY }

    }
    return {
    x:event.clientX + document.body.scrollLeft - document.body.clientLeft,
    y:event.clientY + document.body.scrollTop - document.body.clientTop
    }

    }
    does that code work "below the fold" ?

  4. #4
    Join Date
    Aug 2009
    Posts
    17
    it works together with other functions to make any object draggable. that code only gets the the x and y mouse position of any object
    Last edited by nazzy; 09-01-2009 at 01:59 AM.

  5. #5
    Join Date
    Aug 2009
    Posts
    20
    Thank you so much Nazzy. Sincere apologies for the late reply. Please bear with one more extreme newbie question now. I have no other source of help on this one.

    So I add the script you posted between
    <script type="text/javascript">
    <!-- Begin
    .
    .
    .
    // End -->
    </script>

    ??

  6. #6
    Join Date
    Aug 2009
    Posts
    20
    I actually did try the above and it doesn't seem to be working. I would really appreciate it if anybody could suggest the correct way of using the code posted by Nazzy. Thank you.

  7. #7
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,687
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
        "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    </head>
    
    <body>
    
    <!-- TWO STEPS TO INSTALL GRAB AND SCROLL PAGE:
    
      1.  Copy the coding into the HEAD of your HTML document
      2.  Add the style element into the BODY tag  -->
    
    <!-- STEP ONE: Paste this code into the HEAD of your HTML document  -->
    
    <HEAD>
    
    <script type="text/javascript">
    <!-- Begin
    /* This script and many more are available free online at
    The JavaScript Source!! http://javascript.internet.com
    Created by: Abraham Joffe :: http://www.abrahamjoffe.com.au/ */
    document.onmousedown = function(){
      var e=arguments[0]||event;
      var x=zxcWWHS()[2]+e.clientX;
      var y=zxcWWHS()[3]+e.clientY;
      document.onmousemove=function(){
      var e=arguments[0]||event;
        window.scroll(x-e.clientX, y-e.clientY);
        return false;
      }
      document.onmouseup=function(){
        document.onmousemove=null;
      }
      return false;
    }
    
    function zxcWWHS(){
     if (window.innerHeight) return [window.innerWidth-10,window.innerHeight-10,window.pageXOffset,window.pageYOffset];
     else if (document.documentElement.clientHeight) return [document.documentElement.clientWidth-10,document.documentElement.clientHeight-10,document.documentElement.scrollLeft,document.documentElement.scrollTop];
     return [document.body.clientWidth,document.body.clientHeight,document.body.scrollLeft,document.body.scrollTop];
    }
    
    
    // End -->
    </script>
    
    
    <!-- STEP TWO: Insert the style element into your BODY tag  -->
    
    <BODY style="cursor: move">
    <div style="width:2000px;height:2000px;" ></div>
    <p><center>
    <font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
    by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
    </center><p>
    
    <!-- Script Size:  1.01 KB -->
    </body>
    
    </html>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  8. #8
    Join Date
    Aug 2009
    Posts
    20
    Omg!!! Thank you so much Vic. Really! I cannot thank you enough. I have been searching and trying random things for ten days now. You made my month.

    Love and respect.

  9. #9
    Join Date
    Aug 2009
    Posts
    20
    Dear Vic/anybody out there...

    My issue was resolved however I now have a new issue as a part of finetuning my website. I am able to successfully grab and drag my horizontal website.

    I now want a slight animation when I drag the page. The experience would emulate iphone scroll I realise. Can I integrate code for this animation in the code above posted by Vic?

    Thanks...

  10. #10
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,687
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
        "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    </head>
    
    <body>
    
    <!-- TWO STEPS TO INSTALL GRAB AND SCROLL PAGE:
    
      1.  Copy the coding into the HEAD of your HTML document
      2.  Add the style element into the BODY tag  -->
    
    <!-- STEP ONE: Paste this code into the HEAD of your HTML document  -->
    
    <HEAD>
    
    <script  type="text/javascript">
    /*<![CDATA[*/
    var scroll={
    
     init:function(){
      var oop=this
    //document.Show.Show0.value=vic++;
      document.onmousedown = function(){ oop.down(); }
      document.onmouseup = function(){ oop.up(); }
     },
    
     down:function(){
      var e=arguments[0]||event;
      this.x=e.clientX;
      this.y=e.clientY;
     },
    
     up:function(){
      var e=arguments[0]||event;
      var x=e.clientX;
      var y=e.clientY;
      this.slide(this.x-x,this.y-y);
    },
    
     slide:function(x,y){
      this.xsf=[this.ws()[0],this.ws()[0]+x];
      this.ysf=[this.ws()[1],this.ws()[1]+y];
      clearTimeout(this.to);
      this.mS=1000;
      this.inc=Math.PI/(2*this.mS);
      this.srttime=new Date().getTime();
      this.cng();
     },
    
     cng:function(){
      var ms=new Date().getTime()-this.srttime;
      window.scrollTo(Math.floor((this.xsf[1]-this.xsf[0])*Math.sin(this.inc*ms)+this.xsf[0]),Math.floor((this.ysf[1]-this.ysf[0])*Math.sin(this.inc*ms)+this.ysf[0]));
      if (ms<this.mS) this.to=setTimeout(function(oop){return function(){oop.cng();}}(this),10);
      else {
       window.scrollTo(this.xsf[1],this.ysf[1]);
      }
     },
    
     ws:function(){
     if (window.innerHeight) return [window.pageXOffset,window.pageYOffset];
     else if (document.documentElement.clientHeight) return [document.documentElement.scrollLeft,document.documentElement.scrollTop];
     return [document.body.scrollLeft,document.body.scrollTop];
     }
    
    }
    
    scroll.init();
    
    /*]]>*/
    </script>
    
    
    <!-- STEP TWO: Insert the style element into your BODY tag  -->
    
    <BODY style="cursor: move">
    <div style="width:2000px;height:2000px;border:solid black 1px" ></div>
    <p><center>
    <font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
    by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
    </center><p>
    </body>
    
    </html>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  11. #11
    Join Date
    Aug 2009
    Posts
    20
    Thank you Vic. This appears to be working perfect. Except, I have to drag the background instead of the content (images) to achieve interaction. Earlier, I was able to click the images and drag the horizontal gallery.

  12. #12
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,687
    the posted script scrolls the window

    post a link to your page so i can see what you want
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  13. #13
    Join Date
    Aug 2009
    Posts
    20
    Here it is!
    http://www.anishaacharya.com/w/
    In fact all the problems I have now are:
    1. The grab and drag gets too cumbersome eventually..A slick slide after the drag might add a good touch to the interactivity
    2. The mouse scroll gets active only after all the images load.
    3. I need the images to vertically align in the center.

    I cannot thank you enough for investing any time in this! Btw this is with the old javascript. With the new one, I have to drag the background instead of the images like now.
    Last edited by grainspirit; 10-23-2009 at 11:07 AM. Reason: addition

  14. #14
    Join Date
    Aug 2009
    Posts
    20
    I don't expect you to help me with all of them. I just stated them in case you would like to help. I'm grateful for any help.

  15. #15
    Join Date
    Aug 2009
    Posts
    20
    Hi again. Sorry, I know this is pushy but I just wanted to know if I should hang around and wait or if this is difficult and I should forget about it. It would just make me move on..Thank you and sorry about spamming you!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles