CODEWITHSUNDEEP
javascriptjqueryhtml
Twistar
Twistar

Reputation: 782

Scrolling through div with JavaScript

I am trying to show one div at a time and scroll trough them over and over. I have modified a Fiddle I found and I got it working on fiddle, but for some reason I cant implement a simple test page with the fiddle. It simply does not scroll trough the divs.

Here is the fiddle: http://jsfiddle.net/Twistar/d6nZP/86/

And here is my implemented code:

<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="styles/styles.css">
    <script type="text/javascript" src="includes/headers/jquery.min.js"></script>
    <script type="text/javascript">

    function go() {
        var visibleBox = $('#container .boxes:visible');
        visibleBox.hide();
        var nextToShow = $(visibleBox).next('.boxes:hidden');
        if (nextToShow.length > 0) {
            nextToShow.show();
        } else {
            $('#container .boxes:hidden:first').show();
        }
        return false;
    }​
        setInterval(go, 1000);​
    </script>
</head>

<body>
    <div id="container">
        <div class="boxes" style="display:">first box</div>
        <div class="boxes" style="display:none;">second box</div>
        <div class="boxes" style="display:none;">third box</div>
        <div class="boxes" style="display:none;">forth box</div>
    </div>
</body>

Can anyone please tell me what i am doing wrong?

Upvotes: 2

Views: 675

Answers (4)

Nerdroid
Nerdroid

Reputation: 13996

you need to wrap your javascripts code with the ready event $(document).ready() or use the short version $() and that will only excecute your codes when the page is finished loading so your codes should looks something like that

$(function(){
   function go() {
        var visibleBox = $('#container .boxes:visible');
        visibleBox.hide();
        var nextToShow = $(visibleBox).next('.boxes:hidden');
        if (nextToShow.length > 0) {
            nextToShow.show();
        } else {
            $('#container .boxes:hidden:first').show();
        }
        return false;
    }​
        setInterval(go, 1000);​

});

Upvotes: 2

Jai
Jai

Reputation: 74738

I am guessing that you have a working fiddle but on your local test page its not working

your fiddle works because you got selected the default handlers from left handside dropdowns and its not working on your test page because your jquery handler is missing.

the reason is you are missing the document ready handler here:

$(function(){
    setInterval(go, 1000);
});

try replacing with this one and see if helps.

Upvotes: 2

balexandre
balexandre

Reputation: 75113

I would probably simplyfy and would go with something like this: http://jsbin.com/osepim/1/

$(function() {

  // hide all and show first
  $(".boxes").hide().first().show();

  setInterval(function(){
    moveNext();
  }, 1000);

});

function moveNext() {
  var box = $(".boxes:visible"),
      nextBox = box.next();

  if(nextBox.length === 0)
    nextBox = $(".boxes:first");

  //hide all
  $(".boxes").hide();

  // show next
  nextBox.fadeIn();
}

Upvotes: 2

TheBlackBenzKid
TheBlackBenzKid

Reputation: 27105

<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="styles/styles.css" />
<style type="text/css">.boxes{display:none}</style>
</head>

<body>
<div id="container">
        <div class="boxes">first box</div>
        <div class="boxes">second box</div>
        <div class="boxes">third box</div>
        <div class="boxes">forth box</div>
</div>
<script type="text/javascript" charset="utf-8" src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 
<script type="text/javascript">
    function go() {
        var visibleBox = $('#container .boxes:visible'); // GET THE DIV
        visibleBox.hide();
        var nextToShow = $(visibleBox).next('.boxes:hidden');
        if (nextToShow.length > 0) { // SHOW NEXT ITEM
            nextToShow.show();
        } else {
            $('#container .boxes:hidden:first').show();
        }
        return false;
    }​
    setInterval(go, 1000);​ // MS SECOND OF LOOP
</script>
</body>
</html>

Upvotes: 1

Related Questions