Jump to content

Javascript: Show Hyperlink after time


luka032
 Share

Recommended Posts

didn't you already make a thread for this?http://w3schools.invisionzone.com/index.ph...=35932&st=0The simplest way to show something after a certain period of time is to use setInterval. You can have it run and after 10 seconds you could have it run a function that changes the display property of the anchor element in question.http://www.w3schools.com/jsref/prop_style_display.asphttp://www.w3schools.com/js/js_timing.asp

Link to comment
Share on other sites

ok, it kinda seemed the same. well, a basic implementation applies regardless. So, let's take it one step at time. Make a basic html page.

<html><head><title>A test</title><style type="text/css">#hidden{  display: none;};</style></head><body>  <p>Blah blah blah, some text in here</p>  <a href="www.domain.page.html" id="hidden">Click Me</a></body></html>

so now we have our hidden anchor. And now we want to show it. So our best is to wait until after the document has finished loading, and after that, we would want to start our time, because this makes sure all of your HTML elements have been loaded into the DOM. If the interval starts before the DOM loads and the elements doesn't exits yet, we'll have problems. So let's add a timer and a function to run when it reaches a certain time.

<html><head><title>A test</title><style type="text/css">#hidden{  display: none;}</style><script type="text/javascript">document.ready = (function(){  alert("document ready");  this.secondsToShow = 10000;  //in millis  this.showLink = function(){	alert("Show Anchor now!");  };	  this.startTimer = function(){	alert("timer started");	var timeout = setTimeout('this.showLink()' , this.secondsToShow);  }();})();</script></head><body>  <p>Blah blah blah, some text in here</p>  <a href="www.domain.page.html" id="hidden">Click Me</a></body></html>

That should get you going. There are some things to learn in there, which I can explain to you, but the basic proof of concept it there it it should be good to get you started. Add the code to display the anchor should be in one of my previous posts.edit: changed this.startTimer() to self-execute

Edited by thescientist
Link to comment
Share on other sites

For your previous function:are you calling timestrt somewhere? Are you calling it after the page loads?
Yes i wanted to make on fanpage, when it loads, after 10 seconds to show that.Btw. i need to make it working on Facebook (fbml using application ) Edited by luka032
Link to comment
Share on other sites

Can you visit my previous post? I have code there, but it is not working on Facebook, how to setup it to work there? Thanks
all I see is a couple of functions. In pretty much the exact format as my example and in the w3schools tutorials. What I don't see you doing is starting the functions anywhere. Even if you don't understand/like my example, the tutorials at least show that you need to call the function somehow. My example just takes it a step further and makes sure the page has loaded, and then starts the timer itself. Try it out at least. I left it up to you set the style property of the element in question. The idea is to understand how this all works in its own right, so that way you can learn to apply it your particular situation. We try and teach here, not just do.
Link to comment
Share on other sites

Idk, I give up. I'm not sure what else to do then. I gave you my best suggestion based on what you wanted. You already had a topic with JSG about this kind of stuff and it looks like you kinda gave up on that. For my last contribution, what I gave you is something that will only run after the document/page is ready. This makes sure that all elements (like your anchor link) are loaded and accessible in the DOM. This way any functions that needs those elements to work on won't come back as undefined or cause any errors. It's a pretty common technique, and I would consider almost a given. Secondly, it starts a timer to run after all that checks out. I pretty much spelled it out for you, gave you everything but a one line addition, and explained it all to you. If you just keep pushing away on my and others advice, you're not going to be getting much more help I'm afraid. There's only so much we can do before you actually need to try something yourself.edit: I'd also point out that everything gets executed from within the scope of an anonymous function, which was intended to help reduce any possible collisions with other scripts running on the page.

Edited by thescientist
Link to comment
Share on other sites

I saw your post, thank on it, but i think it's not what i need. I need after pageload (after 10s) hhyperlink to become visible. I dont need that alertsmsg-s, i dont know why is this bad:

<script type="text/javascript">function timestrt(){setTimeout("dispa()",2000);}function dispa(){document.getElementById("cans").innerHTML="TEXT";}

It's exactly what i need but it's not working on Facebook, i would need exactly this one but working on facebook ? Thanks in advancep.s. i think this can be helpful http://developers.facebook.com/docs/fbjs/

Edited by luka032
Link to comment
Share on other sites

the alerts where just there to show you how it works....you could have just taken them out. let's try this.

<script type="text/javascript">document.ready = (function(){  this.secondsToShow = 10000;  //in millis  this.showLink = function(){	document.getElementById("cans").innerHTML="TEXT";  //<---  this is all you had to add  };	  this.startTimer = function(){	var timeout = setTimeout('this.showLink()' , this.secondsToShow);  }();})();</script>

Edited by thescientist
Link to comment
Share on other sites

I saw your post, thank on it, but i think it's not what i need. I need after pageload (after 10s) hhyperlink to become visible. I dont need that alertsmsg-s, i dont know why is this bad:
<script type="text/javascript">function timestrt(){setTimeout("dispa()",2000);}function dispa(){document.getElementById("cans").innerHTML="TEXT";}

It's exactly what i need but it's not working on Facebook, i would need exactly this one but working on facebook ? Thanks in advancep.s. i think this can be helpful http://developers.facebook.com/docs/fbjs/

this isn't "bad", it's just incorrent because you're not doing it right. Like I said, and DD said, are you calling the function timestrt anywhere? If not, then that's your problem. Just read the tutorial page I linked to you before. If you look at it, they'll explain that function needs to be set to to run; they use the onclick event handler. You are not doing anything like that.http://www.w3schools.com/js/js_timing.asp Edited by thescientist
Link to comment
Share on other sites

this isn't "bad", it's just incorrent because you're not doing it right. Like I said, and DD said, are you calling the function timestrt anywhere? If not, then that's your problem. Just read the tutorial page I linked to you before. If you look at it, they'll explain that function needs to be set to to run; they use the onclick event handler. You are not doing anything like that.http://www.w3schools.com/js/js_timing.asp
Ye i understand that i have to call function, i did that in c++ at the end of code.But this is not working:
<script type="text/javascript">document.ready = (function(){  this.secondsToShow = 10000;  //in millis  this.showLink = function(){	document.getElementById("cans").innerHTML="TEXT";  //<---  this is all you had to add  };	  this.startTimer = function(){	var timeout = setTimeout('this.showLink()' , this.secondsToShow);  }();})();</script>

?

Link to comment
Share on other sites

bare bones.

<html><head><title>A test</title><style type="text/css">#hidden{  background-color: red;  display: none;  height: 100px;  width: 100px;}</style></head><body>  <p id="text" style="width: 100px; height: 100px">blah</p>  <a href="www.domain.page.html" id="hidden">Click Me</a>  <script type="text/javascript">  function showLink(){	document.getElementById('hidden').style.display = 'block';  };	  function startTimer(){	var timeout = setTimeout('this.showLink()' , 10000);  };	  window.onload = startTimer();  </script></body></html>

Edited by thescientist
Link to comment
Share on other sites

I guess document.ready doesn't work in quite the same way when used without the jquery library? Here is a variation on the code, but it requires that the script tags come at the end of the code, which is a convention developers use in their own right too, so I guess it's one half dozen to the other.

<html><head><title>A test</title><style type="text/css">#hidden{  display: none;  background-color: red;  height: 100px;  width: 100px;}</style></head><body>  <p id="text"></p>  <a href="www.domain.page.html" id="hidden">Click Me</a></body><script type="text/javascript">document.ready = (function(){  this.textRef = document.getElementById('text');  this.textRef.innerHTML = 'document ready';  this.secondsToShow = 10000;  //in millis  this.showLink = function(){	this.textRef.innerHTML = 'Show Anchor now';	document.getElementById('hidden').style.display = "block";  };	  this.startTimer = function(){	this.textRef.innerHTML = 'start timer';	var timeout = setTimeout('this.showLink()' , this.secondsToShow);  }();	})();</script></html>

I thought this might have worked with the script in the head section but no such luck. I though document.ready could be made to work like it is in jQuery, but it appears it doesn't truely work like in jquery natively? Perhaps they apply something under the hood? Anyway, this is kinda what I was trying to do.

<script type="text/javascript">document.ready = (function($){  this.textRef = $.getElementById('text');  this.textRef.innerHTML = 'document ready';  this.secondsToShow = 10000;  //in millis  this.showLink = function(){	this.textRef.innerHTML = 'Show Anchor now';	$.getElementById('hidden').style.display = "block";  };	  this.startTimer = function(){   this.textRef.innerHTML = 'start timer';	var timeout = setTimeout('this.showLink()' , this.secondsToShow);  }();	})(document);</script>

I guess the moral of the story is if you want to emulate jQuery...just use jQuery...lol. :)

Edited by thescientist
Link to comment
Share on other sites

yeah it looks like based on that documentation they scope everything for you by parsing your javascript and appending your app ID, but they say that javacript still works as normal, for the most part. Do you have a link to your page with the script in it so we can see it in action? what about it isn't working? If you use alert statement (like in previous examples) you can trace the the execution of your code and find out what it's doing and in what order. Just as important, are there errors in the console?

Edited by thescientist
Link to comment
Share on other sites

App ID: 4949752878Use this console for Facebook coding here: http://developers.facebook.com/tools/console/And try that code here.When i put code in my Facebook Fanpage - it is there, but when you load page it won't do anything. But i dont have debugger there, maybe you will get help with console so try there i put link and see if you can do smth. I saw part where you just need same Javascript code but before every variable & function you should put App ID. Im not sure if im right.

Link to comment
Share on other sites

App ID: 4949752878Use this console for Facebook coding here: http://developers.facebook.com/tools/console/And try that code here.When i put code in my Facebook Fanpage - it is there, but when you load page it won't do anything. But i dont have debugger there, maybe you will get help with console so try there i put link and see if you can do smth. I saw part where you just need same Javascript code but before every variable & function you should put App ID. Im not sure if im right.
well, I'm pretty sure you don't have to put the appID in yourself. According to the documentshttp://developers.facebook.com/docs/fbjs/#basicsit's does that for you. All browsers have a console. You should google debugging tools for your particular browser. Firefox and Chrome both have great developers tools.And could you please post the link to your fanpage? Edited by thescientist
Link to comment
Share on other sites

well, I'm pretty sure you don't have to put the appID in yourself. According to the documentshttp://developers.facebook.com/docs/fbjs/#basicsit's does that for you. All browsers have a console. You should google debugging tools for your particular browser. Firefox and Chrome both have great developers tools.And could you please post the link to your fanpage?
This is my page: http://www.facebook.com/pages/Neverovatno-...=app_4949752878
Link to comment
Share on other sites

See this, i asked guy who knows and who works much with that Static FBML (for facebook coding) and he told me this:

Don´t use any <html><head> or <body> tags when working with FBML. Use only the tags that would go inside your <body> tag like <div> or <li> or whatever. It´s better to link to an external style sheet using the <link> tag to avoid IE conflicts. So, an FBML should look like this:<link rel="stylesheet" type="text/css" href="theurlwhereyourcssis" /><div id="some_id">Some content</div><div id="some_other_id">Some other Content</div><img src="" alt="" />Just try.
How can i code with this that he said? Thanks
Link to comment
Share on other sites

Using Facebook FBML is the ultimate mind melting experience, you go round in circles, finding the app page, amending, saving, previewing UUURGGGH.the best way is to link to javascript (not sure if it will accept js src link), images, flash files etc from website folder/folders.then it should, (but with a little delay as it loads these items from your site), do what you want and run code provided, to show link after delay using js, IF it accepts external link using '<script type="text/javascript" src="http://mysite/js/myjsfile.js"></script>'

Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...