[gta_talk]

I don't know anything about Javascript, so I need a little help. On this site RedDead-Series.com when you click the names in the table another little table comes up with the mission belonging to that person. I know this is a Javascript and a onclick event thing, but can someone explain the code and how it works to me. Every time I try replicate it, I keep getting invalid mark up. Also why are there \ in the html code with in the onclick tag?

[Andrew]

It would be useful if you could pull out the script / html from that site and post it here.

But the general gist of what you're trying to do sounds like they are using the jquery library and ajax to fetch the mission data from the database after clicking on the perons name in the table.

[gta_talk]

I won't post the whole thing. Here is one cell from the table

CODE

<td class="quote_menu"><b><a href="../red-dead-redemption/soluzione-seth-briars.html" onclick="window.location='#';setBossMissions('<div align=\'center\'><table width=\'98%\'><tr><td class=\'quote_menu_cap\' colspan=\'4\' style=\'text-align:left;\'>Missioni per conto di Seth Briars</td></tr><tr><td width=\'25%\' class=\'quote_menu\'><a href=\'../red-dead-redemption/soluzione-esumazione-e-altri-simpatici-hobby.html\'>L\'esumazione e altri sim...</a></td><td width=\'25%\' class=\'quote_menu\'><a href=\'../red-dead-redemption/soluzione-un-bel-giro-con-gli-amici.html\'>Un bel giro con gli amici</a></td><td width=\'25%\' class=\'quote_menu\'><a href=\'../red-dead-redemption/soluzione-lasciate-che-i-morti-seppelliscano-i-morti.html\'>Lasciate che i morti...</a></td><td width=\'25%\'>&nbsp;</td></tr></table/></div>');return false;">Seth Briars</a></b></td>

All the info goes in this div

CODE

<div id="BossMissions"></div>

And here is the Javascript.

CODE

function setBossMissions(str){ div = document.getElementById('BossMissions'); div.innerHTML = str; }

[gta_talk]

Still need help on this, please. Also I have a few questions about css. What is the use of overflow:hidden? I see it on site and when I mess about with it using firebug, for example when I disable it the whole layout shifts. Before After What is the use of position: absolute? On the reddead-series.com site when I disable it the layout shifts. Before After

[Andrew]

The use of overflow:hidden, sets any content that is outside of the DIVs width and height to hidden. A read on css positioning is here: http://www.w3schools.com/css/css_positioning.asp

http://dev.shadowsrealm.co.uk/web/test.html -> this shows overflow:auto which has the scroll bars, think of overflow:auto as an iframe as such, and overflow:hidden which hides all the extra content.

[gta_talk]

I know they did that, I just didn't know without them the whole layout would move. Thanks.

One more question. On twitter when you hover your mouse over a tweet some links and stuff show, what is the code for that?

[Barguast]

You need to handle the onmouseover and onmouseout events. You would then show/hide the container of the links in the event handler function, probably by setting the .style.display to 'none' (hide) or 'inline' (show).

[gta_talk]

Sorry, didn't understand a word of that. I guess I shouldn't try it, since I don't understand it.

[Suction Testicle Man]

If you just want simple show/hide effects I'd recommend including a Javascript library like jQuery or Prototype before your script. These add an extra layer of methods for you to manipulate the DOM easily, and they have in-depth documentation that explains how to use each method for what you want to do.

I'll work through how the stuff you posted originally works, and hopefully answer your queries along the way. The initial onclick attribute has 3 calls within it:

CODE

window.location='#';

This redirects the browser to an empty anchor and afaik appears to be useless.

CODE

setBossMissions('<div align=\'center\'><table width=\'98%\'><tr><td class=\'quote_menu_cap\' colspan=\'4\' style=\'text-align:left;\'>Missioni per conto di Seth Briars</td></tr><tr><td width=\'25%\' class=\'quote_menu\'><a href=\'../red-dead-redemption/soluzione-esumazione-e-altri-simpatici-hobby.html\'>L\'esumazione e altri sim...</a></td><td width=\'25%\' class=\'quote_menu\'><a href=\'../red-dead-redemption/soluzione-un-bel-giro-con-gli-amici.html\'>Un bel giro con gli amici</a></td><td width=\'25%\' class=\'quote_menu\'><a href=\'../red-dead-redemption/soluzione-lasciate-che-i-morti-seppelliscano-i-morti.html\'>Lasciate che i morti...</a></td><td width=\'25%\'>&nbsp;</td></tr></table/></div>');

This calls the setBossMissions() function and sends it a long string of markup as an argument. The apostrophes within the markup are prefixed with backslashes (called "escaping" the characters) because the entire string's delimiter is an apostrophe. For example, the following code would cause a syntax error for the Javascript parser, since the string is prematurely ended before the word "center", leaving the parser to analyse the word "center" as if it were some kind of language construct:

CODE

setBossMissions('<div align='center'>');

Placing a backslash before the character causes the Javascript parser to consider it a normal character, and not part of the language syntax.

As it happens, since both speech marks (") and apostrophes are valid for HTML attributes and as Javascript string delimiters, the author could have opted for simply using the opposite without having to escape anything. The following two lines would both be valid:

CODE

setBossMissions('<div align="center">'); setBossMissions("<div align='center'>");

The final of the 3 calls is:

CODE

return false;

This tells the Javascript parser to prevent the browser from redirecting to the URL in the "href" tag of the <a> element that had the original "onclick" attribute. Without it, the browser redirects immediately after the code in "onclick" is complete, rendering the work it did pointless. Some scripters will instead opt for setting the "href" attribute to something like "#", since this will also stop the browser redirecting. However, the latter method will result in a hyperlink that does nothing at all with a browser that doesn't support Javascript (which simply ignores the "onclick" attribute). The former method allows a valid "href" attribute to still work as a fallback in a Javascript-free environment, and should be used wherever possible.



The setBossMissions() function:

CODE

div = document.getElementById('BossMissions');

This locates the first HTML element it can find with an "id" attribute matching "BossMissions", and assigns an object that can be used to manipulate that element to the variable "div".

CODE

div.innerHTML = str;

This uses the "div" object created above to add content within the id="BossMissions" div. The content is the variable "str", which is the first argument of the BossMissions() function. The argument passed is the long string of markup with all the escaped apostrophes.

[gta_talk]

Woah, Thanks you for your help STM. I get how to use it now.

You should write tutorials for beginners.