OS4 DepotLogo by McFly 
   Home     List Software     Search     Contact     Help  
 Menu
 
 Features
   Crashlogs
   Bug tracker
   Locale browser
 
 Username

 Password


   Register here

 Main menu
   BBCode test
 
 Content
   Help
   ToDo List
   List Content
 
 
Support the site
 View Issue
[View Software][View Issues][View Comments][View Files]
Name:owb pukapuka
Title:Origyn Web Browser, webkit, CSS capable
Owner:Not assigned
URL:http://www.sand-labs.org/owb
Created:20080831 19:05 by orgin
 Issue details
Type:BugSeverity:Major
Status:ClosedStatus 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
Closed:20090224 16:38 by joerg
Comments:4
Copyright (c) 2004-2020 by Björn Hagström. All Rights Reserved