JavaScript - Editable Grid Help
I have created an editable grid based on: http://www.webismymind.be/editablegrid
Although I have created a few basic sites - coding is still pretty new to me, but what I want to do is make this grid editable by an admin user - and then have other users who can view it but not edit it. I am trying to create a basic staff rota & any help would be much appreciated Thanks Similar TutorialsPlease could someone tell me the JavaScript to allow the user to edit the content in an iframe, but I need to know if it will allow the user to edit the iframe in all browser types.
Hello all, I have a form which contains some fields like company_name, address, phone, email etc. Also, I have a database with companies. I want that, when typing the beginning of the company name, a combo box to suggest all companies that match that text. I want that when a company is selected from the combo, all other textboxes to be filled with the correct info from the database. Also, I want that the user to be able to write a company that is not registered in the database. What I have done until now: For the editable combo I used the dhtmlxcombo from he http://dhtmlx.com/docs/products/dhtmlxCombo/ (Filtering mode: (filter existing list)). I'm not a scripting expert, so I think I cannot build this combo all by myself. I modified just one thing. At the begining, the dhtmlxcombo.js file contained something like this: Code: if (tab)z.tabIndex=tab;z.style.width = (width-19)+'px';self.DOMelem.appendChild(z);self.DOMelem_input = z;z = document.createElement('input');z.type = 'hidden';z.name = name;self.DOMelem.appendChild(z);self.DOMelem_hidden_input = z;z = document.createElement('input');z.type = 'hidden';z.name = (name||"").replace(/(\]?)$/, "_new_value$1");z.value="true";self.DOMelem.appendChild(z);self.DOMelem_hidden_input2 = z I added z.id='dest_company';, so the file looks something like this, now: Code: if (tab)z.tabIndex=tab;z.style.width = (width-19)+'px';self.DOMelem.appendChild(z);z.id='dest_company';self.DOMelem_input = z;z = document.createElement('input');z.type = 'hidden';z.name = name;self.DOMelem.appendChild(z);self.DOMelem_hidden_input = z;z = document.createElement('input');z.type = 'hidden';z.name = (name||"").replace(/(\]?)$/, "_new_value$1");z.value="true";self.DOMelem.appendChild(z);self.DOMelem_hidden_input2 = z};dhtmlXCombo_defaultOption.prototype._DrawHeaderButton = function(self, name, width) The text field 'dest_company' is generated like this: PHP Code: <select name="dest_company" id="dest_company" OnChange="SelectReceiver(document.comanda.dest_company.value);" style="width:206px;" tabindex="10"> <?php echo ' <option value=""></option>'; $address_result = mysql_query("SELECT * FROM `webdb_".$_COOKIE['user']."` ORDER BY companie ASC"); while($row = mysql_fetch_array($address_result)) { echo '<option value="'.$row['id'].'">'.$row["companie"].'</option>'; } echo ' </select> <script> var z = dhtmlXComboFromSelect("dest_company"); z.enableFilteringMode(true); </script>'; ?> This is the SelectReceiver() function: Code: function SelectReceiver(id_dest) { if (id_dest=="") { document.getElementById("contact_destinatar").value=""; document.getElementById("adresa_destinatar").value=""; document.getElementById("oras_destinatar").value=""; document.getElementById("judet_destinatar").value=""; document.getElementById("zip_destinatar").value=""; document.getElementById("telefon_destinatar").value=""; document.getElementById("mail_destinatar").value=""; return; } if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { //document.getElementById("detalii_destinatar").innerHTML=xmlhttp.responseText; var response = eval(xmlhttp.responseText); } } xmlhttp.open("GET","modifica_detalii_destinatar.php?q="+id_dest,true); xmlhttp.send(); } And the file modifica_detalii_destinatar.php looks like this: PHP Code: <?php $q=$_GET["q"]; include ('conectare.php'); $sql="SELECT * FROM `webdb_".$_COOKIE['user']."` WHERE id='".$q."'"; $result = mysql_query($sql); while($row = mysql_fetch_array($result)) { echo ' document.getElementById("contact_destinatar").value = "'.$row['contact'].'"; document.getElementById("adresa_destinatar").value = "'.$row['adresa'].'"; document.getElementById("oras_destinatar").value = "'.$row['oras'].'"; document.getElementById("judet_destinatar").value = "'.$row['judet'].'"; document.getElementById("zip_destinatar").value = "'.$row['zip'].'"; document.getElementById("telefon_destinatar").value = "'.$row['telefon'].'"; document.getElementById("mail_destinatar").value = "'.$row['mail'].'"; '; } ?> All this is working just in Firefox. In IE, when I select a company from the combo box, an error is generated and no text box is completed with the correct data. The error I'm talking about is: Code: 'document.comanda.compania_destinatar.value' is null or not an object In Firefox, if I inspect element with Firebug, my select looks like this: Code: <div style="width: 204px;" class="dhx_combo_box "> <input type="text" autocomplete="off" class="dhx_combo_input" tabindex="10" style="width: 185px;" id="companie_dest"> <input type="hidden" name="dest_company" value="45"> <input type="hidden" name="dest_company" value="false"> <img class="dhx_combo_img" src="codebase_xcombo/imgs/combo_select.gif"> </div> Any help on this would be great. Many thanks and best regards! Hi, "I need editable table with calculations in javascript" "I have a table in that table i have 4 column like mark1,mark2 and total. if i give input to that specific cell the total is automatically calculate. Please send any code or any related links". I tried below code... <html> <head> <title>sample dynamic select list</title> <script language='javascript'> function changeContent(tablecell) { //alert(tablecell.firstChild.nodeValue); tablecell.innerHTML = "<INPUT type=text name=newname onBlur=\"javascript:submitNewName(this);\" value=\""+tablecell.innerHTML+"\">"; var u1=document.getElementById('m1').value; var u2=document.getElementById('m2').value; res=u1*u2; document.getElementById('t').innerHTML=res; tablecell.firstChild.focus(); } function submitNewName(textfield) {//alert(textfield.value); textfield.parentNode.innerHTML= textfield.value; // textfield.parentNode.innerHTML= res; } </script> </head> <body> Double click on any cell. Then enter your own text and then tab out or click on other place. <table border=1 bgcolor=gray> <tr> <th onDblClick="javascript:changeContent(this);">Mark1</th> <th onDblClick="javascript:changeContent(this);">Mark2</th> <th onClick="javascript:changeContent(this);">total</th> </tr> <tr> <td onDblClick="javascript:changeContent(this);" id="m1">10</td> <td onDblClick="javascript:changeContent(this);" id="m2">20</td> <td onClick="javascript:changeContent(this);" id="t"></td> </tr> </table> </body> </html> I got it editable table but i cannot able to add two cell and also assign result to total.. let u know please help me Thanks I have a dropdown menu. the code is as below: <html:select name="data1" property="accountNumber" styleClass="formContent" > <option>Id1 </option> <option>Id2 </option> I need to give user an option to select from the list or enter a new value. how do you do this ? I can add another option say "new value" and when he choose this user should be able to add the new value/ please help !! I'm new to java script. hi, i need to be able to allow a user to past into an editable div (via whatever the user chooses: right-click and paste, shortcut key, etc), but i want to discard formatting and only take the plain text. i can't use a textarea since the div will allow basic formatting (bold and italic) if applied by user-initiated events. the onbeforepaste event looked promising, but according to quirksmode the support is so limited as to be unusable. i searched the board, so apologies if this has been asked and answered. tyia for any suggestions. I have 2 questions. Can I have draggable editable images? I can make my images movable around the page, but I would like to be able to make the images editable and have the text follow the images. I would like to either have a drop down menu or buttons that can make the images displayed on the page then edit them and move them to my map location on the page. Is this possible, and thanks for any help guys. Here is the code I used for the movable images. Code: <img src="images/loconorth.gif" class="dragableElement" style="float:left"> <img src="images/locosouth.gif" class="dragableElement" style="float:left"> <img src="images/Loco east.png" width="80" height="36" class="dragableElement" style="float:right"> <p> <p><img src="images/Loco west.png" width="80" height="36" class="dragableElement" style="float:left"> Hello all, I am using an editable iframe to change the style of the text as a person enters text depending on what they type in. Sometimes the text needs to be a link, and while inserting a link works, I can't click on it. I was wondering if anyone knows how to get links in an editable iframe to click through. I've researched this for a while now without getting anywhere. Right now I'm guessing that I need to somehow find out if the user is hovering over a link and turn "designMode" off for that section of text, or the whole iframe, I'm not completely sure. Anyway, any help would be greatly appreciated! How do I get the pixel position of the caret in an editable IFrame? I am building a WYSIWYG editor which works for Gecko, Trident, Webkit and Presto. I am doing this by setting the designMode to 'on' for an IFrame. The problem that I am having is that I need to know the pixel position of the caret so I can determine if the caret is at the bottom of the page. The reason I want the pixel position is so that way I can auto scroll the scrollbar to that position. I should mention that we are using JavaScript. Any ideas appreciated. Hi I had a problem earlier with the dom, which I have resolved. I was just wondering if anyone new how to use the dom, to create a table styled effect, a 3x5 grid. I find that I can create div elements and add them to the document, but they are only added vertically and not in the horizontal. This is my code Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2//EN"> <HTML> <HEAD> <META name="generator" content="Free Script Editor, see www.freescripteditor.com"> <TITLE>Email Client</TITLE> <link rel="stylesheet" type="text/css" href="http://localhost/email/styles/style1.css"/> <script src="javascript/prototype.js" type="text/javascript"></script> <script src="javascript/scriptaculous.js" type="text/javascript"></script> <script src="javascript/dragdrop.js" type="text/javascript"></script> <script src="javascript/controls.js" type="text/javascript"></script> <script src="javascript/effects.js" type="text/javascript"></script> <script src="javascript/builder.js" type="text/javascript"></script> <script type="text/javascript"> var xmlhttp = false; //check if we are using IE try { //If the javascript version is greater than 5. xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); alert ("You are using Microsoft Internet Explorer."); } catch(e) { //if not, then use the older active x object. try { //if we are using Internet Explorer xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); alert("You are using Microsoft Internet Explorer"); } catch (E) { xmlhttp = false; } } //If we are using a non-IE browser, crea a javascript instance of the object if(!xmlhttp && typeof XMLHttpRequest != 'undefined') { xmlhttp = new XMLHttpRequest(); alert ("You are not using Microsoft Internet Explorer"); } function createTable() { var divright, div1, div2, div3, div4, div5, div6, div7, div8, div9, div10, div11, div12, div13, div14, div15; divright = document.getElementById('right'); div1 = document.createElement('div'); div1.className = 'droparea'; div1.setAttribute('id', 'sortList1'); div2 = document.createElement('div'); div2.className = 'droparea'; div2.setAttribute('id', 'sortList2'); div3 = document.createElement('div'); div3.className = 'droparea'; div3.setAttribute('id', 'sortList3'); div4 = document.createElement('div'); div4.className = 'droparea'; div4.setAttribute('id', 'sortList4'); div5 = document.createElement('div'); div5.className = 'droparea'; div5.setAttribute('id', 'sortList5'); div6 = document.createElement('div'); div6.className = 'droparea'; div6.setAttribute('id', 'sortList6'); div7 = document.createElement('div'); div7.className = 'droparea'; div7.setAttribute('id', 'sortList7'); div8 = document.createElement('div'); div8.className = 'droparea'; div8.setAttribute('id', 'sortList8'); div9 = document.createElement('div'); div9.className = 'droparea'; div9.setAttribute('id', 'sortList9'); div10 = document.createElement('div'); div10.className = 'droparea'; div10.setAttribute('id', 'sortList10'); div11 = document.createElement('div'); div11.className = 'droparea'; div11.setAttribute('id', 'sortList11'); div12 = document.createElement('div'); div12.className = 'droparea'; div12.setAttribute('id', 'sortList12'); var div13 = document.createElement('div'); div13.className = 'droparea'; div13.setAttribute('id', 'sortList13'); div14 = document.createElement('div'); div14.className = 'droparea'; div14.setAttribute('id', 'sortList14'); div15 = document.createElement('div'); div15.className = 'droparea'; div15.setAttribute('id', 'sortList15'); divright.appendChild(div1); divright.appendChild(div2); } function getmessage(inbox_id) { var object = document.getElementById('content'); var server = "getmessage.php?inbox_id=" +inbox_id; xmlhttp.open("GET", server); xmlhttp.onreadystatechange = function() { if(xmlhttp.readyState == 4 && xmlhttp.status == 200) { object.innerHTML = xmlhttp.responseText; } } xmlhttp.send(null); } function createSortables() { Sortable.create('container1', {tag: 'div', only: 'draggable', constraint: false, containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7' , 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true}); Sortable.create('sortList1', {tag: 'div', only: 'draggable', constraint: false, containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true}); Sortable.create('sortList2', {tag: 'div', only: 'draggable', constraint: false, containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true}); Sortable.create('sortList3', {tag: 'div', only: 'draggable', constraint: false, containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true}); Sortable.create('sortList4', {tag: 'div', only: 'draggable', constraint: false, containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true}); Sortable.create('sortList5', {tag: 'div', only: 'draggable', constraint: false, containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true}); Sortable.create('sortList6', {tag: 'div', only: 'draggable', constraint: false, containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true}); Sortable.create('sortList7', {tag: 'div', only: 'draggable', constraint: false, containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true}); Sortable.create('sortList8', {tag: 'div', only: 'draggable', constraint: false, containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true}); Sortable.create('sortList9', {tag: 'div', only: 'draggable', constraint: false, containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true}); Sortable.create('sortList10', {tag: 'div', only: 'draggable', constraint: false, containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true}); Sortable.create('sortList11', {tag: 'div', only: 'draggable', constraint: false, containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true}); Sortable.create('sortList12', {tag: 'div', only: 'draggable', constraint: false, containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true}); Sortable.create('sortList13', {tag: 'div', only: 'draggable', constraint: false, containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true}); Sortable.create('sortList14', {tag: 'div', only: 'draggable', constraint: false, containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true}); Sortable.create('sortList15', {tag: 'div', only: 'draggable', constraint: false, containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true}); } window.onload = function() { this.createTable(); this.createSortables(); } </script> </HEAD> <BODY> <!--header div - for message 'new', 'reply' --> <div class="container" id="container"> <div class="header"> </div> <!-- end of header div--> <!--Begin the div class left - this will hold the inbox emails for review--> <div class="left" id='container1'> <?PHP include ($_SERVER['DOCUMENT_ROOT'].'\email\database_connect\connect.php'); $str = "id"; $i = 0; $inbox_query = "select i.inbox_id, i.to, i.subject, i.sent, i.message from inbox as i"; $inbox_result = mysql_query($inbox_query); while($row = mysql_fetch_array($inbox_result)) {//start while trainer query $inbox_id = $row['0']; $to = $row['1']; $subject= $row['2']; $sent = $row['3']; $message = $row['4']; $i++; echo "<div class='draggable' id='$str$i'> $inbox_id $to $sent <a href='#' onclick='getmessage($inbox_id)'>$subject</a> </div>"; }//end while inbox query ?> </div> <!--end left div--> <!--begin the right div - this is the right side of the screen frame for postponed email area--> <div class="right" id="right"> </div> <div class="content" id="content"> </div> </div> <!--end the right div element--> <!--begin the main content div - this will hold sent message--> </BODY> </HTML> Hi all, I'm trying to get the cursor position to move to the end of the text within an editable iframe or div. I've been pointed to something called TextRange and have been reading up on it for days yet couldnt make sense of much (i'm still very new). what i'm trying to do is on a button click, the cursor will move to the end of the text in the iframe. any help or pointers would be greatly appreciated. thanks. Hi @ all! I've a div that is editable (contentEditable = true). The div has a fixed size like a letter page. When the user has written so much text that the text overflows I want add a new div above and let flow the overflown text in the other div. (it's the some behavior like MS Word in page view, but now it is in the web) It is possible to do something like this in the web? One way to implement this is to check if the text of the div overflows (I've found java script examples in the web which do that). And than I need the text that overflows to move it to the next div. But I have not found a function that do this. Is there such a function? Another way is to insert a gap at that position a new page begins and use an background image that looks like a page border. With this solution, the whole text is in one div but it looks like floating to another page. But therefore, I have to add a gap between to lines at a specific position (the page border/margin and the gab between the pages). Does anyone have an idea how to realize this? Maybe there are other possibilities to find a solution, aren't there? I hope, you have understand what I want to realize. If not, please feel free to ask me! Thank you for answers and hint in advanced! Konstantin Hello I have several issues with my multilevel drop down menu The First issue is : the page has 2 iframes (one has the horizontal multilevel drop down menu on the top) the below iframe has my site address Now, when i hover over the menu it does not open or expand but when i open just the menu without any iframes it does This clearly means that the menu is not coming out of the iframe Please help me bring it on top of everything of the page Note: i have placed the menu in one iframe and a page opens below it in another iframe. The Second issue is : I want the navigation bar that is the multilevel drop down menu to be editable Which means i have a blog and a forum on my site but my visitor wants that the blog should not appear there and another link to play games should be there and hence he/she can edit it And please also try to make it work on cookies so that the user info and preferences are saved in cookies and whenever he/she comes back they see the page their way. For you: I would like to tell you that IdeaLab has launched a Twitter Advertising, Widget and Search platform and the first 1000 people are getting $100 go to tweetup.com Please help me, it will be really appreciable. Thank you very much in advance! Hi, This is my plan. 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? 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? Hi, I need s JavaScript component that will allow the user to edit small amounts of data (<20 rows and Cols) in a grid format. Any suggestions on what to use? Thanks Bob Hello, I have this idea, but I wouldn't want to reinvent the wheel if it's already been done. I want to generate perspective grid on canvas depending on browser window size, something like this, but without textures: http://www.123rf.com/photo_2651286_a...rspective.html Do someone of you guys know if some similar script already exists? Or at least some tips on how not to end up writing a 1000 lines script (At this point I would just drop the idea)? All thoughts appreciated. P.S. even an obscure algorithm would probably suffice, 'cause the main problem I'm struggling with is diminishing size perspective calculations Hey, I have a script which uses an array of numbers to represent their position in a div. its 5 by 5 like so: Code: tileMap = [ [1, 1, 1, 1, 1], [1, 1, 1, 1, 1], [1, 1, 1, 1, 1], [1, 1, 1, 1, 1], [1, 1, 1, 1, 1], ]; images = new Array(); images[1] = "no block"; images[3] = "brick.PNG"; Image[1] means you can move on the tile, 3 means you cannot (aka a collision). Now this is fine but i have issues regarding my movement of the image. I want to use WASD keyboard buttons which i can do using a CASE statement. But how do you make the image move Regarding Left/Right/Up/Down (also so that it stops moving when you stop holding down one of the keyboard buttons. I use this to detect the key button pressed: Code: function handleKeyMovement(keyValueDown) { switch(keyValueDown) { case 97: //A Move Left //move it left break; case 100: //D Move Right //move it right break; case 119: //W Move Up //move it up break; case 115: //S Move Down //move it down break; } } p.s ideally i would like to move the said image by certain pixel amounts so it looks more smooth in movement. Is it possible? Hope you can help ! Hello, I'm more looking for advice but any helpful examples would be great. So basically what I need to accomplish is a grid, that I can drop objects into, then save the coordinates. So let's say I have a 3x3 set of tiles which will represent "floor tiles", and I load from my MySql database a users "furniture", what's the best method of being able to take these dynamic items drop them on a tile which can be then saved in an xml file or something. What are the best j/s libraries for this? I know jQuery and mootools have drag and drop functions but can they accomplish what I'm looking for? Any feedback will help, I'm comfortable coding in js but I want to do it effeciently and there's got to be people who have done similar things. Hi Peers, i am trying to build a template for my work. 1- it consists of 3 rows of data pulled from a databse based on 3 parameters entered in a form. those 2 rows includes 60 cells each ( 60 columns : 60 months) 2- i will have another 2 empty rows where i have to call another data from another table or enter it manually.. 3- i ll have the last row that will hold calculation results based on the above rows.. Any idea on how to build that ? \please let me know if you need more details or mock up .. it almost like an excel web spreadsheet except that sopme data is pulled directly from a database.. thank you i am trying to change my background image after click on given in grid option. any body show me complete code in java script. resource: HP Laptop Repair and Solution Service Center in Delhi |