Results 1 to 9 of 9

Thread: newbie question and help please

  1. #1
    Join Date
    Mar 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Wink newbie question and help please

    HI All,

    new to this, so please don't shoot me down in flames!! I need help in creating a script to "fade in" some text. All it has to do is to fade in say the word home and that's it, no looping, no repeating, etc. easy right?

    I have searched but nothing even close..so any help would be greatly appreciated.

    thanks in advance

    gb

  2. #2
    Join Date
    Sep 2008
    Location
    Bristol - UK
    Posts
    842
    Thanks
    32
    Thanked 132 Times in 131 Posts

    Default

    If you want to do this with little effort, then using jquery might be an option.

    Download it from here: http://jquery.com/

    Save it in the same folder as the HTML file you want to fade in the text with.

    Then make a test HTML page, and put the following in it:

    Code:
    <html>
    <head>
    <title>Fade In Text</title>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
    $(document).ready( function() {
    	$('#text').fadeIn(500);
    });
    
    </script>
    
    <style type="text/css">
    #text{
    display:none;
    }
    </style>
    
    </head>
    <body>
    <span id="text">Text you want to fade in</span>
    </body>
    
    </html>
    Should do the trick. Not strictly valid HTML, but I know it works, should be able to go from there.

    Good luck.
    Last edited by Schmoopy; 03-22-2010 at 09:57 PM.

  3. #3
    Join Date
    Mar 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Red face

    Hi Schmoopy and thank you for your reply..may I be a pest and ask one other little question please? font size, color and background color, where do I insert those variables?

    thanks again for your patience

    gb

  4. #4
    Join Date
    Sep 2008
    Location
    Bristol - UK
    Posts
    842
    Thanks
    32
    Thanked 132 Times in 131 Posts

    Default

    For those, you'll want to alter the CSS:

    Code:
    <html>
    <head>
    <title>Fade In Text</title>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
    $(document).ready( function() {
    	$('#text').fadeIn(500);
    });
    
    </script>
    
    <style type="text/css">
    #text{
    display:none;
    color:#FF0000;
    font-size:24px;
    background-color:#000000;
    }
    </style>
    
    </head>
    <body>
    <span id="text">Text you want to fade in</span>
    </body>
    
    </html>
    The above will make the text red, the background of the text black and the text size to be 24 pixels. Try something like http://www.colorpicker.com to choose a colour and replace the #XXXXXX bit with whatever colour you like.

  5. #5
    Join Date
    Mar 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Thank You

    HI Schmoopy, thanks again for the great help, and I have downloaded colorpicker. It looks like an indispensable tool to have and a great one too.

    Thanks again for all the help and your patience

    gb

  6. #6
    Join Date
    Mar 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I have tried to insert this code in a test web page and tried to validate it, but it returns errors:
    "The element named above was found in a context where it is not allowed. This could mean that you have incorrectly nested elements -- such as a "style" element in the "body" section instead of inside "head" -- or two elements that overlap (which is not allowed)."

  7. #7
    Join Date
    Aug 2005
    Location
    Other Side of My Monitor
    Posts
    3,494
    Thanks
    5
    Thanked 105 Times in 104 Posts
    Blog Entries
    1

    Default

    Change:

    Code:
    <body>
    <span id="text">Text you want to fade in</span>
    </body>
    to...

    Code:
    <body>
    <div><span id="text">Text you want to fade in</span></div>
    </body>
    {CWoT - Riddle } {Freelance Copywriter} {Learn to Write}
    Follow Me on Twitter: @InkingHubris
    PHP Code:
    $result mysql_query("SELECT finger FROM hand WHERE id=3");
    echo 
    $result

  8. #8
    Join Date
    Sep 2008
    Location
    Bristol - UK
    Posts
    842
    Thanks
    32
    Thanked 132 Times in 131 Posts

    Default

    I did say it wasn't valid HTML

  9. #9
    Join Date
    Mar 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hahaha...marvellous, thanks guys, it works great...thank you for all your help and patience!!

    gb

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
  •