JavaScript - Object That Creates More Objects

Hi, I have an admin page in which I enter information for a Math Education website. I have to pre-load 10 video fields just in case a lesson has 10 videos. This is an over simplification:

--------------------------------------------
Subject: ____________
Chapter: ____________
Lesson: _____________
--------------------------------------------
Video 1
Video Title: __________
Video Desc:__________
--------------------------------------------
Video 2
Video Title: __________
Video Desc:__________
--------------------------------------------
.
.
.
--------------------------------------------
Video 10
Video Title: __________
Video Desc:__________
--------------------------------------------


What I would like to do is load 1 single video field and then have a button that when it is clicked automatically creates another field. Any ideas? I'm sure this is possible but everything I know I've learned from searching the internet and reading a few simple books so my knowledge is fragmented.

THANKS!

Is it possible to make an app that creates a gif that shows the process of a finished drawing?

Im a kid and love drawing and gif .
i wanna make app that shows a replay of my initial start of my drawing till the finish product of my drawing in a gif file.

thinking to approach this with javascript? would it be possible?

Hi, every time I try and alert:

[ { number:0, secondnumber:0 }, { number:2, secondnumber:1 }, { number:1, secondnumber:2 } ]

it just shows [object object], [object object], [object object].

Why is this and what can I do to make the record be shown as it is above in an alert?

Thanks.

I can't get any info from Firebug except that one line, uncaught exception [object Object]. The code fully worked, then I needed to make it dynamically create Sortables from the scriptaculous library based on how many X were in a table in my database, which I've done, and I'm thinking it may be a simple slight parse error of some type, I'm not too good with Javascript, because now my script barely works. I've double checked the script's source code, the PHP variables are exactly what they should be.

Code:

print<<<HERE
               Sortable.create('sortlist$box', { tag: 'img', overlap:'horizontal',constraint:false, containment: $list, dropOnEmpty: true, 
                onChange: function(item) {
                    var list = Sortable.options(item).element;
                    
                    if(changeEffect) changeEffect.cancel();
                    changeEffect = new Effect.Highlight('changeNotification', {restoreColor:"transparent" });
                },
            
            
            
            onDrop: function(item) {
            var thing=Sortable.options(item).element.identify();
            
            var anchors = document.getElementById(thing).childNodes.length-2;
            
            if(anchors > 20){
            alert('This box had 20 creatures in it already, your last action has not been saved.');
            window.location.reload();
            }
            else{
            
            new Ajax.Request("saveImageOrder.php", {
                        method: "post",
                        parameters: { data: Sortable.serialize("sortlist$box") }
                    });
               }   
}               
            });
               
HERE;
$box++;

}
?>
          
        });
    </script>

if you solve this I'll send ya $10 via paypal

I created a method for displaying an object's properties:

Code:

renderfunction 	= false;

function showProperty (object, property)
{
	document.write  ('<td class="type">' + (typeof object[property])  + '</td>' 
					+ '<td class="name">' + property + '</td>');
	
	document.writeln('<td class="value">' + 
						(
								(typeof object[property] != 'function')
								? object[property]
								:(
										(property != 'showProperties')
										? (
											renderfunction
											? object[property]()
											: ('<span class="self">NOT RENDERED</span>')
											)
										: ('<span class="self">THIS</span>')
								 )
						) 
					+ '</td>');

	
	document.writeln('<td class="hasOwnProperty" >'  
							+ (
									object.hasOwnProperty(property)
									? "Local"
									: "Inherited"
								)
					 	+ '</td>');

	if (typeof object[property] == 'function')
	{
		document.writeln ('<td class="function">' + object[property] + '</td>');
	}
	else
	{
		document.writeln ('<td class="function"> </td>');
	}

}

As long as renderfunction = false, the object is fine coming out of this function.

However, if I change renderfunction to true, all my properties become undefined.

Why isn't this working as I expect it to?

How should I fix it?

Thanks in advance,

-Brian.

Ignore post (if mod, please delete)

I'm writing a program that involves a network of interconnected nodes (or simply objects in my example below). It depends on being able to access properties of an object's linked objects (a bit oddly worded, sorry)...

Problem is I'm not sure how to properly access those properties... see below please.

<script>

//This is an example of a problem im having in my own code...
//I want to access the name of the object within the links array wintin the object...

var objA = {name: "Object A", links: [objB, objC]};
var objB = {name: "Object B", links: [objC, objD, objE]};
var objC = {name: "Object C", links: [objB]};
var objD = {name: "Object D", links: [objE]};
var objE = {name: "Object E", links: [objD]};

//ex: I want to access the name of Object A's first link...
console.log(objA.links[0].name);

</script>

I'm hoping to get "Object B"...
But instead I get: TypeError: Result of expression 'objA.links[0]' [undefined] is not an object.
Is there another way around this? Any thoughts are appreciated.

Hello together!

I generate html code with jsp. In that jsp there a several framesets and frames. And yes i know, frames are not really up to date but it's an old program and i have to deal with it now. Anyway, in the top frameset i have an onload attribute like onload="load()".

In the function load i want to access the Element.prototype object. But unfortunately typeof Element gives me "undefined". So i looked a little deeper and found that window.toString() gives me "[object]" and not as expected "[object window]" so somehow my window doesn't know that its construcor is Window. window.construcor is "undefined" as well. And i don't have access to the Element object. I really don't know where the error could be. When the page is loaded and i access the same window over the console, then everything is right. But in my function a can't get access to the objects i need.

I also don't know what part of the code could be useful to post here, but maybe someone had a similar problem before? i should say that this problem only occurs in IE8. In IE9 it works perfectly.

Has anyone any idea??

Quote:
menu: function( a, b ) {
$( b ).observe( 'click', function( event ) {
event.stop();
if( $( a ).visible() ) {
$( a ).hide();
$( b ).removeClassName( 'selected' );
document.stopObserving( 'click' );
} else {
$( a ).show();
$( b ).addClassName( 'selected' );
document.observe( 'click', function( e ) {
if( e.target.id != a && e.target.id != b && !Element.descendantOf( e.target, $( a ) ) ) {
$( a ).hide();
$( b ).removeClassName( 'selected' );
document.stopObserving( 'click' );
}
});
}
});

$$( '#' + b + ' > a' ).each( function( element ) {
element.observe( 'click', function( event ) {
$( a ).hide();
$( b ).removeClassName( 'selected' );
document.stopObserving( 'click' );
});
});
}
This work's perfrect accept when i use it with others on the menu it leaves the other ones open, how do i get it to close the open one when i open a new menu..

Thanks.

Hello.

Is there any way to get the variable name of an object from inside the object?

E.g.

PHP Code:
function Bla(){

    this.write = function(){
    document.write(<objectname>);

    }

}

obj1 = new Bla();
obj1.write(); //Outputs obj1 



Here is my script:

PHP Code:
function myTimer(seconds, obj){
    this.seconds = seconds;
    this.obj = obj;
    this.startTimer = function(){
        if(this.seconds>0){
            this.seconds--;
            this.obj.innerHTML = this.seconds;
            this.timer = setTimeout("Timer.start()",1000);
        }
    }

}
Timer = new Timer(10, obj);
Timer.startTimer(); 



Now the problem is that the variable that contains the object must be named "Timer".

This way I cannot create new timer objects with different variable names

I have tried:
this.timer = setTimeout("this.start()",1000);
but it doesn't work.

That's why it would be good to detect the variable name and instead use something like this:
this.timer = setTimeout(varname+".start()",1000);

I would rather not have to pass the variable name through a parameter like this:
Timer1 = new Timer(10, obj, "Timer1");

Thanks in advance.

function($)
{
$.fn.superfish = function(op){

var sf = $.fn.superfish,
c = sf.c,
}

So I see the '.superfish' method being added to the object '$.fn'. I find it interesting that the first order of business is to declare 'sf' and stuff in to it some value '$.fn.superfish' which I do not fully understand. Also the statement

c=sf.c

How can 'c' be set to equal 'sf.c' when no 'sf.c' has been declared yet?

Thanks!

Hi, I am trying to detect a users browsers and output a different code based on browser.

I found this code online that uses the object detection method and it works. When I document.write(BrowserDetect.browser) it outputs Chrome, (which is what I am using). The code can be found he http://www.quirksmode.org/js/detect.html

So I can't understand why the following code does not work? It ouputs the "not" in the else statement.

I believe that BrowserDetect is an object and the .browser at the end is a property of the object.

Can one not make an object a variable? or make an object a string?

oh and BTW there is a bunch of javascript that creates the browserdetect object that can be found on the site above, but I thought it would be too unwieldy to post here. Thanks.

The following script outputs:
Chrome Not Working

<script type="text/javascript">

document.write(BrowserDetect.browser);

var browser="BrowserDetect.browser";

if(browser=="Chrome")
{
document.write(" Working");
}
else
{
document.write(" Not working");
}
</script>

Hello everybody am a JavaScript beginner.

here is a code making rollovers
////////////////////////////////////////////////
window.onload=rolloverInit;

function rolloverInit()
{
for(var i=0; i<document.images.length; i++)
{
if(document.images.parentNode.tagName=="A")
{
setUpRollover(document.images);
}
}
}

function setUpRollover(currentImage)
{
currentImage.outImage = new Image();
currentImage.outImage.src = currentImage.src;
currentImage.onmouseout = rollOut;

currentImage.overImage = new Image();
var source = currentImage.src;
var sourceText = source.toString();
if(sourceText.indexOf("png")>0)
{
currentImage.overImage.src ="images/"+currentImage.id+"_on.png";
}
else
{
currentImage.overImage.src ="images/"+currentImage.id+"_on.gif";
}


/*currentImage.overImage.src ="images/"+currentImage.id+"_on.gif";*/
/*currentImage.overImage.src ="images/"+currentImage.id+"_on.png";*/
currentImage.onmouseover = rollOver;



currentImage.clickImage = new Image();
if(sourceText.indexOf("png")>0)
{
currentImage.clickImage.src ="images/"+currentImage.id+"_click.png";
}
else
{
currentImage.clickImage.src ="images/"+currentImage.id+"_on.gif";
}
/*currentImage.clickImage.src = "images/"+currentImage.id+"_on.gif";*/
/*currentImage.clickImage.src = "images/"+currentImage.id+"_on.png";*/
currentImage.onmousedown = rollClick;



currentImage.parentNode.childImage = currentImage;
currentImage.parentNode.onblur = rollOutParent;
currentImage.parentNode.onfocus = rollOverParent;

}

function rollOut()
{
this.src = this.outImage.src;
}

function rollOver()
{
this.src = this.overImage.src;
}

function rollClick()
{
this.src = this.clickImage.src;
}


function rollOutParent()
{
this.childImage.src = this.childImage.outImage.src;
}

function rollOverParent()
{
this.childImage.src = this.childImage.overImage.src;
}


////////////////////////////////////////////////

1-I do understand "if iam right, lol" that here
///currentImage.outImage = new Image();///
and here
///currentImage.overImage = new Image();///
and here
///currentImage.clickImage = new Image();///

we are creating an image object "overImage" on the fly which still a property of currentImage object, to keep track and store the current image and new image src.

but here
///currentImage.parentNode.childImage = currentImage;///
I am unable to see the point behind creating the childImage object
-same rule applied here???
is it really a brand new independent object "still a property of the parent" created on the fly like before?
and if so
-what is is purpose here??

how the cildImage object is interacting here, what is its purpose? and how it is able to modify "actually change" the <a> object child node Image object "currentImage".

it seems stupid question but its quiet simple
---///currentImage.parentNode.childImage = currentImage;///
here I have an object on the fly, a new Image object "childImage", that is Fine until now.
---///this.childImage.src = this.childImage.outImage.src;///
now how the childImage became able to change my parent "<A>" child "currentImage" src ??? how it "childImage" became displayable at all

is is because of the assignment here
///currentImage.parentNode.childImage = currentImage;///
???
Yes i assigned currentImage to the childImage, but based on my java programing concepts background each still independent objects refrences representing two different objects
---->and so based on that here is these functions rollOutParent(), rollOverParent()
am supposed to say something like
***this.currentImage.src = this.childImage.src*** or
***this.childImage.src = this.childImage.outImage.src;***or whatever "i know thats wrong coding here am just giving example".

------------
am confused, how with this simple line of code
currentImage.parentNode.childImage = currentImage;
childImage became able to define the currentImage ?

and if so, how this was achieved, hoe the Objects is being represented and how they interact in the core memory?

Hi

If i was using c# i would use a generic list and add all my people objects to the list collection

but how do i do this in jquery/javascript


eg

//container object
var allObj= {

};

//people object
var people= {
name:"fred",:
age:00;
};

How do I add many people objects to allObj (the amount of people added in not always the same)
eg the final result is something like this

allObj
-person1
-person2
-person3
-person4


thanks

Hello there folks,

First time poster, so please be gentle

I am ok with using objects creating classes if someone else defines, but when it comes to defining my own, I hit a nasty brick wall...

I am using an XML/XSLT wrapper called Sarissa to help with programming a utility to transform XML into HTML in different views.

For this to happen, I have created a Loader class which loads in XML required. I am aware of prototyping for binding methods to objects (as opposed to replicating the same method every time an instance is created)... The aim being I want to create a progress bar for the essential files that need to be loaded in. Presently I have them load in Synchronous mode just to get the utility working, which I know is poor, so would like to address it.

So can someone answer me this:

I understand why this works:

Code:

var SWMU = new Object();

SWMU.stylesheets = new Object;
SWMU.joblot = null;
SWMU.cache = new Object;
SWMU.filtering = new Object;
SWMU.locns = null;

function Loader(sXml, sTitle) {
	this.doc = Sarissa.getDomDocument();
	this.doc.load(sXml);
	this.doc.summary = sTitle;
	this.doc.onreadystatechange =  function() {if(this.readyState) 
		{alert(this.summary + " state change to..." + this.readyState);} else 
		{alert(this.summary + " state change to..." + this.doc.readyState);}
	}
}

function async() {
	SWMU.stylesheets[0] = new Loader("swmu_test/swmu_berthing.xsl", "Main SWMU Stylesheet");
	SWMU.stylesheets[1] = new Loader("assets/xsl/controls.xsl", "Drop down boxes");
}

function _init() {	
	async();
}

as it recreates the "this.doc.onreadystatechange" anonymous function everytime an instance is created (which is yuck).

However, when I do this (using prototype)...

Code:

var SWMU = new Object();

SWMU.stylesheets = new Array;
SWMU.joblot = null;
SWMU.cache = new Object;
SWMU.filtering = new Object;

// Now define the Loader object
// Create the loader method for dealing with items loaded
function Loader(sXml, sTitle) {	
	this.doc = Sarissa.getDomDocument();
	this.doc.load(sXml);
	this.doc.summary = sTitle;
}

function rHandler() {alert(this.summary + " State changed to... "+this.readyState);}

// Create the request handler 
Loader.prototype.doc = {};
Loader.prototype.doc.onreadystatechange = rHandler;

function async() {
	SWMU.stylesheets[0] = new Loader("swmu_test/swmu_berthing.xsl", "Main SWMU Stylesheet");
	SWMU.stylesheets[1] = new Loader("assets/xsl/controls.xsl", "Drop down boxes");
}

function _init() {	
	async();
}

Nothing happens and no errors are thrown, though there should be an alert box everytime there is state change to the progress of a file loading.

Can someone help me with this? Apologies if this is on the basic side, but it has been causing me a headache all week, and I can not find any answers on this.

Shaun