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.
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:
is there a way of pointing to a directory where all JScripts are living and let it pick and choose what it needs from which scripts or do I have to do the picking through files each time I write a script that depends on others?
View 6 Replies View RelatedDoes anyone know any js code to find the whole height of a web page?
i am trying to make an image that moves from the top of the page to the bottom like a marqee. if i use document.body.offsetHeight to tell the image how far to move before returning to the top, the image only goes as far as the window height not the whole page so if you scroll down the image never reaches the bottom.
can anyone please tell me code to find the total page height or a good substitute for the marquee tag?
P.S. this is the code i'm using to act on an image placed at the top of the page with the variable winH found using document.body.offsetHeight:
var Timer1;
function down()
{
document.getElementById("zip").style.pixelTop += 2;
if (document.getElementById("zip").style.pixelTop > winH)
{
clearInterval(Timer1);
document.getElementById("zip").style.pixelTop -= (winH);
Timer1 = setInterval("down()", 15);
}
}
Are there javascript functions to find the cursor position of a mouse? Also, are there javascript functions to find if the mouse cursor is within a listbox? A C# code sample is shown below:
Listbox lb; //lb is a listbox
Point cpos = lb.PointToClient(Cursor.Position); //find coordinates of mouse
if(lb.ClientRectangle.Contains(cpos)) //if mouse cursor is within the listbox
Are there any javascript functions which can do the same as the above c# methods?
Is it possible, using client-side JavaScript, to test a series of download sites to see which is most likely to be the fastest file download site for a user?
I wondered whether JavaScript could download a portion of a file, or alternatively a small sample image file, just to test the download speed of each site, then report to the user the fastest, next fastest, and so on.
I'm developing a site that will use technologies like JavaScript and AJAX. I want the site to be functional for people that has older browsers or JavaScript turned off so for this I need to find out if the user's browser is supporting JavaScript and AJAX.
How can I check this in an easy and simple way? I.e the user enters my website with JavaScript turned off at the moment. And then he turns it on and reloads the page. I would like to catch that he has turned JavaScript on. The same goes with AJAX (although there is no off/on setting for AJAX).
The assignment is: Write a JavaScript program to find all Pythagorean triples for side1,side2 and the hypotenuse, all no larger than 500. Use a triple-nested for loop that exhaustively tries all possibilities.
PHP Code:
<script type="text/javascript">
var side1;
[code]....
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.
<div>
Is it possible find a node backwards instead of forwards.
I would like to do (remember find_reverse does not exist)
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>
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?
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?
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 RelatedI 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]....
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.
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]...
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?
I have a PHP script that will get images out of the database and display them in a grid. I have two verisons. I save a thumbnail which I display and then a larger image in a different folder. These images are placed in a scroll bar but what I would like to happen is that when I click on a thumbnail it basically displays the bigger image until I click on that image and it goes away. I would love for the middle of the image to be displayed in the middle of the users screen but beggers probably can't be choosers in this case.
An example of a similar desired result is a link here:http://qrayg.com/experiment/hig/Instead of the hover, I'd like to utilize the onclick to display and remove the image. If it's easy to put the center in the center of the screen that that would be absolutely incredible as well.
Everybody knows how a dropdown menu works where a person clicks on the drop down menu and it displays a drop down list where the user can select an option from the list. What I want to know is that is there a way in html where except displaying a dropdown list can I display a grid instead with the options in the grid?
This link will show you how I want it to be dislayed like but I do not know how this is done.
Click here
Basically all I'm trying to do is use substrings to write one random letter of the alphabet into a 2x4 or 4x2 grid or table.
I want to keep the code I have, as I'll need to do more with it later. Again, all I get 8 defined boxes each with one letter in each. I don't want to have any of the existing code changed
Code:
<html>
<head>
<script type="text/javascript">
var pairs;
[Code]....
in asp.net i have a grid using up/down arrow keys when the cursor moves over the grid i need to get the values of that row where the cursor is
at present i am using window load function
window.onload = function ()
{
[code]....
same way how do i do it for up/down arrow keys
I was looking for JQuery Grid which will help me more than 1000 - 2000 records. I mainly need search and paging .
View 1 Replies View RelatedI want to put a button inside a grid column, I am using Struts jQuery Grid showcase
View 6 Replies View RelatedI'm trying to use jQuery to produce something similar to this flash example [url]although I'd like the effect to be somewhat more controlled.
In a nutshell, what I'm trying to achieve is a 3 x 4 grid of (12) images which appears to load in a random order and then 1 by 1 (again in random order) fade out to be replaced by another image. I'd like the effect to be quite subtle, smooth and calming with the timing between image fades to be fairly even.
All images would be pulled from a folder on my webserver. I don't want the same image to be visible more than once at any time, although I don't mind repeating images as long as they're not already in the grid - hopefully that makes sense?
Ideally I'd like only one image to be changing at any given time with a pause before the next image starts to fade into new image.
The way I've been trying to tackle this so far is to use 12 different instances of a jquery image fade laid out in a CSS grid.
There are a few problems with my approach so far;
Doesn't appear random
Timing - multiple squares change at same time. (I only want one image to change at a time)
Same image often repeated at same time within grid
Its not long before a pattern emerges and you can tell which image will change next.
I'm sure this must be possibly, but my math or scripting skills aren't quite there yet.
am using jqgrid within my web app.now my record contains a checkbox followed by some string data. if the user checks some (say 5) checkboxes and then click on the table heading to sort, i lose track of all my checkboxes. this seems to be happening on all my grids.
View 1 Replies View Related