:: Forum >>

Questions

How did you made the browsers default scrollbar manipulate only the objects you wanted? I had to create my own scrollbar, and althought i works quite fine, I can't get the onmouseup evente when user releases the mouse out of the broser's window. How did you do it?

HELP! This scroll is much faster and smoother than mine in Mozilla. Internet Explorer works great. Just need it to increase speed in Mozilla.
Phackwer
Wednesday, February 18, 2004
onscroll event + scrollLeft/scrollTop properties
Alex (ActiveWidgets)
Wednesday, February 18, 2004
yep, just noticed you used an Iframe. This brouhgt us a lot of problems later, since we did used Iframes too. References for working with Iframes work a bit diferent on each browser (remember we were trying to keep some compatibility with Konqueror at the beginning)

So we decided to use divs instead, but we couldn't use overflow:auto, cause it scrolled the entire table. We needed headers to stick and scroll only horizontally...

like this:
<table>
<tr>
<td>
<div style=overflow:hidden>
<table>
(all headers)
</table>
</div>
<div style=overflow:hidden>
<table>
(listview content)
</table>
</div>
</td>
<td>
(scroll object set to vertical and target = litview content)
</td>
</tr>
<tr>
<td>
(scroll object set to horizontal and target = litview content + headers)
</td>
</tr>
</table>

And this worked great... but had some limitations, for sure...
Phackwer
Wednesday, February 18, 2004
the onscroll event is standard on DOM? If a div has overflow:auto defined, can I use it to scroll only one piece? How can I manipulate that bastard!? Is there any good reference for his event?
Phackwer (again)
Wednesday, February 18, 2004
Just saw how you did it... :-/

I was looking for specific home made functions like ours. Just realized I was thinking it all wrong. You were all the time playing directly with DOM.

Just to let you know:

This is the source of our scroll object. Quite simple. You may notice all our custom made objects have the propertie obj.output which made it very compatible with a lot of nom-DOM browsers.

Even konqueror and Opera do have some compatiblity (they just don't look beatiful enought for comercial purposes).

Cya.

Here's the source:


//Define o campo tipo edicao de linha do formulario.
//Alteracoes no lay-out e funcionalidades gerais do mesmo podem ser feitas aqui

function AkScrollBar(objName)
{
this.objName = objName;
this.type = "scrollbar";
this.id = "_" + this.objName
this.onclickdefault = "";
this.onclick = "";
this.orientation = "v";
this.target = new Array();
this.width = "";
this.height = "100%";
this.output = "";
this.AkOnLoad = "";
this.AkOnLoadOnce = "";
this.donthideMenu = false;
}

//Esta funcaum calcula o tamanho do handler interno da barra de rolagem
AkScrollBar.prototype.setScrollHandler = function ()
{
if (!scrollobj)
{
var obj = document.getElementById(this.target[0]);
var scroll = document.getElementById(this.id);
var upper = document.getElementById(this.id + "_upper");
var handler = document.getElementById(this.id + "_handler");
var lower = document.getElementById(this.id + "_lower");
if (obj)
{
if (this.orientation == "v")
{
var contentHeight = parseInt(obj.offsetHeight);
var containerHeight = parseInt(obj.parentNode.offsetHeight);
var contentPostition = -1*(parseInt(obj.style.top));
var scrollHeight = scroll.offsetHeight - 32;
var upperHeight;
var handlerHeight;
var lowerHeight;

if (contentHeight > containerHeight)
var handlerHeight = ((containerHeight/contentHeight) * scrollHeight);
else
var handlerHeight = scrollHeight;

if (contentPostition > 1)
{
upperHeight = (contentPostition * scroll.offsetHeight) / contentHeight;
lowerHeight = (scrollHeight - handlerHeight) - upperHeight;
}
else
{
lowerHeight = scrollHeight - handlerHeight;
upperHeight = 1;
}

if ((upperHeight + handlerHeight) > scrollHeight)
{
upperHeight = scrollHeight - handlerHeight;
lowerHeight = 1;
}

upper.style.height = parseInt(upperHeight);
handler.style.height = parseInt(handlerHeight);
lower.style.height = parseInt(lowerHeight);
}
else
{
var contentWidth = parseInt(obj.offsetWidth);
var containerWidth = parseInt(obj.parentNode.offsetWidth);
var contentPostition = -1*(parseInt(obj.style.left));
var scrollWidth = scroll.offsetWidth - 32;
var upperWidth;
var handlerWidth;
var loweWidth;

if (contentWidth > containerWidth)
handlerWidth = ((containerWidth/contentWidth) * scrollWidth);
else
handlerWidth = scrollWidth;

if (contentPostition > 0)
{
upperWidth = (contentPostition * scroll.offsetWidth) / contentWidth;
lowerWidth = (scrollWidth - handlerWidth) - upperWidth;
}
else
{
lowerWidth = scrollWidth - handlerWidth;
upperWidth = 1;
}

if ((upperWidth + handlerWidth) > scrollWidth)
{
upperWidth = scrollWidth - handlerWidth;
lowerWidth = 1;
}

upper.style.width = parseInt(upperWidth);
handler.style.width = parseInt(handlerWidth);
lower.style.width = parseInt(lowerWidth);
}
}
}

setTimeout(this.objName + '.setScrollHandler();',100);
}

//Esta funcaum calcula o tamanho do handler interno da barra de rolagem
AkScrollBar.prototype.addTarget = function (target)
{
var target;
this.target[this.target.length] = target;
}

//Esta funcaum rola o objeto especificado para rolagem
AkScrollBar.prototype.scrollAction = function (moveBy)
{
var obj = document.getElementById(this.target[0]);
var upper = document.getElementById(this.id + "_upper");
var handler = document.getElementById(this.id + "_handler");
var lower = document.getElementById(this.id + "_lower");

for (var j = 0; j < this.target.length; j++)
{
obj = document.getElementById(this.target[j]);

if (this.orientation == "v")
{
if (moveBy > 0)
limit = 0
else
limit = obj.offsetHeight;

var curr_value = parseInt(obj.style.top);
var maxMove = -1*(parseInt(obj.offsetHeight) - parseInt(obj.parentNode.offsetHeight));

if (moveBy > (-1 *curr_value))
moveBy = (-1 *curr_value);

if ((moveBy > 0 && limit > curr_value) || (moveBy < 0 && maxMove <= parseInt(curr_value)))
obj.style.top = curr_value + moveBy;
}
else
{
if (moveBy > 0)
limit = 0
else
limit = obj.offsetWidth;

var curr_value = parseInt(obj.style.left);
var maxMove = -1*(parseInt(obj.offsetWidth) - parseInt(obj.parentNode.offsetWidth));

if ((moveBy > 0 && limit > curr_value) || (moveBy < 0 && maxMove <= parseInt(curr_value)))
obj.style.left = curr_value + moveBy;
}
}

if (mouseIsDown)
setTimeout(this.objName + '.scrollAction(' + moveBy + ');',10);
}

//Esta funcaum calcular o tamanho do handler interno da barra de rolagem
AkScrollBar.prototype.closeWidget = function ()
{
if (this.orientation == "v")
{
this.output = "<table id=\"" + this.id + "\" class=\"scrollbar\" style=\"z-index:1;height: " + this.height + "; width: 15; border: 0px\" cellpadding=\"0\" cellspacing=\"0\">";

this.output += "<tr style=\"height:15;\">";
this.output += "<td id=\"" + this.id + "_upper_image_cell\" class=\"scrollbar\" align=center style=\"font-size: 5;\" onmousedown=\"mouseIsDown=true;" + this.objName + ".scrollAction(10);\" onmouseup=\"mouseIsDown=false\">";
this.output += "<img id=\"" + this.id + "_upper_image\" src=\"../images/up_arrow.gif\" border=\"0\">";
this.output += "</td>";
this.output += "</tr>";

this.output += "<tr valign=\"top\">";
this.output += "<td id=\"" + this.id + "_upper\" class=\"\" style=\"height:1px\" onmousedown=\"mouseIsDown=true;" + this.objName + ".scrollAction(20);\" onmouseup=\"mouseIsDown=false\"></td>";
this.output += "</tr>";
this.output += "<tr valign=\"top\">";
this.output += "<td id=\"" + this.id + "_handler\" class=\"scrollbar\" style=\"font-size: 5px;\">&nbsp;</td>";
this.output += "</tr>";
this.output += "<tr valign=\"top\">";
this.output += "<td id=\"" + this.id + "_lower\" class=\"\" style=\"height:1px\" onmousedown=\"mouseIsDown=true;" + this.objName + ".scrollAction(-20);\" onmouseup=\"mouseIsDown=false\"></td>";
this.output += "</tr>";

this.output += "<tr style=\"height:15;\">";
this.output += "<td id=\"" + this.id + "_lower_image_cell\" class=\"scrollbar\" align=center style=\"font-size: 5;\" onmousedown=\"mouseIsDown=true;" + this.objName + ".scrollAction(-10);\" onmouseup=\"mouseIsDown=false\">";
this.output += "<img id=\"" + this.id + "_lower_image\" src=\"../images/down_arrow.gif\" border=\"0\">";
this.output += "</td>";
this.output += "</table>";
}
else
{
this.output = "<table id=\"" + this.id + "\" class=\"scrollbar\" style=\"z-index:1;height: 15; width: " + this.width + "; border: 0px\" cellpadding=\"0\" cellspacing=\"0\">";
this.output += "<tr style=\"height:15;\">";

this.output += "<td id=\"" + this.id + "_upper_image_cell\" class=\"scrollbar\" align=center style=\"width:15;font-size: 5;\" onmousedown=\"mouseIsDown=true;" + this.objName + ".scrollAction(10);\" onmouseup=\"mouseIsDown=false\">";
this.output += "<img id=\"" + this.id + "_upper_image\" src=\"../images/left_arrow.gif\" border=\"0\">";
this.output += "</td>";

this.output += "<td id=\"" + this.id + "_upper_\" class=\"\" style=\"font-size: 1px;\" onmousedown=\"mouseIsDown=true;" + this.objName + ".scrollAction(20);\" onmouseup=\"mouseIsDown=false\">&nbsp;</td>";
this.output += "<td id=\"" + this.id + "_handler\" class=\"scrollbar\" style=\"font-size: 1px;\">&nbsp;</td>";
this.output += "<td id=\"" + this.id + "_lower\" class=\"\" style=\"font-size: 1px;\" onmousedown=\"mouseIsDown=true;" + this.objName + ".scrollAction(-20);\" onmouseup=\"mouseIsDown=false\">&nbsp;</td>";

this.output += "<td id=\"" + this.id + "_lower_image_cell\" class=\"scrollbar\" align=center style=\"width:15;font-size: 5;\" onmousedown=\"mouseIsDown=true;" + this.objName + ".scrollAction(-10);\" onmouseup=\"mouseIsDown=false\">";
this.output += "<img id=\"" + this.id + "_lower_image\" src=\"../images/right_arrow.gif\" border=\"0\">";
this.output += "</td>";

this.output += "</table>";
}

this.AkOnLoadOnce = this.objName + ".setScrollHandler();";
this.AkOnLoad = "";
this.AkOnLoad += "scrollerObj = document.getElementById('" + this.id + "_handler');";
this.AkOnLoad += "scrollerObj.targetObj= " + this.objName + ";";
this.AkOnLoad += "scrollerObj.onmousedown = beginScroll;";
if (this.donthideMenu)
{
this.AkOnLoad += "scrollerObj = document.getElementById('" + this.id + "');";
this.AkOnLoad += "scrollerObj.donthideMenu = " + this.donthideMenu + ";";
this.AkOnLoad += "scrollerObj = document.getElementById('" + this.id + "_handler');";
this.AkOnLoad += "scrollerObj.donthideMenu = " + this.donthideMenu + ";";
this.AkOnLoad += "scrollerObj = document.getElementById('" + this.id + "_upper');";
this.AkOnLoad += "scrollerObj.donthideMenu = " + this.donthideMenu + ";";
this.AkOnLoad += "scrollerObj = document.getElementById('" + this.id + "_lower');";
this.AkOnLoad += "scrollerObj.donthideMenu = " + this.donthideMenu + ";";
this.AkOnLoad += "scrollerObj = document.getElementById('" + this.id + "_upper_image');";
this.AkOnLoad += "scrollerObj.donthideMenu = " + this.donthideMenu + ";";
this.AkOnLoad += "scrollerObj = document.getElementById('" + this.id + "_lower_image');";
this.AkOnLoad += "scrollerObj.donthideMenu = " + this.donthideMenu + ";";
this.AkOnLoad += "scrollerObj = document.getElementById('" + this.id + "_upper_image_cell');";
this.AkOnLoad += "scrollerObj.donthideMenu = " + this.donthideMenu + ";";
this.AkOnLoad += "scrollerObj = document.getElementById('" + this.id + "_lower_image_cell');";
this.AkOnLoad += "scrollerObj.donthideMenu = " + this.donthideMenu + ";";
}
}

//Funcoes externas para uso do Scroll Handler como navegador de scroll
//Variaveis globais acessiveis pelas funcoes de resize das colunas
var scrollobj = null
var scrollSize = null;
var beginXpos = null;
var beginYpos = null;
var endXpos = null;
var endYpos = null;
var maxheight = null;
var maxwidth = null;
var handlerArea = null;
var upperArea = null;
var lowerArea = null;
var targetArea = null;
var scrollOrientation = null;
var mouseIsDown = false;

function beginScroll(e)
{
if (!e) var e = window.event;
if (e.clientX)
{
beginXpos = (e.clientX + document.body.scrollLeft);
beginYpos = (e.clientY + document.body.scrollTop);

}
else
{
beginXpos = (e.pageX + document.body.scrollLeft);
beginYpos = (e.pageY + document.body.scrollTop);
}

if (e.target)
scrollobj = e.target.targetObj;
else
scrollobj = e.srcElement.targetObj;

scrollSize = document.getElementById(scrollobj.id);
handlerArea = document.getElementById(scrollobj.id + "_handler");
upperArea = document.getElementById(scrollobj.id + "_upper");
lowerArea = document.getElementById(scrollobj.id + "_lower");
targetArea = document.getElementById(scrollobj.target[0]);

scrollOrientation = scrollobj.orientation;
maxheight = parseInt(scrollSize.offsetHeight) - 30;
maxwidth = parseInt(scrollSize.offsetWidth) - 30;

document.onmousemove = scrollMove;
document.onmouseup = endScroll;

return false;
}

function scrollMove(e)
{
if (!e) var e = window.event;

if (scrollOrientation == "v")
{
if (e.clientY)
endYpos = (e.clientY + document.body.scrollTop);
else
endYpos = (e.pageY + document.body.scrollTop);

size = parseInt(endYpos) - parseInt(beginYpos);

handlerSize = parseInt(handlerArea.style.height);
upperSize = parseInt(upperArea.style.height);
lowerSize = parseInt(lowerArea.style.height);

newUpperSize = (upperSize + size);
newLowerSize = (lowerSize - size);

if ((((newUpperSize + newLowerSize + handlerSize) <= maxheight)) && newUpperSize > 0 && newLowerSize > 0)
{
mouseIsDown = true

upperArea.style.height = newUpperSize;
lowerArea.style.height = newLowerSize;

contentHeight = parseInt(targetArea.offsetHeight);
contentPositition = parseInt(targetArea.style.top);

scrollItemBy = parseInt( -1 * (contentHeight * (newUpperSize / maxheight)) - contentPositition);
scrollobj.scrollAction(scrollItemBy);
}

beginYpos = endYpos;
return false;
}
else
{
if (e.clientX)
endXpos = (e.clientX + document.body.scrollTop);
else
endXpos = (e.pageX + document.body.scrollTop);

size = parseInt(endXpos) - parseInt(beginXpos);

handlerSize = parseInt(handlerArea.style.width);
upperSize = parseInt(upperArea.style.width);
lowerSize = parseInt(lowerArea.style.width);

newUpperSize = (upperSize + size);
newLowerSize = (lowerSize - size);

if ((((newUpperSize + newLowerSize + handlerSize) <= maxwidth)) && newUpperSize > 0 && newLowerSize > 0)
{
upperArea.style.width = newUpperSize;
lowerArea.style.width = newLowerSize;

contentWidth = parseInt(targetArea.offsetWidth);
contentPositition = parseInt(targetArea.style.left);

scrollItemBy = parseInt( -1 * (contentWidth * (newUpperSize / maxwidth)) - contentPositition);
scrollobj.scrollAction(scrollItemBy);
}

beginXpos = endXpos;
return false;
}
}

function endScroll(e)
{
scrollobj = null
scrollSize = null;
beginXpos = null;
beginYpos = null;
endXpos = null;
endYpos = null;
maxheight = null;
maxwidth = null;
handlerArea = null;
upperArea = null;
lowerArea = null;
targetArea = null;
scrollOrientation = null;
mouseIsDown = false;
document.onmousemove = null;
document.onmouseup = null;
disableSelection();
return false;
}

Phackwer (again and again)
Wednesday, February 18, 2004

This topic is archived.


Back to support forum

Forum search