http mosaic wizard rewrited for IE 6

All you've ever wanted to know about the ActiveX, Mozilla plugins, the web interface and various PHP extensions
Albert
Cone that earned his stripes
Cone that earned his stripes
Posts: 102
Joined: 15 Mar 2006 08:17

http mosaic wizard rewrited for IE 6

Postby Albert » 28 Mar 2006 16:13

Hello,
I found some bugs in http mosaic wizard when used with Internet Explorer 6.
I suppose there was a problem with DOM structures when mosaic table was created: tbody was needed (see http://msdn.microsoft.com/library/defau ... tables.asp)
and I had to do some changes in code about setting CSS classes [function setclass()] and setAttributes for IE. IE6 uses expressions like element.className=value and element[sName]=sValue
Please test this with Mozilla family browsers.

changed content of mosaic.js:

Code: Select all

function mosaic_size_change() { var x,y; var bg_width = check_and_replace_int( "bg_width", "400" ); var bg_height = check_and_replace_int( "bg_height", "300" ); mosaic_height = check_and_replace_int( "mosaic_height", "100" ); mosaic_width = check_and_replace_int( "mosaic_width", "100" ); mosaic_xoffset = check_and_replace_int( "mosaic_xoffset", "10" ); mosaic_yoffset = check_and_replace_int( "mosaic_yoffset", "10" ); mosaic_vborder = check_and_replace_int( "mosaic_vborder", "5" ); mosaic_hborder = check_and_replace_int( "mosaic_hborder", "10" ); mosaic_rows = check_and_replace_int( "mosaic_rows", "1" ); mosaic_cols = check_and_replace_int( "mosaic_cols", "1" ); cell_width = Math.floor((mosaic_width-(mosaic_cols-1)*mosaic_hborder)/mosaic_cols); cell_height = Math.floor((mosaic_height-(mosaic_rows-1)*mosaic_vborder)/mosaic_rows); var mlayout = document.getElementById( "mosaic_layout" ); /* TODO: keep 'common' cells when resizing */ while( mlayout.hasChildNodes() ) mlayout.removeChild( mlayout.firstChild ); mlayout.style.width = bg_width + "px"; mlayout.style.height = bg_height + "px"; /* rewrited */ var mdt = document.createElement("div"); mdt.id='mosaic.dt'; mdt.className='mosaic_tbl'; mdt.style.width = mosaic_width + "px"; mdt.style.height = mosaic_height + "px"; mdt.style.top = mosaic_yoffset + "px"; mdt.style.left = mosaic_xoffset + "px"; var mtable = document.createElement("table"); mtable.border="1"; mtable.style.top = "-" + mosaic_vborder + "px"; mtable.style.left = "-" + mosaic_hborder + "px"; mtable.style.width = (1*mosaic_width +2*mosaic_hborder) + "px"; mtable.style.height = (1*mosaic_height+2*mosaic_vborder) + "px"; mtable.style.borderSpacing = mosaic_hborder + "px " + mosaic_vborder + "px"; var mtbody = document.createElement("tbody"); mtable.appendChild(mtbody); var mrow, mcol, i, j; for (i=0; i<mosaic_rows; i++) { mrow = document.createElement("tr"); mtbody.appendChild(mrow); for (j=0; j<mosaic_cols; j++) { mcell = document.createElement("td"); mcell.className='mosaic_itm'; mcell.style.width = cell_width + "px"; mcell.style.height = cell_height + "px"; var id = i+'_'+j; var btn = create_button( cells[id] ? cells[id] : '?', 'mosaic_elt_choose(\"'+id+'\");' ); btn.id=id; btn.title='Click to choose stream'; mcell.appendChild(btn); mrow.appendChild(mcell); } } // Ins into the document tree mosaic_layout.appendChild(mtable); mosaic_code_update(); }
Albert

dionoea
Cone Master
Cone Master
Posts: 5157
Joined: 03 Dec 2003 23:09
Location: Paris, France

Postby dionoea » 28 Mar 2006 19:18

Thanks ! the missing tbody is now fixed ( https://trac.videolan.org/vlc/changeset/14952 )

Could you paste your changes to setclass() and setattributes() ? (i haven't noticed any problems using them ... but it's on IE7 so they might have fixed some stuff)
Antoine Cellerier
dionoea
(Please do not use private messages for support questions)

Albert
Cone that earned his stripes
Cone that earned his stripes
Posts: 102
Joined: 15 Mar 2006 08:17

shifted mosaic element layout

Postby Albert » 29 Mar 2006 22:45

Hello,
I think there is still a problem with mosaic h/v-border.

My IE 6 show Mosaic Wizard: blue background, pink "div" for mosaic table elements and green squares shifted to left top corner outside of pink "div".

If I comment

Code: Select all

// mtable.style.top = "-" + mosaic_vborder + "px"; // mtable.style.left = "-" + mosaic_hborder + "px";
I see everything centered and it resizes quite as expected.

Due to

Code: Select all

mosaic_vborder = check_and_replace_int( "mosaic_vborder", "10" ); mosaic_hborder = check_and_replace_int( "mosaic_hborder", "5" );
I am not able to set borders to "0" ???

I don´t know what was the idea of mosaic-borders. Maybe this could be visualised better by another color for mosaic borders (size of table border, other table/cell css classes,...). I expected that changing mosaic-borders will result in some more evident changes than resizing.
Could you explain me the idea, please? Thank you.
Albert

dionoea
Cone Master
Cone Master
Posts: 5157
Joined: 03 Dec 2003 23:09
Location: Paris, France

Postby dionoea » 30 Mar 2006 02:05

The best explanation is to test in firefox :)

Mosaic borders basically are the distance between the cells in the table (only between two cells, not between a cell and the outside). firefox does a good job at displaying it. I haven't figured how to do it in IE yet.

To fix all those table related issues, i think that it might even be a good idea to rewrite it all using divs only and some javascript to do the positioning (using absolute positions)
Antoine Cellerier
dionoea
(Please do not use private messages for support questions)

Albert
Cone that earned his stripes
Cone that earned his stripes
Posts: 102
Joined: 15 Mar 2006 08:17

mosaic rewrited with DIVs

Postby Albert » 01 Apr 2006 16:24

Hello,
I wrote mosaic_size_change() without table, with DIVs. It could be also usefull let user set zero border - visualized as dashed line.
I tried to avoid changes in linked files, so all CSS attributes and classes are set within the code.
I didn´t understand your terminology mosaic_hborder (¦) and mosaic_vborder (---) and cell_width/height, so I switch them.

There is still a problem with dimensions and Math.floor(), so in some constallation right and bottom borders aren´t overlayed with the background. For the visual effect this can be fixed, but I don´t know if it is necessary.

mosaic.js

Code: Select all

function mosaic_size_change() { var x,y; var bg_width = check_and_replace_int( "bg_width", "400" ); var bg_height = check_and_replace_int( "bg_height", "300" ); mosaic_height = check_and_replace_int( "mosaic_height", "100" ); mosaic_width = check_and_replace_int( "mosaic_width", "100" ); mosaic_xoffset = check_and_replace_int( "mosaic_xoffset", "10" ); mosaic_yoffset = check_and_replace_int( "mosaic_yoffset", "10" ); mosaic_vborder = check_and_replace_int( "mosaic_vborder", "0" ); mosaic_hborder = check_and_replace_int( "mosaic_hborder", "0" ); mosaic_rows = check_and_replace_int( "mosaic_rows", "2" ); mosaic_cols = check_and_replace_int( "mosaic_cols", "2" ); cell_width = Math.floor((mosaic_width-(mosaic_cols-1)*mosaic_vborder)/mosaic_cols); cell_height = Math.floor((mosaic_height-(mosaic_rows-1)*mosaic_hborder)/mosaic_rows); var mlayout = document.getElementById( "mosaic_layout" ); while( mlayout.hasChildNodes() ) mlayout.removeChild( mlayout.firstChild ); mlayout.style.width = bg_width + "px"; mlayout.style.height = bg_height + "px"; if( mosaic_cols && mosaic_rows ) { var mdiv = document.createElement( 'div' ); mdiv.setAttribute( 'id', 'mosaic_div' ); mdiv.style.position = "relative"; mdiv.style.width = mosaic_width + "px"; mdiv.style.height = mosaic_height + "px"; mdiv.style.top = mosaic_yoffset + "px"; mdiv.style.left = mosaic_xoffset + "px"; mdiv.style.backgroundColor = "#faa"; for( y = 0; y < mosaic_rows; y++ ) { for( x = 0; x < mosaic_cols; x++ ) { var mdiv_cell = document.createElement( 'div' ); mdiv_cell.style.position = "absolute"; mdiv_cell.setAttribute( 'id', 'mdiv_cell'+x+'_'+y ); mdiv_cell.style.left = x*cell_width + x*mosaic_vborder + "px"; mdiv_cell.style.top = y*(mosaic_hborder) + y*cell_height +"px"; mdiv_cell.style.width = cell_width + "px"; mdiv_cell.style.height = cell_height + "px"; mdiv_cell.style.backgroundColor = "#afa"; mdiv.appendChild(mdiv_cell); var id = x+'_'+y; var melt = create_button( cells[id] ? cells[id] : '?', 'mosaic_elt_choose(\"'+id+'\");' ); melt.setAttribute( 'id', id ); melt.style.position = "absolute"; melt.style.top = "0%"; melt.style.left = "0%"; melt.setAttribute( 'title', 'Click to choose stream' ); melt.style.backgroundColor = "#afa"; melt.style.border = "0px"; mdiv_cell.appendChild( melt ); // set mosaic_vborder if(x < (mosaic_cols-1)) { var mdiv_vborder = document.createElement( 'div' ); mdiv_vborder.setAttribute( 'id', 'mdiv_vborder'+x+'_'+y ); // show fake border between mosaic items if(mosaic_vborder==0) { mdiv_vborder.style.backgroundColor = "#afa"; mdiv_vborder.style.borderLeftWidth = "1px"; mdiv_vborder.style.borderLeftColor = "white"; mdiv_vborder.style.borderLeftStyle = "dashed"; mdiv_vborder.style.zIndex = "2"; } else { mdiv_vborder.style.backgroundColor = "#faa"; } mdiv_vborder.style.top = y*cell_height + y*mosaic_hborder + "px"; mdiv_vborder.style.position = "absolute"; mdiv_vborder.style.width = mosaic_vborder + "px"; mdiv_vborder.style.left = (x+1)*cell_width +(x)*mosaic_vborder+ "px"; mdiv_vborder.style.height = cell_height + "px"; mdiv.appendChild(mdiv_vborder); } } // set mosaic_hborder if(y < (mosaic_rows-1)) { var mdiv_hborder = document.createElement( 'div' ); mdiv_hborder.setAttribute( 'id', 'mdiv_hborder'+x+'_'+y ); // show fake border between mosaic items if(mosaic_hborder==0) { mdiv_hborder.style.backgroundColor = "#afa"; mdiv_hborder.style.borderTopWidth = "1px"; mdiv_hborder.style.borderTopColor = "white"; mdiv_hborder.style.borderTopStyle = "dashed"; mdiv_hborder.style.zIndex = "2"; } else { mdiv_hborder.style.backgroundColor = "#faa"; } mdiv_hborder.style.position = "absolute"; mdiv_hborder.style.height = mosaic_hborder + "px"; mdiv_hborder.style.width = mosaic_cols*cell_width + (mosaic_cols-1)*mosaic_vborder +"px"; mdiv_hborder.style.top = (y)*mosaic_hborder + (y+1)*cell_height + "px"; mdiv.appendChild(mdiv_hborder); } } mlayout.appendChild( mdiv ); } mosaic_code_update(); }
Albert
Last edited by Albert on 08 Apr 2006 11:40, edited 1 time in total.

Albert
Cone that earned his stripes
Cone that earned his stripes
Posts: 102
Joined: 15 Mar 2006 08:17

updated and upgraded patch

Postby Albert » 08 Apr 2006 11:39

Hello,
any comment? reply? critique?

I tested it with Mozilla and IE 6.
Now it looks like the original mosaic wizard
+ possibility to set mosaic borders to 0
+ vizualisation of mosaic borders 0
+ fixed IE shift to the left top corner

I tried to create a patch (diff) file to mosaic.js (8.4.2006) but I don´t know how :-(

Code: Select all

--- mosaic.orig 2006-04-08 00:44:22.000000000 +0200 +++ mosaic.js 2006-04-08 11:05:36.000000000 +0200 @@ -66,14 +66,14 @@ function mosaic_size_change() mosaic_width = check_and_replace_int( "mosaic_width", "100" ); mosaic_xoffset = check_and_replace_int( "mosaic_xoffset", "10" ); mosaic_yoffset = check_and_replace_int( "mosaic_yoffset", "10" ); - mosaic_vborder = check_and_replace_int( "mosaic_vborder", "5" ); - mosaic_hborder = check_and_replace_int( "mosaic_hborder", "10" ); - mosaic_rows = check_and_replace_int( "mosaic_rows", "1" ); - mosaic_cols = check_and_replace_int( "mosaic_cols", "1" ); - - cell_width = Math.floor((mosaic_width-(mosaic_cols-1)*mosaic_hborder)/mosaic_cols); - cell_height = Math.floor((mosaic_height-(mosaic_rows-1)*mosaic_vborder)/mosaic_rows); - + mosaic_vborder = check_and_replace_int( "mosaic_vborder", "0" ); + mosaic_hborder = check_and_replace_int( "mosaic_hborder", "0" ); + mosaic_rows = check_and_replace_int( "mosaic_rows", "2" ); + mosaic_cols = check_and_replace_int( "mosaic_cols", "2" ); + + cell_width = Math.floor((mosaic_width-(mosaic_cols-1)*mosaic_vborder)/mosaic_cols); + cell_height = Math.floor((mosaic_height-(mosaic_rows-1)*mosaic_hborder)/mosaic_rows); + var mlayout = document.getElementById( "mosaic_layout" ); while( mlayout.hasChildNodes() ) @@ -81,52 +81,104 @@ function mosaic_size_change() mlayout.style.width = bg_width + "px"; mlayout.style.height = bg_height + "px"; - if( mosaic_cols && mosaic_rows ) - { - var mdt = document.createElement( 'div' ); - mdt.setAttribute( 'id', 'mosaic_dt' ); - setclass( mdt, 'mosaic_tbl' ); - - mdt.style.width = mosaic_width + "px"; - mdt.style.height = mosaic_height + "px"; - mdt.style.top = mosaic_yoffset + "px"; - mdt.style.left = mosaic_xoffset + "px"; - - var mtable = document.createElement( 'table' ); - mtable.setAttribute( 'id', 'mosaic_table' ); - mtable.style.top = "-" + mosaic_vborder + "px"; - mtable.style.left = "-" + mosaic_hborder + "px"; - mtable.style.width = (1*mosaic_width +2*mosaic_hborder) + "px"; - mtable.style.height = (1*mosaic_height+2*mosaic_vborder) + "px"; - mtable.style.borderSpacing = mosaic_hborder + "px " + - mosaic_vborder + "px"; - var mtbody = document.createElement( 'tbody' ); +if( mosaic_cols && mosaic_rows ) +{ + var mdiv = document.createElement( 'div' ); + mdiv.setAttribute( 'id', 'mosaic_div' ); + mdiv.style.position = "relative"; + mdiv.style.width = mosaic_width + "px"; + mdiv.style.height = mosaic_height + "px"; + mdiv.style.top = mosaic_yoffset + "px"; + mdiv.style.left = mosaic_xoffset + "px"; + mdiv.style.backgroundColor = "#faa"; + + for( y = 0; y < mosaic_rows; y++ ) + { + for( x = 0; x < mosaic_cols; x++ ) + { + var mdiv_cell = document.createElement( 'div' ); + mdiv_cell.style.position = "absolute"; + mdiv_cell.setAttribute( 'id', 'mdiv_cell'+x+'_'+y ); + mdiv_cell.style.left = x*cell_width + x*mosaic_vborder + "px"; + mdiv_cell.style.top = y*(mosaic_hborder) + y*cell_height +"px"; + mdiv_cell.style.width = cell_width + "px"; + mdiv_cell.style.height = cell_height + "px"; + mdiv_cell.style.backgroundColor = "#afa"; + + mdiv.appendChild(mdiv_cell); + + var id = x+'_'+y; + var melt = create_button( cells[id] ? cells[id] : '?', 'mosaic_elt_choose(\"'+id+'\");' ); + melt.setAttribute( 'id', id ); + melt.style.position = "absolute"; + melt.style.top = "40%"; // approx in the middle + melt.style.left = "40%"; + melt.setAttribute( 'title', 'Click to choose stream' ); + melt.style.backgroundColor = "#afa"; + melt.style.border = "0px"; + + mdiv_cell.appendChild( melt ); + + // set mosaic_vborder + if(x < (mosaic_cols-1)) + { + var mdiv_vborder = document.createElement( 'div' ); + mdiv_vborder.setAttribute( 'id', 'mdiv_vborder'+x+'_'+y ); + // show fake border between mosaic items + if(mosaic_vborder==0) + { + mdiv_vborder.style.backgroundColor = "#afa"; + mdiv_vborder.style.borderLeftWidth = "1px"; + mdiv_vborder.style.borderLeftColor = "#ebebeb"; + mdiv_vborder.style.borderLeftStyle = "dashed"; + mdiv_vborder.style.zIndex = "2"; + } + else + { + mdiv_vborder.style.backgroundColor = "#faa"; + } + mdiv_vborder.style.top = y*cell_height + y*mosaic_hborder + "px"; + mdiv_vborder.style.position = "absolute"; + mdiv_vborder.style.width = mosaic_vborder + "px"; + mdiv_vborder.style.left = (x+1)*cell_width +(x)*mosaic_vborder+ "px"; + mdiv_vborder.style.height = cell_height + "px"; + + mdiv.appendChild(mdiv_vborder); + } // end mosaic vborder + } // end mosaic cols + + // set mosaic_hborder + if(y < (mosaic_rows-1)) + { + var mdiv_hborder = document.createElement( 'div' ); + mdiv_hborder.setAttribute( 'id', 'mdiv_hborder'+x+'_'+y ); + // show fake border between mosaic items + if(mosaic_hborder==0) + { + mdiv_hborder.style.backgroundColor = "#afa"; + mdiv_hborder.style.borderTopWidth = "1px"; + mdiv_hborder.style.borderTopColor = "#ebebeb"; + mdiv_hborder.style.borderTopStyle = "dashed"; + mdiv_hborder.style.zIndex = "2"; + } + else + { + mdiv_hborder.style.backgroundColor = "#faa"; + } + mdiv_hborder.style.position = "absolute"; + mdiv_hborder.style.height = mosaic_hborder + "px"; + mdiv_hborder.style.width = mosaic_cols*cell_width + (mosaic_cols-1)*mosaic_vborder +"px"; + mdiv_hborder.style.top = (y)*mosaic_hborder + (y+1)*cell_height + "px"; + + mdiv.appendChild(mdiv_hborder); + } // end mosaic hborder + } // end mosaic rows + + mlayout.appendChild( mdiv ); + +} // end mosaic cols and rows - for( y = 0; y < mosaic_rows; y++ ) - { - var mrow = document.createElement( 'tr' ); - for( x = 0; x < mosaic_cols; x++ ) - { - var mcell = document.createElement( 'td' ); - setclass( mcell, 'mosaic_itm' ); - mcell.style.width = cell_width + "px"; - mcell.style.height = cell_height + "px"; - - var id = x+'_'+y; - var melt = create_button( cells[id] ? cells[id] : '?', 'mosaic_elt_choose(\"'+id+'\");' ); - melt.setAttribute( 'id', id ); - melt.setAttribute( 'title', 'Click to choose stream' ); - - mcell.appendChild( melt ); - mrow.appendChild( mcell ); - } - mtbody.appendChild( mrow ); - } - mtable.appendChild( mtbody ); - mdt.appendChild( mtable ); - mlayout.appendChild( mdt ); - } mosaic_code_update(); }
Albert

dionoea
Cone Master
Cone Master
Posts: 5157
Joined: 03 Dec 2003 23:09
Location: Paris, France

Postby dionoea » 08 Apr 2006 11:53

I've been quite busy last week. I'll check your patch this weekend.
Antoine Cellerier
dionoea
(Please do not use private messages for support questions)

Albert
Cone that earned his stripes
Cone that earned his stripes
Posts: 102
Joined: 15 Mar 2006 08:17

...

Postby Albert » 10 May 2006 13:34

Hello,
any comment? The default mosaic wizard has still shifted panels in IE 6, so anything wrong with my suggestion?
Albert

dionoea
Cone Master
Cone Master
Posts: 5157
Joined: 03 Dec 2003 23:09
Location: Paris, France

Postby dionoea » 10 May 2006 22:39

Nope :) I just forgot (i have loads of things to do ...). Send me a private message on saturday so that i remember to have a look.
Antoine Cellerier
dionoea
(Please do not use private messages for support questions)


Return to “Web and scripting”

Who is online

Users browsing this forum: No registered users and 41 guests