473,837 Members | 1,499 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

"...is null or not an object" error when creating draggable divs

178 New Member
I have adapted code from http://dunnbypaul.net/js_mouse/

I want to use a button to create new draggable divs but i keep getting error "is null or not an object"

heres the code
Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3. <title>Drag and drop module</title>
  4. <style type="text/css">
  5. #canvas {
  6.     margin:auto;
  7.     padding:0px;
  8.     position: absolute;
  9.     background-color:grey;
  10.     border:dashed gray 1px;
  11.     top: 5px;
  12.     margin:auto;
  13.     padding:0px;
  14.     width:100%;
  15.     height:400px;
  16.     float:left;
  17.     font-size: 8px;
  18.     font-family:Arial, Helvetica, sans-serif;
  19.     overflow: hidden;
  20. }
  21. #controls {
  22.     margin:auto;
  23.     padding:10px;
  24.     position: absolute;
  25.     width:100%;
  26.     top:415px;
  27.     float:left;
  28.     background: grey; 
  29.     border:dashed black 1px;
  30.     height: 150px;
  31. }
  32. #newObject {
  33.     position: absolute;
  34.     left: 10px;
  35.     top: 10px;
  36.     background-color:green;
  37.     border:solid gray 1px;
  38.     margin:10px;
  39.     padding:4px;
  40.     width:50px;
  41.     height:50px;
  42.     float:left;
  43.     zIndex:1;
  44.     cursor:pointer;
  45.     font-size: 8px;
  46.     font-family:Arial, Helvetica, sans-serif;
  47. }
  48. </style>
  49. <script type = "text/javascript">
  50. function createObject (){
  51.     cv = document.getElementById("canvas");
  52.     var newObject = document.createElement('div');
  53.     newObject.Class = "newObject";
  54.     newObject.id = "newObject";
  55.     cv.appendChild(newObject);
  56.     newObject.onmousedown=grab(this);    
  57.  
  58. }
  59.  
  60. var mousex = 0;
  61. var mousey = 0;
  62. var grabx = 0;
  63. var graby = 0;
  64. var orix = 0;
  65. var oriy = 0;
  66. var elex = 0;
  67. var eley = 0;
  68. var algor = 0;
  69.  
  70. var dragobj = null;
  71.  
  72. function falsefunc() { return false; } // used to block cascading events
  73.  
  74. function init()
  75. {
  76.   document.onmousemove = update; // update(event) implied on NS, update(null) implied on IE
  77.   update();
  78. }
  79.  
  80. function getMouseXY(e) // works on IE6,FF,Moz,Opera7
  81.   if (!e) e = window.event; // works on IE, but not NS (we rely on NS passing us the event)
  82.  
  83.   if (e)
  84.   { 
  85.     if (e.pageX || e.pageY)
  86.     { // this doesn't work on IE6!! (works on FF,Moz,Opera7)
  87.       mousex = e.pageX;
  88.       mousey = e.pageY;
  89.       algor = '[e.pageX]';
  90.       if (e.clientX || e.clientY) algor += ' [e.clientX] '
  91.     }
  92.     else if (e.clientX || e.clientY)
  93.     { // works on IE6,FF,Moz,Opera7
  94.       mousex = e.clientX + document.body.scrollLeft;
  95.       mousey = e.clientY + document.body.scrollTop;
  96.       algor = '[e.clientX]';
  97.       if (e.pageX || e.pageY) algor += ' [e.pageX] '
  98.     }  
  99.   }
  100. }
  101.  
  102. function update(e)
  103. {
  104.   getMouseXY(e); // NS is passing (event), while IE is passing (null)
  105.  
  106.   document.getElementById('xpos').value = elex;
  107.   document.getElementById('ypos').value = eley;
  108.   document.getElementById('object').value = dragobj ? (dragobj.id ? dragobj.id : 'unnamed object') : '(null)';
  109. }
  110.  
  111. function grab(context)
  112. {
  113.   document.onmousedown = falsefunc; // in NS this prevents cascading of events, thus disabling text selection
  114.   dragobj = context;
  115.   dragobj.newObject.zIndex = 10; // move it to the top
  116.   document.onmousemove = drag;
  117.   document.onmouseup = drop;
  118.   grabx = mousex;
  119.   graby = mousey;
  120.   elex = orix = dragobj.offsetLeft;
  121.   eley = oriy = dragobj.offsetTop;
  122.   update();
  123. }
  124.  
  125. function drag(e) // parameter passing is important for NS family 
  126. {
  127.   if (dragobj)
  128.   {
  129.     elex = orix + (mousex-grabx);
  130.     eley = oriy + (mousey-graby);
  131.     dragobj.newObject.position = "absolute";
  132.     dragobj.newObject.left = (elex).toString(10) + 'px';
  133.     dragobj.newObject.top  = (eley).toString(10) + 'px';
  134.   }
  135.   update(e);
  136.   return false; // in IE this prevents cascading of events, thus text selection is disabled
  137. }
  138.  
  139. function drop()
  140. {
  141.   if (dragobj)
  142.   {
  143.     dragobj.style.zIndex = 0;
  144.     dragobj = null;
  145.   }
  146.   update();
  147.   document.onmousemove = update;
  148.   document.onmouseup = null;
  149.   document.onmousedown = null;   // re-enables text selection on NS
  150. }
  151.  
  152. </script>
  153. </head>
  154. <body onload="init();">
  155. <div id = "canvas">
  156. </div>
  157. <div id = "controls">
  158.     <input type = "button" value = "New Object" onClick = "createObject()">
  159.     <input type = "text" value = "" name = "xpos" id = "xpos">
  160.     <input type = "text" value = "" name = "ypos" id = "ypos">
  161.     <input type = "text" value = "" name = "object" id = "object">
  162.  
  163. </div>
  164. </body>
  165. </html>
Jul 9 '08 #1
6 4968
cleary1981
178 New Member
sorry just to be a little clearer.

Error:
Line: 116
Char: 3
error: 'dragobj.newObj ect' is null or not an object
code:0
Jul 9 '08 #2
acoder
16,027 Recognized Expert Moderator MVP
"If you can solve this your a genius!!" is a brilliant title :D, but doesn't really describe the problem, so I've changed it.

Re. your problem: dragobj.newObje ct is incorrect. Replace newObject with style. See if that makes a difference.
Jul 9 '08 #3
cleary1981
178 New Member
yeah I have already tried that. I think the problem lies in the createObject function. Seems to be a problem assigning the onmousedown event.
Jul 9 '08 #4
acoder
16,027 Recognized Expert Moderator MVP
Yeah, that should be:
Expand|Select|Wrap|Line Numbers
  1. newObject.onmousedown=function(){grab(this);}
Jul 9 '08 #5
cleary1981
178 New Member
Yeah, that should be:
Expand|Select|Wrap|Line Numbers
  1. newObject.onmousedown=function(){grab(this);}
Has anyone every told you you're some pup! :)

Thanks... you don't know how much that has helped
Jul 9 '08 #6
acoder
16,027 Recognized Expert Moderator MVP
Glad I could help :)
Jul 9 '08 #7

Sign in to post your reply or Sign up for a free account.

Similar topics

13
3098
by: Don Vaillancourt | last post by:
What's going on with Javascript. At the beginning there was the "undefined" value which represented an object which really didn't exist then came the null keyword. But yesterday I stumbled across "null" string. I know that I will get an "undefined" when I try to retrieve something from the DOM which doesn't exist. I have used null myself to initialize or reset variables. But in which
6
19945
by: Lauchlan M | last post by:
Hi. Usin ASP.NET, getting an "Object reference not set to an instance of an object" error. In my login.aspx page I have: string arrUserRoles = new string {"UserRole"}; Context.Items.Add("UserRoles", arrUserRoles); Context.User = new
3
14401
by: Karel Vandenhove | last post by:
Hi, I get an error "cannot apply indexing with to an expression of type object" when I try to compile the code below. SSLScannerManager is a COM component. (Used to access fingerprint scanners and developed by neurotechnologija) How does one get an array from a com component?
5
3999
by: Christian Hvid | last post by:
What is the easiest way to get the "row object" or "item object" when a datagrid is clicked? I have web form with a datagrid. And I have an array of something called BlogEntry that I bind to the grid like this: private void Page_Load(object sender, System.EventArgs e) { BlogEntry entries = DataLayer.GetAllBlogEntries(); DataGrid1.DataSource = entries;
51
10552
by: Joe Van Dyk | last post by:
When you delete a pointer, you should set it to NULL, right? Joe
2
2980
by: louie.hutzel | last post by:
This JUST started happening, I don't remember changing any code: When I click the submit button on my form, stuff is supposed to happen (which it does correctly) and a result message is posted back to the same page at the top of my form alerting the user that their request has been approved or denied. However, the end result is an error message: Error Message: Object reference not set to an instance of an object.
12
3071
by: JHNielson | last post by:
I have a simple question, but I can't seem to find the answer. I have this code to count the number of records that pass through a set of processes: It counts how many records go through INPUT, VALIDATED, ERRORS This is the code to get the numbers: Function Val_Message()
3
2995
by: =?Utf-8?B?QmFkaXM=?= | last post by:
I'm doing a server side automation(I know it's bad but..) and its working fine locally and when accessing it from a remote machine using web browser is was giving me this error"Retrieving the COM class factory for component with CLSID {000209FF-0000-0000-C000-000000000046} failed due to the following error: 80070005". so I configured the server using dcomcnfg as described in this link: http://support.microsoft.com/kb/288368/ and know...
0
1283
by: piyumi80 | last post by:
hi, i wrote the following code to get a specific data row from the data set.but it generates the "Object reference not set to an instance of an object.".....error private void showClientListForUser() { string fkeys = new string; fkeys = txtUserName.Text; fkeys = txtUserCompanyNumber.Text;
5
2287
RMWChaos
by: RMWChaos | last post by:
I am working on a script to create and remove DOM elements, and I want to make it as efficient as possible (no redundancies). Because DOM elements each have their own set of attributes, the function variable list is quite long, and each type of element may not use some of the variables. As a placeholder, I use "null" when there is no value, but this can result in lots of "null" values. So I want to create a function to autofill the "null"...
0
9839
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
9682
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
10564
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
0
10268
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
1
7806
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
6998
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
5846
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
4474
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
4039
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.