Fixed menu

Previously I have not found any fixed menu or floating menu using just pure CSS. I just come across this link http://ryanfait.com/resources/fixed-positioning-in-internet-explorer/ that actually makes a fixed menu work even for IE6.

Dynamic floating DIV

I have been having trouble with floating DIV previously. It does not have any problem when running. However, in IE it always appear behind INPUT's. No matter how much I tried, it just don't go away. After searching the web, there seems to be no solution - at least for IE6 and below.

Besides this issue, the CSS for "position" also caused a lot of headache. "Position:fixed" does not work for IE7 (not sure about IE8 and above). "Position:absolute" has to be used. The problem is that this CSS does not make the DIV stay at the defined position.

I have read from post by others that there is only one choice for IE. Use "Position:absolute" and then add a javascript "window.onscroll" event and set the top and left style property of the DIV element using the scrollTop and scrollLeft offsets respectively.

It is not the best solution for IE as when you scroll the DIV actually jumps a bit. It is still better than nothing right?

Positioning the div itself on the top of the screen is no big issue. What if you want to position the DIV somewhere at the bottom of the page? Surely you have to take into consideration of the height of the DIV to ensure that it does not goes beyond the display.

It will be much more difficult if your DIV changes its size dynamically. Fortunately there is a element.offsetHeight/offsetWidth to help. It is the actual height/width of the element even if you set the style.height to auto.

One more thing. If you want to set the DIV to be at a fixed percentage of the window size instead of a fixed pixle value, you have a problem if your DIV is near the bottom of the window. When you resize the window, the div may shifts accordingly and get hidden or shifts up too high.

Therefore, you will need to offset the percentage with the offsetHeight of the DIV. To do that, you will need to know the height of the window.

The problem is that the height of the window can mean different thing in different browsers. This is especially true for different IE versions and whether it is set to quirk mode.

A easy way out is to do this.


var root = (document.compatMode == "CSS1Compat"?
document.documentElement: document.body);
var myHeight = 0;
if( typeof( window.innerWidth ) == 'number' ) {
myHeight = window.innerHeight;
} else
myHeight=root.clientHeight

Doing offset is then easy if the height of the window is known. First find out what is the pixel by multiplying the window size with the percent. If the pixle value plus the offsetHeight of the DIV is greater than the window size, then just set it to the window size minus the offsetHeight so that the DIV can be shown all the time.

PHP PDO

I used the "prepare" statement in the PDO. It worked fine if I have all the variables defined. However, if there is a interger variable not defined. It does not complaint. It just don't insert record. I am not sure about a string variable. Maybe PHP will actually insert a "" instead.

Dynamic add style to element

Previously I have problem setting the styles of elements from Javascript. I end up changing the className of the element to achieve the desired effect. Recently, I saw from some one's blog saying that using the following method can actually change element style dynamically.

document.getElementById("myid").style.cssText="font-size:20px;font-weight:bold;"

This method works for both IE (tested in IE6,IE7) and Firefox (ver 3.6).

Note that you actually replaces the old style with your new style using this method.

To add style to existing styles do this

document.getElementById("myid").style.cssText +="color:red"

I noticed that IE7 does not add new style element to the existing style if you don't prepend a ";"

Note that it still replaces the old style if the added element already exists.

Dynamic add elements with a twist

I used to create tables and add rows and columns dynamically to it using javascript. At other times, I also need to remove all elements from a select tag and add a custom list of options to it.

It is quite tedious to add elements manually. Thus, I thought why not add it using functions.

On trying, I noticed that basically I need a element id to add the elements for both types of requirement. Then, it comes to my mind to try new ways of doing it using classes. Furthermore, I would not want to repeat the part where I get the id of the element.

Thus, I created a "class" which has a nested class in it so that I could use syntax like

addElements("id").addtd(myarray)

Well, the syntax looks funny but it actually works. I use "closures" to achieve this. The code is as belows.

/*

General Syntax - AddElements("yourid").functionname(params)

params :-

1. array - a list of items defined by an array e.g. ["a","b","c","d","e"]

2. element,assocarray - and element and an assocarray e.g "span",{'class':'myclass','id':'myid'}

3. text - any text appropriate for the docid property involved

For the assocarray, it is a good practice to use single quotes even for the keys. If no property required then use "" instead.

Available functions:-

addtd(array) - add a table row pair ("TR") with TD populated by the items in the array

replOpt(array) - remove all the <select> options and populate the options from the array.

addE(element,assocarray) - add the element and set the property populated by the items in assocarray. See params 2 above

addStyle(text) -adds a style to the docid itself. e.g. "font-weight:bold;font-size:30px"

replStyle(text) -replaces a style to the docid itself. e.g. "color:red"

addText(text) - similar to addStyle but add the text into the textnode of the element involved.

replText(text) - similar to addText but replaces the content of the textnode of the element

*/

var addElements = function(docref) {

tbdid=document.getElementById(docref)

var addDomE = {

addtd: function(nodearray){

trid=document.createElement("tr");

for (ndtxt=0;ndtxt<>

tdid=document.createElement("td")

txtid=document.createTextNode(nodearray[ndtxt])

tdid.appendChild(txtid)

trid.appendChild(tdid)

tbdid.appendChild(trid)

}

},

replOpt: function(nodearray){

for (ndtxt=tbdid.length-1;ndtxt>-1;ndtxt--){

tbdid.remove(ndtxt)

}

selnid=document.createElement("option")

selnid.value=""

selnid.text="Please select"

selnid.selected=true

if(navigator.appName =="Microsoft Internet Explorer")

tbdid.add(selnid)

else

tbdid.appendChild(selnid)

for (ndtxt=0;ndtxt<>

selnid=document.createElement("option")

selnid.text=nodearray[ndtxt]

selnid.value=nodearray[ndtxt]

if(navigator.appName =="Microsoft Internet Explorer")

tbdid.add(selnid)

else

tbdid.appendChild(selnid)

}

},

addE: function (htmltag,params){

myelement=document.createElement(htmltag)

if (params != ""){

for (addEval in params){

if (addEval!="html"){

myattribute=document.createAttribute(addEval)

myattribute.nodeValue=params[addEval]

myelement.setAttributeNode(myattribute)

} else {

mytxtnode=document.createTextNode(params[addEval])

myelement.appendChild(mytxtnode)

}

}

}

tbdid.appendChild(myelement)

},

addStyle: function(params){

params = ";"+params

tbdid.style.cssText +=params

},

replStyle: function(params){

tbdid.style.cssText = params

},

addText: function(params){

mytxtnode=document.createTextNode(params)

tbdid.appendChild(mytxtnode)

},

replText: function(params){

mytxtnode=document.createTextNode(params)

mynodes=tbdid.childNodes

while (tbdid.hasChildNodes()){

tbdid.removeChild(tbdid.lastChild)

}

tbdid.appendChild(mytxtnode)

}

}

return addDomE;

}

;

In the HTML side you have to first setup one tbody element (not table element) with id to add td elements . For select element, you just use the select id.

Next , you create an array of td element or option element. Finally just use one of the following to do the trick

addElements("myid").addtd(myary);

addElements("selid").replOpt(myary);

addtd is for adding td elements. replOpt is for options element.

Zen Coding

Found a nice feature packed addon to Komodo. The name is "Zen Coding". It allows for short cuts in HTML editing. It is a real help when you are tired of typing the code like <script type="text/javascript"></script> .

Using the Zen Coding, I just type "script" and hit the short cut key for the commands and it expands nicely.

There are hundreds of short cuts available in "Zen Coding". Probably I will only use a few of it but it is still worth it as my laziness makes typing some of the codes a real pain in the past.

Give up with odbc_prepare

Previously I wrote about odbc_prepare's problem on sending wildcards "%" to "char" type field. I could solve that without problem.

I then faced another buggy issue. This time it involved alias. It seems like php randomly choose to pop up warning "column not found" with some of the alias but not all. This is totally not cool.

In the end, I give up on odbc. I switched to PDO.

There is another issue awaiting me. This is the SQL "in" operator. I have not figure out how to send "select * where myfield in ('a','b','c'). It is not a problem if I code the sql statement with every value in the list as a variable. However, this is hard work as the list may be very long.

Obviously, in PHP you could get a list of keys and values from arrays but is there no easier way to do this in PDO?

odbc_prepare with parameters

Recently I was trying to use the odbc_prepare with parameters. It worked just fine till I used wildcards in the parameter. Some how it always return "No rows found".

The query goes like this

$pquery=odbc_prepare($conn,"select * from mytable where mytitile like ?");

$result=odbc_execute($pquery,array("title%"));

Interestingly, if the field size is small, let says 4, I could use "xx%%" and the query produce results. If I just use "xx%" it returned "No rows found".

Searching the internet, I could not find informations that pertain to the exact problem. However, while doing a search for "mssql parameter wildcard", I came across a microsoft news group article about wildcards in field type "char" and "varchar".

It looked like mssql responds differently to wildcards in "char" type fields and "varchar" type fields when binding parameters.

"%" will work just like "_" in "char" type fields whereas "varchar" type fields will treat them differently.

The solution to "char" type fields wildcard searching using "%" is simple. Just use "cast(expression as Varchar)". So your prepare statement will look like

$pquery=odbc_prepare($conn,"select * from mytable where cast(mytitile as varchar) like ?");

If you have control of the table, I should suggest you changing the field to varchar instead.