From suzerain at suzerain.com  Mon Feb 13 00:28:35 2006
From: suzerain at suzerain.com (Marc Antony Vose)
Date: Tue Mar  4 07:24:11 2008
Subject: [front-end] IE DOM question
Message-ID: <p06230900c015c855ec2e@[192.168.1.44]>

Hey there:

Been searching around online for answers to this, but not finding 
any.  Also, this will test if anyone is actually on this list.

I'm trying to draw a popup menu dynamically using JavaScript DOM, and 
it's working fine in Mozilla and Safari, but of course not in IE.

The menu won't show up in Internet Explorer unless the CSS has a 
height set.  The thing is, I'm populating the menu with dynamic 
content from a PHP script, and so I cannot set the height, because I 
don't know what the height should be.

The JS function creates the <div> element, then inside that a <table> 
element, and inside each cell a number of <p> elements enclosing <a> 
elements.

In Safari and Mozilla, the menu pops up, it's the right 
size...everything is perfect.  In IE, it doesn't show at all...or it 
seems to have a zero height.  Applying a fixed height makes it show 
up, but it is empty (i.e.,t he table and paragraphs don't show), and 
the width is set to 100% of the <div> containing it.

I'm hoping there is some secret special thing I can do to make IE 
work properly; otherwise, I will have to write divs into the page as 
it draws, and then hide and show them, which can work, but which will 
cause other problems I was hoping to avoid.

Thanks,

-- 
Marc Antony Vose
http://www.suzerain.com/

The surest way to corrupt a youth is to instruct him to hold in 
higher esteem those who think alike than those who think differently.
-- Nietzsche

From chsnyder at gmail.com  Mon Feb 13 16:52:06 2006
From: chsnyder at gmail.com (csnyder)
Date: Tue Mar  4 07:24:11 2008
Subject: [front-end] IE DOM question
In-Reply-To: <p06230900c015c855ec2e@192.168.1.44>
References: <p06230900c015c855ec2e@192.168.1.44>
Message-ID: <b76252690602131352i6d476debg59d14e6ad48e35f6@mail.gmail.com>

On 2/13/06, Marc Antony Vose <suzerain@suzerain.com> wrote:

> I'm hoping there is some secret special thing I can do to make IE
> work properly

Best. Wish. Ever.

--
Chris Snyder
http://chxo.com/
From chsnyder at gmail.com  Mon Feb 13 16:58:25 2006
From: chsnyder at gmail.com (csnyder)
Date: Tue Mar  4 07:24:11 2008
Subject: [front-end] IE DOM question
In-Reply-To: <p06230900c015c855ec2e@192.168.1.44>
References: <p06230900c015c855ec2e@192.168.1.44>
Message-ID: <b76252690602131358h4869de94m4bf4dab1a6747f31@mail.gmail.com>

On 2/13/06, Marc Antony Vose <suzerain@suzerain.com> wrote:
> Hey there:
>
> Been searching around online for answers to this, but not finding
> any.  Also, this will test if anyone is actually on this list.
>
> I'm trying to draw a popup menu dynamically using JavaScript DOM, and
> it's working fine in Mozilla and Safari, but of course not in IE.
>
> The menu won't show up in Internet Explorer unless the CSS has a
> height set.  The thing is, I'm populating the menu with dynamic
> content from a PHP script, and so I cannot set the height, because I
> don't know what the height should be.
>
> The JS function creates the <div> element, then inside that a <table>
> element, and inside each cell a number of <p> elements enclosing <a>
> elements.
>
> In Safari and Mozilla, the menu pops up, it's the right
> size...everything is perfect.  In IE, it doesn't show at all...or it
> seems to have a zero height.  Applying a fixed height makes it show
> up, but it is empty (i.e.,t he table and paragraphs don't show), and
> the width is set to 100% of the <div> containing it.
>
> I'm hoping there is some secret special thing I can do to make IE
> work properly; otherwise, I will have to write divs into the page as
> it draws, and then hide and show them, which can work, but which will
> cause other problems I was hoping to avoid.
>
> Thanks,
>
> --
> Marc Antony Vose
> http://www.suzerain.com/
>

Have you tried the poor-man's DOM, aka InnerHTML? If you're building
nodes from scratch, it could be a DOM problem, a CSS problem, or both.

But if you just dynamically generate some HTML and shove it into the
InnerHTML property of an existing div, you can pretty much eliminate
DOM problem from the list.

Does that make any sense?


--
Chris Snyder
http://chxo.com/
From 1j0lkq002 at sneakemail.com  Mon Feb 13 17:26:17 2006
From: 1j0lkq002 at sneakemail.com (inforequest)
Date: Tue Mar  4 07:24:11 2008
Subject: [front-end] IE DOM question
In-Reply-To: <b76252690602131352i6d476debg59d14e6ad48e35f6@mail.gmail.com>
References: <p06230900c015c855ec2e@192.168.1.44>
	<b76252690602131352i6d476debg59d14e6ad48e35f6@mail.gmail.com>
Message-ID: <11532-81747@sneakemail.com>

csnyder chsnyder-at-gmail.com |nyphp dev/internal group use| wrote:

>On 2/13/06, Marc Antony Vose <suzerain@suzerain.com> wrote:
>
>  
>
>>I'm hoping there is some secret special thing I can do to make IE
>>work properly
>>    
>>
>
>Best. Wish. Ever.
>
>--
>Chris Snyder
>http://chxo.com/
>

I remember when bar codes were first introduced. The industry knew that 
glitches from bad bar codes or sloppy work by those who put them onto 
product packages could kill the industry, so they made up a licensing 
program with a HUGE penalty for faulty barcodes. Print barcodes that 
don't scan and you get hit with a many-thousands-of-dollars-fine. That 
forced everyone to use only the best materials and keep those scanners 
beeping and the system working. It took many years before we saw bar 
codes you print at home (like airline bording passes, UPS shipping 
labels, etc). They had to make sure the infrastrucure would grow first.

We need something like that for WWW browsers. A cash penalty for every 
page loaded into a faulty browser.....kaching kaching.

-=john andrews
http://www.seo-fun.com





From enolists at gmail.com  Mon Feb 13 17:29:25 2006
From: enolists at gmail.com (Mark Armendariz)
Date: Tue Mar  4 07:24:11 2008
Subject: [front-end] IE DOM question
In-Reply-To: <p06230900c015c855ec2e@[192.168.1.44]>
Message-ID: <020801c630ec$f372cd00$6500a8c0@enobrev>

> In Safari and Mozilla, the menu pops up, it's the right 
> size...everything is perfect.  In IE, it doesn't show at 
> all...or it seems to have a zero height.

Any chance we could get a look at your code? 

Mark


From suzerain at suzerain.com  Mon Feb 13 17:56:02 2006
From: suzerain at suzerain.com (Marc Antony Vose)
Date: Tue Mar  4 07:24:11 2008
Subject: [front-end] IE DOM question
In-Reply-To: <b76252690602131358h4869de94m4bf4dab1a6747f31@mail.gmail.com>
References: <p06230900c015c855ec2e@192.168.1.44>
	<b76252690602131358h4869de94m4bf4dab1a6747f31@mail.gmail.com>
Message-ID: <p06230909c016be807ce3@[192.168.1.44]>

>Have you tried the poor-man's DOM, aka InnerHTML? If you're building
>nodes from scratch, it could be a DOM problem, a CSS problem, or both.
>
>But if you just dynamically generate some HTML and shove it into the
>InnerHTML property of an existing div, you can pretty much eliminate
>DOM problem from the list.
>
>Does that make any sense?
>


Yeah that makes sense.  Maybe I'll try that before I go with option 
B.  I can consider this option A3.

Thanks much,

Marc

From suzerain at suzerain.com  Mon Feb 13 19:55:22 2006
From: suzerain at suzerain.com (Marc Antony Vose)
Date: Tue Mar  4 07:24:11 2008
Subject: [front-end] IE DOM question
In-Reply-To: <020801c630ec$f372cd00$6500a8c0@enobrev>
References: <020801c630ec$f372cd00$6500a8c0@enobrev>
Message-ID: <p0623090ac016d925bb91@[192.168.1.44]>

>  > In Safari and Mozilla, the menu pops up, it's the right
>>  size...everything is perfect.  In IE, it doesn't show at
>>  all...or it seems to have a zero height.
>
>Any chance we could get a look at your code?
>


Hi there:

What I've done so far is here:

http://betweenthecovers.suzerain.com/search_test/dhtml_menu.php

I was trying to write it in such a way that I could have an 
associative array in PHP which I convert to a JS object, and that 
defines what is drawn inside the menu.  The authors one will have 
three columns of author names.  The next two items will have two 
columns, and the fourth one will have one column.

View the source, and you can see the showMenu() function, which does 
the work.  Basically, it just looks for an existence of the menu.  If 
it finds it, it shows it.  If not, it creates it. using DOM functions.

The reason the Flash movie (guy sitting at desk) is there is that 
sometimes the menu overlays a Flash movie area, so I had to put in 
the code that switched that to an image while the menu is open.

If you have any suggestions, I am all ears.  If I can't solve this, 
I'll have my PHP instead write out the DIVs into the page, and just 
hide them and show them.  There were other reasons not worth going 
into why I wanted to avoid that, but it's an option that could work.

Cheers,

-- 
Marc Antony Vose
http://www.suzerain.com/

Nothing in life is to be feared.  It is only to be understood.
-- Marie Curie

From bpang at bpang.com  Mon Feb 13 21:32:35 2006
From: bpang at bpang.com (Brian Pang)
Date: Tue Mar  4 07:24:11 2008
Subject: [front-end] IE DOM question
In-Reply-To: <p0623090ac016d925bb91@[192.168.1.44]>
References: <020801c630ec$f372cd00$6500a8c0@enobrev>
	<p0623090ac016d925bb91@[192.168.1.44]>
Message-ID: <35169.127.0.0.1.1139884355.squirrel@www.bpang.com>

It appears to me that you would know how many elements there would be in
each menu once you retrieved them from the db. So, you should be able to
just do some multiplication to define the height.
(number of elements)*(height allotted for each element)=(height of div)
[I recall having to do this when bringing db info into flash, too]

still, I think Chris' innerHTML rec is best and what I would probably do
in this case.


>>  > In Safari and Mozilla, the menu pops up, it's the right
>>>  size...everything is perfect.  In IE, it doesn't show at
>>>  all...or it seems to have a zero height.
>>
>>Any chance we could get a look at your code?
>>
>
>
> Hi there:
>
> What I've done so far is here:
>
> http://betweenthecovers.suzerain.com/search_test/dhtml_menu.php
>
> I was trying to write it in such a way that I could have an
> associative array in PHP which I convert to a JS object, and that
> defines what is drawn inside the menu.  The authors one will have
> three columns of author names.  The next two items will have two
> columns, and the fourth one will have one column.
>
> View the source, and you can see the showMenu() function, which does
> the work.  Basically, it just looks for an existence of the menu.  If
> it finds it, it shows it.  If not, it creates it. using DOM functions.
>
> The reason the Flash movie (guy sitting at desk) is there is that
> sometimes the menu overlays a Flash movie area, so I had to put in
> the code that switched that to an image while the menu is open.
>
> If you have any suggestions, I am all ears.  If I can't solve this,
> I'll have my PHP instead write out the DIVs into the page, and just
> hide them and show them.  There were other reasons not worth going
> into why I wanted to avoid that, but it's an option that could work.
>
> Cheers,
>
> --
> Marc Antony Vose
> http://www.suzerain.com/
>
> Nothing in life is to be feared.  It is only to be understood.
> -- Marie Curie
> _______________________________________________
> New York PHP SIG: Front End Mailing List
> AMP Technology
> Supporting Apache, MySQL and PHP
> http://lists.nyphp.org/mailman/listinfo/front-end
> http://www.nyphp.org
>


From enolists at gmail.com  Mon Feb 13 23:49:01 2006
From: enolists at gmail.com (Mark Armendariz)
Date: Tue Mar  4 07:24:11 2008
Subject: [front-end] IE DOM question
In-Reply-To: <p0623090ac016d925bb91@[192.168.1.44]>
Message-ID: <023f01c63121$faf611b0$6500a8c0@enobrev>

> What I've done so far is here:
> 
> http://betweenthecovers.suzerain.com/search_test/dhtml_menu.php> 
> --
> Marc Antony Vose
> http://www.suzerain.com/

Thanks for posting the code.  You'll actually find that if you get rid of
the table, and just use the div and p's that the popups will show correctly.


Here's a start for ya.  The popups show correctly in FF and IE, except the
positioning is off in IE (I'll leave that to you - I don't want to have ALL
the fun)...

First... Your CSS.  

You want to add width: 250px.

div.popups
{
	position: absolute;
	background-color: #e9e9e9;
	border-bottom: 3px solid #7a7062;
	border-left: 2px solid #a39688;
	border-right: 2px solid #a39688;
	visibility: visible;
	position: block;
	width: 250px;  /* look at me!! */
}

And then float your paragraphs and set a width for them as well (we're
making columns - don't forget to add your margins and pads for column
widths):


p.popup_item
{
      float: left;  /* me too! */
      width: 110px; /* and me! */
	font-family: "Trebuchet MS", sans-serif;
	font-size: 9px;
	color: #676767;
	margin: 0px;
	padding-top: 2px;
	padding-bottom: 2px;
	padding-left: 5px;
}

This will give you your columns, so you no longer need your table tags.

Now... In your code - excerpt from showMenu() (look for the killed tables):


------------------------- Begin Code -----------------------

else{

		// get reference to main div holding nav
		main_div = document.getElementById('btc_main_nav');
		
		// create a new div...the popup itself
		popup_div = document.createElement('div');
		popup_div.id = 'popup_'+nom;
		popup_div.className = 'popups';
		//alert( popup_div );
		// give it an onmouseout
		popup_div.onmouseout = closeMenu;	
	
/* begin operation kill-tables
		// create a table inside
		popup_table = document.createElement('table');
		popup_table.className = 'popup_table';
		// give it an onmouseout
		popup_table.onmouseout = closeMenu;
		
		// create a row
		popup_table_row = document.createElement('tr');
		// give it an onmouseout
		popup_table_row.onmouseout = closeMenu;
*/

		// loop through the array and create cells as needed
		for( x=0, max=btc_popups[nom].length; x<max; x++ ){
/* continue operation kill-tables
			popup_table_cell = document.createElement('td');
			popup_table_cell.className = 'popup_table_cell';
			//alert( btc_popups[nom][x].length );
			// give it an onmouseout
			popup_table_cell.onmouseout = closeMenu;
*/
			// loop through this array and create paragraphs for
each
			for( y=0, max_y=btc_popups[nom][x].length; y<max_y;
y++ ){
				
				item_p = document.createElement('p');
				item_p.className = 'popup_item';
				// give it an onmouseout
				//item_p.onmouseout = closeMenu;
				
				item_a = document.createElement('a');
				item_a.className = 'popup_item';
				item_a.href = btc_popups[nom][x][y]['l'];
				
				// give it an onmouseout
				//item_a.onmouseout = closeMenu;
				
				item_txt = document.createTextNode(
btc_popups[nom][x][y]['t'] );
				//item_txt.onmouseout = closeMenu;
				
				item_a.appendChild( item_txt );

				item_p.appendChild( item_a );

				popup_div.appendChild( item_p );
			}
			
			
			// append the cell to the row
			//popup_table_row.appendChild( popup_table_cell );



		}
/* complete operation kill-tables
		// add the row to the table
		popup_table.appendChild( popup_table_row );

		// add the table to the popup
		popup_div.appendChild( popup_table );
*/
		
		// add the popup div onto the holder div
		main_div.appendChild( popup_div );

	
	}

------------------------- End Code -----------------------


Now, I imagine if you wanted to keep the tables, you could just make sure to
set style properties for the table, tr and td tags and that might do the
job, but as long as the floated p's work across the board, it seems cleaner
and easier to me.  Of course you have positioning issues left over, but
considering you've made it this far, I don't imagine those will be too hard
to manage.

If the changes above don't work for you, let me know and I'll post my
version on my server.

Good luck!

Mark Armendariz


From chsnyder at gmail.com  Tue Feb 14 11:28:37 2006
From: chsnyder at gmail.com (csnyder)
Date: Tue Mar  4 07:24:11 2008
Subject: [front-end] YUI libraries
Message-ID: <b76252690602140828y264aed2ey8f9f0f9f32e743f5@mail.gmail.com>

Hey, has anyone on this list used the Yahoo! User Interface libraries?
http://developer.yahoo.net/yui/

Open source. Free. Are they ready for prime time? One suspects they must be.

See especially:
http://developer.yahoo.net/yui/slider/examples/slider.html
http://developer.yahoo.net/yui/treeview/examples/html.html?mode=dist
and
http://developer.yahoo.net/yui/dragdrop/examples/grid.html?mode=dist

Thanks to Pete Wright on the NYCBUG list for posting the link... I
missed the announcement on this.

--
Chris Snyder
http://chxo.com/
From suzerain at suzerain.com  Tue Feb 14 12:08:14 2006
From: suzerain at suzerain.com (Marc Antony Vose)
Date: Tue Mar  4 07:24:11 2008
Subject: [front-end] YUI libraries
In-Reply-To: <b76252690602140828y264aed2ey8f9f0f9f32e743f5@mail.gmail.com>
References: <b76252690602140828y264aed2ey8f9f0f9f32e743f5@mail.gmail.com>
Message-ID: <p06230901c017be236bcf@[192.168.1.44]>

>Hey, has anyone on this list used the Yahoo! User Interface libraries?
>http://developer.yahoo.net/yui/
>
>Open source. Free. Are they ready for prime time? One suspects they must be.
>


Interesting.  I didn't know these things existed...they seem to be 
well written, and the site's well documented.

Thanks much for posting the link.

Marc

From chsnyder at gmail.com  Tue Feb 14 13:20:35 2006
From: chsnyder at gmail.com (csnyder)
Date: Tue Mar  4 07:24:11 2008
Subject: [front-end] YUI libraries
In-Reply-To: <p06230901c017be236bcf@192.168.1.44>
References: <b76252690602140828y264aed2ey8f9f0f9f32e743f5@mail.gmail.com>
	<p06230901c017be236bcf@192.168.1.44>
Message-ID: <b76252690602141020m4422253cuf94dd554019057f8@mail.gmail.com>

On 2/14/06, Marc Antony Vose <suzerain@suzerain.com> wrote:
> >Hey, has anyone on this list used the Yahoo! User Interface libraries?
> >http://developer.yahoo.net/yui/
> >
> >Open source. Free. Are they ready for prime time? One suspects they must be.
> >
>
>
> Interesting.  I didn't know these things existed...they seem to be
> well written, and the site's well documented.
>
> Thanks much for posting the link.
>
> Marc

Ahhh, sorry, I guess they were just released today.

One thing to note -- the code doesn't have any sort of version
information encoded in the filenames, or even in the files themselves.
From suzerain at suzerain.com  Wed Feb 15 18:40:20 2006
From: suzerain at suzerain.com (Marc Antony Vose)
Date: Tue Mar  4 07:24:11 2008
Subject: [front-end] IE DOM question
In-Reply-To: <023f01c63121$faf611b0$6500a8c0@enobrev>
References: <023f01c63121$faf611b0$6500a8c0@enobrev>
Message-ID: <p0623090cc0181b874f1e@[192.168.1.44]>

>  > What I've done so far is here:
>>
>>  http://betweenthecovers.suzerain.com/search_test/dhtml_menu.php>
>>  --
>>  Marc Antony Vose
>>  http://www.suzerain.com/
>
>Thanks for posting the code.  You'll actually find that if you get rid of
>the table, and just use the div and p's that the popups will show correctly.
>
>
>Here's a start for ya.  The popups show correctly in FF and IE, except the
>positioning is off in IE (I'll leave that to you - I don't want to have ALL
>the fun)...
>


Dude...thanks so much for going over and above the call of duty on that.

The reason I was using tables was that I didn't want to specify 
column widths; just have it all flow based on width of the names.

After futzing around with this for the better part of like four days 
in between other things (ugh), I've just gone with the innerHTML 
option.  It allows me to keep my tables, and it works in the three 
targeted browsers (IE 6, Safari, Firefox).

I'm up against a deadline on this, and can't afford to burn through 
too much more time debugging Microsoft's crap JS engine.

<digression>

I have been doing web development professionally for 10-11 years, and 
I was working with JS when it was in beta, when it was released in 
Netscape Communicator 2.  We were building one of the first 
JS-dependent sites for a big corporate client, since they were 
distributing Netscape-only.

Things were all going along fine - Netscape was listening to us when 
we pointed out bugs, and our team was building some really cool stuff 
(for the time), and we were about 90% done.  Then, along came 
Microsoft, with IE 3, which introduced 'JScript', and they started 
cutting their anticompetitive deals with ISPs to distribute the 
browser, and suddenly our giant client insisted that we had to deal 
with that awful browser, and at Microsoft no one would even talk to 
us -- much less actually listen to us try to help them fix their 
P.O.S. browser.  In Microsoft's first version of JScript, this would 
cause an error:

x++;

We literally had to go through our code and change everything like that to:

x = x + 1;

(Or something equally dumb...my memory is a bit hazy after all this time).

And, Microsoft issued press releases at the time saying that JScript 
was feature compatible with JavaScript -- yet like 30% of the objects 
weren't even present...they had no documentation available 
publicly...we had to learn all this by trial and error.

Anyway, the reason I rant about this is that ever since then, I'd say 
without exaggeration that 50% of the time I've spent building Web 
sites has been covering up for Microsoft's crap renderer, and crap JS 
implementation....and that estimate even factors in what we had to do 
to deal with Netscape 4 layout bugs.

Anyway, I know things aren't nearly as bad nowadays, but this 
experience just caused the memories of the past to come flooding back 
and I had to let them out.  :)

</digression>

Thanks to all for the thoughtful replies.

Cheers,

-- 
Marc Antony Vose
http://www.suzerain.com/

They that can give up essential liberty to obtain a little temporary 
safety deserve neither liberty nor safety.
-- Benjamin Franklin

From kenrbnsn at rbnsn.com  Wed Feb 22 07:32:41 2006
From: kenrbnsn at rbnsn.com (Ken Robinson)
Date: Tue Mar  4 07:24:11 2008
Subject: [front-end] YUI libraries
In-Reply-To: <b76252690602140828y264aed2ey8f9f0f9f32e743f5@mail.gmail.co
 m>
References: <b76252690602140828y264aed2ey8f9f0f9f32e743f5@mail.gmail.com>
Message-ID: <7.0.1.0.2.20060222072615.01d29518@rbnsn.com>

At 11:28 AM 2/14/2006, csnyder wrote:
>Hey, has anyone on this list used the Yahoo! User Interface libraries?
>http://developer.yahoo.net/yui/

I've started to (try to) use the libraries soon after they were 
announced. I want to use the calendar functions to replace a 
home-grown calendar that some people have problems using.

I got the calendarGroup functions working and can display a year at a time.

You can see the results at <http://www.nnjsda.org/calendar_test/index3.php>.

There are two things I want to do, which I can't get to work.

1) Change the year displayed on top of the calendar to the correct 
year that is displayed by the YUI

2) use an XML feed that I am developing instead of a text string that 
is currently being used.
The XML is created in <http://www.nnjsda.org/get_dates_xml.php>

Can anyone give me some hints or sample code?  I am much better at 
scripting PHP, so I've been trying to learn Javascript quickly, so I 
can solve some of my problems. My biggest problems lie in how to make 
a function/variable global to the different parts of the script.

Thanks

Ken