JavaScript - How Do I Override Mozilla Object.watch For All Browsers?

Hey all,

I've built a website for my music and I'm fairly new to all this so bear with me.

Essentially, I have two flash-based music players on my site. One is a simple single-track player that auto-plays some background music for the site. The functionality is limited to the user starting/stopping the music and adjusting the volume. The other is an advanced music player featuring a playlist of preselected tracks and allows the user to start/stop music, rewind, fast forward, adjust volume and select tracks in the playlist. This player does not start automatically.

My question is this: when someone visits the site, the single-track background music player will start. Is there code that would allow the advanced music player, should it be turned on (i.e. someone selects a track and plays it), to override and actually stop the play of the single-track?

TIA!

I am dynamically appending an img to the inner HTML of an element, to add in help in the form of a clickable icon next to select elements. When the img is added to an anchor the image of course becomes part of the link, and clicking the image invokes the anchor's action. The img has an onclick handler which triggers the dynamic help pop-up. My problem is that I can't seem to block the default anchor action, and thus the anchor is invoked also. The img onclick handler is called before the anchor event is processed (an alert popup will block the anchor's execution until the alert is dismissed), but returning false from it does not block the anchor's action.

Any suggestions? I can move the img element to be a peer of the anchor element instead of a child, but I would like a programmatic fix instead of changing the way it interacts with the DOM if possible.

Thanks.

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.

First off... I am new to javascript, and am learning while trying to add some cool extra features to an existing project.

An existing JSP is generating the HTML page and table. I have retro-fitted it so that it adds to each input field a 'trigger' to the onkeyup event.

The purpose of this trigger is check for the the cursor keys being pressed (UP, DOWN, LEFT, RIGHT) and then if it is a logically valid move, shift to the next cell in that direction.

Code:

<td class="inputField" rowspan="1" colspan="1" nowrap="nowrap">
<input name="ColorNumber0" id="" maxlength="" size="20" onchange="saveFieldObj(this)"  onkeyup="return doOnKeyUp(event, 18, 14, 'ColorNumber0')"  type="text">
</td>

Now, the function it calls, doOnKeyUp, for the most part is working fine... when the input field in the table cells are a textbox or textarea, my method can re-focus the fields appropriately.

HOWEVER, I am having a huge headache when the input field is a combo box. Basically, the value of the combo box is changed with the cursor keys (which is default combo box behaviour (I think)), instead of moving to the next editable cell in that chosen direction.

Problem #1:
My question: Is there a way to intercept/override the various onKey events or similar for the combo boxes. For the combo boxes, I want to continue to move between table cells UNLESS a do something specific, like press the spacebar to entire an update/modification mode for the current cell. Everything I have done so far does not prevent the combo box events from triggering.

Any ideas?


Problem #2:

Also, I tried a nasty hack to try and get it to work, by trying to switch the combo box's value back 1 spot (if it appeared to be needed) by changing the <combo box>.selected value. However, that change never appears to be taking hold, so it is staying at whatever the original selected value was. For this one, I am just curious as to the correct way to have javascript change the selected value in a combo box and make it "stick" and make it applied to the view/UI?

Code example:

Code:

		  var selectedIdx = (curObj.selectedIndex - 0);
		  	  if ( selectedIdx < curObj.length ) {
			   	  var newIdx = (selectedIdx-0) - 1;
			   	  curObj[selectedIdx].selected = "0";
		    	          curObj[newIdx].selected = "1";
		    	          curObj[newIdx].focus();
			   	  //curObj.selectedIndex = newIdx;
		  	  }

You can probably tell by the code that I had been trying various things to change the combo box's selection via javascript, but none has worked for me.


Any help on either topic would be greatly 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??

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

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.

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 Friends,

I am facing some issue in javascript .my code is working in ie but not in mozilla onkeypress and onkeydown events.please tell me the solution if u knows.
my code is givenbellow.
in javascript file i have two methods.
Code:

//========javascript file===========
//will call on keydown
function keyCheck(e)
    {
     alert('hi---hello  --onkeydown');
   //  var KeyID =(window.event)? event.keyCode : e.which;
     var browser=navigator.appName;
    // document.write("Browser name: "+ browser);
     var asciiValue=event.keyCode;     
     if(asciiValue=='13' || asciiValue=='32'){
       return true;
      }
      return false;
    }
//call on key press
function closePopUpLayer1(e){
    alert('hi---onkeypress');
    var browser=navigator.appName;
    document.write("Browser name: "+ browser);
    
    unHideDropDownLists();
	document.getElementById('popupLayerContent').className="popuplayer";
	document.getElementById('mainBody').style.display="none";	
	document.getElementById('Hotels_TnC_popUp').focus();
  }
==============my html file===========
<div>
		<div class="popup-top-corner-left-img"></div>
		<div class="popup-top-image"></div>
		<div class="popup-top-corner-right-img"></div>
	</div>
	<div>
		<div class="popup-left-image"></div>
		<div class="popup-div1">
			<div>
				<div  class="XX-Large-Dark-Gold-popUpText">credit</div>
//here i am calling two functions in javascript				
 				<div class="sprite-btn-close"  id="focusNew1"   onkeydown="javascript:return keyCheck(event)"  onkeypress="alert('hello');javascript:closePopUpLayer1(event)" onclick="javascript:closePopUpLayer(),document.getElementById('Hotels_TnC_popUp').focus();" ></div> 
			</div>
			<div class="popup-dark-gray-text">xxxxxdiv>
		</div>
		<div class="popup-right-image"></div>
	</div>
	<div class="popup-bottom">
		<div class="popup-bottom-corner-left-img"></div>
		<div class="popup-bottom-image"></div>
		<div class="popup-bottom-corner-right-img"></div>
	</div>

hello Guys ,
Well, i've a BIG Problem With a HUGE JS application , i'm modifying its javaScript code to work on both IE/Mozilla , currently it works fine on IE but not on Mozilla.

My main Point now is events.

lets try with a little module, consider this function :

Code:

function HiliteLectures(Group,Alternatives,ForeColor){
	var i,Lecture,EventLecturesGroup,EventLecturesAlternatives,LecSrcElement
//validate event source    
    if (event.srcElement.id=='Animate'){LecSrcElement=event.srcElement.parentElement}else{LecSrcElement=event.srcElement}
    EventLecturesGroup = Group.split(",")
	EventLecturesAlternatives = Alternatives.split(",")
//hilite Lecture Group with Red as sections
	for(i=0;i<EventLecturesGroup.length;i++){//if item is not selected
		Lecture=document.getElementById(EventLecturesGroup[i])
		if ((EventLecturesGroup[i]!='') & (Lecture!= null)){
	        Lecture.style.borderColor='red';
	        Lecture.style.borderWidth=2
	        if (Lecture.style.zIndex != 1000){Lecture.style.zIndex=120} //skip obligatory zIndexes
		}
	}
//hilite Lecture Alternatives with blue as Lectures
	for(i=0;i<EventLecturesAlternatives.length;i++){//if item is not selected
		Lecture=document.getElementById(EventLecturesAlternatives[i])
		if ((EventLecturesAlternatives[i]!='') & (Lecture != null)){
		    if (EventLecturesAlternatives[i]!=''){
			    Lecture.style.borderColor='blue';
			    Lecture.style.borderWidth=2
			    if (Lecture.style.zIndex != 1000){Lecture.style.zIndex=120} //skip obligatory zIndexes
		    }
		}
	}
//Put the current lecture forecolor to ForeColor
    LecSrcElement.style.backgroundColor=ForeColor;
}

and it is attached in this place like :

Code:

temp.onmouseover=new Function("HiliteLectures('"+Lecture.Group+"','"+Lecture.Alternatives+"','"+Day.HiliteColor+"');")

this works fine in IE , i want to modify it to work on Mozilla , Any Help ??