Please, no "fixed" solutions... It does not work in IE8 in quirks mode, but this is what I need.
I write this JS:
function isNumber(n)
{
return !isNaN(parseFloat(n)) && isFinite(n);
}
function getHighestZIndexIn(start_elem, include_static_elems)
{
var curr_elem = start_elem ? start_elem : document.body;
var current_highest = curr_elem.style.zIndex;
for (var i = 0; i < curr_elem.children.length; i++)
{
if (!include_static_elems && (!curr_elem.children[i].style.position || curr_elem.children[i].style.position.toLowerCase() == "static"))
continue;
var temp_highest = getHighestZIndexIn(curr_elem.children[i]);
if (!isNumber(temp_highest))
continue;
if (!isNumber(current_highest))
{
current_highest = temp_highest;
continue;
}
if (current_highest < temp_highest)
current_highest = temp_highest;
}
return current_highest;
}
function createPopupPanel(header, with_content, header_color, tbl_bg_color)
{
var hzi = getHighestZIndexIn(null, true);
hzi = hzi ? hzi + 1 : 1;
var div_id = "temp_div_" + new Date().getTime();
var bg_div = document.createElement("div");
bg_div.style.position = "absolute";
bg_div.style.zIndex = hzi;
bg_div.id = div_id;
bg_div.style.width = bg_div.style.height = "100%";
try { bg_div.style.backgroundColor = "rgba(100, 100, 100, 0.5)"; }
catch (exc) { bg_div.style.backgroundColor = "gray"; } //ie6, ie7, ie8 fix
bg_div.style.left = bg_div.style.right = bg_div.style.top = bg_div.style.bottom = "0px";
var main_div = document.createElement("div");
main_div.style.position = "absolute";
main_div.style.width = main_div.style.height = "80%";
main_div.style.left = main_div.style.right = main_div.style.top = main_div.style.bottom = "10%";
var table = "<table cellspacing = '0' cellpadding = '0' style = 'width: 100%; height: 100%'>";
table += "<tr><td style = 'background-color: " + header_color + ";'>" + header + "</td><td style = 'cursor: pointer; background-color: red; width: 1px; height: 1px;' onclick = \"document.body.style.overflow = 'auto'; document.body.removeChild(document.getElementById('" + div_id + "'));\">Close</td></tr>";
table += "<tr><td colspan = '2' style = 'background-color: " + tbl_bg_color + ";'>" + "<div style = 'position: relative; top: 0px; left: 0px; right: 0px; bottom: 0px; width: 100%; height: 100%;'><div id = '" + div_id + "_content_container' style = 'position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; width: 100%; height: 100%; overflow: auto;'>" + with_content + "</div></div>" + "</td></tr>";
table += "</table>";
main_div.innerHTML = table;
bg_div.appendChild(main_div);
document.body.style.overflow = "hidden";
document.body.appendChild(bg_div);
return div_id + "_content_container";
}
And this test page:
<html>
<head>
<title>test ppanel</title>
<script type = "text/javascript" src = "libs/ppanel.js"></script>
</head>
<body>
<input type = "button" value = "create div" onclick = "createPopupPanel('asd', 'dsa', 'LightBlue', 'GhostWhite');" />
<p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<input type = "button" value = "create div" onclick = "createPopupPanel('asd', 'dsa', 'LightBlue', 'GhostWhite');" />
<p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<input type = "button" value = "create div" onclick = "createPopupPanel('asd', 'dsa', 'LightBlue', 'GhostWhite');" />
<p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<input type = "button" value = "create div" onclick = "createPopupPanel('asd', 'dsa', 'LightBlue', 'GhostWhite');" />
<p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<input type = "button" value = "create div" onclick = "createPopupPanel('asd', 'dsa', 'LightBlue', 'GhostWhite');" />
<p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<input type = "button" value = "create div" onclick = "createPopupPanel('asd', 'dsa', 'LightBlue', 'GhostWhite');" />
<p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
</body>
</html>
Then I press any button and the panel appears at the page top.
Is there any way I can place my div right at viewport and make it dynamically change it's size at window resizes?
If, during the pop up, the background stays static, ergo no elements are appended or changed. You can use this:
//store window scroll values
var storeScroll = [document.body.scrollLeft, document.body.scrollTop]; //x, y
document.body.style.overflow = "hidden";
window.scrollTo(0, 0);
//when the pop is closed revert back to scroll position
window.scrollTo(storeScroll[0], storeScroll[1]);
document.body.style.overflow = "auto";
There is a way. I usually achieve this with jquery using:
$(window).width() //to get window width
$(window).height() // to get window height
$('#id').width(val) // to change the width accordingly
For positioning I use a display:absolute in css changing
$('#id').css('left',$(window).width*percentage); //as an example
usually for the top property you have to consider other elements unless you just want it on top
All of this code must run under a
$(window).resize(function(){
//to get new window dimensions
var windowwidth = $(window).width();
var windowheight = $(window).height();
//resizing code
});
Related
I was trying to make some controls to the box move to left, right, up and down. But when i make all the functions in the script tag, it get an error (in all the four onclick button):
Function not defined at HTMLButtonElement.onclick
in the lines that i make the button tag.
<html>
<button onclick = "leftmove()" id = "b1"> Left </button>
<button onclick = "rightmove()" id = "b2"> Right </button>
<button onclick = "upmove()" id = "b3"> Up </button>
<button onclick = "downmove()" id = "b4"> Down </button>
<h1 id = "box"></h1>
<style type = "text/css">
#box {
width: 50px;
height: 50px;
background-color: black;
}
<script>
var box = document.getElementById("box");
function leftmove() {
margin += 2;
box.style.marginLeft = margin + "px";
}
var box = document.getElementById("box");
function rightmove() {
margin -= 2;
box.style.marginLeft = margin + "px";
}
var box = document.getElementById("box");
function upmove() {
margin += 2;
box.style.marginTop = margin + "px";
}
var box = document.getElementById("box");
function downmove() {
margin -= 2;
box.style.marginLeft = margin + "px";
}
</script>
</html>
When using <script> tags like this, the functions and targeted tags have to be defined before usage. To make you example work you have to split you script tag to first define you functions and set the box variable later, after you have defined the corresponding tag. Also the margin variable is missing, I added is as zero but that's probably not how you want it. Working example:
<html>
<body>
<script>
var margin = 0;
function leftmove() {
margin += 2;
box.style.marginLeft = margin + "px";
}
function rightmove() {
margin -= 2;
box.style.marginLeft = margin + "px";
}
function upmove() {
margin += 2;
box.style.marginTop = margin + "px";
}
var box = document.getElementById("box");
function downmove() {
margin -= 2;
box.style.marginLeft = margin + "px";
}
</script>
<button onclick="leftmove()" id="b1"> Left </button>
<button onclick="rightmove()" id="b2"> Right </button>
<button onclick="upmove()" id="b3"> Up </button>
<button onclick="downmove()" id="b4"> Down </button>
<h1 id="box"></h1>
<style type="text/css">
#box {
width: 50px;
height: 50px;
background-color: black;
}
</style>
<script>
var box = document.getElementById("box");
</script>
</body>
</html>
A few notes aside the question:
A <div> might be more appropriate instead of the <h1> for the box
For rendering performance you would be better of using transform(x, y) instead of margins to move the box
Some JavaScript variables were created to manipulate the CSS indirectly. Other elements were also implemented to better understand the movements.
<html>
<style type = "text/css">
#box {
margin: 100px;
width: 50px;
height: 50px;
background-color: black;
}
</style>
<button onclick = "start()" id = "b0"> Start </button>
<button onclick = "leftmove()" id = "b1"> Left </button>
<button onclick = "rightmove()" id = "b2"> Right </button>
<button onclick = "upmove()" id = "b3"> Up </button>
<button onclick = "downmove()" id = "b4"> Down </button>
<div id="box"></div>
<script type="text/javascript">
var box = document.getElementById("box");
var margin = 10;
var marginX = 100;
var marginY = 100;
function start(){
box.style.margin = "100px";
marginX = 100;
marginY = 100;
}
function leftmove() {
marginX -= margin;
box.style.marginLeft = marginX + "px";
}
function rightmove() {
marginX += margin;
box.style.marginLeft = marginX + "px";
}
function upmove() {
marginY -= margin;
box.style.marginTop = marginY + "px";
}
function downmove() {
marginY += margin;
box.style.marginTop = marginY + "px";
}
</script>
</html>
I'm trying to create a space between the black keys:
I've tried margin-left, but it still stay the same. My css is dynamically generated using javascript:
//Append inside a pre-made window
this.keyboardDiv = document.createElement("div");
var attr = document.createAttribute("id");
attr.value = "mkbKeyboardDiv";
this.keyboardDiv.setAttributeNode(attr);
widgetWindow.getWidgetBody().append(this.keyboardDiv);
.......
var mkbKeyboardDiv = this.keyboardDiv;
mkbKeyboardDiv.style.display = 'inline';
mkbKeyboardDiv.style.visibility = 'visible';
mkbKeyboardDiv.style.border = '0px';
mkbKeyboardDiv.style.width = '300px';
mkbKeyboardDiv.style.top = '0px';
mkbKeyboardDiv.innerHTML = '';
mkbKeyboardDiv.innerHTML = ' <div id="keyboardHolder2"><table class="white"><tbody><tr id="myrow"></tr></tbody></table><table class="black"><tbody><tr id="myrow2"></tr></tbody></table></div>'
var keyboardHolder2 = docById('keyboardHolder2');
keyboardHolder2.style.bottom = '10px';
keyboardHolder2.style.left = '0px';
keyboardHolder2.style.height = '145px'
keyboardHolder2.style.width = '700px';
keyboardHolder2.style.backgroundColor = 'white';
var blackRow = document.getElementsByClassName('black');
blackRow[0].style.top = '1px';
........
var parenttbl2 = document.getElementById('myrow2');
var newel2 = document.createElement('td');
var elementid2 = document.getElementsByTagName('td').length;
newel2.setAttribute('id', 'blackRow' + myrow2Id.toString());
newel2.style.textAlign = 'center';
if ([2,6,9,13,16,20].indexOf(myrow2Id) !== -1) {
parenttbl2.appendChild(newel2);
var el = docById('blackRow' + myrow2Id.toString());
el.style.background = 'transparent';
el.style.border = 'none';
el.style.zIndex = '10';
el.style.position = 'relative';
p--;
myrow2Id++;
continue;
}
this.layout[p].objId = 'blackRow' + myrow2Id.toString();
myrow2Id++;
newel2.style.position = 'relative';
newel2.style.zIndex = '200';
parenttbl2.appendChild(newel2);
HTML:
<html>
<head>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div id="floatingWindows"></div>
</body>
</html>
CSS:
#mkbKeyboardDiv {
position: relative;
left: 0px;
top: 0px;
border: 0 !important;
background: rgba(255, 255, 255, 0.85) !important;
width: 1020px;
}
I think I'm missing something, I just can't think of it. Is there any other way of putting space on each of the black div tags?
EDIT: I've added the HTML and CSS. The CSS is only for the keyboard's container. The white keys and black keys' CSS are all generated using Javascript
I need to modify a pasted image inside a contenteditable div: resize it proportionately, add borders, etc... Perhaps this can be achieved by adding a className that will alter the necessary CSS properties.
The problem is that I don't know how to reference the focused, i.e. the active, the clicked-upon image or any element for that matter.
This is the HTML that I am trying to use
<!DOCTYPE html>
<html>
<body>
<div contenteditable="true">This is a div. It is editable. Try to change this text.</div>
</body>
</html>
Using css, html and javascript
Your editable content should be inside a parent div with an id or class name, you can even have different divs for images and such.
Then it is as simple as having css like so:
#editableContentDiv img {
imgProperty: value;
}
Then you can have javascript like so:
function insertImage(){
var $img = document.querySelector("#editableContentDiv img");
$img.setAttribute('class','resize-drag');
}
Eventually if you have more than one img inside the same div you can use querySelectorAll instead of querySelector and then iterate through the img tags inside same div.
I beleive that should at least give you an idea of where to start with what you want.
Similar example
I found this gist that seems to have similar things to want you want but a bit more complicated.
function resizeMoveListener(event) {
var target = event.target,
x = (parseFloat(target.dataset.x) || 0),
y = (parseFloat(target.dataset.y) || 0);
// update the element's style
target.style.width = event.rect.width + 'px';
target.style.height = event.rect.height + 'px';
// translate when resizing from top or left edges
x += event.deltaRect.left;
y += event.deltaRect.top;
updateTranslate(target, x, y);
}
function dragMoveListener(event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.dataset.x) || 0) + event.dx,
y = (parseFloat(target.dataset.y) || 0) + event.dy;
updateTranslate(target, x, y);
}
function updateTranslate(target, x, y) {
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the position attributes
target.dataset.x = x;
target.dataset.y = y;
}
function insertImage() {
var $img = document.createElement('img');
$img.setAttribute('src', 'https://vignette.wikia.nocookie.net/googology/images/f/f3/Test.jpeg/revision/latest?cb=20180121032443');
$img.setAttribute('class', 'resize-drag');
document.querySelector(".container-wrap").appendChild($img);
var rect = document.querySelector(".container-wrap").getBoundingClientRect();
$img.style.left = rect.left;
$img.style.top = rect.top;
}
function dataTransfer() {
//cleanup
var $out = document.querySelector(".out-container-wrap");
while ($out.hasChildNodes()) {
$out.removeChild($out.lastChild);
}
//get source
var source = document.querySelector('.container-wrap')
//get data
var data = getSource(source);
//add data to target
setSource($out, data);
}
/**
* Get data from source div
*/
function getSource(source) {
var images = source.querySelectorAll('img');
var text = source.querySelector('div').textContent;
//build the js object and return it.
var data = {};
data.text = text;
data.image = [];
for (var i = 0; i < images.length; i++) {
var img = {}
img.url = images[i].src
img.x = images[i].dataset.x;
img.y = images[i].dataset.y;
img.h = images[i].height;
img.w = images[i].width;
data.image.push(img)
}
return data;
}
function setSource(target, data) {
//set the images.
for (var i = 0; i < data.image.length; i++) {
var d = data.image[i];
//build a new image
var $img = document.createElement('img');
$img.src = d.url;
$img.setAttribute('class', 'resize-drag');
$img.width = d.w;
$img.height = d.h;
$img.dataset.x = d.x;
$img.dataset.y = d.y;
var rect = target.getBoundingClientRect();
$img.style.left = parseInt(rect.left);
$img.style.top = parseInt(rect.top);
//transform: translate(82px, 52px)
$img.style.webkitTransform = $img.style.transform = 'translate(' + $img.dataset.x + 'px,' + $img.dataset.y + 'px)';
//$img.style.setProperty('-webkit-transform', 'translate('+$img.dataset.x+'px,'+$img.dataset.y+'px)');
target.appendChild($img);
}
//make a fresh div with text content
var $outContent = document.createElement('div')
$outContent.setAttribute('class', 'out-container-content');
$outContent.setAttribute('contenteditable', 'true');
$outContent.textContent = data.text;
target.appendChild($outContent);
}
interact('.resize-drag')
.draggable({
onmove: dragMoveListener,
inertia: true,
restrict: {
restriction: "parent",
endOnly: true,
elementRect: {
top: 0,
left: 0,
bottom: 1,
right: 1
}
}
})
.resizable({
edges: {
left: true,
right: true,
bottom: true,
top: true
},
onmove: resizeMoveListener
})
.resize-drag {
z-index: 200;
position: absolute;
border: 2px dashed #ccc;
}
.out-container-content,
.container-content {
background-color: #fafcaa;
height: 340px;
}
#btnInsertImage {
margin-bottom: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://code.interactjs.io/interact-1.2.4.min.js"></script>
</head>
<body>
<button id="btnInsertImage" onclick="insertImage()">Insert Image</button>
<div class="container-wrap">
<div class="container-content" contenteditable="true">This is the content of the container. The content is provided along with the image. The image will be moved around and resized as required. The image can move within the boundary of the container.</div>
</div>
<button id="btnSubmit" onclick="dataTransfer()">Submit</button>
<div class="out-container-wrap">
</div>
</body>
</html>
Source
This is what I tried and it seems to be working - at least on my system, the snippet I made does not work unfortunately.
function getSelImg(){
var curObj;
window.document.execCommand('CreateLink',false, 'http://imageselectionhack/');
allLinks = window.document.getElementsByTagName('A');
for(i = 0; i < allLinks.length; i++)
{
if (allLinks[i].href == 'http://imageselectionhack/')
{
curObj = allLinks[i].firstChild;
window.document.execCommand('Undo'); // undo link
break;
}
}
if ((curObj) && (curObj.tagName=='IMG'))
{
//do what you want to...
curObj.style.border = "thick solid #0000FF";
}
}
<!DOCTYPE html>
<html>
<body>
<input type="button" onclick="getSelImg()" value="set img border">
<div contenteditable="true">This is a div.<br>
It is editable.<br>
Try to paste an image here:<br>
###########################<br>
<br>
<br>
<br>
###########################
</div>
</body>
</html>
I have a problem with popover position.
This is what it looks like:
This is what it is supposed to look like:
With position: relative; on the timetable, the popover works, but the timetable doesn't:
Code:
In my html file I have one div with position: relative;
<div id="bg-timetable" class="bg-timetable"/>
In my JS, I create in it a small div with timetable with that has position: absolute;. For event I have a function:
function createDivEvent(event) {
var start = new Time(event.startTime);
var end = new Time(event.endTime);
var div = document.createElement("div");
div.classList.add("event");
div.id = event.id;
div.style.top = start.getPercent() + "%";
div.style.height = (end.getPercent() - start.getPercent()) + "%";
div.innerHTML = event.subject.name + " (" + event.place.name + ")";
var a = document.createElement('a');
a.setAttribute('tabindex', "0");
a.setAttribute('data-toggle','popover');
a.setAttribute('data-content','Some content inside the popover');
a.setAttribute('title',div.innerHTML);
a.appendChild(div);
var d = new Date(event.date)
document.getElementById(weekday[d.getDay()]).appendChild(a);
}
Can You help me?
Ok I fix it:
function createDivEvent(event) {
var start = new Time(event.startTime);
var end = new Time(event.endTime);
var div = document.createElement("div");
div.id = event.id;
div.innerHTML = event.subject.name + " (" + event.place.name + ")";
var a = document.createElement('a');
a.setAttribute('tabindex', "0");
a.setAttribute('data-toggle','popover');
a.setAttribute('data-content','Some content inside the popover');
a.setAttribute('title',div.innerHTML);
a.setAttribute('data-placement',"top");
a.appendChild(div);
a.style.top = start.getPercent() + "%";
a.style.height = (end.getPercent() - start.getPercent()) + "%";
a.classList.add("event");
var d = new Date(event.date)
document.getElementById(weekday[d.getDay()]).appendChild(a);
}
Css:
a.event {
position: absolute;
width: 95%;
background-color: lightblue;
}
I am currently trying to implement a GridView with a frozen header. I've gotten the header frozen using javascript found online. Here is the code:
var GridId = "<%=dgContacts.ClientID %>";
var ScrollHeight = 180;
var ScrollWidth = 700;
window.onload = function () {
enablePostLog();
var grid = document.getElementById(GridId);
var gridWidth = grid.offsetWidth;
var headerCellWidths = new Array();
for (var i = 0; i < grid.getElementsByTagName("TH").length; i++) {
headerCellWidths[i] = grid.getElementsByTagName("TH")[i].offsetWidth;
}
grid.parentNode.appendChild(document.createElement("div"));
var parentDiv = grid.parentNode;
var table = document.createElement("table");
for (i = 0; i < grid.attributes.length; i++) {
if (grid.attributes[i].specified && grid.attributes[i].name != "id") {
table.setAttribute(grid.attributes[i].name, grid.attributes[i].value);
}
}
table.style.cssText = grid.style.cssText;
table.style.width = gridWidth + "px";
table.style.tableLayout = "fixed";
table.appendChild(document.createElement("tbody"));
table.getElementsByTagName("tbody")[0].appendChild(grid.getElementsByTagName("TR")[0]);
var headerRow = table.getElementsByTagName("TH");
var gridRow = grid.getElementsByTagName("TR")[0];
for (var i = 0; i < headerRow.length; i++) {
var width;
if (headerCellWidths[i] > gridRow.getElementsByTagName("TD")[i].offsetWidth) {
width = headerCellWidths[i];
}
else {
width = gridRow.getElementsByTagName("TD")[i].offsetWidth;
}
headerRow[i].style.width = parseInt(width - 3) + "px";
gridRow.getElementsByTagName("TD")[i].style.width = parseInt(width - 3) + "px";
}
parentDiv.removeChild(grid);
var dummyHeader = document.createElement("div");
dummyHeader.setAttribute('id', 'divHeader');
dummyHeader.style.cssText = "margin-left: auto; margin-right: auto; overflow: hidden; width: " + ScrollWidth + "px";
dummyHeader.appendChild(table);
parentDiv.appendChild(dummyHeader);
var scrollableDiv = document.createElement("div");
gridWidth = parseInt(gridWidth) + 17;
scrollableDiv.setAttribute('id', 'divBody');
scrollableDiv.style.cssText = "margin-left: auto; margin-right: auto; overflow: auto; height: " + ScrollHeight + "px; width: " + ScrollWidth + "px";
scrollableDiv.appendChild(grid);
scrollableDiv.onscroll = scrollHeader;
parentDiv.appendChild(scrollableDiv);
}
function scrollHeader() {
var header = document.getElementById('divHeader');
var body = document.getElementById('divBody');
header.scrollLeft = body.scrollLeft;
}
The problem I'm having is that the GridView being in a fixed-width div. The width styles added to the columns is being ignored.
The final HTML looks like this:
http://i.stack.imgur.com/xDzez.png
The actual table rendered looks like this (the problem is most noticable in the "View" and "Notify" columns):
http://i.stack.imgur.com/rA35z.png
If I remove the fixed width on the outer div, the column widths correct themselves, but obviously, I lose my scrollability. It appears to be trying to shrink the whitespace in the table cells to try and fit into the div. This isn't necessary because of the overflow: auto on the outer div. Is there a style or something I can add to stop the browser from doing this?
Turns out I needed table-layout: fixed AND width: 100% to both tables. I had tried the table-layout solution, but didn't realize about the width needing to be 100% as well.
Final javascript:
var GridId = "<%=dgContacts.ClientID %>";
var ScrollHeight = 180;
var ScrollWidth = 700;
window.onload = function () {
enablePostLog();
var grid = document.getElementById(GridId);
var gridWidth = grid.offsetWidth;
var headerCellWidths = new Array();
for (var i = 0; i < grid.getElementsByTagName("TH").length; i++) {
headerCellWidths[i] = grid.getElementsByTagName("TH")[i].offsetWidth;
}
grid.parentNode.appendChild(document.createElement("div"));
var parentDiv = grid.parentNode;
var table = document.createElement("table");
for (i = 0; i < grid.attributes.length; i++) {
if (grid.attributes[i].specified && grid.attributes[i].name != "id") {
table.setAttribute(grid.attributes[i].name, grid.attributes[i].value);
}
}
table.style.cssText = grid.style.cssText;
table.appendChild(document.createElement("tbody"));
table.getElementsByTagName("tbody")[0].appendChild(grid.getElementsByTagName("TR")[0]);
var headerRow = table.getElementsByTagName("TH");
var gridRow = grid.getElementsByTagName("TR")[0];
for (var i = 0; i < headerRow.length; i++) {
var width;
if (headerCellWidths[i] > gridRow.getElementsByTagName("TD")[i].offsetWidth) {
width = headerCellWidths[i];
}
else {
width = gridRow.getElementsByTagName("TD")[i].offsetWidth;
}
gridRow.getElementsByTagName("TD")[i].style.width = parseInt(width - 3) + "px";
if (i == headerRow.length - 1) {
width = width + getScrollBarWidth();
}
headerRow[i].style.width = parseInt(width - 3) + "px";
}
parentDiv.removeChild(grid);
grid.style.tableLayout = "fixed";
table.style.tableLayout = "fixed";
grid.style.width = "100%";
table.style.width = "100%";
var dummyHeader = document.createElement("div");
dummyHeader.setAttribute('id', 'divHeader');
dummyHeader.style.cssText = "margin-left: auto; margin-right: auto; overflow: hidden; width: " + ScrollWidth + "px";
dummyHeader.appendChild(table);
parentDiv.appendChild(dummyHeader);
var scrollableDiv = document.createElement("div");
scrollableDiv.setAttribute('id', 'divBody');
scrollableDiv.style.cssText = "margin-left: auto; margin-right: auto; overflow: auto; height: " + ScrollHeight + "px; width: " + ScrollWidth + "px";
scrollableDiv.appendChild(grid);
scrollableDiv.onscroll = scrollHeader;
parentDiv.appendChild(scrollableDiv);
}
function scrollHeader() {
var header = document.getElementById('divHeader');
var body = document.getElementById('divBody');
header.scrollLeft = body.scrollLeft;
}
function getScrollBarWidth() {
var inner = document.createElement('p');
inner.style.width = "100%";
inner.style.height = "200px";
var outer = document.createElement('div');
outer.style.position = "absolute";
outer.style.top = "0px";
outer.style.left = "0px";
outer.style.visibility = "hidden";
outer.style.width = "200px";
outer.style.height = "150px";
outer.style.overflow = "hidden";
outer.appendChild(inner);
document.body.appendChild(outer);
var w1 = inner.offsetWidth;
outer.style.overflow = 'scroll';
var w2 = inner.offsetWidth;
if (w1 == w2) w2 = outer.clientWidth;
document.body.removeChild(outer);
return (w1 - w2);
}