I can't ever seem to get jQuery working : /

JavaScript
1

I keep trying tutorials and keep failing. Can someone please help me see what I’m doing wrong?

Here is the simple tutorial I was trying to follow:
jQuery for Complete Beginners: Part 1

and here is my code:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jquery</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
$('div p') //selects all paragraphs that exist within a parent div.
$('#something') //selects the element with an id of 'something'
$('.something') //selects the element(s) with a class of 'something'
</script>

<style>
#something{
width: 200px;
height: 200px;
background-color:#F00
}
</style>

<script type="text/javascript"
$('#something').animate({'margin-top': '300px', 'margin-left': '400px'},1000);
</script>

</head>

<body>
<div id="something">YO</div>
</body>
</html>

thanks : )

2

for starters you are referencing version 1. Is there even a version 1 out there? :slight_smile:

Try this and see if it helps.


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">

EDIT: disregard this. I see what they were doing.

3

and this should not be where it is. Remove it.


$('div p') //selects all paragraphs that exist within a parent div.
$('#something') //selects the element with an id of 'something'
$('.something') //selects the element(s) with a class of 'something'

That should do the trick.

4

I tried removing this, but it didn’t help : /
So the

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">

is correct ?

5

full code that does work.


<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jquery</title>

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript" charset="utf-8"></script> 

<style>
#something{
width: 200px;
height: 200px;
background-color:#F00;
}
</style>

<script type="text/javascript">
$(document).ready(function() {
$('#something').animate({'margin-top': '300px', 'margin-left': '400px'},1000);

});

</script>

</head>

<body>
<div id="something">YO</div>
</body>
</html>

You got in there fast with your reply:) I deleted as you don’t really need a call to action i.e the click function, but it is good practise for things that you want moving around on your page.

6

thank you : ) This worked now.

I’m sorry if these questions seem stupid, but I’ve been trying to find the simplest explanation of how to use “jQuery”, but all tutorials still seem like they leave important things out.

So is that how it always works?

  1. 1st you put this in the head
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
  1. then underneath it you put the jquery stuff
<script type="text/javascript">
$(document).ready(function() {

});
 
</script>

What if I want the jQuery on a separate sheet, what’s the best way to link it into the project in Dreamweaver?

7

you need to wrap the jquery in the following


$(document).ready(function() {
    // put all your jQuery goodness in here.
});

Like this

<script type="text/javascript">
$(document).ready(function() {
$('#something').animate({'margin-top': '300px', 'margin-left': '400px'},1000);
});
</script>

Check out this http://www.learningjquery.com/2006/09/introducing-document-ready

8

yes. sorry oversight on me. :slight_smile:

Best way is to view source of the page. ajf basically posted the demo page code.

What do you mean by separate sheet? As long as you reference the library


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>

on the page that needs jQuery it will work.

Then for the specific page you need add the additional functionality you are looking for. In the demo’s case:


<script type="text/javascript">
$(document).ready(function() {
$('#something').animate({'margin-top': '300px', 'margin-left': '400px'},1000);
 
});
 
</script>
9

I’ve heard people suggesting that the .js file is on an external sheet that you reference into the site. Is this correct?

thanks

10

the jQuery js file?

I would suggest using the Google CDN. Chances are your users will already have it cached in their browsers which means less load time on your page.

The jquery reference above is using the Google CDN. Add it to your pages like that. Don’t put it on your server for the reasons I stated.

11

ok thanks : )

12

Always, when I copy the source code into dreamweaver and preview it in a browser, it doesn’t work : / Kinda frustrating. Maybe you can help me out to see what I’m doing wrong. I changed some of the paths to correspond to the new locations they were copied to.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
  <meta http-equiv="Content-type" content="text/html; charset=us-ascii" />
  <title>Moving Boxes</title>

  <link type="text/css" href="movingbox/css/demo.css" media="screen" charset="utf-8" rel="stylesheet"  />
  <link type="text/css" href="movingbox/css/movingboxes.css" media="screen" charset="utf-8" rel="stylesheet"  />

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
  <script type="text/javascript" src="movingbox/js/jquery.movingboxes.js" charset="utf-8"></script>
  <script type="text/javascript">
  $(function(){

   $('#slider-one').movingBoxes({
    startPanel   : 4,    // start with this panel
    wrap         : true, // psuedo wrapping - it just runs to the other end
    width        : 300,  // overall width of movingBoxes
    imageRatio   : 1,    // Image ration set to 1:1 (square image)
    buildNav     : true, // if true, navigation links will be added
    navFormatter : function(){ return "&#9679;"; } // function which returns the navigation text for each panel
   });

   $('#slider-two').movingBoxes({
    startPanel  : 3,     // start with this panel
    width       : 600,   // overall width of movingBoxes
    panelWidth  : .7,    // current panel width adjusted to 50% of overall width
    imageRatio  : 16/9,  // Image ratio set to 16:9
    buildNav     : true, // if true, navigation links will be added
    navFormatter : function(index, panel){ return panel.find('h2 span').text(); }, // function which gets nav text from span inside the panel header
   });

   // Example of how to move the panel from outside the plugin, only works on first selector (Use ID instead of class to target other movingboxes).
   // get: var currentPanel = $('.slider').data('movingBoxes').currentPanel(); // returns # of currently selected/enlarged panel
   // set: var currentPanel = $('.slider').data('movingBoxes').currentPanel(2); // scrolls to 2nd panel & returns 2.

   // Set up demo external navigation links
   var i, t = '', len = $('#slider-one .panel').length + 1;
   for ( i=1; i<len; i++ ){
    t += '<a href="#" rel="' + i + '">' + i + '</a> ';
   }
   $('.dlinks')
    .find('span').html(t).end()
    .find('a').click(function(){
     $('#slider-one').data('movingBoxes').currentPanel( $(this).attr('rel') );
     return false;
    });

   // Report events to firebug console
   $('.slider').bind('initialized initChange beforeAnimation completed',function(e, slider, tar){
    // show object ID + event in the firebug console
    if (window.console && window.console.firebug){
     var txt = slider.$el[0].id + ': ' + e.type + ', now on panel #' + slider.curPanel
     txt += (typeof(tar) == 'undefined') ? '' : ', targeted panel is ' + tar;
     console.debug( txt );
    }
   });

  });
  </script>
</head>

<body>
 <div id="wrapper">
  <div id="title">
   <a href="http://github.com/chriscoyier/MovingBoxes"><img src="http://www.sitepoint.com/forums/images/movingboxes.png" alt="moving boxes" /></a>
  </div>

  <br><br>
  <div class="dlinks">
   Go to Panel: <span></span>
  </div>
  <br><br>

  <!-- Slider #1 -->
  <div class="slider" id="slider-one">

   <div class="panel">
    <img src="http://www.sitepoint.com/forums/images/1.jpg" alt="picture" />
    <h2>News Heading</h2>
    <p>A very short exerpt goes here... <a href="http://flickr.com/photos/justbcuz/112479862/">more</a></p>
   </div>

   <div class="panel">
    <img src="http://www.sitepoint.com/forums/images/2.jpg" alt="picture" />
    <h2>News Heading</h2>
    <p>A very short exerpt goes here... <a href="http://flickr.com/photos/joshuacraig/2698975899/">more</a> and a whole lot more text goes here, so we can see the height adjust.</p>
   </div>

   <div class="panel">
    <img src="http://www.sitepoint.com/forums/images/3.jpg" alt="picture" />
    <h2>News Heading</h2>
    <p>A very short exerpt goes here... <a href="http://flickr.com/photos/ruudvanleeuwen/468309897/">more</a></p>
   </div>

   <div class="panel">
    <img src="http://www.sitepoint.com/forums/images/4.jpg" alt="picture" />
    <h2>News Heading</h2>
    <p>A very short exerpt goes here... <a href="http://flickr.com/photos/emikohime/294092478/">more</a></p>
   </div>

   <div class="panel">
    <img src="http://www.sitepoint.com/forums/images/5.jpg" alt="picture" />
    <h2>News Heading</h2>
    <p>A very short exerpt goes here... <a href="http://www.flickr.com/photos/fensterbme/499006584/">more</a></p>
   </div>

   <div class="panel">
    <img src="http://www.sitepoint.com/forums/images/6.jpg" alt="picture" />
    <h2>News Heading</h2>
    <p>A very short exerpt goes here... <a href="#">more</a></p>
   </div>

   <div class="panel">
    <img src="http://www.sitepoint.com/forums/images/7.jpg" alt="picture" />
    <h2>News Heading</h2>
    <p>A very short exerpt goes here... <a href="#">more</a></p>
   </div>

  </div> <!-- end Slider #1 -->

  <br><br>

  <!-- Slider #2 (images of slider #1 reversed) -->
  <div class="slider" id="slider-two">

   <div class="panel">
    <img src="http://www.sitepoint.com/forums/images/5.jpg" alt="picture" />
    <h2>News Heading - <span>Lisa</span></h2>
    <p>A very short exerpt goes here... <a href="http://flickr.com/photos/fensterbme/499006584/">more</a></p>
   </div>

   <div class="panel">
    <img src="http://www.sitepoint.com/forums/images/4.jpg" alt="picture" />
    <h2>News Heading - <span>Monica</span></h2>
    <p>A very short exerpt goes here... <a href="http://flickr.com/photos/emikohime/294092478/">more</a></p>
   </div>

   <div class="panel">
    <img src="http://www.sitepoint.com/forums/images/3.jpg" alt="picture" />
    <h2>News Heading - <span>Lin</span></h2>
    <p>A very short exerpt goes here... <a href="http://flickr.com/photos/ruudvanleeuwen/468309897/">more</a></p>
   </div>

   <div class="panel">
    <img src="http://www.sitepoint.com/forums/images/2.jpg" alt="picture" />
    <h2>News Heading - <span>Shiela</span></h2>
    <p>A very short exerpt goes here... <a href="http://flickr.com/photos/joshuacraig/2698975899/">more</a></p>
   </div>

   <div class="panel">
    <img src="http://www.sitepoint.com/forums/images/1.jpg" alt="picture" />
    <h2>News Heading - <span>Joanne</span></h2>
    <p>A very short exerpt goes here... <a href="http://flickr.com/photos/justbcuz/112479862/">more</a></p>
   </div>

  </div>

  <br><br>

</div> <!-- end wrapper -->

</body>
</html>
13

I don’t think Dreamweaver has a JS engine?

You can put your JavaScript in a separate external file, just make sure you load the jquery file on the page before you load your new js file

14

You can do that easily. For example, instead of having this in the head of your page …

<script type="text/javascript">
$(document).ready(function() {
$('#something').animate({'margin-top': '300px', 'margin-left': '400px'},1000);
});
</script>

… you could have this instead:

<script type="text/javascript" src="movingbox/js/myscript.js" charset="utf-8"></script>

… where myscript.js is a file you create with this code in it:

$(document).ready(function() {
$('#something').animate({'margin-top': '300px', 'margin-left': '400px'},1000);
});

As for Dreamweaver, there’s no point in trying to view your pages in Dw. Just double click on your home page (index.html or whatever) and view it in any browser. Then you’ll know what you’re really dealing with.

PS: This is really a JavaScript thread, so I’m moving it to that forum. :slight_smile:

15

I have uploaded my files to my host and my homepage is up and running, but I havn’t linked the navigation bar to the other pages yet.

Are you suggesting that everytime I want to preview something, I should upload that page to my host and preview on the actual web?

16

Can you not view the page locally?

17

I downloaded the “moving box” tutorial, but when I open it in Dreamweaver and press “preview in browser”, it doesn’t work as it does in the demo. I’m not sure what I’m doing wrong :confused:

18

Is there a reason you are using dw instead of a text editor like notepad or notepad++ (PC), Textmate etc (Mac)
Are all the files in the correct places i.e. if the link to your JavaScript has src=“script/myscript.js” do you have a folder with an index.html then a folder called script with a file called myscript.js in it?

19

Yes - dev sites are common practice

20

Well, you can do that, but no, I’m suggesting just opening the files as they are on your computer and viewing them in your browser of choice. Just right click on your .html file and open it with any browser and you’ll see the real results of your work. This works fine for HTML, CSS and JS. It can also work with languages like PHP if you set up a local server environment like WAMP or MAMP.