CODEWITHSUNDEEP
javascriptjqueryanimation
user1736617
user1736617

Reputation:

Buttons that move a DIV left or right

I am attempting to make a div scroll left or right either with a mouseover effect or on-click. However, I am at a loss as to what is going wrong.

Here was my attempt to do this simply:

 <head>
    <style>
    #innerscroll{
    margin-right:0px;
    }
    </style>
</head>
<body>
<div id="innerscroll"></div>
<img src="right.jpg" 
onmouseover="document.getElementById('innerscroll').style.marginRight = setInterval(('value' + 1), 100);" />
</body>

Now, trying this, I'm wondering why it doesn't work. What am I doing wrong?

I also tried a more complex approach that also failed. Here's the code for that: 

    $('.nav-next').click(function(e) {
        e.preventDefault();
        $('#innerscroll').animate({
            'margin-right' : '100px'    
        });                 
    });
    $('.nav-previous').click(function(e) {
        e.preventDefault();
        $('#innerscroll').animate({
            'margin-right' : '-100px'
        });                 
    });

My last question was closed because I guess I was not specific enough. Whatever details you need please ask for and I'll edit the question!

Edit: I have the option of using jQuery but I would rather not.

Edit2: I am using setInterval to time the mouseover effect. I am thinking that it will move via mouseover or it will move via a click event.

Upvotes: 2

Views: 5114

Answers (5)

Anoop
Anoop

Reputation: 23208

You should use .style.paddingRight instead of .style.padding-right. jsfiddle

Modified code: 

<img src="right.jpg" 
onmouseover="onmouseoveronImge();" />

Since you are using jQuery you can attach mouseover event as below

<script>
  $('.nav-next').click(function(e) {
    e.preventDefault();
    $('#innerscroll').animate({
        'margin-left' : '+=100px'    
    });                 
});
$('.nav-previous').click(function(e) {
    e.preventDefault();
    $('#innerscroll').animate({
        'margin-left' : '-=100px'
    });                 
});
 function onmouseoveronImge(){
       $('#innerscroll').animate({
          'margin-left': '+=100px'    
      });
}
</script>

Note: I don't think you want to use value return by setInterval. You should explain it in your question why you are using it.

Upvotes: 1

User 1058612
User 1058612

Reputation: 3819

First, are you using the jQuery UI library? Your second example looks like you might.

Try this, does it do something similary to what you are trying to accomplish?

<div id="innerscroll">
  Some Content...
</div>

<div class="nav-next>
  Next
</div>

<div class="nav-previous">
  Previous
</div>

<script type="text/javascript">
  $('.nav-next').click(function(e) {
      $('#innerscroll').animate({
          right: 100    
      });                 
  });

  $('.nav-previous').click(function(e) {
      $('#innerscroll').animate({
          left: 100
      });                 
  });
</script>

If not, your example looks like you are doing a couple things:

  • Setting the padding with CSS
  • Setting padding on mouseover

Is that what you want to do?

Upvotes: 0

Richard Neil Ilagan
Richard Neil Ilagan

Reputation: 14747

If you have markup like:

<div id="container">
    <div id="content">
    </div>
</div>

Setting the padding on either #container or #content will not make the inner div move. You want to set the margin on the inner div to make it scroll horizontally, and set overlay:hidden on the outer div.

Upvotes: 0

Inferpse
Inferpse

Reputation: 4145

Padding can't be negative value. Animate margin instead. So your code should look like this:

 $('.nav-next').click(function(e) {
    e.preventDefault();
    $('#innerscroll').animate({
        'margin-left' : '100px'    
    });                 
});
$('.nav-previous').click(function(e) {
    e.preventDefault();
    $('#innerscroll').animate({
        'margin-left' : '-100px'
    });                 
});​

Working jsfiddle here: http://jsfiddle.net/vqzrY/

Upvotes: 0

user1726861
user1726861

Reputation:

My solution is using jquery too, like this:

using 2 buttons, one for left move and other for right move

$('#innerscroll').animate({
'marginLeft' : "+=50px"
});

and

$('#innerscroll').animate({
    'marginLeft' : "-=50px"
});

you can make a function and pass the value to it.

Upvotes: 1

Related Questions