Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 8 of 8

Thread: JQuery problems

  1. #1
    WDF Staff George Dolidze's Avatar
    Join Date
    Apr 2011
    Location
    Irvine, CA
    Posts
    2,487
    Member #
    27540
    Liked
    416 times
    I'm trying to make the div "content" fadeOut when I click on 'Home'.

    The html:
    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" lang="en" xml:lang="en">
    <head>
        <title></title>
        <link rel="stylesheet" type="text/css" href="styles.css" />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
        <script type="text/javascript" src="javascript.js"></script>
    </head>
    <body>
    <div id="main">
        <div id="top">
            <img src="images/logo.png" alt="George and Daniel Design" width="300px" height="160px"/>
            <ul>
                <li><a href="index.html" id="lhome">Home</a></li>
                <li><a href="about.html" id="labout">About Us</a></li>
                <li><a href="services.html" id="lservices">Services</a></li>
                <li><a href="portfolio.html" id="lport">Portfolio</a></li>
                <li><a href="contact.html" id="lcontact">Contact Us</a></li>
            </ul>
        </div>
        <br />
        <div id="content">
        </div>
    </div>
    </body>
    </html>
    The javascript.js file:
    Code:
    $(function () {
        $("a#lhome").click(function () {
            $("#content").fadeOut(3000);
        });
    });
    It doesn't work... Am I missing something?
    My freelancer website: DolidzeDesign



    You only need a parachute if you plan on skydiving twice.

  2.  

  3. #2
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    Yeah. If you're clicking on a link, by default the browser will try to go to that link unless you tell it not to. So you want something like this (you'll have to edit this):
    Code:
    <li><a href="index.html" onclick="return fadeContentDiv();" id="lhome">Home</a></li>
    ...
    Code:
    function fadeContentDiv() {
    $("#content").fadeOut(3000, function() {
    return true;
    });
    }
    Basically, what will happen is that the content will fade out for three seconds and then the return tells the page to process your link, not before.

    Not sure why you'd want this particular behavior, though. Making people wait three seconds for a new page to load is not a good thing.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  4. #3
    WDF Staff George Dolidze's Avatar
    Join Date
    Apr 2011
    Location
    Irvine, CA
    Posts
    2,487
    Member #
    27540
    Liked
    416 times
    Well, the original idea was to fade in the page once you click on a link. So like a JQuery-based navigation. IS that possible?
    I wanted to fade it out for practice purposes. And because I don't know how to fade it in if the "container" is already there. How do I make it... not be there, so I can fadeIn with the nav?
    My freelancer website: DolidzeDesign



    You only need a parachute if you plan on skydiving twice.

  5. #4
    WDF Staff George Dolidze's Avatar
    Join Date
    Apr 2011
    Location
    Irvine, CA
    Posts
    2,487
    Member #
    27540
    Liked
    416 times
    Never mind. I'll just fadeIn each page on load.
    My freelancer website: DolidzeDesign



    You only need a parachute if you plan on skydiving twice.

  6. #5
    WDF Staff George Dolidze's Avatar
    Join Date
    Apr 2011
    Location
    Irvine, CA
    Posts
    2,487
    Member #
    27540
    Liked
    416 times
    Ok another problem.
    I'm using this...

    Code:
        <script type="text/javascript">
            $(document).ready(function () {
                $('#main')/*.hide()*/.fadeTo(500, 0.65);
                });
            $(document).ready(function () {
                $('#content').hide().fadeIn(2000);
                });
        </script>
    ...in order to fadeIn the page to a certain opacity(because if I only use fadeIn, IE fades it to 100% opacity - do not want). But using the above function, IE starts with 100% opacity and fades it to 65. How can I make it so it fades the page in from nothing?
    I tried styling visibility: hidden; and opacity: 0; but then the page never appears.
    My freelancer website: DolidzeDesign



    You only need a parachute if you plan on skydiving twice.

  7. #6
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    Try fading it out to 0 and then fading it in to 0.65. I've done this before with objects and it worked well.

    IE7 won't handle it regardless of what you do, though.
    George Dolidze likes this.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  8. #7
    WDF Staff George Dolidze's Avatar
    Join Date
    Apr 2011
    Location
    Irvine, CA
    Posts
    2,487
    Member #
    27540
    Liked
    416 times
    Thanks - will try
    My freelancer website: DolidzeDesign



    You only need a parachute if you plan on skydiving twice.

  9. #8
    Member
    Join Date
    May 2011
    Location
    Baltimore, MD
    Posts
    60
    Member #
    27796
    Liked
    11 times
    Sometimes setting display to none before the effect will help out too.
    /phillihp/
    Check out my blog @ http://www.phillihp.com
    ~Web~Mobile~Hacking~Tech~Gadgets~More~


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 05:15 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com