yaki.be - webcoding tips and tricks

For years I've been reading, building and testing, mainly testing, reinventing, testing, while trying to create a flexible all in one website system. So I probably got some tricks up my sleave.

You just need to ask the right question, to get the right answer...

javascript, js & css & xhtml reference & examples

How to change the innerHTML of an iframe?

In case you have this named HTML iframe <iframe src="iframedocument.htm" name="theiframe" id="theiframe" /> call the iframe document, and go further,... theiframe.document.body.innerHTML = "loading.........";
or
window["theiframe"].document.body.innerHTML = "searching.......";

You cannot change the innerHTML of the iframe document if the website-page is not on the same domain, due to security ofcuz.

How do I execute a function upon selecting an option?

On drop, on select, on changing the selected HTML SELECT box option. Just use the onchange event listener. Select color: <select onchange="changeColor(this);"> <option>black</option> <option>blue</option> </select>

Select color:

How do I know which option is selected, and use the content as a function input value?

You can ask for the selectedIndex of a select. Use this to pinpoint the option of which you will use the innerHTML value. function changeColor(selectObj){ var selColorValue = selectObj.options[selectObj.selectedIndex].innerHTML; selectObj.style.color=selColorValue; }

How to transform a string to an int, integer?

So you can do calculations with that string, which is in fact the string value of an integer.

Use the parseFloat() function like this: var counterstring = document.getElementById('counter').innerHTML; var counterint = parseFloat(counterstring); counterint = counterint+1;

Can you show me some AJAX?

What is ajax in my opinion? A set of techniques for doing things live in your website page, making it act as a program "GUI". Without ajax the website template would reload upon every click on a link/button.

I'm an old-schooler who uses iframes instead of http-xml-requests. Why? First of all, iframe support is more wide-spread. Also because you are still able to use the "back"-button of your browser,...(this last one will probably become irrelevant in the future).

This is the website GUI with a hidden iframe, index.htm <hml> <head> <title>sitetitle</title> <script> function doAjax(linkObj){ document.getElementsByTagName('iframe')[0].src=linkObj.href; } function test(msg){ document.getElementById('content').innerHTML=msg; } </script> <style> #theiframe{display:none;} </style> </head> <body> <a href="newpage.htm" onclick="doAjax(this);return false;">do ajax</a> <div id="content"> <h1>sitetitle</h1> <p>welcome!</p> </div> <iframe name="theiframe" id="theiframe" src="nothing.htm" /> </body> </html>

So, upon clicking, do the ajax stuff AND "return false", meaning: "do not follow link". UH??? Indeed, the doAjax function will set the iframe source. Otherwise the link would open in the same window.

You probably think, "ah ok, but why not set target="theiframe"? Nope because you don't want an "iframe website"; you want a normal website of multiple pages that could also be used when javascript-support, doing the ajax, is not at hand.

So how will the website(system) look like. You'll need one GUI page: the over the top home template with css styling and javascript functions.
The other pages of your website are on the other hand very very basic templates, messages carrying only content, no cluther.

These subpages also carry their needed functions, or are able to fire functions of the "parent window" GUI template, that are not only able to change the content of some of the GUI blocks, but also change stylesheet references for instance, or load a flash movie,...

This is the "newpage.htm" answer. <hml> <head> <title>sitetitle - pagetitle</title> <script> window.onload=function(){ if(window.parent){ var msg=document.getElementById('content').innerHTML; window.parent.test(msg); window.parent.alert('ajax ok!') }else{ alert('ajax not ok'); } } </script> </head> <body> <a href="index.htm" title="back to home">home</a> <div id="content"> <h1>pagetitle</h1> <p>paragraph of text</p> </div> </body> </html>

This is the page that is loaded into the iframe, thus having a "parent window". So when this page is loaded (read: when the message is received), it calls the test function of his parent window, the GUI.

Click here to see it in action.

What is next? Making it more and more fancy, like for instance adding a "loading...." notice. Just change the ajax functions. function doAjax(linkObj){ document.getElementsByTagName('iframe')[0].src=linkObj.href; linkObj.innerHTML="loading...."; } function test(msg){ document.getElementById('content').innerHTML=msg; document.getElementsByTagName('a')[0].innerHTML="page is loaded"; }