473,545 Members | 1,893 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 4943
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
3067
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...
6
19932
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
14343
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
3987
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();...
51
10241
by: Joe Van Dyk | last post by:
When you delete a pointer, you should set it to NULL, right? Joe
2
2967
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...
12
3049
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
2973
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...
0
1267
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
2277
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...
0
7486
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...
0
7676
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. ...
0
7932
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...
1
7442
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For...
0
7776
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...
0
6001
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then...
1
5347
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...
0
3473
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in...
1
1905
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

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.