Medion hints (PHP, MYSQL, HTML/CSS2, Javascript and use of DOM, AJA(X or J))

From Elvanör's Technical Wiki
Jump to navigation Jump to search

Who is medion?

A noobie programmer called Mateo Barahona who is stealing some space on Elvanor wiki :-)

Name of class beginning with a number in XHTML/css2

You may read it's not allowed or just not handled by Opera and Firefox through the web, but it's false. The truth is it's allowed but must be done in a certain way (IE does it is own way, as always).

I will use here regexp notation, simpler way to explain the trick.

In the XHTML code you can call a class with class="([0-9])([:alnum])"

But in the css code, if you declare .($1)($2) it won't work. The thing is that you must escape the first digit. Actually, it will always work with that: class="([0-9])([:alnum])" on XTHML, and .\3($1) ($2) on css2 (don't forget the space after ($1)!!!

Don't worry, it will pass W3C validation without a problem, the parser will see ".($1)($2)"

Using the DOM on IE

setAttribute doesn't work with IE, so using librairie like prototype is better and produces crossbrowser results (will do a little paragraph on it later).

Still, there are some problems remaining and you need to handle.

-Drop down menu case: On every browser, you can add an option to the "select" with (selectElement).add(oOption, null);

But on IE, acording to the documentation, you should use (selectElement).add(oOption, 1).

Still, in a loop constructing the drop down menu like this:

for(i=0;i<array.length;i++){
   var oOption = document.createElement('OPTION');
   oOption.value = array_[i]["value"];
   oOption.text = array[i]["text"];
   (selectElement).add(oOption, 1);	
}

,it tends to invert the natural order of the options, so you must use (selectElement).add(oOption, -1) instead

If you want to assign the selected value, you can do

function Select_Value_Set(selectid, valeur){
      var SelectObject = (selectElement);
      for(index = 0;index < selectElement.length;index++){
         if(SelectObject[index].value == valeur)
             SelectObject.selectedIndex = index;
     }
}

And then call Select_Value_Set after the construction of the menu. Still, I experienced strange problems with IE, i must call twice the function to have it work...

How to create an hide/show div

If you want to create an hidden div (except on ie, see prototype to handle that...) that appears on click you will create an hidden div with a link inside:

<div id="hideAndAppear" style="display:none;">
     <a onclik="document.getElementById('hideAndAppear').setAttribute('style','display:none;');">Hide me!</a>
</div>

And a link in the page:

<a onclick="document.getElementById('hideAndAppear').setAttribute('style','display:block;');">Show me!</a>


Functions to get/set the value of a group of radio buttons on a form in javascript

I didn't find a function to do this on the web so i did mine...

/**
* Récupérer valeur de radio button du form spécifié
* @param formu nom du formulaire, radioname nom du groupe radio
* @return valeur
*/
function getRadioValue(formu,radioname) {
	var valeur = "";
	var zeradio = document.forms[formu].elements[radioname];

	for (var i=0; i<zeradio.length;i++) {
		if (zeradio[i].checked) {
			valeur = zeradio[i].value;
		}
	}
	return valeur;
}

Here goes the one to set (quite similar):

/**
* Setter la  valeur de radio button du form spécifié
* @param formu nom du formulaire, radioname nom du groupe radio, valeur nouvelle valeur
*/
function setRadioValue(formu,radioname,valeur) {
	var zeradio = document.forms[formu].elements[radioname];

	for(var i = 0; i < zeradio.length; i++) {
		zeradio[i].checked = false;
		if(zeradio[i].value == valeur.toString()) {
			zeradio[i].checked = true;
		}
	}
}

Links with javascript on Opera

You often see links with javascript written like this:

<a href="#" onclik="function();">Execute JS</a>

Ok, it works on firefox, IE, but on Opera you may find yourself having a link that executes the javascript then reload the page!

So, first way, why not try?

<a onclik="function();">Execute JS</a>

Why not, but you lose the cursor. Ok, you can do:

<a onclik="function();" style="cursor:pointer;">Execute JS</a>

Still, the best way may be to do that:

<a href="javascript:function();">Execute JS</a>

Requests to update posts of IPB forums

Sometimes when you change of IPB forum version, change the smileys or your specifics tags it would be great to update all posts to change the tags.

Here are the SQL requests to handle that:

One part tag:

UPDATE ibf_posts
SET post = CONCAT(
    SUBSTRING_INDEX(post,"string",1),
    "string_remplacement",
    SUBSTRING_INDEX(post,"string",-1)
    )
WHERE LOCATE("string",post)<>'0'

Two parts tag:

UPDATE ibf_posts
SET post = CONCAT(
    SUBSTRING_INDEX(post,"string1",1),
    "string1_remplacement"    ,
    SUBSTRING_INDEX(SUBSTRING_INDEX(post, "string1",-1),"string2",1),
    "string2_remplacement",
    SUBSTRING_INDEX(post,"string2",-1)
    )
WHERE LOCATE("string1",post)<>'0'

Making your Apache server interpret new extensions

Sometimes you may want to make your Apache interpret new extensions (for instance .php5 if not recognized). Very easy, juste go to your httpd.conf and add index.php5 on the DirectoryIndex line, then add AddType application/x-httpd-php .php5 below the others AddType. Restart, job's done!