Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5

Thread: Welcome message

  1. #1
    New Coder
    Join Date
    Jul 2005
    Posts
    51
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Welcome message

    My layout is finally solidified enough to start added javascript. However, as I nearly javascript-illiterate (I'm currently learning php), I'm going to need to rely on you kind folks. What I'd like is for "#welcome" (located on bottom of the XHTML, CSS code) to become visible when the page loads then, after a given amount of time, disappear.

    Any help would be awesome.

    XHTML
    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" xml:lang="en" lang="en-us" dir="ltr">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta http-equiv="content-language" content="en-us" />
    <meta name="author" content="nadamt" />
    <base href="http://www.nadamt.xmgfree.com/" />
    <link rel="stylesheet" href="style/skeleton.css" type="text/css" media="screen" /> 
    <link rel="stylesheet" href="style/skin4_info.css" type="text/css" media="screen" />
    <title>nadamt: hub;</title>
    <script type="text/javascript" src="script/infobar.js"></script>
    </head>
    <body background="http://www.nadamt.xmgfree.com/pic/15.png">
    <div id="interface">
    <!--Hub links:-->
    
    <ul class="hub"><li><a href="hub.php" class="menu1_hub" onmouseover="toggleDiv('bar1_hub',1)" onmouseout="toggleDiv('bar1_hub',0)">hub</a><ul>
    	<li><a href="hub.php" onmouseover="toggleDiv('bar1_hub_opt',1)" onmouseout="toggleDiv('bar1_hub_opt',0)">Updates</a></li>
    	<li><a href="hub.php" onmouseover="toggleDiv('bar1_hub_opt',1)" onmouseout="toggleDiv('bar1_hub_opt',0)">Polls</a></li></ul></li></ul>
    <!--Log links:-->
    <ul class="log"><li><a href="log.php" class="menu2_log" onmouseover="toggleDiv('bar2_log',1)" onmouseout="toggleDiv('bar2_log',0)">log</a><ul>
    	<li><a href="log.php" onmouseover="toggleDiv('bar2_log_opt',1)" onmouseout="toggleDiv('bar2_log_opt',0)">August 2005</a></li>
    	<li><a href="log.php" onmouseover="toggleDiv('bar2_log_opt',1)" onmouseout="toggleDiv('bar2_log_opt',0)">July 2005</a></li>
    
    	<li><a href="log.php" onmouseover="toggleDiv('bar2_log_opt',1)" onmouseout="toggleDiv('bar2_log_opt',0)">June 2005</a></li></ul></li></ul>
    <!--Works links:-->
    <ul class="works"><li><a href="works.php" class="menu3_works" onmouseover="toggleDiv('bar3_works',1)" onmouseout="toggleDiv('bar3_works',0)">works</a><ul> 
    	<li><a href="works.php" onmouseover="toggleDiv('bar3_works_opt',1)" onmouseout="toggleDiv('bar3_works_opt',0)">Poetry</a></li> 
    	<li><a href="works.php" onmouseover="toggleDiv('bar3_works_opt',1)" onmouseout="toggleDiv('bar3_works_opt',0)">Essays</a></li> 
    	<li><a href="works.php" onmouseover="toggleDiv('bar3_works_opt',1)" onmouseout="toggleDiv('bar3_works_opt',0)">Short Stories</a></li></ul></li></ul>
    <!--Info links:-->
    <ul class="info"><li><a href="info.php" class="menu4_info" onmouseover="toggleDiv('bar4_info',1)" onmouseout="toggleDiv('bar4_info',0)">info</a><ul> 
    	<li><a href="info.php" onmouseover="toggleDiv('bar4_info_opt',1)" onmouseout="toggleDiv('bar4_info_opt',0)">Profile</a></li> 
    	<li><a href="info.php" onmouseover="toggleDiv('bar4_info_opt',1)" onmouseout="toggleDiv('bar4_info_opt',0)">Stats</a></li> 
    	<li><a href="info.php" onmouseover="toggleDiv('bar4_info_opt',1)" onmouseout="toggleDiv('bar4_info_opt',0)">Donations</a></li></ul></li></ul>
    
    <div id="background">&nbsp;</div>
    <div id="deflicker"><div id="content"> 
    <p>This is the "hub" section of my website.  Updates, general happenings, and whatnot will be shown here.</p>
    </div></div></div>
    <div id="bar1_hub">Hub link mouseover message goes here.</div>
    <div id="bar1_hub_opt">Hub menu option mouseover message goes here.</div>
    <div id="bar2_log">Log link mouseover message goes here.</div>
    <div id="bar2_log_opt">Log menu option mouseover message goes here.</div>
    <div id="bar3_works">Works link mouseover message goes here.</div>
    <div id="bar3_works_opt">Works menu option mouseover message goes here.</div>
    
    <div id="bar4_info">Info link mouseover message goes here.</div>
    <div id="bar4_info_opt">Info menu option message goes here.</div>
    <div id="welcome">Welcome to whatever page you are on.  This message will self-destruct in three seconds (once the javascript is coded).</div>
    </body>
    </html>
    CSS
    Code:
    /*Page: */
    html, body{ height: 100%; width: 100%;  margin: 0%; padding: 0%; overflow: auto; } 
    body{ background-color: rgb(40,40,45); color: rgb(255,255,255); font-family: "tempus sans itc", "trebuchet ms", sans-serif; font-size: 17px; letter-spacing: 1.5px; text-align: left; word-spacing: 2.25px; }  
    p { margin: 0px; padding: 0px 0px 15px 0px; } 
    
    /*Containers:*/
    #interface, #background, #content, #deflicker { position: absolute; } 
    #interface { top: 5%; left: 5%; height: 85%; width: 90%; } 
    #background {  background-color: rgb(25,25,30); top: 1.5em; left: 0%; width: 100%; height: 100%; -moz-opacity: 0.8; opacity: 0.8; } 
    #deflicker { top: 0%; left: 0%; width: 100%; height: 100%; background: transparent; } 
    #content  { overflow: hidden; width: 100%; height: 100%; padding: 30px 0px 0px 0px; z-index: 1; font-variant: small-caps;  } 
    
    /*Header:*/
    .hub, .log, .works, .info { position: absolute; top: 0%; margin: 0px; padding: 0px; top: 0%; width: 25%; }
    .hub { left: 0%; } 
    .log { left: 25%; } 
    .works { left: 50%; } 
    .info { left: 75%; } 
    
    /*Drop down menu:*/
    ul, li ul a, li a { color: rgb(255,255,255); font-weight: bold; text-decoration: none; padding: 0px; margin: 0px; position: relative;  z-index: 3; font-size: 1em; text-transform: lowercase; text-align: left; width: 100%; height: 1.5em; list-style: none; } 
    li ul { display: none; } 
    li a, li:hover ul { display: block; } 
    li ul a, li ul a:hover { text-align: right; } 
    li a { background-color: rgb(80,80,85); -moz-opacity: 0.8; opacity: 0.8; } 
    li a:hover { background-color: rgb(25,25,30); -moz-opacity: 0.8; opacity: 0.8; } 
    
    /*Info bars*/
    #bar1_hub,#bar1_hub_opt, #bar2_log, #bar2_log_opt, #bar3_works, #bar3_works_opt, #bar4_info, #bar4_info_opt { background: rgb(80,80,85); position: absolute; width: 75%; height: 2em; z-index: 2; -moz-opacity: 0.85; opacity: 0.85; font-weight: bold; text-transform: lowercase; visibility:hidden; padding: 0px; margin: 0px; top: 35%; right: 0%; text-align: left; padding: .3em 0em 0em .4em; } 
    
    #welcome {  background: rgb(80,80,85); position: absolute; width: 75%; height: 2em; z-index: 2; -moz-opacity: 0.85; opacity: 0.85; font-weight: bold; text-transform: lowercase; padding: 0px; margin: 0px; bottom: 35%; left: 0%; text-align: left; padding: .3em 0em .4em .0em; }

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,513
    Thanks
    3
    Thanked 504 Times in 491 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    <script language="JavaScript" type="text/javascript">
    <!--
    
    function HideWelcome(){
     setTimeout('document.getElementById(\'welcome\').style.display=\'none\';',3000);
    }
    //-->
    </script>
    </head>
    
    <body onload="HideWelcome();"   >
    <div id="welcome">Welcome to whatever page you are on.  This message will self-destruct in three seconds (once the javascript is coded).</div>
    
    </body>
    
    </html>

  • #3
    Registered User
    Join Date
    Oct 2004
    Posts
    592
    Thanks
    0
    Thanked 1 Time in 1 Post
    Thank you so much.
    It's useful for me , too.
    I've applied it yet.

  • #4
    New Coder
    Join Date
    Jul 2005
    Posts
    51
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I thank you.

  • #5
    New Coder
    Join Date
    Jul 2005
    Posts
    51
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I have a follow-up question: How do I get "#welcome" to not show until two seconds after the page has loaded?


  •  

    Posting Permissions

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