JavaScript - Get Name Of Object Instance's Variable?

I have created a class providing various functions called BaseBrowser and the class definition by using prototype.
Specific browser implementations are then acheived by extending BaseBrowser (eg as 'FF' for Firefox) as shown below.
The window alert(); function is overridden for alternate message box popup (using layers in the same window).
The function 'browser.customAlert()' can be called from either any code or an actual 'alert()' function.
However whenever it is called the value of 'someVar' as defaulted back to the new instance value of false despite the instance 'browser' having already set it to true as it were a new instance.
Why is this occuring as it should remember its state between function calls ?

Code:

var browser;

function BrowserBase(){

      //instance variables
      this.someVar=false;

      function customAlert(){
            this.someVar=true;
            // . . . other custom alert code
      }
}

function browserLink(){
	BrowserBaseFF2p0.prototype=new BrowserBase();//inherit
	BrowserBaseFF2p0.prototype.constructor=BrowserBase;
	browser=new BrowserBaseFF2p0();
}

function BrowserBaseFF2p0(){
	BrowserBase.call(this);//call parent constructor
	
        //override generic functions for enhancement
	if(document.getElementById){
		window.alert=function(txt){
			browser.customAlert(txt);
		}
	}

}

Is there a way that I can run a second set of this script on the same page at the same time?

If I want a 2nd instance of this script to run on the same page...what values would I need to rename in the 2nd instance?

When I try to place this script a second time it only shows the 2nd scripts values or banner ads... I'm trying to make a Banner rotation placement on my sites inner pages (It's a Wordpress powered site) One Set of Banners that ROTATE directly Above Another Set...

I like this script since it allows for a Random order on each page load and will ALSO cycle through Each Banner once before repeating the order, That way Each Advertiser will get seen before another is seen a second or third time...

I know there are plug-ins for wordpress for advertising, but I have not found any that will rotate out the banners every x niumber of seconds, like this does...

Is there a way that I can run a second set of this script on the same page at the same time?




<script type="text/javascript">

// Flexible Image Slideshow- By JavaScriptKit.com (http://www.javascriptkit.com)
// For this and over 400+ free scripts, visit JavaScript Kit- http://www.javascriptkit.com/
// This notice must stay intact for use

var ultimateshow=new Array()

//ultimateshow[x]=["path to image", "OPTIONAL link for image", "OPTIONAL link target"]

ultimateshow[0]=['http://www.rockinghamcountymerchants.com/CraigTravis/CraigTravis250x250.jpg', 'http://tcraigtravis.com/', '_new']
ultimateshow[1]=['http://www.rceno.com/RCENO/bannerads/elizabethspizza/elizabethspizza250x250.jpg', 'http://www.rceno.com/RCENO/advertisers/elizabethspizza/index.html', '_new']
ultimateshow[2]=['http://www.rceno.com/RCENO/bannerads/gavinsmightychamps/gavin250x250.jpg', 'http://www.gavinsmightychamps.com/index.html', '_new']
ultimateshow[3]=['http://www.rceno.com/RCENO/bannerads/redrivergrill/RedRiver2420-250x250.jpg', 'http://www.rockinghamcountymerchants.com/redrivergrill', '_new']
ultimateshow[4]=['http://www.rceno.com/RCENO/bannerads/qualitycleaners/QC250x250-011510.jpg', 'http://www.rockinghamcountymerchants.com/qualitycleaners', '_new']








//configure the below 3 variables to set the dimension/background color of the slideshow

var slidewidth="250px" //set to width of LARGEST image in your slideshow
var slideheight="250px" //set to height of LARGEST iamge in your slideshow
var slidecycles="continous" //number of cycles before slideshow stops (ie: "2" or "continous")
var randomorder="yes" //randomize the order in which images are displayed? "yes" or "no"
var preloadimages="yes" //preload images? "yes" or "no"
var slidebgcolor='white'

//configure the below variable to determine the delay between image rotations (in miliseconds)
var slidedelay=9000

////Do not edit pass this line////////////////

var ie=document.all
var dom=document.getElementById
var curcycle=0

if (preloadimages=="yes"){
for (i=0;i<ultimateshow.length;i++){
var cacheimage=new Image()
cacheimage.src=ultimateshow[i][0]
}
}

var currentslide=0

function randomize(targetarray){
ultimateshowCopy=new Array()
var the_one
var z=0
while (z<targetarray.length){
the_one=Math.floor(Math.random()*targetarray.length)
if (targetarray[the_one]!="_selected!"){
ultimateshowCopy[z]=targetarray[the_one]
targetarray[the_one]="_selected!"
z++
}
}
}

if (randomorder=="yes")
randomize(ultimateshow)
else
ultimateshowCopy=ultimateshow

function rotateimages(){
curcycle=(currentslide==0)? curcycle+1 : curcycle
ultcontainer='<center>'
if (ultimateshowCopy[currentslide][1]!="")
ultcontainer+='<a href="'+ultimateshowCopy[currentslide][1]+'" target="'+ultimateshowCopy[currentslide][2]+'">'
ultcontainer+='<img src="'+ultimateshowCopy[currentslide][0]+'" border="0">'
if (ultimateshowCopy[currentslide][1]!="")
ultcontainer+='</a>'
ultcontainer+='</center>'
if (ie||dom)
crossrotateobj.innerHTML=ultcontainer
if (currentslide==ultimateshow.length-1) currentslide=0
else currentslide++
if (curcycle==parseInt(slidecycles) && currentslide==0)
return
setTimeout("rotateimages()",slidedelay)
}

if (ie||dom)
document.write('<div id="slidedom" style="width:'+slidewidth+';height:'+slideheight+'; background-color:'+slidebgcolor+'"></div>')

function start_slider(){
crossrotateobj=dom? document.getElementById("slidedom") : document.all.slidedom
rotateimages()
}

if (ie||dom)
window.onload=start_slider

</script>


In Other words I would have one set of 5 ads rotating and directly below it another set of 5 Ads

Hi All,

i have thie following code
Code:

searchValue=document.getElementById('keyword').value;searchValue=searchValue.replace(" ", "_");

and if searchValue = this is my title the above code returns this_is my title instead of this_is_my_title any ideas?

EDIT
====

ok solved it this works
Code:

searchValue=searchValue.replace(/ /gi, "_");

many thanks
Luke

How to I create the following code...

Code:

 #moving {
 	position:absolute;
 	float:right;
    top:100px;
    left:50px;
 }
  #movingword {
 	position:absolute;
 	float:right;
    top:0px;
    left:0px;
 }

... and this code ...


Code:

<div id="movingword">
	<font color="yellow"><font size="3"><b>This is the place</b></font><br>Welcome!</font>
	</div>

... programmatically using Javascript?

(I will need a X number of "movingwords" and "moving", where X is a number and examples are "movingwords0", "movingwords1", "movingwords2" ... movingwordsX)




Here the full code:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<title></title>

<style type="text/css">
body {
    background-color:#000;
 }
#scenery {
 	position:relative;
 }
 
 #moving {
 	position:absolute;
 	float:right;
    top:100px;
    left:50px;
 }
  #movingword {
 	position:absolute;
 	float:right;
    top:0px;
    left:0px;
 }
</style>

<script type="text/javascript">

var t=125;
var l=20;
$(document).ready(function() {
	document.getElementById("movingword").style.top = t + "px";
	document.getElementById("movingword").style.left = l + "px";
});

</script>

</head>
<body>

<font color=white><h1> Hello World </h1></font>

<div id="scenery">
 <img src="http://www.deshow.net/d/file/travel/2009-10/new-zealand-scenery-738-20.jpg" alt="">
	<div id="moving">
	<img src="http://cdn1.iconfinder.com/data/icons/gloss-basic-icons-by-momentum/32/bullet-yellow.png" alt="">
	</div>
	<div id="movingword">
	<font color="yellow"><font size="3"><b>This is the place</b></font><br>Welcome!</font>
	</div>
</div>

</body>
</html>

Hi there

Im trying to create a function where i pass two element id's and my script populates it with events and anything else it may need to run but what i am finding is that i cant use this so that the instance of the object is kept what ends up happening is nothing at all what i would like to have happen is the code to work somthing like this...

Code:

<div id="iAmTheTargetId">
</div>
<div id="iWillHoverOverYouId">
</div>
<script type="text/javascript">
	var element = new hoverBox('iAmTheTargetId','iWillHoverOverYouId');
</script>

and simply running that would then create the equivalent of doing

Code:

<div id="iAmTheTargetId" onmouseover="element.activate()" onmouseout="element.deactivate()" onmousemove="element.update(event)>
</div>
<div id="iWillHoverOverYouId">
</div>
<script type="text/javascript">
	var element = new hoverBox('iAmTheTargetId','iWillHoverOverYouId');
</script>

But of course the code above won't actual add onmouseover and etc it just so you can see what i'm trying to achieve

Code:

/*
 * triggerId
 * the element in which the attributes will be applied to
 * 
 * hoverBoxid
 * the element in which will hover around the triggerId
 */
function hoverBox(triggerId,hoverBoxid){
	this.triggerElement = document.getElementById(triggerId);
	this.hoverBoxElement = document.getElementById(hoverBoxid);
	 
	if(this.triggerElement == null || this.hoverBoxElement){
		return null;
	}
	
	self = this;
	alert(this.triggerElement);
	this.triggerElement.addEventListener('mouseover',function(){self.activate();},false);
	this.triggerElement.addEventListener('mouseout',function(){self.deactivate();},false);
	this.triggerElement.addEventListener('mousemove',function(){self.update(event);},false);
}

hoverBox.prototype = {
		triggerElement : null,
		hoverBoxElement : null,
		state	: false
};

hoverBox.prototype.activate = function(){
	this.state = true;
};

hoverBox.prototype.deactivate = function(){
	if(this.state != false){
		this.hoverBoxElement.style.display = "none";
		this.state = false;
	}
};

hoverBox.prototype.update = function(evt){
	if(this.state != false){
	  	this.hoverBoxElement.style.display = "block";
	  	this.hoverBoxElement.style.position = "absolute";
	  	this.hoverBoxElement.style.top = (evt.clientY + 5)+ "px";
	  	this.hoverBoxElement.style.left = (evt.clientX + 10)+ "px";
	}
};

A quick note theses function will work by them selfs if you just do
Code:

<div id="target" onmouseover="aHoverBox.activate()" onmouseout="aHoverBox.deactivate()" onmousemove="aHoverBox.update(event)">
</div>
<div id="hover">
</div>

<script type="text/javascript">
	var aHoverBox = new hoverBox('iAmTheTargetId','iWillHoverOverYouId');
</script>

But not quite what I'm after i would like not to have to enter in
Code:

onmouseover="aHoverBox.activate()" onmouseout="aHoverBox.deactivate()" onmousemove="aHoverBox.update(event)"

and have that done by the JavaScript


Well i hope every thing makes scene sorry if i repeated my self just making sure you understand me

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.

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.

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 ();

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??

Ignore post (if mod, please delete)

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.

Why is the callwhy is the slice method only a method of an Array instance? The reason why I ask is because if you want to use it for the arguments property of function object, or a string, or an object, or a number instance, you are forced to use Array.prototype.slice.call(). And by doing that, you can pass in any type of object instance (Array, Number, String, Object) into it. So why not just default it as a method of all object instances built into the language?

In other words, instead of doing this:

Code:

function Core(){

var obj = {a : 'a', b : 'b'};
var num = 1;
var string = 'aff';

console.log(typeof arguments);//Object
console.log(arguments instanceof Array);//false
var args1 = Array.prototype.slice.call(arguments);
console.log(args1);
var args2 = Array.prototype.slice.call(obj);
console.log(args2);
var args3 = Array.prototype.slice.call(num);
console.log(args3);
var args4 = Array.prototype.slice.call(string);
console.log(args4);

Core('dom','event','ajax');

Why not just be able to do this:

Code:

function Core(){

var obj = {a : 'a', b : 'b'};
var num = 1;
var string = 'aff';

var args = arguments.slice(0); 
var args2 = obj.slice(0);
var args3 = num.slice(0);
var args4 = string.slice(0);
//right now none of the above would work but it's more convenient than using the call alternative. 

}
Core('dom','event','ajax');

Why did the designers of the javascript scripting language make this decision?

Thanks for response.

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.