JavaScript - Object Htmldivelement

Hi all,

I'm stumped on finding a way in javascript to create an object factory whose instances are also object factories. In short I want something like that below, but no joy ... any clues?


Code:

function createClass () {
	return new createClass()
	function createClass() {
		return new createInstance ()
		function createInstance () {
			//Default properties, values and methods which might later be extended
		}
	}
}

var createDoor = createClass();
var door1 = createDoor();
var door2 = createDoor();

var createChair = createClass();
var chair1 = createChair ();
var chair2 = createChair ();

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.

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.

I am trying to troubleshoot my javascript function below.

Code:

<script type="text/javascript">
function txtboxfill(fillobj) {
    var rChar=String.fromCharCode(13);	
    var myVal = "To: " + this.form.to.value + rChar;
    myVal = myVal + "From: " + this.form.from.value + rChar;
    myVal = myVal + "Subj: " + this.form.subj.value + rChar + rChar;
    myVal = myVal + "Message: ";
    fillobj.value = myVal;
}
</script>

Then I have a text box input field with an Code:

<input type="text" id="tp" name="to" size="34" class="totext" onkeyup="txtboxfill(this.form.msg_area);">

and when I enter text in this field it gives me a 'this.form.to' is null or not an object and does not populate the textarea. BTW, msg_area is the id of my textarea.

Thank you.

Hi All,

(Another Post LOL)

Ive been getting alot of help with js recently THANKS!

One last thing and i shouldnt be on here for a while

How would i go about doing this Code:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="750" height="550" 
codebase="http://active.macromedia.com/flash4/cabs/swflash.cab#version=4,0,0,0"> 
<param name="movie" value="SWF/helicopter.swf">
<param name="quality" value="high">
<param name="menu" value="false">
</object>

into JS using .innerHTML = "Above Stuff";

I always get an error + i dont know how im going wrong with the quotes :S

ANY HELP (GOOD STUFF);

Thanks In Advance,

Jamie.

NOM NOM NOM!

Hello, below you will find two objects, background and photo1, which I need help cleaning up a bit. This will eventually be imported using Json but for now during development it sits as is in my script. I need help with a couple things:

- You will notice the 'val' property is identical in both objects. How can I move this into an outside function that each object can share? I'm having trouble bc I couldn't get 'this' to work outside of its current context.

- Second, how can I restructure this so that I can instantiate a new object. So if I wanted to add a new layer I'd like to do something like importLayers.push[new Layer('photo2')]


Code:

        var importLayers = {
            background: {
                layerType: 'background',
                index: 0,
                layerContent: {
                    content: function() {
                        return $(element).find('#background_Content');
                    },
                    width: 850,
                    height: 530,
                    xPos: 0,
                    yPos: -150,
                    skewX: 0,
                    skewY: 0,
                    angle: 0,
                    originX: function() { return (this.sWidth() / 2); },
                    originY: function() { return (this.sHeight() / 2); },
                    scaleX: 1,
                    scaleY: 1,
                    sWidth: function() { return this.width * this.scaleX; },
                    sHeight: function() { return this.height * this.scaleY; },
                    aspect: 0,
                    opacity: 100,
                    val: function(prop, val) {
                        switch(prop)
                        {
                            case 'width':
                                if(plugin.constrain)
                                    this.scaleX = this.scaleY = val / this.width;
                                else
                                    this.scaleX = val / this.width;
                                break;    
                            case 'height':
                                if(plugin.constrain)
                                    this.scaleY = this.scaleX = val / this.height;
                                else
                                    this.scaleY = val / this.height;
                                break;
                            case 'angle':
                                this.angle = val;    
                        }
                        buildTransformation(this, this.content());
                    }                    
                },
            },
            photo1: {
                layerType: 'photo',
                index: 1,
                layerContent: {
                    content: function() {
                        return $(element).find('#photo1_Content');
                    },
                    width: 1920,
                    height: 1280,
                    xPos: 0,
                    yPos: 0,
                    skewX: 0,
                    skewY: 0,
                    angle: 0,
                    originX: function() { return (this.sWidth() / 2); },
                    originY: function() { return (this.sHeight() / 2); },
                    scaleX: .15625,
                    scaleY: .15625,
                    sWidth: function() { return this.width * this.scaleX; },
                    sHeight: function() { return this.height * this.scaleY; },
                    aspect: 0,
                    opacity: 100,
                    val: function(prop, val) {
                        switch(prop)
                        {
                            case 'width':
                                if(plugin.constrain)
                                    this.scaleX = this.scaleY = val / this.width;
                                else
                                    this.scaleX = val / this.width;
                                break;    
                            case 'height':
                                if(plugin.constrain)
                                    this.scaleY = this.scaleX = val / this.height;
                                else
                                    this.scaleY = val / this.height;
                                break;
                            case 'angle':
                                this.angle = val;    
                        }
                        buildTransformation(this, this.content());
                    }
                },
            }
        }
            

​

Code:

function globals()
{
  this.states = "";
}

now I can:

Code:

globals.states = ....

how to extend first code to be able:

Code:

globals.states.something = ....

?

Greetings,

I have a floating object that work find within my page. However, I would like to only show after a button is clicked.

Any ideas how to do this.

Thanks

Hello awesome coders! I am here in need of your help.
I have a site with a lot of videos, from different sources, in different sizes, only thing they have in common is <div id="player">.
Due do different sources, each video player is different. Some have embed code, some have object, some have iframe, some have both/all.
Is it possible to create a script that will: Change the height and width of object, embed, iframe within the div. Is there another way to resolve this issue without changing all video code manually.

Hey guys,

I need to create a constructor for a computer object. This object must have three properties: speed, and mem_live mem_dead. Then I need to create a new object using this constructor and then have its properties displayed on the screen.

Look at what I'm up to so far:

Quote:
function Computer(speed, mem_live, mem_dead)

{
this.speed = speed;
this.mem_live = mem_live;
this.mem_dead = mem_dead;
}

var computer1 = new Computer("4.0ghz", true, false);

document.write(computer1.speed + " " + computer1.mem_live + " " + computer1.mem_dead);
What am I doing wrong? It always just shows : 4.0ghz, true, false

Another example from Sams Teach Your self JavaScript.

I have created the new object it prints the business cards out that are stored as you can see here.

Code:

function PrintCard() {
	line1 = "<b>Name: </b>" + this.name + "<br>\n";
	line2 = "<b>Address: </b>" + this.address + "<br>\n";
	line3 = "<b>Work Phone: </b>" + this.workplace + "<br>\n";
	line4 = "<b>Home Phone: </b>" + this.homephone + "<hr>\n";
	document.write(line1,line2,line3,line4);
}

function Card(name,address,work,home) {
	this.name = name;
	this.address = address;
	this.workplace = work;
	this.homephone = home;
	this.PrintCard = PrintCard;
}

// Create the objects.
sue = new Card ("Sue Suthers", "123 Elm Street", "555-1234", "555-9876");
chris = new Card ("Chris Suthers", "567 Rum Road", "555-4990", "555-8127");
james = new Card ("James Suthers", "17 Junk Court", "555-3334", "555-1596");
ken = new Card ("Ken Suthers", "1 Frank Circuit", "555-2365", "555-23659");

This is all good and i understand it. It is this the printing part i want to know if there is another way to print all 4 of them by naming them in a different way and looping through to print them i think i just answered my own question but it there a built in way to print all of the different cards? here is the current code.

Code:

//print Cards
sue.PrintCard();
chris.PrintCard();
james.PrintCard();
ken.PrintCard();

Thanks

I've been working through a tutorial on OOP in javascript.

Upon keyup, the code below gives this error:

Quote:
charCounterObj[x] is undefined
This is my first attempt at anything like this, so apologies for what are no doubt egregious and fundamental misunderstnadings about how to implement something like this.

I've stripped away everything that's irrelevant, but there's still quite a bit of code here. I'm hoping this isn't too much wade through, but perhaps someone would be kind enough to give it the once-over. There may be something obvious that jumps out to the seasoned eye...

Code:

  //CharCounter Class
  function charCounterClass(formType) {
    //Properties
    this.counter = $('#'+formType+'_commentsCounter');
    this.textarea = $('#'+formType+'_comment');
    this.maxlength = $('#'+formType+'_commentMaxlength').text();
    this.textLen = this.textarea.val().length;
      
    //Methods
    this.cch = function() {
        $(this.counter).val(this.textLen);
  //...
    }
  }

  var charCounterObj = [];
  var charCounter = [];
  var x = 0;
  $("input.charCounter").each(function() {  
    charCounter[x] = $(this).val();
    if (charCounter[x] == true) {
      charCounterObj[x] = new charCounterClass(formType[x]); 
      
      $('#'+formType[x]+'_comment').keyup(function() {
        charCounterObj[x].cch();
      });
    }
    x++;
  });

Thanks for any input.

I want to print the name of a field on the screen, but it is just printing "[object HTMLInputElement]", which of course is the object. How can I make the JS print the actual name?

Code:

function validate(field,txt) {
with (field) {
	if (value==null||value=="") {
	field.style.borderColor="#c51717";
	field.style.color="#c51717";
	field.style.backgroundColor="#ffbbbb";
	var fname = field;
	document.getElementById("errorBox").innerHTML = "<p>Please enter your "+ fname +"!</p>";
	return false;
	}
	else { return true; }
	}
}
/*Check whole form for errors*/
function validate_form(thisform) {
	/*With the form script was executed from do the following...*/
	with (thisform) {
	/*Checks if data has been entered into fields*/
	if (validate(username,"Your username is required!")==false) {
		 username.focus(); 
		 return false; 
		 }
	if (validate(password,"Your password is required!")==false) {
		 password.focus(); 
		 return false; 
		 }
	}
}

Hello there.

I am trying to validate data for text boxes, radios and check-boxes which are stored in an object.

Can anyone suggest how I might go about doing so? Maybe there is a website to learn from?

I've had a good look around myself but haven't come across what I'm looking for unfortunately.

Thank-you.