3.2.0
Forum Demo Guide API Store

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
February 18,
onscroll event + scrollLeft/scrollTop properties
Alex (ActiveWidgets)
February 18,
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
February 18,
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)
February 18,
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)
February 18,

This topic is archived.

See also:

Updating data model question Bhaskar (7)
Question about adding a new row and refresh the table. flashsnake (5)
Question on reusing code of the forum Dietrich (5)
grid not displaying, setup questions PleaseHelpNewbie (4)
onClick event handler question pcasey@earthlink.net (3)
may i ask a naive question? absolutely newbie (3)
A common question, however, no good solution found in this forum : How to pass dynamic parameters to child window's URL absolutely newbie (3)
A question about coupling/cohesion in templates/grid control Steve N (3)
SetFormat Question Scott (3)
Basic question... Absynthe (2)

Back to support forum

Search

New Data Grid
Angular Data Grid
React Data Grid
Vue Data Grid
Svelte Data Grid

Version 2

Looking for AW 2.6 ?
The old site is here.

ActiveWidgets is a javascript library for creating user interfaces. It offers excellent performance for complex screens while staying simple, compact and easy to learn. Deployed by thousands of commercial customers in more than 70 countries worldwide.

Copyright © ActiveWidgets 2021
Getting Started
 
Sample Code API Reference Support Forum Prices & Licensing
 
Contact Us