Question

Please find the code at http://jsfiddle.net/wlogeshwaran/NGL8P/4/

Here i want to make the ‘hi’ , ‘hello’ invisible , when it is out of that green box.
What should I do to make them disappear when they are out of the green box.

Thanks in Advance.

Answer 1

I would change it over to div based instead of li based so you can reuse the same css class instead of creating a new style for each one. The updated code can be found by going http://jsfiddle.net/NGL8P/21/

Javascript

Cleaned up abit since changing html

$("#right").click(function(){
  $(".slideHolder").animate({"left": "+=100px"}, "slow");
});

$("#left").click(function(){
  $(".slideHolder").animate({"left": "-=100px"}, "slow");
});

$(document).ready(function () {
  var TotalWidth = 0;
  $('.slides').each(function () {
    TotalWidth = TotalWidth + $(this).width();
  });
  $('.slideHolder').css({width: TotalWidth+"px"});
});​

HTML

<button id="left">left</button> <button id="right">right</button>
<div class="webpage">
  <div class="block">
    <div class="slideHolder">    
      <div class="slides">hi</div>
      <div class="slides">hello</div>
    </div>
  </div>
</div>

CSS

.block {height:100px;width:100px;position:absolute;left:100px;background:green;overflow: hidden;}
.slides {position:relative;float:left;height:100px;width:100px;}
.slideHolder {position:absolute;left:0;}

​