SitePoint Sponsor

User Tag List

Results 1 to 22 of 22
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2011
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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:

    HTML 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. #2
    SitePoint Addict AtSea webdesign's Avatar
    Join Date
    May 2010
    Location
    Newark, Delaware
    Posts
    283
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    for starters you are referencing version 1. Is there even a version 1 out there?

    Try this and see if it helps.

    Code:
    <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. #3
    SitePoint Addict AtSea webdesign's Avatar
    Join Date
    May 2010
    Location
    Newark, Delaware
    Posts
    283
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    and this should not be where it is. Remove it.

    Code:
    $('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. #4
    SitePoint Enthusiast
    Join Date
    Feb 2011
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AtSea webdesign View Post
    and this should not be where it is. Remove it.

    Code:
    $('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.
    I tried removing this, but it didn't help : /
    So the

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

  5. #5
    SitePoint Member
    Join Date
    Nov 2007
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you need to wrap the jquery in the following
    Code CSS:
    $(document).ready(function() {
        // put all your jQuery goodness in here.
    });

    Like this
    Code JavaScript:
    <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/0...document-ready
    Last edited by ajf; Mar 4, 2011 at 13:08. Reason: added link

  6. #6
    SitePoint Member
    Join Date
    Nov 2007
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    full code that does work.
    Code HTML4Strict:
    <!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.

  7. #7
    SitePoint Enthusiast
    Join Date
    Feb 2011
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ajf View Post
    you need to wrap the jquery in the following
    Code CSS:
    $(document).ready(function() {
        // put all your jQuery goodness in here.
    });

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

    Check out this Introducing $(document).ready() Learning jQuery - Tips, Techniques, Tutorials
    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
    HTML Code:
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
    </script>
    2. then underneath it you put the jquery stuff
    HTML Code:
    <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?

  8. #8
    SitePoint Addict AtSea webdesign's Avatar
    Join Date
    May 2010
    Location
    Newark, Delaware
    Posts
    283
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yes. sorry oversight on me.

    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

    Code:
    <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:

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

  9. #9
    SitePoint Enthusiast
    Join Date
    Feb 2011
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AtSea webdesign View Post
    yes. sorry oversight on me.

    What do you mean by separate sheet? As long as you reference the library
    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. #10
    SitePoint Addict AtSea webdesign's Avatar
    Join Date
    May 2010
    Location
    Newark, Delaware
    Posts
    283
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #11
    SitePoint Enthusiast
    Join Date
    Feb 2011
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AtSea webdesign View Post
    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.
    ok thanks : )

  12. #12
    SitePoint Enthusiast
    Join Date
    Feb 2011
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

    HTML Code:
    <!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 "●"; } // 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. #13
    SitePoint Enthusiast
    Join Date
    Jul 2010
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #14
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by bigbonthabeat View Post
    What if I want the jQuery on a separate sheet, what's the best way to link it into the project in Dreamweaver?
    You can do that easily. For example, instead of having this in the head of your page …

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

    Code:
    <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:

    Code:
    $(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.

  15. #15
    SitePoint Enthusiast
    Join Date
    Feb 2011
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post

    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.
    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. #16
    SitePoint Enthusiast AlexHedley's Avatar
    Join Date
    Dec 2010
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can you not view the page locally?
    Alex Hedley
    TechHelp Team Leader
    599CD.com

  17. #17
    SitePoint Enthusiast
    Join Date
    Feb 2011
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AlexHedley View Post
    Can you not view the page locally?
    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 :/

  18. #18
    SitePoint Enthusiast AlexHedley's Avatar
    Join Date
    Dec 2010
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?
    Alex Hedley
    TechHelp Team Leader
    599CD.com

  19. #19
    SitePoint Enthusiast
    Join Date
    Jul 2010
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by bigbonthabeat View Post
    Are you suggesting that everytime I want to preview something, I should upload that page to my host and preview on the actual web?
    Yes - dev sites are common practice

  20. #20
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by bigbonthabeat View Post
    Are you suggesting that everytime I want to preview something, I should upload that page to my host and preview on the actual web?
    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.

  21. #21
    SitePoint Enthusiast
    Join Date
    Feb 2011
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AlexHedley View Post
    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?
    The reason I'm using Dreamweaver is because that is the program I'm using to create the site.

    I thought my files were in the correct places and I thought I knew how to link files properly because I've read and watched some tutorials, but that is why I posted my code just so someone could look at it and see if it was correct.

    My project folder is set up this way:

    ROOT > movingbox > js

  22. #22
    SitePoint Enthusiast AlexHedley's Avatar
    Join Date
    Dec 2010
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    One way to check all the files are linked are if you view the page in Firefox then view the source, the linked files should be hyperlinks and check each one shows the source to them, if you get a 404 then you know something is incorrect


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •