CODEWITHSUNDEEP
javascriptjquerysyntax
rootsup
rootsup

Reputation: 315

onclick scroll event - syntax?

Trying to have it scroll based on if it was clicked on the left or right side of the page. Doesn't seem to work.. Perhaps my syntax is incorrect or the method i'm using to find the left or right side of the page is?

with <body onclick="scrollevent()"> :

 <script>
 function scrollevent()
 { 
    var y=0;
    var pwidth = $('#slideshow').width();
    var mouseY = ev.clientY;

    if (mouseY<(pwidth/2) {
        $('#slideshow').animate({scrollLeft: "+=400"});
     }
     else{
        $('#slideshow').animate({scrollLeft: "-=400"});
    }
 }
 </script>

Upvotes: 5

Views: 1642

Answers (4)

Temp
Temp

Reputation: 41

The .animate() method allows us to create animation effects on any numeric CSS property.

http://api.jquery.com/animate/

.scrollLeft() is a jQuery function, not css property.

upd: my bad, as docs says:

In addition to style properties, some non-style properties such as scrollTop and scrollLeft, as well as custom properties, can be animated.

Upvotes: 1

Ram
Ram

Reputation: 144709

You can use pageX and not pageY property of the event object, try the following:

The mouse position relative to the left edge of the document.

$(document).click(function(e){  // or $(document).on('mousemove', function(e){
   var mp = e.pageX;
   var w = $(window).width() / 2;
   if (mp < w) {
        $('#slideshow').animate({scrollLeft: "+=400"});
   } else {
        $('#slideshow').animate({scrollLeft: "-=400"});
   } 
})

Please note that there is a syntax error in your code, you have missed a ):

if (mouseY<(pwidth/2) {

should be:

if ( mouseY < (pwidth/2) ) {

Upvotes: 2

SomeKittens
SomeKittens

Reputation: 39522

The line:

if (mouseY<(pwidth/2) {

is missing a closing ). Try this:

if (mouseY<(pwidth/2)) {

Upvotes: 0

Sasidhar Vanga
Sasidhar Vanga

Reputation: 3404

You are using clientY.

Use clientX instead of clientY to check whether it is clicked on left or right side of the page.

Demo can be found here : http://jsfiddle.net/codebombs/UT9xK/

Upvotes: 0

Related Questions