I am developing an application that reads in an HTML area/imagemap (old technology, I know which depicts a floormap for a particular building. Essentially, there are hardware devices placed in particular rooms which can be polled from the web interface. The idea is that, depending on the state of the device, a colored transparent polygon will be placed overtop of particular rooms in the imagemap. I am using a javascript graphics library to accomplish this. As far as I can tell, a colored polygon consists of numerous (sometimes waaay too many) div elements that are styled a particular way. Unfortunately, these div elements seem to obscure the area tags behind them. In other words, I cannot call my own custom mouseover function for the area tag because the div seems to be 'swallowing' the events. I have tried fiddling with the z-index for the respective html elements, but to no avail.
I'm making some jQuery UI elements, and once an element is created, I want to add some custom functions and variables - I don't want to clutter up other jQuery objects by putting the functions in all jQuery objects, and obviously, the variables need to be different between different objects. However, the issue is, when I re-acquire the item, I won't have access to the variable any more.
That was probably confusing. Another way of putting it: (function($){ var _MyUI_id=0; jQuery.fn.MyUICreate = function(opts){ this.each(function(){ var obj=$(this)
//... code to turn the object into a MyUI object omitted to be concise obj.MyUI_id = _MyUI_id; _MyUI_id++; }}
})(jQuery) //now, create one $('#some_div').MyUICreate({}); //The desired effect would be to give me the id in #14, instead I get 'undefined'. alert($('#some_div').MyUI_id);
My 'solution', is to create an object variable in jQuery.fn called 'Collections'. It's indexes are the names of the new types, and each contains an object, the keys of which are the IDs of the UI elements that are converted to the type, and the values the jQueries objects. This is not only hackish, but it has a LOT of potential bugs. The code for this would look like:
This is in the 'create' function, at the end. jQuery.fn.Collections.MyUI[obj.attr('id')]=obj;
This is outside of the create function, but within the (function($){...}) scope. //jQuery.fn.Collections is set to {} in another file. jQuery.fn.Collections.MyUI={}; jQuery.fn.GetMyUI(id){ return jQuery.fn.Collections.MyUI(id); } This will allow the first block of code to work as desired, but it inserts a whole new set of bugs. What are the common ways to achieve what I am trying to do?
Is there a way in Javascript or Jquery to return an array of all objects underneath a certain point, ie. the mouse position. Basically, I have a series of images which link to various web pages but I have a large semi transparent image positioned over the top of the other images. I want to find the href of the background image that the mouse pointer clicks over.
I have a page I am working and I am having some trouble with: I need to show and hide areas based on a radio selection. I initally started using the show / hide feature in Jquery but the problem is the elements need to be removed but then put back if the user selects the radio buttonagain as it has form elements that have validaion on them. The validation is still trying to validate the form elements becuase they are still on the page but just not showing. This is the radio group the user makes the selection from:
I have HTML tags stored in XML. I want to be able to use these HTML elements with Javascript, just as you can with elements in document.body. How can it be done? (And don't try and tell me I should use server-side because I have written it all for Javascript and the project is nearly complete minus this and there are practical reasons for not doing this server-side. After all, anything is possible with Javascript!)
Let me explain:
- I have HTML templates such as this [URL]
- I want javascript to populate these templates then add them to my page
- The only way I know javascript can get this kind of data is by parsing XML
- I want to parse the XML then be able to use the HTML elements just like those in document.body
- As far as I'm aware, XML is the only good way of storing data for javascript. I don't want to store it in javascript variables (too much multiline data with " and '). Nor do I want to build it using document.createElement("div")... etc
As someone not yet with any experience in computer science etc, please ignore my poor terminology! However, I'm not a beginner when it comes to javascript.
Here's the script concerned but I doubt it'll help you understand my problem: [URL]
So i've got a form that adds an element onto the page. This is working. When I try to remove said elements, that works. But the same 'delete' button doesn't work on elements not generated by javascript.
Code JavaScript: function destroyQuickTask() { $.post($(this).attr("href"), null, null, "script");
I am trying to figure out how to use objects properties in my code so when the page loads All my properties are in object where I can use elsewhere in my page. Code:
I'm trying to use the following code to load xml files:
ImportXML = function (ts) { this.file = ts; if (document.implementation && document.implementation.createDocument) { this.doc = document.implementation.createDocument("", "", null); this.doc.obj = this; this.doc.onload = this.callBack; this.doc.load(this.file); } else if (window.ActiveXObject) { this.doc = new ActiveXObject("Microsoft.XMLDOM"); this.doc.onreadystatechange = this.ready; this.doc.obj = this; this.doc.load(this.file); } else { alert("Error"); } } ImportXML.prototype.ready = function () { if (myDoc[counter].readyState == 4) this.obj.callBack(); } ImportXML.prototype.callBack = function () { alert('loaded'); }
var xmlDoc = new ImportXML("bar.xml");
The problem I'm having is with the second line that reads this.doc.obj = this;
IE tells me that object doesn't support this property or method. How is it possible to get a reference to the object (xmlDoc) in the prototypes 'ready' and 'callBack" with IE?
If you have a javascript interpreter running in an environment unknown to you (as in what objects it exposes to the language) is it possible to loop through all objects in some way?
This is a non-browser environment, specifically the scripting engine for doing xslt extensions in msxml.
"When we combine FUNCTIONS with OBJECTS we get METHODS". Then he creates an empty ARRAY:
var a = [];
then he uses the "push() method" to add elements to the array.
a.push(1,2,3);
uh, methods are for *objects* right? Yet he is using them on an ARRAY.how an array can magically becomes an object that is manipulated by a "method"?I mean, the array is still an array, no? It never actually becomes an object, right? Yet we still use a *method* to manipulate it. See my conceptual quandry?
I've often write javascripts that use this rather common code to get all tags in an XHTML document:
var alltags = document.getElementsByTagName('*') ... and then use a for loop to access the elements as an array, for example: for (i=0;i<alltags.length;i++) { elementClass=alltags.className [i]Do stuff }
This has always seemed to work in the past, but I recently learned that the getElementsByTagName method returns a DOM NodeList, not an array. I'm currenly working on a project that needs to access the children of an element conditionally upon its class.
I have three questions. First: How do I declare a global variable to be a DOM NodeList object? It wouldn't be assigned until called from a function, so something akin to var elementList = document.getElementsByTagName() in my global declarations is out of the question. Is there something like var elementList = new NodeList() in javascript? (I know that I can assign it in a function without the var and it will be global, but other people may have to work with this code, and I'd like to have it clearly declared at the head of the program.)
Second question: Assuming alltags is a NodeList returned from a getElementsByTagName call, which of these is proper? This:
childElements = alltags[i].getChildNodes() ... or this: childElements = alltags.item(i).getChildNodes() And finally, which of the above techniques has better browser support?
I recently had a problem where I needed to build up an array of strings, that would be join()ed into a string when the array building was complete. however, each value could only be in the array once.
This was a problem for a few reasons. Once a value has gone into an array the only way to check for it that works cross-platform is to scan the array looking for the value. FireFox has the every() and some() functions but they don't work in anything else.
Using an object to simulate an assocaiative array would allow me to avoid this problem by storing key/values with the keys having the same value as the value I was storing. I could then use the (a in b) construct to check that I had not already added a value.
However, array type methods won't work with objects, so I had no access to size () or join () meaning I'd have to manually build the string by iterating over the object.
My solution was to use an array object, but to store the provided data i nboth the array proper and as a property of the array object.
var myArray = new Array;
function addVal (val) { if (!(val in myArray)) { myArray [val] = 1; myArray.push (val); } }
This approach does use up more memory but it does give me the advantages of both arrays and objects for little extra work. (if you don't have FireBug then replace console.log with alert)
That arrTD will have an array of "HTML DOM TableData Objects".
Now what is the best way to access each object and see what it contains. I would like see which properties each object has and what their values are. I also guess there could be some other objects within the TD object and maybe even some events and methods.
Now I have been reading an on-line reference about DOM, but I think it is a little dated.
http://www.w3schools.com/htmldom/default.asp
For example I know that a <TD> can contain class="something" but I could not find a property called class, but it did list others like id, align etc.
I would like to learn how to access and view the contents of a DOM object.
I would like to have page which uses a few xhr objects and automatically (after 30 seconds) starts the same few requests again It works for me well in IE7, IE8, but not IE6 (where is in browsing history chosen option "automatically" ). It works there only for first time and I can't set it for circular reloading. It looks like page is reloaded, but xhr objects are not doing their job ...only - as I wrote - for first time after page load.
where node_b is a pointer to a DOM object: node_b = document.getElementById("a") The reason I passed a DOM object into a variable, was to avoid searches document.getElementById() each time. However, it will not work. I am confused I cannot figure out if it a a mistake of mine or just the way javascript works.
Could anyone explain why I cannot use variables as DOM objects in order to avoit each time a tree search document.getElementById("a")? Bellow is given the code with explanation when it works and when it fails.
Does anyone know of any generic code to clone an object (which only contains properties), which copies by value, not just reference?
It seems as though there should be some sort of prefab recursive function that could work for any old object, so I didn't want to re-invent the wheel Code:
I am dabbling with objects and have successfully created an object with various properties, one of which is an Array, and all is fine. the Question I have is can I make an Array of objects? I have the following object:
dataSeries.Type = value dataSeries.Name = value dataSeries.dataPoints[n] = Array of values dataSeries.color = value
What I would like to do is have an Array of multiple objects supposedly like:
dataSeries[0].Type = value dataSeries[1].Name = value dataSeries[2].dataPoints[n] = Array of values dataSeries[3].color = value
I've tried breaking out an application I'm working on into smaller objects. I have always had the objects built out, but they were nothing more than local variables. So I tried to create a few methods and include them in one of the objects (the Map object). Code:
I have a data structure that is composed of an array of JavaScript objects (my own created classes) that I need to pass as a parameter to an URL:
I would like to know if there is a way to serialize this array, send it as a string, then deserialize it on the other side, resulting with the data structure again I am trying to avoid doing the serialization myself.
Each entry in the array holds an object of type Person:
Can anybody explain to me what it means when a Date object method "operates" under UTC? I know that local time and Universal Time Coordinated (GMT) are different times, but what does that have to do with using the Date methods?
For example, let's say that I create a new Date object like this:
var lovelyDate = new Date(2006, 3, 30);
What then, would be the difference in using the methods lovelyDate.getDate() lovelyDate.getUTCDate() ?
Can someone explain to me the difference in the book and the sample code? I am not an expert in javascript, but I am an experienced programmer in C++ (Borland) and other programming languages (mainly CVI which does not support OOP).
The book uses try and catch statements to init the XMLHTTPRequest object, but the sample code uses what looks like (to me) an array of functions. Can someone please explain the sample code? It is probably straightforward to a javascript programmer, and I can see what is happeneing, but I have never seen the square brackets construct before. Code:
In the method nextImage, I can't figure out how to access thumbs. It keeps coming back as undefined. (Using Firefox)
function runPortal(portal_number){ // there are multiple runPortals on each webpage this.portal = document.getElementById('portal'+portal_number); // represents the div that holds the images this.thumbs = this.portal.getElementsByTagName('a').length; // represents all the images within the div that will be rotated this.length = this.thumbs.length; // that's how many images will be rotated // Hide everything for (var j=0;j<this.thumbs.length;j++){ if (j==0) continue; // Don't hide the first one this.thumbs[j].childNodes[0].style.display = 'none' } this.nextImage = function (){ // there are a fixed number of images to rotate. Start over if (this.i >= this.length){ this.i = 0; } // One fades away, the next appears Effect.dglPuff(this.thumbs[this.last].childNodes[0], {duration:.6, from:.7}); Effect.Appear(this.thumbs[this.i].childNodes[0]);
// iterate to the next image for the next run this.last = this.i; this.i++; } // Set up the image rotator // here is where I started guessing // thumbs needs to belong to the object rotator, I guess.
this.rotator = new PeriodicalExecuter(this.nextImage, 4); // This object runs the function every 4 seconds this.rotator.portal = document.getElementById('portal'+portal_number); // represents the div that holds the images this.rotator.thumbs = this.rotator.portal.getElementsByTagName('a'); // represents all the images within the div that will be rotated this.rotator.length=this.length; // that's how many images will be rotated this.rotator.i=0; // the counter for what image we're one this.rotator.last=0; // the counter for the previous image
I am currently working on building a library and having my functions(methods) within my library. I am having trouble find some code for JavaScript that can help me to do the following:
I need to give an array of objects and the name of a key, return the array sorted by the value of that key in each of the objects: "a" + [{a:2},{a:3},{a:1}] → [{a:1},{a:2},{a:3}]
