Resizable Dom Grid

Jun 16, 2003

This is a resizeable grid similar to ones found on windows OP, the xml version also has a sort function, but thats not posted here.

Note: a few thing could be done better (or different), but for times sake lets just say it works without error.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Sort Grid</title>

<style type="text/css"><!--
body{margin:0px;}

/* GRID STYLES */

#grid tbody td,#grid tfoot td
{
border-color: white ThreedHighlight ThreedHighlight white;
border-width: 0px 1px 1px 0px; border-style: solid;
padding: 0px 0px 0px 0px;
font-size: 14px;
cursor:default;
}
#grid tfoot td
{/* If used. */
border-color: white ThreedHighlight ThreedHighlight ThreedHighlight;
border-width: 0px 1px 1px 1px;
}
#grid tbody .FCol
{
border-left-color: ThreedHighlight;
border-left-width: 1px;
}
#grid .grabberH,#grid .grabberHF,#grid .grabberHE,#grid .grabberL,#grid .grabberR /* t r b L */
{
background-color:ButtonFace;border:outset;line-height:16px;
}
#grid .grabberHF
{
border-width: 1px 0px 0px 1px; padding: 0px 0px 0px 0px;cursor:default;font-size:14px;
}
#grid .grabberH
{
border-width: 1px 0px 0px 0px; padding: 0px 0px 0px 0px;cursor:default;font-size:14px;
}
#grid .grabberHE
{
border-width: 1px 2px 0px 1px; padding: 0px 0px 0px 0px;cursor:default;
}
#grid .grabberL
{
border-width: 1px 0px 0px 1px;
}
#grid .grabberR
{
border-width: 1px 2px 0px 0px;
}
#grid .grabberL,#grid .grabberR
{
cursor:col-resize;padding:0px;
}
#grid .ender
{
width:0px;
}
#grid span
{
padding: 0px 3px 0px 3px;
}
#grid .grabberH span
{
padding: 0px 0px 0px 0px;
}
#grid .grabberHF span
{
padding: 0px 0px 0px 3px;
}
-->
</style>

<script language="JavaScript"><!--
/*RESIZABLE DOM GRID - (C) COPYRIGHTED DON WATSON 2003 ALL RIGHT RESERVED - DONWATS@USA.COM*/
function mouseevent(elm, _event, _function)
{
elm.attachEvent(_event, _function)
}

function mousedetach(elm, _event, _function)
{
elm.detachEvent(_event, _function)
}

function resizeGrid()
{
var srcElem = event.srcElement;

if(srcElem.tagName !=="TD")
{
try{
while(srcElem.tagName !=="TD")
{
srcElem = srcElem.parentNode
}
}
catch(e)
{
return
}
}

if(srcElem.className != "grabberL")
{
if(srcElem.className != "grabberR")
{
return
}
}

var expandingTDTemp = srcElem;

try{
while( expandingTDTemp.className !="grabberH" && expandingTDTemp.className !="grabberHF" )
{
expandingTDTemp = expandingTDTemp.previousSibling;
}
}
catch(e)
{
return
}

expandingTD = expandingTDTemp;

/*lets get the rule (css)*/
ruleNum = expandingTD.firstChild.className; /*assume its the span*/
ruleNum = ruleNum.substr(ruleNum.length-1,1);/*strip the num off the end*/

lastrack = event.x;
finalW = expandingTD.offsetWidth;
createBar();grabElm(srcElem);
}

var grabberElm, finalW, expandingTD, lastrack, ruleNum;

function grabElm(srcElem)
{
grabberElm = srcElem;
grabberElm.setCapture(false);
mouseevent(grabberElm, "onmouseup", letGo);
mouseevent(grabberElm, "onlosecapture", dubbleCheck);
mouseevent(document, "onmousemove", resizeT);
}
function dubbleCheck()
{
window.setTimeout(letGo, 200, "JavaScript")
}
function letGo()
{
if(!document.getElementById("resizebar"))
{
window.clearTimeout();
return
}
grabberElm.releaseCapture();
mousedetach(grabberElm, "onmouseup", letGo);
mousedetach(grabberElm, "onlosecapture", dubbleCheck);
mousedetach(document, "onmousemove", resizeT);
document.styleSheets.rowspans.rules[ruleNum].style.width = 0;
finalW<0?finalW=1:0;expandingTD.width=finalW;
document.styleSheets.rowspans.rules[ruleNum].style.width = expandingTD.offsetWidth;
destroyBar();
}
function resizeT()
{
currentrack = event.x;

if( currentrack > lastrack )
{
finalW += currentrack - lastrack
}
else if( currentrack < lastrack )
{
finalW -= lastrack - currentrack
}
document.getElementById('resizebar').style.left = [ currentrack + document.body.scrollLeft - document.body.clientLeft ];
lastrack = currentrack;
}
function createBar(){
var _body = document.getElementsByTagName('body').item(0);
bar = document.createElement("DIV");
bar.id = "resizebar";
bar.style.backgroundColor="silver";
bar.style.width=3;
bar.style.height=document.body.clientHeight;
bar.style.position= "absolute";
bar.style.top=document.body.scrollTop;
bar.style.left= [ event.x + document.body.scrollLeft - document.body.clientLeft ];
_body.appendChild(bar);
}
function destroyBar(){
var _body = document.getElementsByTagName('body').item(0);
bar = document.getElementById('resizebar');
if(bar) _body.removeChild(bar);
}
//-->
</script>

</head>
<body>

<table id="grid" width="100%" border="0" cellspacing="0" cellpadding="0">
<thead>
<tr onMouseDown="resizeGrid()">
<td width="140px" nowrap class="grabberHF"><span class="col0">Artist</span></td>
<td width="3px" nowrap class="grabberR"><div class="ender"/></td>
<td width="3px" nowrap class="grabberL"><div class="ender"/></td>
<td width="250px" nowrap class="grabberH"><span class="col1">Venue</span></td>
<td width="3px" nowrap class="grabberR"><div class="ender"/></td>
<td width="3px" nowrap class="grabberL"><div class="ender"/></td>
<td width="120px" nowrap class="grabberH"><span class="col2">Title</span></td>
<td width="3px" nowrap class="grabberR"><div class="ender"/></td>
<td width="3px" nowrap class="grabberL"><div class="ender"/></td>
<td width="45px" nowrap class="grabberH" align="center"><span class="col3">Media</span></td>
<td width="3px" nowrap class="grabberR"><div class="ender"/></td>
<td width="3px" nowrap class="grabberL"><div class="ender"/></td>
<td width="100px" nowrap class="grabberH" align="right"><span class="col4">Date</span></td>
<td width="5px" nowrap class="grabberR"><div class="ender"/></td>
<td width="100%" class="grabberHE"><div class="ender"/></td>
</tr>
<thead>
<tfoot>
<tr><td nowarp colspan="15"><!--footer not needed--></td></tr>
</tfoot>
<tbody>
<tr>
<td colspan="2" class="FCol"><span class="col0">Column 1</span></td>
<td colspan="3"><span class="col1">Column 2</span></td>
<td colspan="3"><span class="col2">Column 3</span></td>
<td colspan="3" align="center"><span class="col3">SHN</span></td>
<td colspan="3" align="right"><span class="col4">04-19-1998</span></td>
<td><div class="ender"/></td>
</tr>
</tr>
<td colspan="2" class="FCol"><span class="col0">Column 1</span></td>
<td colspan="3"><span class="col1">Column 2 - this span uses overflow : ellipsis</span></td>
<td colspan="3"><span class="col2">Column 3</span></td>
<td colspan="3" align="center"><span class="col3">MP3</span></td>
<td colspan="3" align="right"><span class="col4">09-16-1983</span></td>
<td><div class="ender"/></td>
</tr>
<tr>
<td colspan="2" class="FCol"><span class="col0">Column 1</span></td>
<td colspan="3"><span class="col1">Column 2</span></td>
<td colspan="3"><span class="col2">Column 3</span></td>
<td colspan="3" align="center"><span class="col3">SHN</span></td>
<td colspan="3" align="right"><span class="col4">03-01-1969</span></td>
<td><div class="ender"/></td>
</tr>
</tr>
<td colspan="2" class="FCol"><span class="col0">Column 1</span></td>
<td colspan="3"><span class="col1">Column 2 - this span uses overflow : ellipsis</span></td>
<td colspan="3"><span class="col2">Column 3</span></td>
<td colspan="3" align="center"><span class="col3">MP3</span></td>
<td colspan="3" align="right"><span class="col4">01-20-2001</span></td>
<td><div class="ender"/></td>
</tr>
<tr>
<td colspan="2" class="FCol"><span class="col0">Column 1</span></td>
<td colspan="3"><span class="col1">Column 2</span></td>
<td colspan="3"><span class="col2">Column 3</span></td>
<td colspan="3" align="center"><span class="col3">SHN</span></td>
<td colspan="3" align="right"><span class="col4">10-29-1988</span></td>
<td><div class="ender"/></td>
</tr>
</tbody>
</table>

<script language="JavaScript"><!--

function setStyles(){

var _head = document.getElementsByTagName('head').item(0);

var dss = document.createElement("STYLE");
dss.id = "rowspans";
_head.appendChild(dss);

var _table = document.getElementById("grid");
var _tr = _table.getElementsByTagName("TR")[0];
var _td = _tr.getElementsByTagName("TD");
var colnum = 0;

for(i = 0; i < _td.length; i++)
{
if(_td[i].className != "grabberL")
{
if(_td[i].className != "grabberR")
{
document.styleSheets.rowspans.addRule(".col"+colnum+"","width:"+ _td[i].width +"");
colnum += 1;
}
}
}
document.styleSheets.rowspans.addRule("#grid span","overflow: hidden;text-overflow: ellipsis;white-space: nowrap;");
//alert(document.styleSheets.rowspans.cssText);
}

setStyles(); /* After resize grid, or onload event. */

//--></script>

</body>
</html>

View 5 Replies


ADVERTISEMENT

JQuery :: Flexigrid Grid Control Users - Not Actually Implementing Paging Filter On Data In Grid

Jul 13, 2011

I have a question for flexigrid jquery grid control users.

I am able to display json data returned from my WCF service in my Flexigrid in my application.

The paging toolbar displays correctly and it's clear that the paging toolbar understands how I've configured it.

However, the grid is not actually implementing the paging filter on the data in the grid. For example, the paging toolbar says "Displaying 1 to 10 of 12 items". However, all 12 items are displayed in the grid.

I guess I'm missing a config setting or callback. Any idea what the problem might be?

Here is my grid config block:

View 1 Replies View Related

Resizable Pop Up Windows In IE

Oct 20, 2006

I have a web application where we pop up a little calendar control in a
new window to allow users to choose dates. For cross-browser purposes,
this is done via window.open (with some code to make it behave like a
modal dialog) and I set the width and height of the window such that
the controls fit nicely and it all looks good.

I have some users who are unable to see the OK and Cancel buttons at
the bottom of the window due to some display settings on their
machines. OK, I though, I'll just make the window resizable and they
can then take control. How naive of me! Why on earth does IE decide
that the minute I put 'resizable=yes' into my attributes for the new
window that it should ignore the size?

I know I can do window.resizeTo in the onload of the calendar window,
but I'm not keen on the resizing of the window.

I don't suppose anyone knows of a way to have IE open a resizable
window of a given size without the resizeTo?

View 3 Replies View Related

JQuery :: How To Get The 'id' Of The Resizable <div>

Aug 17, 2010

In my application I am using resizable property for the <div> In my script i used like this $("div").resizable(); Its working fine for all the <div> tags. My requirement is to get the <div> id and I have to save the height, width of that particular <div>. I can able get the height and width of the every div but not the id. I tried in 2 ways like var divId=$(this).attr("id"); and var divId=this.id; in _mouseDrag() in the jquery.ui.resizable.js file. In both the cases divId is undefined.

View 2 Replies View Related

Cannot Make Pop-ups Non-resizable

Feb 20, 2009

I have a function that opens a popup and I have told it not make the popup resizable but all browsers seem to ignore it and make it resizable anyway. This is the code

function openflvpopup(popurl){
window.open('FLV/play.php?file=' + popurl + '.flv', '', 'height=500px,width=550px,left=150px,top=150px,resizable=0')
}

I have probably made a silly mistake but I have checked several tutorial website to make sure I write it in the syntax that they do. I can not see any mistakes.

View 2 Replies View Related

How Can I Make A Window Resizable?

Jan 4, 2006

I opened a new window using 'resizable=no'. Can the child window make itself resizable even if it's opened with 'resizable=no'?

For example:

<body onload="javascript: window.resizable=true;">

View 4 Replies View Related

Resizable Textarea Usiong DHTML

Mar 16, 2006

I cannot seem to set a size for a text area relative to total screen width in CSS or HTML or Javascript? When I use CSS or a percent value in the cols attribute, they size the textarea as a percentage of another text area on the screen.

View 4 Replies View Related

Change Resizable Feature During Runtime?

Nov 22, 2006

Is it possible that first I make my window resizable,than if window is less than a fixed size I can make my window not resizable?Better to say can I change resizable feature during runtime?If possible,than how?

View 3 Replies View Related

JQuery :: Resize An Element That Has .resizable() On It?

Jul 21, 2009

I think this has probably been asked before but. I want to resize an element that has .resizable() on it. I want the resizable 'stop' event to trigger when it is done.

View 1 Replies View Related

Window Control 'resizable' Not Working In FF?

Jul 16, 2009

I've been using this script (and variants that give the user different controls) for years and am positive it worked before but I just noticed that resizable is being ignored in FF 3.0.11. It is working in IE fine. I don't want the user to be able to resize the window.

Code:

function PopNada(PopNadaUrl,xW,xH)
{
var ScreenWidth=window.screen.width;
var ScreenHeight=window.screen.height;

[code]...

View 1 Replies View Related

Window.create() Resizable=no Does Not Work

Oct 14, 2011

When I use the window.create() property resizable=no, the new window remains resizable. Am I missing something?

<img src="images/hbai_sample_page.jpg" width="400" height="" border="0" alt="Bridle book cover"
onClick="openWindow('enlarged_sample_page.htm','','width=800,height=400,location=no,toolbar=no,statu s=yes,scrollbars=no,resizable=no')">
<script language="JavaScript" type="text/JavaScript">

[code]....

View 1 Replies View Related

Fade Into Resizable Background Image?

Jun 24, 2010

I'm after doing something like this A resizable background image that fades in on initial load.... I've found plenty of background image re-size scripts but none that fade in the initial image.

View 2 Replies View Related

JQuery :: Set Ui.size.width Of Resizable Img, After Init?

Apr 23, 2011

My resizable works great. I want to be able to set the width and height after init. How do I set the width and height from a javascript function? I am using the onClick event of an IMG to call a javascript function.

I want to set the height and width of my resizable, so I want to set ui.size.width and ui.size.height.

How do I reference ui.size.width and ui.size.height of my resizable within a javascript function?

View 1 Replies View Related

Use A Href As Submit - Open In New Resizable Window?

May 26, 2011

Here is what I am trying to do:

1.) Replace the submit button with an <a href"#">. I have been able to accomplish this with just using HTML Code:

[html]<a onclick="document.forms['finish_print'].submit(); return false;">

[/html]... That's easy enough.

2.) This link should then open in an new window, annnnnd that window's size should be resizable. I've been using this technique for other standard links via jquery....

jQuery('a.popup').live('click', function(){ newwindow=window.open($(this).attr('href'),'','height=350,width=600'); if (window.focus) {newwindow.focus()}

However, when attempting to combine these two, I always get an undesired affect. I would provide the entire code, but I haven't been able to get it to work.

View 3 Replies View Related

One Grid Displays Numbers, True Or False And Yes Or No, And The Other Grid Displays Letters, True, False, Yes And No?

Feb 15, 2012

I have two grids, they both display buttons. One grid displays numbers, true or false and yes or no, and the other grid displays letters, true, false, yes and no.

The second grid is not displayed in the code (used css to not display second grid buttons (.answerBtns)) Now using the getButtons() function, if the user selects button "1" in first grid (the grid which you have to open using (Open Grid) link, then it should display button "A" in second grid, if user selects button "2" in first grid, then it should displays buttons "A" and "B" in second grid, if "3" then display "A", "B" and "C" and so on.

Now except using if statements and stating which buttons should be displayed and not displayed depending on the button chosen in first grid, is there a more efficent way of coding this so that the display of buttons in second grid depends on what is selected in the first grid?

If it is using an array can somebody show a sample of this in their answer. You can just do it for one example and then I should be able to use that to fill it for the other buttons.

View 1 Replies View Related

JQuery :: Resizable Background Image - Mobile Safari

Jul 11, 2011

I've got some problem with more then one plugin from jQuery.

My Problem is: if I use some "resizable background"-script (it works on IE7+/FF/Chrome), and the content is longer then 100% height of the screen (ipad/iphone), there's a white place at the bottom of my background-image.

The solution was, to fix the background, but it still doesn't work on mobile devices.

Script:[url]

View 1 Replies View Related

Jquery :: Extend The _alsoResize Function Of The Resizable Plugin?

Dec 4, 2009

How to extend the _alsoResize function of the resizable plugin?

View 1 Replies View Related

Grid Widget

Oct 21, 2003

Should work on IE5.5+ and recent Mozilla clones.
Download size ~30K
Open source (GPL license)
Not released yet, no API documentation (will be soon)

Basically the question is - does it make sense at all? What's your current experience with client-side widgets - too slow, too heavy or there is still a place for things like that?

View 4 Replies View Related

Need To Find A Javascript Grid

Jul 23, 2005

we are now developing complex business application using Ajax
framework. Could anyone point me to the editable javascript grid
control which supports XML loading. Good javascript API would be a
plus. And rather important thing - sometimes we need to represent
hierarchically structured data, so tree view is a must. In most grid
controls I looked through this last thing was missed.

View 6 Replies View Related

JQuery :: Grid Into A Dialog ?

May 18, 2010

I just started using JQuery and I have a lot of questions, but this is the most complicated one:

I'm trying to show a dialog using Jquery UI. The problem is that into my dialog I'd like to insert a (dynamic) grid using JQGrid. is this possible, or I should create a normal html table?

View 1 Replies View Related

JQuery :: Scrollbars On The UI Grid?

Jun 9, 2010

How exactly does the sizing of the grid work? I have a grid that I've tried to experiment with and it seems like no matter what setting I use, there is a vertical and a horizontal scrollbar. the only thing that changes is if it stretches to fill the its container div. How do I get it to fit within a specific width and also to not display scrollbars?

View 3 Replies View Related

Move A Image Around A Grid?

Dec 18, 2010

I have a script which uses an array of numbers to represent their position in a div.its 5 by 5 like so:

tileMap = [
[1, 1, 1, 1, 1],
[1, 1, 1, 1, 1],

[code]....

View 1 Replies View Related

Create The Nested Grid Using GWT API's

Jul 20, 2010

Check this URL [url]

Grid on above link is made in dotnet. i want to make same UI as in Java. which technologies should be used that can be easy to use with java.

How i create the nested grid using GWT API's.

View 5 Replies View Related

JQuery :: Ui Resizable Plugin - No "scroll" Option Like In Draggable

May 23, 2009

I am using the jquery-ui resizable plugin, but I encountered some issues :

1) I had to add the ".ui-resizable" css for that plugin to work (hopefully I found a website explaining that workaround)

2) there is no "scroll" option like in draggable (!?)

3) the containment option does not work vertically on the official example [url] you are constrained horizontally, but not vertically. In my application, the containment option is buggy too : it seems to take into account the container outer margins, or something else, I don't know what, but my windows are constrained far too soon (no it's not maxWidth/maxHeight)

4) the alsoResize option is buggy : when the containment option is used, the "alsoResized" element is not constrained as well :-( Am I missing something ? Does someone have info on what's going on with this plugin ? (1.7.1, it's not an alpha version). if there is another resizable plugin available out there ? (like the one used in [url])

View 4 Replies View Related

JQuery :: Not Working On Grid After Using Pager?

Jun 11, 2011

I have tried many grid plugins, so this problem applies to many of them. I have this code, which is for returning the content of a row cell when clicked:

[Code]...

View 2 Replies View Related

JQuery :: Create A 3x3 Grid On The Page?

Feb 17, 2010

I want to create a 3x3 grid on the page. Each square needs to be the height and width of the page. I will then use jquery scroll.to to move the grid, dispalying a different square to the user.

Am I right in thinking that I wont be able use 100% width and 100% height in my CSS for the single box, since there are actually going to 8 squares that are off the page?

[URL]

I am guessing therefore that I should use javascript to take the window width and height, and then use this value to create each of the gridbox's. Is this the right way of doing it?

View 2 Replies View Related







Copyrights 2005-15 www.BigResource.com, All rights reserved