(javascript for facebook): Help me with problem, got finished almost. After clicking link becomes visible!

[luka032]

Im programming fanpage for Facebook, so it is javascript facebook edition.Hello all i wanted to ask you to help me with:i want to have image and when you click on it you get NEW TAB opened with website, and on PREVIOUS PAGE where was image under it hyperlink textual becomes visible. So it's visible only then when you click on image?Here's the code, but there's error: image and hyperlink are visible when you look at first time, i want only image to be visible, and on it's click hyperlink becomes.

<div align="center"><a href="http://www.facebook.com/sharer.php?u=http://www.facebook.com/pages/Pogledajte-kako-se-decak-raduje-SNIMAK/126179030778732?v=app_4949752878" target="_blank" onclick="(new Image()).src = '/ajax/ct.php?app_id=4949752878&action_type=3&post_form_id=d3c77a44a5482a0002208e95c1fee0dc&position=16&' + Math.random();fbjs_sandbox.instances.a4949752878.bootstrap();return fbjs_dom.eventHandler.call([fbjs_dom.get_instance(this,4949752878),function(a4949752878_event) {return a4949752878_go(); return false;},4949752878],new fbjs_event(event));return true;"><img src="http://img262.imageshack.us/img262/7991/share1.png"></a></div><div id="app4949752878_errordiv" alig="center" style="display: block; " fbcontext="db2870ae66ef"><a href="http://adf.ly/EVfQ" onmousedown="UntrustedLink.bootstrap($(this), "c5b63", event);" rel="nofollow" onclick="(new Image()).src = '/ajax/ct.php?app_id=4949752878&action_type=3&post_form_id=d3c77a44a5482a0002208e95c1fee0dc&position=16&' + Math.random();return true;" target="_blank"><font size="2">Sadrzaj vam nece biti dostupan ako niste pratili predhodne korake. Kada kliknete na ovaj tekst dobicete novu stranicu i na njoj kliknite u gornjem desnom uglu "Skip ad", uzivajte. Hvala na poseti.</font></a></div>

[justsomeguy]

You have the display set to block, it should be set to none if you want to hide it. You need to add code in the click handler to set the display on that element back to block when they click to show it.

[luka032]

You have the display set to block, it should be set to none if you want to hide it. You need to add code in the click handler to set the display on that element back to block when they click to show it.

Im sorry but im not much in internet programming, im more in C++, VB, Pascal..Could you tell me clearly what should i do, i really need this, and sorry for it, Thanks in advance?Could you write down code for me ? Thnx

[justsomeguy]

There are examples here:http://www.w3schools.com/dhtml/dhtml_css.asphttp://www.w3schools.com/dhtml/tryit.asp?f...html_visibilityThe second one uses visibility instead of display to show and hide. The difference is that if you change the visibility instead of display, the space the element takes up will still be there, it will just be empty. If you change display instead of visibility then it will remove the entire element and the space it would normally take up.

[luka032]

Im sorry, i said im not good in Javascript or Html (FBML). I have few questions:1. This is acceptable on Facebook ? I mean in FBML application (to programme in it) ?2. Could you give me example of image and when you click on it it opens new page, and on previous page under image, link becomes visible then.Thanks in advance

[justsomeguy]

Im sorry, i said im not good in Javascript or Html (FBML).

I understand. I'm not going to do your work for you, but I'm happy to help you learn.

1. This is acceptable on Facebook ? I mean in FBML application (to programme in it) ?

I don't have a lot of experience writing code for Facebook, what I'm telling you are regular Javascript techniques to do what you're asking.

2. Could you give me example of image and when you click on it it opens new page, and on previous page under image, link becomes visible then.

Like I said, I'm not going to do your work for you. You already have most of the code. Your code has an anchor element with an image, and the anchor has an onclick handler to run some Javascript code when you click on the link. You need to add additional Javascript to that onclick handler to also show the text element. The text element also needs to start with a display of "hidden". Right now your code has it using "block" for display, which is the default for a div. If you change the initial display to hidden and add code like that in the examples I linked to which gets that text element using its ID and then changes the display property, that's all you need to do. The last thing your onclick handler does is return true, the code you need to add should go before that return statement.

[luka032]

In your example what you gave me, can you change "hide" with image hyperlink, and "This is text.This is text.This is text.This is text.This is text.This is text." to set automatically on hiden until "Button show " is visible.

[justsomeguy]

I can't change that example and give you a link, I can only link to the examples they give. You can run whatever code you want on any event. It doesn't matter that the example is using a button click event and you're using the click event on a link, the code is the same. Your code is listening for the click event on the link, and you have code there to do a few things with Facebook. You just need to add a single line of code there to change the display property of the element that holds the text. Your div tag includes a style attribute that sets the display to block:<div id="app4949752878_errordiv" alig="center" style="display: block; " fbcontext="db2870ae66ef">That means it's visible. It should be set to "none" instead to hide the thing at first.

[luka032]

I can't change that example and give you a link, I can only link to the examples they give. You can run whatever code you want on any event. It doesn't matter that the example is using a button click event and you're using the click event on a link, the code is the same. Your code is listening for the click event on the link, and you have code there to do a few things with Facebook. You just need to add a single line of code there to change the display property of the element that holds the text. Your div tag includes a style attribute that sets the display to block:<div id="app4949752878_errordiv" alig="center" style="display: block; " fbcontext="db2870ae66ef">That means it's visible. It should be set to "none" instead to hide the thing at first.

Errm, That app is that some ID of app and how can i get ID for my app?**ADD** i think i found out my id, my fanpage is: http://www.facebook.com/pages/Neverovatno-...=app_4949752878app_4949752878so this bold text should be my app id ?

[justsomeguy]

No, the style property sets an element's styles. Use a value of none for the display to hide it:<div id="app4949752878_errordiv" alig="center" style="display: none;" fbcontext="db2870ae66ef">You can change the style with Javascript in the click handler to show it again:document.getElementById('app4949752878_errordiv').style.display = 'block';

[luka032]

This is my new code i changed (look bold), i have now just image, but when i click it, link won't come visible?

<div align="center"><a href="http://www.facebook.com/sharer.php?u=http://www.facebook.com/pages/Pogledajte-kako-se-decak-raduje-SNIMAK/126179030778732?v=app_4949752878" target="_blank" onclick="(new Image()).src = '/ajax/ct.php?app_id=4949752878&action_type=3&post_form_id=d3c77a44a5482a0002208e95c1fee0dc&position=16&' + Math.random();fbjs_sandbox.instances.a4949752878.bootstrap();return fbjs_dom.eventHandler.call([fbjs_dom.get_instance(this,4949752878),function(a4949752878_event) {return a4949752878_go(); return false;},4949752878],new fbjs_event(event));return true;"><img src="http://img262.imageshack.us/img262/7991/share1.png"></a></div>[b]<div id="app4949752878_errordiv" align="center" style="display: none; " fbcontext="db2870ae66ef">[/b]<a href="http://adf.ly/EVfQ" onmousedown="UntrustedLink.bootstrap($(this), "c5b63", event);" rel="nofollow" onclick="(new Image()).src = '/ajax/ct.php?app_id=4949752878&action_type=3&post_form_id=d3c77a44a5482a0002208e95c1fee0dc&position=16&' + Math.random();return true;" target="_blank"><font size="2">Sadrzaj vam nece biti dostupan ako niste pratili predhodne korake. Kada kliknete na ovaj tekst dobicete novu stranicu i na njoj kliknite u gornjem desnom uglu "Skip ad", uzivajte. Hvala na poseti.</font></a></div>

[justsomeguy]

That's because you didn't add the code to make it visible.

[luka032]

That's because you didn't add the code to make it visible.

Im lost i know that i should include this:

document.getElementById('app4949752878_errordiv').style.display = 'NONE';

With this:

<input type="button" value="Show text" onclick="document.getElementById('p1').style.visibility='visible'" />

how can change when that image is clicked then, that hyperlink is visible, i should change P1 with hyperlink, dont know what's identification for hyperlink, like p1=this is text. this is text..In that example 2.**add:I tried to define that image hyperlink, and textual hyperlink so i can change them: p1 with defined hyperlink textual, and how can i change that "input type="button" value="Show text" " with that image hyperlink which i already have? thnx

[justsomeguy]

This is your anchor tag:

<a href="http://www.facebook.com/sharer.php?u=http://www.facebook.com/pages/Pogledajte-kako-se-decak-raduje-SNIMAK/126179030778732?v=app_4949752878" target="_blank" onclick="(new Image()).src = '/ajax/ct.php?app_id=4949752878&action_type=3&post_form_id=d3c77a44a5482a0002208e95c1fee0dc&position=16&' + Math.random();fbjs_sandbox.instances.a4949752878.bootstrap();return fbjs_dom.eventHandler.call([fbjs_dom.get_instance(this,4949752878),function(a4949752878_event) {return a4949752878_go(); return false;},4949752878],new fbjs_event(event));return true;">

That already has an onclick handler that contains a bunch of Javascript code. That's where you need to add the new line, before the final return statement in the onclick handler.

[justsomeguy]

Actually that final return statement doesn't even get executed. This is the code when it's indented:

(new Image()).src = '/ajax/ct.php?app_id=4949752878&action_type=3&post_form_id=d3c77a44a5482a0002208e95c1fee0dc&position=16&' + Math.random();fbjs_sandbox.instances.a4949752878.bootstrap();return fbjs_dom.eventHandler.call(  [	fbjs_dom.get_instance(this,4949752878),	function(a4949752878_event) {return a4949752878_go(); return false;},	4949752878  ],  new fbjs_event(event));return true;

The return true doesn't get executed because there is a return statement before it which returns the value of the fbjs_dom.eventHandler method. The new code needs to go before that return statement. It can also go first.

[luka032]

Hmm... I cant fit in this, like i said dude i'm young and i'm not good in this programming, i dont know anything, but i connect it to some operations which are similar in system programming. Could you tell me what should i do in simlier way? I think i know what you want but i don't know how to do it, why can't you help me ?

[justsomeguy]

I'm trying to help you. You should be familiar with return statements and event handlers, those are not language specific. I gave you the code to add, and told you where to add it. I don't know what else I can do except just give you the code, which isn't going to help you learn anything.

<a href="http://www.facebook.com/sharer.php?u=http://www.facebook.com/pages/Pogledajte-kako-se-decak-raduje-SNIMAK/126179030778732?v=app_4949752878" target="_blank" onclick="document.getElementById('app4949752878_errordiv').style.display = 'block'; (new Image()).src = '/ajax/ct.php?app_id=4949752878&action_type=3&post_form_id=d3c77a44a5482a0002208e95c1fee0dc&position=16&' + Math.random();fbjs_sandbox.instances.a4949752878.bootstrap();return fbjs_dom.eventHandler.call([fbjs_dom.get_instance(this,4949752878),function(a4949752878_event) {return a4949752878_go(); return false;},4949752878],new fbjs_event(event));return true;">

i'm young and i'm not good in this programming, i dont know anything

Everyone starts that way. If you want to get better you need to know how to research and study the problem to find a solution. Asking people to write code for you is only going to teach you that, when you have a problem, the solution is to get someone else to solve it for you.If you want to learn this stuff, go through the tutorials on the main site.

[luka032]

I know, Im 15 years old, still learning. Im in hurry, must finish this fanpage (on facebook) these days so i need someone to tell me how to code it.Im really sorry. But one more question, that code you put into (code][/code) is it final code what i need, i mean is this final:

<div align="center"><a href="http://www.facebook.com/sharer.php?u=http://www.facebook.com/pages/Pogledajte-kako-se-decak-raduje-SNIMAK/126179030778732?v=app_4949752878" target="_blank" onclick="document.getElementById('app4949752878_errordiv').style.display = 'block'; (new Image()).src = '/ajax/ct.php?app_id=4949752878&action_type=3&post_form_id=d3c77a44a5482a0002208e95c1fee0dc&position=16&' + Math.random();fbjs_sandbox.instances.a4949752878.bootstrap();return fbjs_dom.eventHandler.call([fbjs_dom.get_instance(this,4949752878),function(a4949752878_event) {return a4949752878_go(); return false;},4949752878],new fbjs_event(event));return true;"</a></div><div id="app4949752878_errordiv" align="center" style="display: none; " fbcontext="db2870ae66ef"><a href="http://adf.ly/EVfQ" onmousedown="UntrustedLink.bootstrap($(this), "c5b63", event);" rel="nofollow" onclick="(new Image()).src = '/ajax/ct.php?app_id=4949752878&action_type=3&post_form_id=d3c77a44a5482a0002208e95c1fee0dc&position=16&' + Math.random();return true;" target="_blank"><font size="2">Sadrzaj vam nece biti dostupan ako niste pratili predhodne korake. Kada kliknete na ovaj tekst dobicete novu stranicu i na njoj kliknite u gornjem desnom uglu "Skip ad", uzivajte. Hvala na poseti.</font></a></div>

By the way, this code is not working, nothing is visible.

[justsomeguy]

Im in hurry, must finish this fanpage (on facebook) these days so i need someone to tell me how to code it.

That's what I'm talking about. Some people would say "I'm in a hurry, so I need to learn this quickly."If that doesn't work you'll need to check for Javascript errors in your browser to find out why.

[luka032]

That's what I'm talking about. Some people would say "I'm in a hurry, so I need to learn this quickly."If that doesn't work you'll need to check for Javascript errors in your browser to find out why.

You're 100% sure that code is OK? Btw im using Google Chrome and Mozzila, in both browsers it is not working. It is not working in "W3Schools.com - Try it yourself". I checked "Allow all sites to run JavaScript in Chrome" and still not working. I tried in notepad, and i saved document as ALL so i run it in Chrome and it's same. Can you try and be sure if it's working?

[thescientist]

did you check for error's like he suggested?

[justsomeguy]

You removed the image from the link. The code I just posted only replaces the anchor tag, not the image.

[luka032]

<div align="center"><a href="http://www.facebook.com/sharer.php?u=http://www.facebook.com/pages/Pogledajte-kako-se-decak-raduje-SNIMAK/126179030778732?v=app_4949752878" target="_blank" onclick="document.getElementById('app4949752878_errordiv').style.display = 'block'; (new Image()).src = '/ajax/ct.php?app_id=4949752878&action_type=3&post_form_id=d3c77a44a5482a0002208e95c1fee0dc&position=16&' + Math.random();fbjs_sandbox.instances.a4949752878.bootstrap();return fbjs_dom.eventHandler.call([fbjs_dom.get_instance(this,4949752878),function(a4949752878_event) {return a4949752878_go(); return false;},4949752878],new fbjs_event(event));return true;"><img src="http://img262.imageshack.us/img262/7991/share1.png"></a></div><div id="app4949752878_errordiv" align="center" style="display: none; " fbcontext="db2870ae66ef"><a href="http://adf.ly/EVfQ" onmousedown="UntrustedLink.bootstrap($(this), "c5b63", event);" rel="nofollow" onclick="(new Image()).src = '/ajax/ct.php?app_id=4949752878&action_type=3&post_form_id=d3c77a44a5482a0002208e95c1fee0dc&position=16&' + Math.random();return true;" target="_blank"><font size="2">Sadrzaj vam nece biti dostupan ako niste pratili predhodne korake. Kada kliknete na ovaj tekst dobicete novu stranicu i na njoj kliknite u gornjem desnom uglu "Skip ad", uzivajte. Hvala na poseti.</font></a></div>

And it works in that w3school example tool, but it won't work on Facebook. It shows picture, when i click it it opens new tab with website, but it wont show hyperlink under it?I'm using Chrome and Mozzila, and on both cant see link. I clicked Javascript (developer) on Chrome and see this page, i think there are some errors.This is screen shot of javascript console on chrome browserThis is error console which i took from Mozzila Browser (on my fanpage)

[justsomeguy]

It looks like the element is undefined. I don't know enough about writing Javascript with Facebook to know why it's not defined. What do you get if you view the source code of the page on Facebook?

[luka032]

It looks like the element is undefined. I don't know enough about writing Javascript with Facebook to know why it's not defined. What do you get if you view the source code of the page on Facebook?

Nothing, it wont show bugs to you, it just show what is correct written, and whats not it wont show. In this case, it show only image and when i click, it wont show hyperlink visible.Could you change this option after click, could you put, when image is clicked, after 3 seconds link is visible. to try ?