0

Solved (see below)

$(function () {
var textHi = $('#text').height();
var moveIt = textHi / 5;
var margH = parseInt(("#text").css("marginTop"));
margH = Math.abs(margH); 

  $("#down").mousehold(function(){
    if (margH === textHi) {
  return false;
    } else {
  $("#text").animate({marginTop: '-='moveIt}, 500);     
    }
  });


  $("#up").mousehold(function(){
    if (margH === 0){
  return false;
    } else {
  $("#text").animate({marginTop: '+='moveIt}, 500);
    }
  });
});

I have two buttons either side of a DIV. It works when I use regular numbers to increment the div up or down and stop/start it based on a simple incrementing variable.

Although, because of the different sizes the DIV can be, varying amounts of content, I wanted to pick up the current div height (textHi), then divide it by an amount, ie 5 (moveIt), and then use this variable to move the div up and down on the event. I then wanted to get the current margin-top value and use that as an indicator of where the div is, ie, when the margin top is '0' the up button doesn't work, as this will push it down too far. Or once the margin top has become equal (negatively, but I convert this to positive as there is no actual 'positive' margin top) it stops going down further as it will make the div scrolling forever.

For some reason, the variables are working and the increment is not happening.

Any ideas would be great, thanks.

With the direction of answers, solved it like this:

$(function () {
  var textHi = $('#text').height();
  var moveIt = textHi / 8;
  var timing = moveIt * 5;
  var intVal = 0;
    $("#down").mousehold(function(){
      if (intVal === 7) {
        return false;
      } else {
        $("#text").animate({marginTop: '-=' + moveIt}, timing);
        intVal = intVal + 1;
      }
    });


    $("#up").mousehold(function(){
      if (intVal == 0){
    return false;
      } else {
        $("#text").animate({marginTop: '+=' + moveIt}, timing);
        intVal = intVal - 1;
      }
    });
});

As you can see, I used a incrementing variable to initiate the animation. As the div scrolls down it reaches 7/8th of its total height and stops. If the increment is ever 0 it will not scroll up.

Louis McSellout
  • 5
  • 3

1 Answers1

1

parseInt(("#text").css("marginTop")); is missing a $. It should be parseInt($("#text").css("marginTop"));.

$("#text").animate({marginTop: '-='moveIt}, 500); is also incorrect, you are missing the + symbol to concoct your string. It should be: $("#text").animate({marginTop: '-=' + moveIt}, 500);

If this does not solve your issue then I suggest setting-up a JSFiddle of your code.

Jasper
  • 75,717
  • 14
  • 151
  • 146
  • Thanks, I can get it to move down, but not sure if it is moving too far. Also, clicking the top still doesn't work. – Louis McSellout Feb 08 '12 at 01:10
  • if `var margH = parseInt(("#text").css("marginTop"));` resolves to zero then `if (margH === 0){` will always be true and `$("#text").animate({marginTop: '+='moveIt}, 500);` won't run. Try setting the `margH` variable to some static number to test. – Jasper Feb 08 '12 at 01:23
  • I solved this one by using the fact that I divide the div height to determine when it should stop and start, rather basing it on the Margin-Top size. – Louis McSellout Feb 08 '12 at 01:33