Results 1 to 8 of 8

Thread: jquery novice questions

  1. #1

    Join Date
    Dec 2004
    Location
    Ames, Iowa
    Posts
    33
    Rep Power
    14

    jquery novice questions

    Hi,

    I have zero experience with jquery, but lots of experience with web design.

    I created a menu system for my powweb hosted site using pure html and css. I want to revamp and modernize the menus and thought now would be a good time to learn jquery. I like learning new stuff, and also because it seems every job description I look at wants jquery experience.

    Would navigation and menus be a good or bad place to start learning jquery?

    Can someone out there that has experience with jquery point me in the right direction, like jquery step #1.

    Any tools available on powweb.com to help me with jquery basics?

    Thanks.

  2. #2
    Thinkin' out loud again Builder's Avatar
    Join Date
    Nov 2002
    Location
    Illinois
    Posts
    2,088
    Rep Power
    20
    Kinda in the same boat as you. There's a lesson on jquery at w3schools. Haven't gone through it yet. I have begun using jquery on a couple of sites. Mostly prepackaged "photo gallery" scripts. That stuff is pretty easy to deal with for the most part. Call the appropriate jquery library/libraries, plop in the variables via a small config script and you're good to go. Perhaps you can find something similar for navigation that will allow you to do some "hacking" and learning along the way. As far as I know there's nothing on powweb.com having to do with jquery.

    Good luck,
    Kevin
    A good friend will come and bail you out of jail...
    but a true friend will be sitting next to you saying,
    "Damn... that was fun!"

  3. #3

    Join Date
    Dec 2004
    Location
    Ames, Iowa
    Posts
    33
    Rep Power
    14

    Smile

    Thanks Kevin,

    I found this jquery navigation that I thought might be a good place to start:

    http://tympanus.net/Tutorials/FixedNavigationTutorial/

    the tutorial is here: http://tympanus.net/codrops/2009/11/...uery-tutorial/

    The html and css are very similar to what I have on my site already. What I have not done is the javascript and jquery, which animates the menu.

    This menu has one short javascript function which I have pasted below.

    My question is: What I am missing is: what and where to insert a line or lines that connect or call to jquery ?? and what parts below are jquery? assume it is the .animate


    $(function() {

    $('#navigation a').stop().animate({'marginLeft':'-85px'},1000);

    $('#navigation > li').hover(
    function () {
    $('a',$(this)).stop().animate({'marginLeft':'-2px'},200);
    },
    function () {
    $('a',$(this)).stop().animate({'marginLeft':'-85px'},200);
    }
    );
    });

    Thanks again.

  4. #4
    Thinkin' out loud again Builder's Avatar
    Join Date
    Nov 2002
    Location
    Illinois
    Posts
    2,088
    Rep Power
    20
    From looking at the source, it seems that the script you quote is the "config" stuff. If you look at the index.html file included in the source zip file you'll see it at the bottom of the page. It's jQuery, but one must remember that jQuery is a javascript library, so everything you see is in a sense javascript. Weird, I know, but that's my understanding.

    The full source:
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
        <head>
            <title>Fixed Navigation - Codrops</title>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
            <link rel="stylesheet" href="css/style.css" type="text/css" charset="utf-8"/>
            <script type="text/javascript" src="jquery-1.3.2.js"></script>
        </head>
        <style>
            body{
                background:#fff url(desc.png) no-repeat 50px 100px;
                font-family:Arial;
                height:2000px;
            }
            .header
            {
                width:600px;
                height:56px;
                position:absolute;
                top:0px;
                left:25%;
                background:#fff url(title.png) no-repeat top left;
            }
            a.back{
                width:256px;
                height:73px;
                position:fixed;
                bottom:15px;
                right:15px;
                background:#fff url(codrops_back.png) no-repeat top left;
            }
            .scroll{
                width:133px;
                height:61px;
                position:fixed;
                bottom:15px;
                left:150px;
                background:#fff url(scroll.png) no-repeat top left;
            }
            .info{
                text-align:right;
    
            }
        </style>
        <body>
            <div class="header"></div>
            <div class="scroll"></div>
            <ul id="navigation">
                <li class="home"><a href="" title="Home"></a></li>
                <li class="about"><a href="" title="About"></a></li>
                <li class="search"><a href="" title="Search"></a></li>
                <li class="photos"><a href="" title="Photos"></a></li>
                <li class="rssfeed"><a href="" title="Rss Feed"></a></li>
                <li class="podcasts"><a href="" title="Podcasts"></a></li>
                <li class="contact"><a href="" title="Contact"></a></li>
            </ul>
    
            <div class="info">
                <a class="back" href="http://www.codrops.com"></a>
                <a href="http://dryicons.com">Icons by DryIcons.com</a>
            </div>
    
            <script type="text/javascript">
                $(function() {
                    $('#navigation a').stop().animate({'marginLeft':'-85px'},1000);
    
                    $('#navigation > li').hover(
                        function () {
                            $('a',$(this)).stop().animate({'marginLeft':'-2px'},200);
                        },
                        function () {
                            $('a',$(this)).stop().animate({'marginLeft':'-85px'},200);
                        }
                    );
                });
            </script>
        </body>
    </html>
    Note the "script" tags near the end as well as calling the "jquery-1.3.2.js" library in the <head>. Also note that you must have that library uploaded to your site, in the top htdocs directory. There are also ways of calling it from jQuery or Google which may be advantageous to your users since they may already have that library cached.

    Good luck,
    Kevin
    A good friend will come and bail you out of jail...
    but a true friend will be sitting next to you saying,
    "Damn... that was fun!"

  5. #5

    Join Date
    Dec 2004
    Location
    Ames, Iowa
    Posts
    33
    Rep Power
    14
    It never occurred to me to just view the page source of that menu jquery tutorial page (duh). Thanks for pointing that out to me. This does help a lot though. Putting the pieces of the puzzle together now.

    So it looks like I just add a single line of code to the <head> of the html page like this:

    <script type="text/javascript" src="jquery-1.3.2.js"></script>

    Question: The jquery-1.3.2.js library downloaded from someplace, like maybe http://jquery.com/download/ ?

    Question: I don't see the 1.3.2 library on this download page so that is apparently a little old. Should I use the latest greatest jquery library or what is the normal thing to do?

    Question: Then put the jquery library in the same directory as the html for this to work. Is that correct?

    You say I can call jquery from a common place like jquery.com? I'm thinking you are correct it probably will be cached on the internet since it is so popular.


  6. #6
    Thinkin' out loud again Builder's Avatar
    Join Date
    Nov 2002
    Location
    Illinois
    Posts
    2,088
    Rep Power
    20
    http://tympanus.net/codrops/2009/11/...uery-tutorial/

    Click on the "Download Source" link on the above page . Everything you need is in there, including the jquery-1.3.2.js library.

    Yeah, I think 1.3.2 might be a bit old, but I don't know what might happen with a newer version. I'm using 1.7 for photo galleries. I think 1.9.x is current. Again, I don't know if that will play well with your navigation thing.

    What I meant by caching was the browser cache. If you call the library from Google or jQuery, it's likely the user has been to another site using that same library for something. The browser says, "OK, I've already got this cached I don't need to download it." If you're hosting the library on your site however, the browser might download it again since it's from your site and not Google.

    My gallery script uses 1.7 by calling it from Google:
    Code:
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
    You might go poking around there to find 1.3.2

    That's the beauty of using these "common libraries". You can leverage the code for very little overhead.

    Good luck,
    Kevin
    A good friend will come and bail you out of jail...
    but a true friend will be sitting next to you saying,
    "Damn... that was fun!"

  7. #7

    Join Date
    Dec 2004
    Location
    Ames, Iowa
    Posts
    33
    Rep Power
    14

    Lightbulb

    Moving forward with jQuery.

    Found a set of 200 great jQuery tutorials by phpacademy.org starts out at the novice level in tutorial 1 and works its way up to more advanced.

    https://www.youtube.com/watch?v=GNb8...FBA8CE574044B6

    Each tutorial is a short 2 to 6 min. The novice should start with tutorial 1 which explains how to download or reference jQuery.

    Here is what I found out so far:

    jQuery is extremely popular and powerful, most well known websites use it.

    Yes, jQuery.com is a javascript library that you can call with one line of code

    example:

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

    or ...

    Download the jQuery library from jquery.com. You can either download the compressed minified version which is only 31KB or the uncompressed version 229 kb. Use the uncompressed if you were going to modify jQuery and develop plugins.

    If you call if from google CDN (content delivery network) the advantage is that it is so popular and prevalent that it is probably already cached in most browsers, so the call to google will be the fastest. This guy explains it well: http://encosia.com/3-reasons-why-you...query-for-you/

  8. #8
    Thinkin' out loud again Builder's Avatar
    Join Date
    Nov 2002
    Location
    Illinois
    Posts
    2,088
    Rep Power
    20
    I've been learning a bit more as well. While I believe jQuery has a place, and I use it now for more than just a photo gallery, it gets overused and over-relied on. JMO on that. It may be partly due to the ubiquity of Wordpress and many themes' or plugins' reliance on jQuery. Maybe not.

    An ongoing project involves dragging one site's code (HTML, CSS, JS, Perl -- the whole lot) from the 20th century to the second decade of the 21st. Excepting the Perl, I wrote the original code so I have noone to blame but me! There are hundreds of pages on that site. I've started deep in the bowels -- way down in the structure -- and am slowly working my way up and out. One interesting observation is the extremely small amount of JavaScript I've been using. In fact, I'm replacing an old script that used window.open() to create a popup/"console" window with a <div> that uses [ID STUFF].style.display='block' and 'none' to display/hide it. Using CSS I put a box-shadow on it and position:fixed to make it "float" on top of the page content. This is actually less scripting than popping a console window. And it's a lot more elegant. I've seen jQuery scripts that do basically the same thing. But loading a whole library (even from a CDN) and then adding 10 or more lines of script to do the job of 2 lines of "pure" JavaScript (and to be fair, a few lines of CSS) is a bit like chasing down an ant with a steamroller.

    All that stated, I really have nothing against using jQuery for "let's not re-invent the wheel" tasks; my photo galleries, e.g. Or where using it will save you a bunch of time. On my personal site I have published my genealogy research (well some of it anyway). I looked around for an attractive, user-friendly, and Kevin-friendly way of displaying it. I found a really slick PHP script that pulls the data and then uses jQuery to create a "zoomable", draggable "tree". The tree gets rebuilt depending on where you start, showing more or fewer people. It also creates a "trail" between 2 people of different generations and highlights the direct ancestors/descendents along the way. No way will I ever acquire enough coding skills to even attempt to create that "app". Even if I magically acquired those skills the time required to do the coding would be far more than I want to invest. Plus, re-inventing that wheel with my inept concept of style would probably yield a square rim.

    Now, if your goal in learning jQuery is to pull off scripting projects and apps like that, well, Via con Dios and good luck!

    Kevin
    A good friend will come and bail you out of jail...
    but a true friend will be sitting next to you saying,
    "Damn... that was fun!"

Tags for this Thread

Posting Permissions

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