SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    First attempt at using jQuery

    Hello!

    I've started reading "jQuery in Action" and "Learning jQuery" recently and attempted to put together my first effect using jQuery:

    http://www.randomjabber.com/test/log...uery_test.html (click the subscribe link)

    I'm wondering if anyone with some jQuery experience can take a look at the code and tell me what I did wrong (if anything?) It seems to work in every browser except for IE6 and Opera (Opera would work but randomly). I'm sure I've done something wrong?

    Thanks
    Deron Sizemore
    ----------
    My Sites: LogoGala | Golf Ledger (coming soon)
    Twitter: Deron Sizemore

  2. #2
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Looks absolutely fine! Just a couple of tips though:

    Code JavaScript:
    // A shorter alternative to "$(document).ready();" is "$()", so you could do:
    $(function(){
       // All your stuff here...
    });

    Since you're waiting for the DOM it's likely, especially on a larger website, to see a flicker when you hide an element using JavaScript (i.e. $("#rssInfo").hide();). It's best to set the CSS before the element loads:

    Code html4strict:
        <!-- One option is to append a new CSS style element to the HEAD: -->
        <script type="text/javascript">
            $('head:eq(0)').append('<style type="text/css">#rssInfo{display:none;}</style>');
        </script>
    </head>
    <body>
    ...
    </body>

    Edit:


    Works perfectly for me in Opera (9.5) and IE6...
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  3. #3
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you very much for taking a look! I'm surprised it was correct.

    Question: Why would it not have worked like this:

    Code JavaScript:
    $(document).ready(function() {
    	$("#rssInfo").hide();
    		$("a#subscribeRollover").click(function () {
    			$("#rssInfo").show("fast");
    			$("a#rssInfoClose").click(function () {
    			$("#rssInfo").hide("fast");
    			});
    		});
    });

    Does it basically come down to anytime I have something like: $("a#rssInfoClose").click(function () { - it has to start outside of the previous closing });? I guess I just got lucky to have written it correctly in my working example. lol

    Also, so far in my reading, I've not came across this: head:eq(0) yet. Can you explain it?
    Deron Sizemore
    ----------
    My Sites: LogoGala | Golf Ledger (coming soon)
    Twitter: Deron Sizemore

  4. #4
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,139
    Mentioned
    16 Post(s)
    Tagged
    3 Thread(s)
    Inner functions have access to the state of outer functions even after they have returned. You can use this knowledge to eliminate repetition in the form of grabbing those elements every time the handler is called. Instead it is possible and advised to grab them once and store them in a variable accessible to the inner function due to closure.

    Code:
    $(document).ready(function() {
        $("#rssInfo").hide();
        var rssInfo = $("#rssInfo");
        var rssInfoClose = $("a#rssInfoClose");
            $("a#subscribeRollover").click(function () {
                rssInfo.show("fast");
                rssInfoClose.click(function () {
                rssInfo.hide("fast");
                });
            });
    });
    Last edited by oddz; Oct 25, 2008 at 20:04.

  5. #5
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi guys! Thanks for the tips on this. I've got it working great.

    It didn't occur to me until just now that if people have javascript disabled, they won't be able to view this information. Although it's probably unlikely especially given the audience the site I'm working on is geared toward, but I'd still like to make it as accessible as possible.

    What are some of my options here if javascript is disabled and do you possibly have any links you could give me that outline how to tell the browser to do something else when javascript is disabled?
    Deron Sizemore
    ----------
    My Sites: LogoGala | Golf Ledger (coming soon)
    Twitter: Deron Sizemore

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,682
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    The ideas of graceful degradation have now been replaced with progressive enhancement.

    That way instead of working out how to break down a working system, you are instead starting with the very bedrock, html powered by some server code, and building up css on top of that, followed by javascript to improve the behaviour and user experience.

    Here is a good article about understanding progressive enhancement.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the link Paul. I'm not sure I'm following exactly though. I read the article a couple times and think I understand what they're referring too when they said progressive enhancement, but not 100&#37; sure. I understand that it means being focused more on content than browsers and how the the layers of the peanut M&M relates to a website. What I'm not getting is how to actually do what I need code wise?

    Maybe I completely missed the point? lol

    Thanks
    Deron Sizemore
    ----------
    My Sites: LogoGala | Golf Ledger (coming soon)
    Twitter: Deron Sizemore

  8. #8
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Fortunately your RSS info is perfectly viewable without JavaScript (try disabling it). You've done it correctly. No adjustment is needed.
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  9. #9
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,682
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    let's start then with the page with all of the javascript taken out. What should people see when in that situation.

    Then you can use javascript to undo some of the "no javascript" experience and do what should be done.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  10. #10
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by JimmyP View Post
    Fortunately your RSS info is perfectly viewable without JavaScript (try disabling it). You've done it correctly. No adjustment is needed.
    Unless I'm misunderstanding, you're just saying that the box which is hidden with javascript and made to appear when "subscribe" is clicked will show by default when javascript is disabled, correct? That's not really the effect I'm looking for as I'll have other content right there under the nav menu which the RSS box would cover.

    Quote Originally Posted by pmw57 View Post
    let's start then with the page with all of the javascript taken out. What should people see when in that situation.

    Then you can use javascript to undo some of the "no javascript" experience and do what should be done.
    With all of the javascript taken out, people will simply see the page with a box absolutely positioned below the nav menu with my RSS information inside of it (this is what the javascript hides and makes visible on click).
    Deron Sizemore
    ----------
    My Sites: LogoGala | Golf Ledger (coming soon)
    Twitter: Deron Sizemore

  11. #11
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In your case, if js is disabled, you probably want the RSS link to take them to a page where they access the content otherwise it's going to screw with your design. That's the way most lightbox scripts work too; if js is enabled, you get the image pop up over the main window, but if js is disabled, you link directly to the image.

  12. #12
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Like Tyssen said, it might be best to have the RSS info on another page - if you wanted you could even request that data using Ajax for when JS is enabled. - You don't have to use Ajax, you could just duplicate the data and have it on the homepage and on the rssInfo page.
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  13. #13
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Tyssen View Post
    In your case, if js is disabled, you probably want the RSS link to take them to a page where they access the content otherwise it's going to screw with your design. That's the way most lightbox scripts work too; if js is enabled, you get the image pop up over the main window, but if js is disabled, you link directly to the image.
    Hey John. You're exactly right. I think having the RSS link take them to a page where they can access the content when js is disabled is ideal because yes, as you said it will mess with the design which isn't what I want. Using an already made plugin never entered my mind. I could probably just use a jQuery thickbox script and duplicate what I have now only make it friendly for those without javascript enabled. I should be able to position the thickbox pop up where I want using CSS if I remember correctly.

    Quote Originally Posted by JimmyP View Post
    Like Tyssen said, it might be best to have the RSS info on another page - if you wanted you could even request that data using Ajax for when JS is enabled. - You don't have to use Ajax, you could just duplicate the data and have it on the homepage and on the rssInfo page.
    Thanks again for your help on this. I'll see what I can come up with.
    Deron Sizemore
    ----------
    My Sites: LogoGala | Golf Ledger (coming soon)
    Twitter: Deron Sizemore


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
  •