| ![[View Software]](images/buttons/View Software.gif) ![[View Issues]](images/buttons/View Issues.gif) ![[View Comments]](images/buttons/View Comments.gif) [View Files]
| Type: | Bug | Severity: | Major | | Status: | Closed | Status Comment: | Fixed in 3.7 | | Title: | OWB failed on some dynamic effect ? | | Version: | 3.6 | | Description: | It seems that OWB doesn't respect a few standard rules in DHTML at all, check for example this website:
http://www.qimmagine.it/
As you can see using OWB the buttons are completely in a wrong position and also they doesn't work at all, that buttons serves to move thumbnails at the left or the right of the photo-container
And now check the script that create that effect (sorry is a little long):
-----------------------------------------------------------------
// :::::::::::::::::::::::::
// ::: Initialize Page ::::
// :::::::::::::::::::::::::
window.onload=InitializePage;
function InitializePage()
{
// Install Image Viewer HTML file name holderInput element
FirstDIV=document.createElement('DIV')
document.body.appendChild(FirstDIV)
FirstDIV.innerHTML="<INPUT type=hidden id=fileNameHolder>"+
"<div id='interface'>" +
" <div id='ViewingArea'>" +
" <table border='0' cellpadding='2'>" +
" <tr id='ImageContainer'>" +
" </tr>" +
" </table>" +
" </div>" +
" <div id='controls'>" +
" <div id='Verbiage'>" +
" </div>" +
" <div id='ScrollLeft'>" +
" <input onclick='moveLeft()' type='button' value='<--'>" +
// <input onclick='moveLeft()' type='image' src='img/favicon.png'>" +
" </div>" +
" <div id='ScrollRight'>" +
" <input onclick='moveRight()' type='button' value='-->'>" +
// <input onclick='moveRight()' type='image' src='frecciadx.png'>" +
" </div>" +
" </div>" +
"</div>"
if (ImageArray!=null)
{for (l=0; l<ImageArray.length; l++)
{
TDElement=document.createElement("TD");
TDElement.innerHTML="<img border='0' src='Thumbnails/"+ImageArray[l]+"'>"
document.getElementById('ImageContainer').appendChild(TDElement)
}
}
SElement=document.getElementById('Verbiage')
SElement.innerHTML='<a href=http://www.4thorder.us/Scripts/ target=_blank><font color='+ControlsFontColor+'></font></a><br /><font size=2></font>'
setStyles();
setIDs();
attachEventhandlers();
}
function setStyles()
{
// set Image Scroller DIVs width Dimensions and position type
document.getElementById('interface').style.position="absolute";
document.getElementById('interface').style.width=InterFaceWidth+"px";
document.getElementById('interface').style.overflow="hidden";
DIVCol=document.getElementById('interface').getElementsByTagName('DIV');
if (DIVCol!=null)
{for (p=0; p<DIVCol.length; p++)
{
DIVCol.item(p).style.position="absolute";
DIVCol.item(p).style.width=InterFaceWidth+"px";
if(DIVCol.item(p).id=="ScrollRight")
{
DIVCol.item(p).style.width=InterFaceWidth-40+"px";
DIVCol.item(p).style.textAlign="right";
}
}
}
document.getElementById('ScrollLeft').style.width=40+"px";
document.getElementById('Verbiage').style.width=InterFaceWidth-80+"px";
// set z-index
document.getElementById('interface').style.zIndex=1;
document.getElementById('ViewingArea').style.zIndex=2;
document.getElementById('controls').style.zIndex=2;
document.getElementById('Verbiage').style.zIndex=5;
document.getElementById('ScrollLeft').style.zIndex=4;
document.getElementById('ScrollRight').style.zIndex=4;
// set positions (left)
document.getElementById('ViewingArea').style.left=0+"px";
document.getElementById('controls').style.left=0+"px";
document.getElementById('ScrollLeft').style.left=2+"px";
document.getElementById('ScrollRight').style.left=38+"px";
document.getElementById('Verbiage').style.left=40+"px";
// set positions (top)
document.getElementById('ViewingArea').style.top=0+"px";
document.getElementById('controls').style.top=ViewingAreaHeight+2+"px";
document.getElementById('ScrollLeft').style.top=5+"px";
document.getElementById('ScrollRight').style.top=5+"px";
// set Image Scroller DIVs height Dimensions
document.getElementById('ViewingArea').style.height=ViewingAreaHeight+"px";
document.getElementById('controls').style.height=35+"px";
document.getElementById('interface').style.height=ViewingAreaHeight+54+"px";
document.getElementById('Verbiage').style.height=35+"px";
// Set Viewer Page position
document.getElementById('interface').style.left= PagePositionLEFT+"px";
document.getElementById('interface').style.top= PagePositionTOP+"px";
// text alignment for controller text
document.getElementById('Verbiage').style.textAlign='center';
// image Viewer Color Scheme
document.getElementById('controls').style.backgroundColor=ControlsBGColor;
document.getElementById('Verbiage').style.color=ControlsFontColor;
document.getElementById('ViewingArea').style.backgroundColor=ViewAreaBGColor;
if(OverALLBorder=='on'){
document.getElementById('interface').style.borderStyle='solid';
document.getElementById('interface').style.borderWidth="1px";
document.getElementById('interface').style.borderColor=OverALLBorderColor;}
// Image Styles
IMGCol=document.getElementById('interface').getElementsByTagName('IMG');
if (IMGCol!=null)
{for (im=0; im<IMGCol.length; im++)
{
IMGCol.item(im).style.borderStyle='solid';
IMGCol.item(im).style.borderWidth="1px";
IMGCol.item(im).style.borderColor=ImageBorderColor;
}
}
// Button Styles
BTNCol=document.getElementById('interface').getElementsByTagName('INPUT');
if (BTNCol!=null)
{for (p=0; p<BTNCol.length; p++)
{
BTNCol.item(p).style.borderStyle='solid';
BTNCol.item(p).style.borderWidth="10px";
BTNCol.item(p).style.backgroundColor=ButtonBGColor;
BTNCol.item(p).style.color=ButtonFontColor;
BTNCol.item(p).style.borderColor=ButtonBorderColor;
}
}
// Table Cell Styles
TDCol=document.getElementById('interface').getElementsByTagName('TD');
if (TDCol!=null)
{for (td=0; td<TDCol.length; td++)
{TDCol.item(td).style.verticalAlign=ImageValignment;}}
}
// ::::::::::::::::::::::::
// ::: Event Handlers :::
// ::::::::::::::::::::::::
function onclickHandler(e)
{
// Browser compatibility code
var targ;
if (!e){var e = window.event;}
if (e.target)
{ targ = e.target;
var xpos=(e.pageX); var ypos=(e.pageY);}
else if (e.srcElement)
{ var xpos=(event.x); var ypos=(event.y);
targ = e.srcElement;}
// Strip file name from image src
var spath=targ.getAttribute('src');
wholePathLength=spath.length;
strippedPathLength=spath.substring(0,spath.lastIndexOf("/")).length;
ifm= spath.substring(strippedPathLength+1,wholePathLength);
// Store file name in holder for use by popup windoow
document.getElementById('fileNameHolder').value=ifm;
// Open the window at location of thumbnail image
var pos = "left="+xpos+",top="+ypos;
// window.open("imageViewerPopup.html","imageWindow","width=50,height=50,toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,"+pos);
}
// Attach event handlers to all images within container
function attachEventhandlers()
{
ContainerElement=document.getElementById('ImageContainer')
TDCol=ContainerElement.getElementsByTagName('TD');
if (TDCol!=null)
{for (l=0; l<TDCol.length; l++)
{
IMGCol=TDCol.item(l).getElementsByTagName("IMG");
IMGCol.item(0).style.cursor="default"
IMGCol.item(0).setAttribute('id',"Image"+l)
IMGCol.item(0).onclick=onclickHandler;
}
}
}
// Set ID's for all table cells
function setIDs()
{
ContainerElement=document.getElementById('ImageContainer')
TDCol=ContainerElement.getElementsByTagName('TD');
if (TDCol!=null)
{ for (i=0; i<TDCol.length; i++)
{TDCol.item(i).setAttribute('id',i)}
}
}
// :::::::::::::::::::::::::
// ::: Scroll Functions ::
// :::::::::::::::::::::::::
function moveLeft()
{
ContainerElement=document.getElementById("ImageContainer");
firstTD=document.getElementById("0");
dupfirstTD=firstTD.cloneNode(false)
dupfirstTD.innerHTML=firstTD.innerHTML
ContainerElement.removeChild(firstTD);
ContainerElement.appendChild(dupfirstTD);
setStyles; setIDs();attachEventhandlers();
}
function moveRight()
{
lastTD=document.getElementById(TDCol.length-1);
duplastTD=lastTD.cloneNode(false)
duplastTD.innerHTML=lastTD.innerHTML
firstTD=document.getElementById("0");
ContainerElement=document.getElementById("ImageContainer");
ContainerElement.insertBefore(duplastTD,firstTD);
ContainerElement.removeChild(lastTD);
setStyles; setIDs();attachEventhandlers();
}
-----------------------------------------------------------------------
Other incompatibiluty issue is about the photo-container itself, I using
frames and a mix of width/height both in HTML and CSS to put it at the center
of the screen, sadly OWB render it at the left :-/
This website works perfectly (tested 100%) on Internet Explorer 6.0 and Firefox 3.x
Are there any possibility to solve it as Amiga's OWB part or is it a WebKit issue ? | | Created: | 20090213 00:22 by samo79 | | Assigned: | 20090224 16:38 to joerg | | Fixed: | 19700101 01:00 by | | Closed: | 20090224 16:38 by joerg | | Comments: | 4 |
|
|
