The javascript:
1 2 3 4 5 6 7 8 | function notEmpty(){ var textField = document.getElementById('text'); if(textField.value != ""{ alert("You entered: " + textField.value) }else{ alert("Would you please enter some text?") } } |
The HTML:
1 2 | <input type='text' id='text' /> <input type='button' onclick='notEmpty()' value='Form Checker' /> |
Makes…
Is what happens. If someone links to # then they probably built a JavaScript or otherwise handler into the link click.
Now your thinking, I KNOW! You need a floating Div at the top with the anchor on it, so when they goto the anchor, the page doesn’t move?
But it’s simpler than that, all you need it a bit of CSS.
1 2 3 | #javascriptLink a{ cursor:pointer; } |
and that bit of HTML
1 2 3 | <div id="javascriptLink"> <a onclick="JSFunctionHere"> </div> |
and the javascript
1 2 3 | function JSFunctionHere(){ } |
See?
Ok, so firstly make your flash website, heres mine:
Then, onto your button press add the following code:
1 | getURL("#page=1") |
Then onto your HTML page add the HTML Anchors code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <script language="javascript"> function findAnchor(search){ var anchor = window.location.hash var anchorStart = anchor.substr(1) var anchorList = anchorStart.split("&") var param = 0 while (param < anchorList.length){ anchorList[param] = anchorList[param].split("=") param += 1 } for(var searchID = 0; searchID <= anchorList.length-1; searchID++){ if(anchorList[searchID][0] == search){ found = anchorList[searchID][1] } } return found } document.write("Name = "+findAnchor("name")) </script> |
And then integrate it with your flash:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title>Flash Website</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css" media="screen"> html, body { height:100%; background-color: #ffffff;} body { margin:0; padding:0; overflow:hidden; } #flashContent { width:100%; height:100%; } </style> <script language="javascript"> function findAnchor(search){ var anchor = window.location.hash var anchorStart = anchor.substr(1) var anchorList = anchorStart.split("&") var param = 0 while (param < anchorList.length){ anchorList[param] = anchorList[param].split("=") param += 1 } for(var searchID = 0; searchID <= anchorList.length-1; searchID++){ if(anchorList[searchID][0] == search){ found = anchorList[searchID][1] } } return found } function firstPage(){ document.getElementById("FlashVars").setAttribute("value", "startPage="+findAnchor("page")) } </script> </head> <body onload="firstPage()"> <div id="flashContent"> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="500" height="300" id="Flash Website" align="middle"> <param name="movie" value="Flash-Website.swf" /> <param name="quality" value="high" /> <param name="bgcolor" value="#ffffff" /> <param name="play" value="true" /> <param name="loop" value="true" /> <param name="wmode" value="window" /> <param name="scale" value="showall" /> <param name="menu" value="false" /> <param name="devicefont" value="false" /> <param name="salign" value="" /> <param name="allowScriptAccess" value="sameDomain" /> <param id="FlashVars" name="FlashVars" value=""> <!--[if !IE]>--> <object type="application/x-shockwave-flash" data="Flash Website.swf" width="500" height="300"> <param name="movie" value="Flash-Website.swf" /> <param name="quality" value="high" /> <param name="bgcolor" value="#ffffff" /> <param name="play" value="true" /> <param name="loop" value="true" /> <param name="wmode" value="window" /> <param name="scale" value="showall" /> <param name="menu" value="false" /> <param name="devicefont" value="false" /> <param name="salign" value="" /> <param name="allowScriptAccess" value="sameDomain" /> <!--<![endif]--> <a href="http://www.adobe.com/go/getflash"> <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /> </a> <!--[if !IE]>--> </object> <!--<![endif]--> </object> </div> </body> </html> |
This is an anchor (read below)
Remember this?
Well, i was thinking. How could a flash website have book-markable individual pages. Then I thought of anchors:
A parameter is as follows:
http://website.com/page.html?parameterName=value
But an anchor is as follows:
http://website.com/page#anchorName
and in lateral terms: http://website.com/page.html is different from http://website.com/page.html?parameterName=value therefore if every link in a flash site linked to a parameter it would refresh the page.
OK, so we want to display the correct parameter via a function:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <script language="javascript"> function findParameter(search){ var parameters = location.search var parametersStart = parameters.substr(1) var parametersList = parametersStart.split("&") var param = 0 while (param < parametersList.length){ parametersList[param] = parametersList[param].split("=") param += 1 } for(var searchID = 0; searchID <= parametersList.length-1; searchID++){ if(parametersList[searchID][0] == search){ found = parametersList[searchID][1] } } return found } document.write("Name = "+findParameter("name")) </script> |
and that’s it…
you should get Name = john
ok, what’s happening in the function…
we are making each element into sub elements:
1 | parametersList[param] = parametersList[param].split("=") |
so
1 | parametersList[0] |
would be name,john and
1 | parametersList[0][0] |
would be name and
1 | parametersList[0][1] |
would be john. The rest should be pretty simple, if not tell me 
Take an url such as example.com/test.html?name=john
the name parameter is john…
Ok, so let’s see… We could just start at the ? and read onwards right?
1 2 3 4 | <script language="javascript"> var parameters = location.search.substr(1).split("?") document.write(parameters) </script> |
and when I visit http://www.stormation.info/wp-content/uploads/2010/10/parameters1.html?name=John I get name=John, so it’s working but when I visit http://www.stormation.info/wp-content/uploads/2010/10/parameters1.html?name=John&age=30 I get name=John&age=30.
It’s working but we need to parse the data… Lets try splitting it up.
1 2 3 4 5 6 7 8 9 10 11 | <script language="javascript"> var parameters = location.search var parametersStart = parameters.substr(1) var parametersList = parametersStart.split("&") var param = 0 while (param < parametersList.length){ alert(parametersList[param]) param += 1 } document.write(parametersStart) </script> |
Ok, so we find the search items – remove the ? then split it into sections based on the & sign. Then we loop through them all running alerts!
To be concluded!
Ok, so these are completely differerent languages and to be honest should not be able to talk to each other – but they can…
For the following you will need your flash player set to Flash Player 7, and that’s very important!
Ok, so firstly you need a html document – a blank one could be:
1 2 3 4 5 6 7 8 9 10 | <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Stormation's blank page!</title> </head> <body> </body> </html> |
Now to insert your functions, so in the head of your page add the script tags containing your javascript – for example:
3 4 5 6 7 8 9 10 11 | <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Untitled Document</title> <script type="text/javascript"> function popup(){ alert('Hello') } </script> </head> |
and then on a button or the timeline (in Flash) add the code:
1 | getURL("javascript: popup()") |
that’s it – just remember it’s only Flash Player 7 as it was a security hole and was removed in Flash Player 8…
JavaScript is an object-oriented scripting language used to enable client-side access to objects within the language. I use it a lot with HTML to add the Php into HTML when i cannot use Php. Although not as powerful as Php it can be used to create stunning effects. JQuery, The coda slider and more are built on Javascript.
Object orientated programming is increasing and the dedication of Javascript is too. What comes next?
Written by