CODEWITHSUNDEEP
jquerymathif-statement
Jacob Read
Jacob Read

Reputation: 43

Jquery Mathematics

I am having trouble with a mathematical issue. With the if statement I am not sure if that is the correct way to write this? It is not working so I assume it is not. How do I write the if statement to work with my code?

var count = $("#hugewidth li").length;

if($( '#hugewidth' ).css("margin-left") < '-1280*(count-1)'){   

     $('#hugewidth').animate({'margin-left' : '0'});

}

Upvotes: 0

Views: 288

Answers (3)

guest271314
guest271314

Reputation: 1

Try this

   function animateMargin() {
     var count = $("#hugewidth li").length;
     var num = Number($( 'ul' ).css("margin-left").replace(/px|pt|cm|em/g,"")); 
     if (num < 1200 * (count-1)) {   
       return $("#hugewidth").animate({marginLeft : '0px'}, 3000);
     };
   };
   animateMargin();

At the original post -1200 * (count-1), where count is a prospective positive number, for example 5, the result would be -1200 * (5-1), or -4800. In such an instance, if num, or the css margin-left property is any positive "number", the result would prospectively not be <, or less than -4800. Following, the if statement evaluation would return false and the .animate() function would not be called.

Additionally, no duration was set for the .animate() function. In the example above, the css margin-left property's px (or other valid value that may be present) was removed and the value was cast as a Number, the - (mathematical negative symbol or sign) was removed from the if statement, and a duration of 3000 was set for the .animate() function.

jsfiddle http://jsfiddle.net/guest271314/7S9j7/

Edit (updated)

I'd just like the li's to slide to the next after 2 seconds however, once the final li has shown i'd like it to slide back to the first li element. – Jacob Read

Took a quick glance at http://www.read.ventures/ source (html, css, js).

1) html (existing)

<div id="hugewidth">
  <li class="wrap100 page" style="background: url('welcomeimage.png');"></li>
  <li class="wrap100 page" style="background: url('welcomeimage.png');"></li>
  <li class="wrap100 page" style="background: black; height: 340px;"></li>
</div>

It appears that the <li> elements within #hugewidh are not within a <ul> element. Try this (html)

<div id="hugewidth">
  <ul>
  <li class="wrap100 page" style="background: url('welcomeimage.png');"></li>
  <li class="wrap100 page" style="background: url('welcomeimage.png');"></li>
  <li class="wrap100 page" style="background: black; height: 340px;"></li>
  </ul>
</div>

2) css (existing) 

.wrap100 {
position: relative;
float: left; /* not certain if `float` property is required */
vertical-align: top;
overflow: hidden;
width: 1280px; /* `width` set to `1280px`, `animate` `marginLeft` to `-1300px` */
}

3) js (existing)

Not certain about the requirement or operation of $(window).bind() function, or width variable. Additionally, not certain about the effect of the click functions? Not addressed here. Perhaps appropriate for a separate question? Omitted from tests with main.js to achieve the requirement of the present question, and most recent comment (above).

    $(window).bind('resize',function(){
      window.location.href = window.location.href;
    });
    var width = $(window).width();
    var hugewidth =                         
    $( "#slidernavi ul li:nth-child(1)" ).click(function() {
    $('#hugewidth').animate({'margin-left' : 0});
    $(this).css('background', '#62B3EB').siblings().css('background', '#B6B6B6');
    });
    $( "#slidernavi ul li:nth-child(2)" ).click(function() {
    $('#hugewidth').animate({'margin-left' : -1280});
    $(this).css('background', '#62B3EB').siblings().css('background', '#B6B6B6');
    });
    $( "#slidernavi ul li:nth-child(3)" ).click(function() {
    $('#hugewidth').animate({'margin-left' : -1280*2});
    $(this).css('background', '#62B3EB').siblings().css('background', '#B6B6B6');
    });

js (addressing comment clarifying the requirement of the effect)

Try this at main.js

$(document).ready(function() {          
function animateMargin(elem) {
  var elem = $("#hugewidth ul li").eq(0);
  $(elem).siblings().hide(0);
  return $(elem).fadeIn(1000).animate({marginLeft : '-1300px'}, 2000, function() {
    $(elem).css("marginLeft", "0px").appendTo("#hugewidth ul") && animateMargin()
  });
};animateMargin();   
});

jsfiddle http://jsfiddle.net/guest271314/CU3UB/

Hope this helps

Upvotes: 1

bingjie2680
bingjie2680

Reputation: 7773

if($( '#hugewidth' ).css("margin-left") < -1280*(count-1)){   
     $('#hugewidth').animate({'margin-left' : '0'});
}

Upvotes: 0

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324750

Uhm... with all due respect, '-1280*(count-1)' is a string. Remove the quotes if you want a mathematical expression.

Upvotes: 0

Related Questions