External JQuery/CSS Issues...

Discussion in 'jQuery' started by HUMMIKE, Aug 3, 2011.

0
  1. #1
    Hi All,

    Brand new to the forum and almost as new to JQuery! I was going through this tutorial today: (http://api.jquery.com/queue/) and I had no problem understanding the syntax. I pasted the code to a new file and it worked perfectly. The problem came when I tried to reproduce the results in separate HTML/CSS/JS pages.... Being fairly new to JS I assume there's a minor issue with the way I've composed the external file and that's causing the problems. Anyways, there isn't much code, and it's mostly pasted from the aforementioned tutorial. I've shown my work below. All I see on the screen is the red text and the red square, but no jazz. Being fairly confident with my HTML/CSS, I think my JS file sucks. Your help is greatly appreciated!

    THANKS!!

    
[B]test.html[/B]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
    <title>TEST</title>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="animate.js"></script>
    <link href="master.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p>The queue length is: <span id="number"></span></p>
<div id="shape"></div>
</body>
</html>

[B]master.css[/B]

p{
color:red;
}

#shape{
    position: fixed;
    height: 40px;
    width: 40px;
    background: red;
}

[B]animate.js[/B]

var #shape = $("#shape");

function runIt() {
  #shape.show("slow");
  #shape.animate({left:'+=200'},2000);
  #shape.slideToggle(1000);
  #shape.slideToggle("fast");
  #shape.animate({left:'-=200'},1500);
  #shape.hide("slow");
  #shape.show(1200);
  #shape.slideUp("normal", runIt);
}

function showIt() {
  var n = #shape.queue("fx");
  $("#number").text( n.length );      
  setTimeout(showIt, 100);
}

runIt();
showIt();
    Code (markup):
     
    HUMMIKE, Aug 3, 2011 IP
  2. freelancewebaz

    freelancewebaz Well-Known Member

    Messages:
    976
    Likes Received:
    23
    Best Answers:
    1
    Trophy Points:
    145
    #2 
    
[B]test.html
[/B]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
    <title>TEST</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script type="text/javascript" src="animate.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            runIt();
            showIt();
        });
    </script>
    <link href="master.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p>The queue length is: <span id="number"></span></p>
<div id="shape"></div>
</body>
</html>

[B]master.css
[/B]p{color:red;
}


#shape{
    position: fixed;
    height: 40px;
    width: 40px;
    background: red;
}

[B]animate.js
[/B]function runIt() {
    $("#shape").show();
    $("#shape").animate({left:'+=200'}, 2000);
    $("#shape").slideToggle(1000);
    $("#shape").slideToggle("fast");
    $("#shape").animate({left:'-=200'}, 1500);
    $("#shape").hide("slow");
    $("#shape").show(1200);
    $("#shape").slideUp("normal", runIt);
}


function showIt() {
    var n = $("#shape").queue("fx");
    $("span").text(n.length);
    setTimeout(showIt, 100);
}
    Code (markup):
    Here's what you need. I tested it and it works as it should. Hope this helps.
     
    freelancewebaz, Aug 4, 2011 IP