Re: [Phpgroupware-developers] some strange beahviour with later updates of head

[Dave Hall]

On Mon, 2006-04-10 at 08:43 +0200, Sigurd Nes wrote:
> 1)
> the statement:
> <div id="overDiv" style="position:absolute;
> visibility:hide;z-index:1;"></div>
> get translated to:
> <div id="overDiv" style="position:absolute;
> visibility:hide;z-index:1;"/>
> And the result is that it is no longer working.
> 
> Luckily  - the statement is no longer needed with the later versions
> of overlib.js (>4.10) - ant the quick sollution is to remove the
> statement.
> 

We are using XHTML in head.  This was agreed by the coordination team
some time ago.  

The XSLT parser caused empty elements use the empty tag notation as
shown above.

As a general rule all tags should contain content unless they are
specifically designed not to (ie <input />).

I haven't tested the change on all apps, but where I tested it seemed to
be ok.  

> 2)
> In hrm - I have a set of fields - contained within a div - that
> dependent of a value of a select - is visible or not.
> This one is also no longer working:
> here is the code:
> 
> <script language ="javascript">
> function modplace(form)
> {
>  var val = form.place_id.value
>  if(val == "new_place")
>  {
>   document.all.div1.style.display = "block"
>  }
>  else
>  {
>   document.all.div1.style.display = "none"
>  }
> }
> </script>
> 

document.all is IE only.

Try

<script type="text/javascript">
//<[CDATA[
        /**
        * TODO Document function so others understand it :)
        */
        function modplace(form)
        {
                if ( !document.getElementById )
                {
                        return false; // doesn't support DOM so bailout
                }
                var val = form.place_id.value;
                var div1 = document.getElementById('div1');
                if(val == "new_place")
                {
                        div1.style.display = 'block';
                }
                else
                {
                        div1.style.display = 'none';
                }
        }
//]]>
</script>

This makes the script XHTML compliant and uses the DOM which has better
cross browser support (moz1,ff0.8,safari/khtml,ie5.5+,ie-mac5.2,o?)

You could also look at using the javascript class to include the js file
for you.

> and later:
> 
>       <tr>
>         <td valign="top">place*</td>
>         <td>
>           <select name="place_id" onChange="modplace(this.form)">
>             <option value="">select a place</option>
>             <option value="new_place">new place</option>
>             <option value=""></option>
>           </select>
>         </td>
>       </tr>
>     </table>
> 
>     <div id="div1" STYLE="display: none">
>       <table cellpadding="2" cellspacing="2" width="80%"
> align="center">
> 
>       some fields...
> 
>       </table>
>     </div>

Here are some general design tips:

* Use CSS to control presentation, use HTML for the structure
* Avoid using inline styles as other templates themes are stuck with
your choices
* Use labels for form elements for improved accessibility
* Use tables for tabular data, css can do some pretty good stuff without
tables (see http://www.quirksmode.org/css/forms.html for how i do forms
these days)

I have been implementing this stuff as I go in HEAD

> 
> Any idea how to remedy this?

Grab me on IRC or gchat if you want to work through it in real time.  If
not we can play tennis here on the list :)

Cheers

Dave
-- 
Dave Hall (aka skwashd)
API Coordinator
phpGroupWare
+-------------------------------------+-------------------------------+
| e address@hidden          | w phpgroupware.org            |
| j address@hidden                 | aim skwashd                   |
| icq 278064022                       | msn address@hidden       |
| sip address@hidden       | y! skwashd                    |
+-------------------------------------+-------------------------------+