Learn VBA & Macros in 1 Week!

JavaScript - Dom 3 X 5 Grid

Full Excel VBA Course - Beginner to Expert

Dom 3 X 5 Grid	View Content

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>

Full Excel VBA Course - Beginner to Expert

Editable Grid Help

Similar Tutorials

View Content

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

Javascript Grid And Scroll.to

Similar Tutorials

View Content

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?

Eidtable Grid For Javascript

Similar Tutorials

View Content

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

Trying To Move A Image Around A Grid!

Similar Tutorials

View Content

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 !

Canvas Grid Generating

Similar Tutorials

View Content

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

Drag/drop Grid And Coordinates.

Similar Tutorials

View Content

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.

Building A Cell Controlled Grid In Js

Similar Tutorials

View Content

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

What Should Coding Of The Background Image Change After Click Grid Option

Similar Tutorials

View Content

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