dcsimg
www.webdeveloper.com
Results 1 to 5 of 5

Thread: Help with fading text

  1. #1
    Join Date
    Jun 2015
    Posts
    3

    Help with fading text

    Hi, I am trying to get my text to fade in and out. I am sorta new to web development. I have no idea what I am doing wrong. I am using jQuery.

    Thanks!

    Here is my code
    https://jsfiddle.net/gtwfczx1/

  2. #2
    Join Date
    Mar 2012
    Posts
    2,651
    Hi and welcome to the site.

    I have not looked at your code, but I would suggest that the first thing you are doing wrong is using JQuery! You do not need JQuery. Learn CSS to find out the basic functionality (like opacity), then learn JavaScript to make it interactive.

    You might also do well to learn the basics of accessibility. Fading text may look cute, but can be hard to read. Sounds to me like a case of design over content...

  3. #3
    Join Date
    Jun 2015
    Posts
    3
    Ah, sorry I guess im not clear enough, this isnt just styling of the text. I want to make a single page website. And i am trying to have a fade and hide transition to different things, blog, about, etc.

  4. #4
    Join Date
    Oct 2013
    Posts
    960
    Some hints for you:

    Hint 1: Write proper HTML structure. The basic template for all HTML documents goes something like this:
    HTML Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Your title text</title>
    </head>
    <body>
        [Your content]
    </body>
    </html>
    You can get away without some of those tags -- sometimes. At other times, and especially when scripting is involved, you really need all of them. Your first task when something isn't working is to validate your HTML and check it for proper structure.

    Hint 2: Put the link to your script at the end of the page right above the closing body tag, like so:
    HTML Code:
    <script src="navigation.js"></script>
    </body>
    Why? The script relies on the page being built before it's read by the browser. HTML is rendered left-to-right and top-to-bottom; basically the order it's written. Having the script above the <body> means that nothing is built when the script is read. It doesn't know where to find all the elements, IDs, etc.

    Hint 3: Your script is looking for the first class name in your content DIVs to match the id value of the menu item clicked on. For example, you have this:
    HTML Code:
            <div class="link" id="home">About</div>
    		[....]
            <div class="home content">This is the about content.</div>
    See where it says id="home" then class="home? Compare that with your next menu item and its corresponding content:
    HTML Code:
            <div class="link" id="projects">Projects</div>
    		[....]
            <div class="blog content">This is the project content.</div>
    Oops, where's the class="projects?

    Lastly, and jedaisoul alluded to this, I have a sneaking suspicion this could all be done with pure Javascript and CSS3's opacity and transitions.

  5. #5
    Join Date
    Jun 2015
    Posts
    3
    Quote Originally Posted by Kevin2 View Post
    Some hints for you:

    Hint 1: Write proper HTML structure. The basic template for all HTML documents goes something like this:
    HTML Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Your title text</title>
    </head>
    <body>
        [Your content]
    </body>
    </html>
    You can get away without some of those tags -- sometimes. At other times, and especially when scripting is involved, you really need all of them. Your first task when something isn't working is to validate your HTML and check it for proper structure.

    Hint 2: Put the link to your script at the end of the page right above the closing body tag, like so:
    HTML Code:
    <script src="navigation.js"></script>
    </body>
    Why? The script relies on the page being built before it's read by the browser. HTML is rendered left-to-right and top-to-bottom; basically the order it's written. Having the script above the <body> means that nothing is built when the script is read. It doesn't know where to find all the elements, IDs, etc.

    Hint 3: Your script is looking for the first class name in your content DIVs to match the id value of the menu item clicked on. For example, you have this:
    HTML Code:
            <div class="link" id="home">About</div>
    		[....]
            <div class="home content">This is the about content.</div>
    See where it says id="home" then class="home? Compare that with your next menu item and its corresponding content:
    HTML Code:
            <div class="link" id="projects">Projects</div>
    		[....]
            <div class="blog content">This is the project content.</div>
    Oops, where's the class="projects?

    Lastly, and jedaisoul alluded to this, I have a sneaking suspicion this could all be done with pure Javascript and CSS3's opacity and transitions.
    Wow, thanks for the great explanation. All this stuff is still new but pretty exciting. Ill look into the CSS. Thank you.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

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
  •  
HTML5 Development Center



Recent Articles