Jump to content

Javascript Help


GentlemanSquid

Recommended Posts

GentlemanSquid

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?

Link to comment
Share on other sites

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.

 

 

Link to comment
Share on other sites

GentlemanSquid

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

 

 

 <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%\'> </td></tr></table/></div>');return false;">Seth Briars</a></b></td> 

 

 

All the info goes in this div

 

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

 

 

 

And here is the Javascript.

 

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

 

Link to comment
Share on other sites

GentlemanSquid

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

GentlemanSquid

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?

 

user posted image

 

 

Link to comment
Share on other sites

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).

31805323.png
Link to comment
Share on other sites

GentlemanSquid

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

Link to comment
Share on other sites

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:

 

 

window.location='#';

 

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

 

 

setBossMissions('');

 

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:

 

 

setBossMissions('
');

 

 

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:

 

 

setBossMissions('
');setBossMissions("
");

 

 

The final of the 3 calls is:

 

 

return false;

 

This tells the Javascript parser to prevent the browser from redirecting to the URL in the "href" tag of the 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:

 

 

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".

 

 

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.

If at first you don't succeed, you fail, and the test will be terminated.

Link to comment
Share on other sites

GentlemanSquid

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

 

You should write tutorials for beginners.

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
  • 1 User Currently Viewing
    0 members, 0 Anonymous, 1 Guest

×
×
  • Create New...

Important Information

By using GTAForums.com, you agree to our Terms of Use and Privacy Policy.