Eluminatus Posted June 27, 2006 Share Posted June 27, 2006 Hi guys, i was wondering if anyone can help me, as i think i tryed about everything (even <smil>). I need to make the following text (example) only appear on the browser after 1 min. and it must appear all together at that point. here it goes:<a href="java script:toggleLayer('Service1');"style="text-decoration:none""title="Show/Hide Service1"/> <ul><ul><ul><ul style="list-style-image:url(bullet30blue.gif)"> <li><b>hehehehehheh<b> </li> </ul></ul></ul></ul></a> </div> <div id="Service1"> blablabla </div> <p><a href="java script:toggleLayer('Service2');" style="text-decoration:none" title="Show/Hide Service2" /> <ul> <ul> <ul><ul><ul style="list-style-image:url(bullet30blue.gif)"><li><b>bla...bla...blab> </a></li> </ul> </ul></ul></ul> </ul> <div id="Service2"> blablabla.</div> <ul> <ul> <ul><ul><ul> <ul style="list-style-image:url(bullet30blue.gif)"><a href="java script:toggleLayer('Service3');" style="text-decoration:none" title="Show/Hide Service3" /> <li><b>blablablab></a></li> </ul></ul> </ul> </ul> </ul> </ul> <div id="Service3"> bla...bla....bla </div> <a href="java script:toggleLayer('Service4');" style="text-decoration:none" title="Show/Hide Service4" /><ul><ul><ul><ul><ul style="list-style-image:url(bullet30blue.gif)"> <li><b>bla...bla.....blab> </a></li> </ul></ul></ul></ul></ul><div id="Service4"> bla.....blabla<div><a href="java script:toggleLayer('Service5');" style="text-decoration:none" title="Show/Hide Service5" /><ul><ul><ul><ul style="list-style-image:url(bullet30blue.gif)"> <li><b>blablablablabla> </a></li> </ul></ul></ul></ul> <div id="Service5"> bla....bla....bla....bla....bla </div>Can anyone plz help me with this? what kinda tags so i use to be able to achieve the delaying effect, for something like this. I get confused because this has html text mixed with java script and CSS styling + bullets. Link to comment Share on other sites More sharing options...
justsomeguy Posted June 27, 2006 Share Posted June 27, 2006 hehehehehhehb>You're missing a < at the end there.If you want it to appear after a certain amount of time, use the setTimeout javascript function. Do a google search for that. But keep in mind that if javascript is disabled, they won't see it at all. If you want to get around that, have it start visible, and have javascript hide it first, then show it again in a minute. Link to comment Share on other sites More sharing options...
Eluminatus Posted June 27, 2006 Author Share Posted June 27, 2006 You're missing a < at the end there.uh, that's right, that's a copy and paste error, sry. Let me try that java script then Thx Link to comment Share on other sites More sharing options...
Eluminatus Posted June 28, 2006 Author Share Posted June 28, 2006 Ok, i'm really a noob at this. I made the goggle search for that: setTimeout("yourfunction()",1000); However, i can only find further instruction on using it when activated either by cliecking a link, a button, or as a pop up menu, stuff like that. That's not what i want to acomplish. I also tryed Dynamic Drive: Sequential Content revealer http://www.dynamicdrive.com/dynamicindex17/seqreveal.htmbut for some reason that make the hole thing hidden but not visible after the set time!!!What i need is something really simple. I have a text with a show/hide js already incorporated into it. (if you go to www.pcrevolutions.net you can see it) Now the purpose of all of this is because i have another text animation done with JS ( 3D) which i want to show before this hole text appears. So this way, when the animation is over the portion of text mentioned above would show (without the user clicking anything) and create a user friendly view. As of right now i had to take the animation out because it overlaps LOLAny suggestion? Link to comment Share on other sites More sharing options...
justsomeguy Posted June 28, 2006 Share Posted June 28, 2006 You can attach any javascript code to the onload event of the body:<body onload="setTimeout('yourFunction()', 1000);"> Link to comment Share on other sites More sharing options...
Eluminatus Posted June 28, 2006 Author Share Posted June 28, 2006 true, but that also delays my other animation, which is also on the <body> can i have something like:<div onload="setTimeout('yourFunction()', 1000);">This way i would div that portion of text. now i think that for me to use it like that the js must also be enter in the <head> correct?So i would have to do something there:<script type="text/javascript" ><!-- hidesetTimeout('delaytext()', 5000);--></script>Is this possible, or am i why out? Link to comment Share on other sites More sharing options...
justsomeguy Posted June 28, 2006 Share Posted June 28, 2006 That would probably work, you can just put your code in the head. But if you're already doing something with the body onload you can combine those: <head><script type="text/javascript">function run_on_load(){ whatever_youre_doing(); setTimeout('yourFunction()', 1000);}</script></head><body onload="run_on_load()"> Link to comment Share on other sites More sharing options...
Eluminatus Posted June 28, 2006 Author Share Posted June 28, 2006 nope that doesn't work either. Either that or i'm doing something wrong... because nothing seems to work lol. Here's the full code i got: <!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:namespace ns="urn:schemas-microsoft-com:vml" prefix="v"/><style type="text/css">v\:* { behavior: url(#default#VML); }body { background-repeat: no-repeat;}</style><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Welcome to PC Revolutions</title> <script type="text/javascript">function run_on_load(){ texttdelay(); setTimeout('textdelay()', 9000);}</script><script language="javascript" src="show-hide.js"> </script><style type="text/css"><!--div#Service1{ display: none; }--></style> <style type="text/css"><!--div#Service2{ display: none; }--></style> </style> <style type="text/css"><!--div#Service3{ display: none; }--></style> <style type="text/css"><!--div#Service4{ display: none; }--> </style> <style type="text/css"><!--div#Service5{ display: none; }--></style> </head><body onload="run_on_load()" bgcolor="#a4d2e1" bottommargin="0" leftmargin="0" rightmargin="0" topmargin="0"><img src="topbanner-logo.gif" width="100%" height="157"/><br> <center> <a href="index.html"><img src="homebutton.gif" border="0" alt="Home" /></a> <a href="services.html"><img src="ServicesButton.gif" border="0" alt="Services Provided"/></a><a href="contacts.html"><img src="ContactButton.gif" border="0" alt="Contact" /></a> <table align="left" width="100" height="100%" border="0" cellpadding="0"> <tr> <td height="1095" background="sideleft.jpg"> </td> </tr> </table> <table align="right" width="99" height="100%" border="0" cellpadding="0"> <tr> <td align="center" width="93" height="1095" background="sideright.jpg"> </td> </tr> </table><br /><br /><p> </p><script type="text/javascript"> var message=new Array("Services we Provide", "Creativity", "Innovation", "Quality")var outlinecolor=new Array("black", "black")var fillcolor1=new Array("gray", "blue", "gray", "blue")var fillcolor2=new Array("blue", "titanium", "black", "grey")var circlemark=new Array("-")var strkweight=1var pause=3var strengthopacity="60%"var circlesize=0.3var keepinview="yes"mytruebody=(!window.opera && document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.bodyvar repeat=-1var outerwidth=mytruebody.clientWidthvar outerheight=mytruebody.clientHeightvar innerwidth=Math.floor(circlesize*outerwidth)var innerheight=Math.floor(circlesize*outerheight)var posleft=(outerwidth-innerwidth)/2var postop=(outerheight-innerheight)/2var path=new Array()var i_message=0var i_outlinecolor=0var i_fillcolor1=0var i_fillcolor2=0var i_messagelength=0var longestmessage=0pause*=500var ie=document.getElementById&&document.all?1:0 for (i=0;i<=message.length-1;i++) { if (message[i].length>longestmessage) { longestmessage=message[i].length } longestmessage+=4}for (i=0;i<=message.length-1;i++) { var emptyspace="" var i_emptyspace=(longestmessage-message[i].length)/2 for (ii=0;ii<=i_emptyspace;ii++) { emptyspace+=circlemark } message[i]=emptyspace+" "+message[i]+" "+emptyspace}function changeform() { if (keepinview="yes") document.getElementById("roofid").style.top=mytruebody.scrollTop if (i_outlinecolor >= outlinecolor.length) {i_outlinecolor=0} if (i_fillcolor1 >= fillcolor1.length) {i_fillcolor1=0} if (i_fillcolor2 >= fillcolor2.length) {i_fillcolor2=0} document.getElementById('strokeid').color=outlinecolor[i_outlinecolor] document.getElementById('fillid').color=fillcolor1[i_fillcolor1] document.getElementById('fillid').color2=fillcolor2[i_fillcolor2] if (i_message < message.length) {tick()} else {document.getElementById('textpathid').string="" document.getElementById("roofid").style.display="none" }}function tick() { if (i_messagelength <= message[i_message].length) { var messagestringend="" var messagestring=message[i_message].substring(0, i_messagelength)+messagestringend document.getElementById('textpathid').string=messagestring var timer=setTimeout("tick()",50) i_messagelength++ } else { clearTimeout(timer) i_messagelength=0 i_message++ i_outlinecolor++ i_fillcolor1++ i_fillcolor2++ var timer=setTimeout("changeform()",pause) } }if (ie) { document.write('<div id="roofid" style="position:absolute;left:0px;top:0px;width:'+outerwidth+'px;height:'+outerheight+'px;overflow:hidden;">') document.write('<v:oval id="tc" style="position:absolute;top:'+postop+'px;left:'+posleft+'px;width:'+innerwidth+'px;height:'+innerheight+'px">') document.write('<v:shadow on="t" opacity="'+strengthopacity+'"/>') document.write('<v:stroke id="strokeid" weight="'+strkweight+'pt" color="blue"/>') document.write('<v:fill id="fillid" on="True" color="'+fillcolor1[0]+'" color2="'+fillcolor2[0]+'" opacity="'+strengthopacity+'" opacity2="'+strengthopacity+'" type="gradient"/>') document.write('<v:path textpathok="t"/>') document.write('<v:textpath id="textpathid" on="t" id="mytp" style="font-family:\'Arial Black\'; " fitpath="t" string=""/>') document.write('</v:oval></div>') if (window.attachEvent) window.attachEvent("onload", changeform) else window.onload=changeform}</script></center><p> </p>[COLOR=red]<a href="javascript:toggleLayer('Service1');"style="text-decoration:none""title="Show/Hide Service1"/> <ul><ul><ul><ul style="list-style-image:url(bullet30blue.gif)"> <li><b>....blablabla... </b> </li> </ul></ul></ul></ul></a> <div id="Service1"> ....blablabla... </div> <p><a href="javascript:toggleLayer('Service2');" style="text-decoration:none" title="Show/Hide Service2" /> <ul> <ul> <ul><ul><ul style="list-style-image:url(bullet30blue.gif)"><li><b>....blablabla... </b> </a></li> </ul> </ul></ul></ul> </ul> <div id="Service2"> ....blablabla... </div> <ul> <ul> <ul><ul><ul> <ul style="list-style-image:url(bullet30blue.gif)"><a href="javascript:toggleLayer('Service3');" style="text-decoration:none" title="Show/Hide Service3" /> <li><b>....blablabla... </b></a></li> </ul></ul> </ul> </ul> </ul> </ul> <div id="Service3"> I....blablabla... </div> <a href="javascript:toggleLayer('Service4');" style="text-decoration:none" title="Show/Hide Service4" /><ul><ul><ul><ul><ul style="list-style-image:url(bullet30blue.gif)"> <li><b>Virus Removal:</b> </a></li> </ul></ul></ul></ul></ul><div id="Service4"> ....blablabla... </div><a href="javascript:toggleLayer('Service5');" style="text-decoration:none" title="Show/Hide Service5" /><ul><ul><ul><ul style="list-style-image:url(bullet30blue.gif)"> <li><b>....blablabla... </b> </a></li> </ul></ul></ul></ul> <div id="Service5"> ....blablabla... </div>[/COLOR] <br /> </body></html> the code btw the tags is the one i need to delay for 9 sec - i added the color just so you can tell which portion it is. (i'll have to fine tune it after) Link to comment Share on other sites More sharing options...
justsomeguy Posted June 28, 2006 Share Posted June 28, 2006 I'm not sure what's going on here: <style type="text/css">v\:* { behavior: url(#default#VML); }body {background-repeat: no-repeat;}</style> That comes before the head, and that first declaration is strange, I don't know what that is. All style tags should go inside the head. function run_on_load(){texttdelay();setTimeout('textdelay()', 9000);} Those 2 functions have different names, one of them has an extra t. I don't see that function defined anywhere, but it might be in the linked script file.If you are having problems with Javascript, it will be easiest to use a browser that has decent Javascript debugging utilities. IE has absolutely worthless Javascript debugging, I think it generates a random number when it tells you what line and character the error happened on and it doesn't even give you the code that has a problem. You should use a browser like Opera that will both give you a decent debugger and will also let you see the source code after it gets changed by Javascript. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now