Home/ Questions/Q 8850529
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T12:55:28+00:00

I am not jQuery savy so this is probably my problem, but I want

  • 0

I am not jQuery savy so this is probably my problem, but I want to use this:

http://jsfiddle.net/hGcV2/1/

however the only problem is that I can’t even get it to work outside jsfiddle.
I have implemented jQuery before so I thought this was no different but seems like my low knowledge on this is getting the best of me.

HTML

<head>

<link rel="stylesheet" href="awwyea.css" type="text/css" media="all" >

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">
</script>
<script src="yay.js"></script>
</head>
<body>
<div id="cycler">      
<div>A</div>        
<div>B</div>        
<div>C</div>        
<div>D</div>        
<div>E</div>        
<div>F</div>        
<div>G</div>        
<div>H</div>        
<div>J</div>      
</div>
</body>
</html>

CSS

#cycler{
  height:5em;
  overflow:hidden;
  border:1px solid gray;
}​

jQuery

function cycle($item, $cycler){
setTimeout(cycle, 2000, $item.next(), $cycler);

$item.slideUp(1000,function(){
    $item.appendTo($cycler).show();        
});

 }

cycle($('#cycler div:first'),  $('#cycler'));​

So simply put, why is it that when I run this code in a browser (chrome IE FF) using notepad++, with all the files in the same folder do I just have a static none scrolling:

A
B
C
D

Something just isn’t working.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Can’t really take credit for this… I think j08691 nailed it.

    You need to put the code in a jQuery ready call, since the elements have not been loaded when the script tries to run. You have the script (yay.js) loaded in the head (before the HTML elements in the body). So the script fails.

    In yay.js you would just wrap the start code like this (anything that requires the HTML document to have finished loading):

    jQuery(document).ready(function(){
    cycle($('#cycler div:first'),  $('#cycler'));​
});

    Or shorthand syntax

    jQuery(function(){
    cycle($('#cycler div:first'),  $('#cycler'));​
});

    JSFiddle will by default place all JavaScript code to run on window onload.
    You can make JSFiddle work like your HTML document locally by simply changing the Javascript wrapping method.

    If you change it to “no wrap (head)” you will need to add the jQuery document ready function or window onload to make the example work in JSFiddle as well.

    enter image description here

    • 0