JavaScript - Dynamically Update <object> Src?

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

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.

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.

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.

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 Guys, I am using the following bit of code to toggle information inside a webpage. Is there a way i can make this code more dynamic so that i do not have to use the next() function to initiate slidetoggle()?

I would like to have it so i can pass an ID through to the function and it will then toggle my box but i can't figure it out. Javascript is not my strong suite.

Here the function
Code:

function initMenu() {
  //$('.items_wrapper').hide();//object to be hidden
  $('.headline').click(//object to be clicked
    function() {
        $(this).next().slideToggle('slow');	
		//alert("doesn't work");
      }
    );
  }
$(document).ready(function() {initMenu();});

I would like to create a link inside .headline such as .ViewItems

If you need to see the code let me know and i will post it.

--EDIT--
Right Now my code is like this and you click headline
Code:

<div class='headline'></div>
<div class='items_wrapper'>
</div>

I would like it work with an internal element like this, so i can't use next()
Code:

<div class='headline'><div class='selector'>Click Here</div></div>
<div class='items_wrapper'>
</div>

Thanks in advance.

note: this is not homework

Hi all,

Currently I am doing this:

Code:

var e = document.getElementById('id');
e.style.color = '#ff0000';
e.style.fontFamily = 'sans-serif';
e.innerHTML = time;
...blah blah...

What I'm actually doing is inserting the current time into an existing DIV and updating it every second. THAT all works.

What I want to do is also set an event for that div.... something like this:

e.event.onclick = 'runThisCode()';


Of course, the above doesn't work... and I'm not even sure what to ask for doing a Google search... because I get no hits (or maybe it's not possible).

So, is it possible, and if so, how?

Thanks!

-- Roger

p.s. I really don't want to edit the code itself (where that div is) because it's part of another app that may change as they update it and I don't want to have to re-patch every new release.

hello,

I'm trying to load the ads on my site dynamically and have ran into an issue and was hoping for some help.

First - I can get the ads to load using vanilla javascript with the code below.

Code:

    var ifrm = document.createElement("iframe");
    ifrm.setAttribute("src", OAS_url + "adstream_sx.ads/" +sitePage + "/" + uniqid() + "@" + pos);
    var ifrmId = "ifrm_" + uniqid();
    ifrm.setAttribute("id", ifrmId);
    ifrm.setAttribute("marginwidth", 0);
    ifrm.setAttribute("marginheight", 0);
    ifrm.setAttribute("frameborder", 0);
    ifrm.setAttribute("scrolling", 0);
    ifrm.setAttribute("height", container.scrollHeight + (container.offsetHeight - container.clientHeight));
    ifrm.setAttribute("width", container.scrollWidth + (container.offsetWidth - container.clientWidth));
  

    container.appendChild(ifrm);

But since the site is using jquery I wanted to develop it out that way. So I have the following code,

Code:

iRandom = oas.uniqid();
sAdURL = opt.url + 'adstream_mjx.ads/' + opt.sitepage + '/1' + iRandom + '@' + sPos + '?' + opt.query;

						
$('<iframe />', {
  src: sAdURL,
  id:   sPos
}).appendTo(thisAd);

I figured the reason this isn't working is the difference between appendChild and appendTo and the fact that things are jquery objects.

So again the top code block renders the ads and the lower code block just shows the javascript code from the ad provider. Any help to get this to work in jquery would be grateful.

Thanks

ok i have a script which will make a copy of the html in a div and place it into another div the problem with this it creates a duplicate element with the same id so what i want to know is can i create a new id based off old ids using a generic type script

Code:

function scope(e)
{
var popin = document.getElementById('popin');
popin.innerHTML = "<div class='container'>"+e.innerHTML+"</div>";
popin.style.display = "block";
}

this code is designed for taking content in a small div and placing it into a larger div to increase the viewing area

so what i would need is sumthing that can look for
Code:

id="sum text"

and maybe amend it to
Code:

id="sum textP"

or sumthing to that extent if sum1 could point me in the right direction that would be great if my post is not clear enough just ask me to be more specific or sumthing and i will see what i can do to try and make it more clear if needed

My overall challenge is to make up for what I consider to be a design flaw in how Google Ad Manager works. What I am trying to accomplish is create a way for an advertiser to randomly rotate through whichever ad formats are available, rather than get locked into a particular ad slot location.

This has required several steps, most of which I've been able to work out by myself, and now I'm down to what I expect is the last big issue.

Because Google Ad Manager pairs up the highest priority advertiser with the first loaded ad slot script, the most important task was to randomize the load order of the scripts. Doing this, however, necessitates pairing up those scripts with the appropriate space set aside for them on the page, more or less after the fact.

The code I'm having trouble with is the part where I try to move the node containing the active script to the its desired location and is showing just about every permutation of result except the one that I want, depending on browser.

Code:

	var moveithere = document.getElementById(newmodid);
	moveithere.appendChild(divinloader[i]);
	moveithere.appendChild(scriptelement[i]);

Not surprisingly, IE breaks as soon as it gets to this point and nothing happens with the divinloader[i] node OR the scriptelement[i] node - I have seen some references that it's not likely to like this and perhaps some recommendations about how to handle it, so I'm not too concerned about that just yet.

Firefox doesn't throw any kind of an error, but neither does the scriptelement[i] node do anything at all, even though the divinloader[i] node migrates to where I want it.

Chrome comes the closest to working - the script runs, but not in the location that I want.

Although I don't expect it's been an exhaustive search, I have tried a number of other approaches and this one has seemed to get me the closest to the desired result with the simplest coding. As to what's currently acceptable coding and what's not, I won't pretend to have a clue.

To see the full code in action, what it does, what I'm trying to do and to check for errors (likely) or offer suggestions on how I could get there more easily just use the following - I've substituted simpler code so that you don't have to pull down the actual Google Ad Manager scripts but it seems to work exactly the same and shows what I'm trying to do anyway. Hopefully there aren't any unnecessary artifacts still present.

Code:

<html>
<head>
<title>Testing arrayed dynamic randomized script loading</title>
</head>

<body>

<!-- PUT THIS TAG IN DESIRED LOCATION OF SLOT ATFRectangle-Main
     -->
<div id="atfrectangle-outer"> Tell 'em TIO sent you (rectangle) <div id="atfrectangle-inner">
</div> </div>
<!-- END OF TAG FOR SLOT ATFRectangle-Main
     -->

<!-- PUT THIS TAG IN DESIRED LOCATION OF SLOT ATFWideSkyscaper-Main
     -->
<div id="atfwideskyscaper-outer"> Tell 'em TIO sent you (skyscaper)<div id="atfwideskyscaper

-inner"> 
</div></div>
<!-- END OF TAG FOR SLOT ATFWideSkyscaper-Main
     -->

<!-- PUT THIS TAG IN DESIRED LOCATION OF SLOT FullBanner-Main
     -->
<div id="fullbanner-outer"> Tell 'em TIO sent you (banner)<div id="fullbanner-inner"> 
</div></div>
<!-- END OF TAG FOR SLOT FullBanner-Main
     -->


<h1>Load up the array with ad formats</h1>

<script type = "text/JavaScript">


// create an array to hold information about the various ad formats
var adformat = new Array();

// load the array with the appropriate ad format data
adformat[0] = "FullBanner";
adformat[1] = "ATFRectangle";
adformat[2] = "ATFWideSkyscaper";

// make a notation about what is coming next (and show successful conclusion of previous 

steps)
document.write("<h2>Order for the ad formats as loaded into the array</h2>"); 


// declare the variable to use for counting
var i = 0; 

// begin looping through as many times as needed to go through entire array and write out 

each ad format
for (i in adformat) {
	document.write("<p>" + adformat[i] + "<br> </p>");
	}
// end loop for writing out the list of ad formats loaded into the array


// randomize the order of the ad format list
randadload = adformat.sort (function(){
	return 0.5-Math.random()
	})

// make a notation about what is coming next (and show successful conclusion of previous 

steps)
document.write("<h2> Order for the ad formats after randomization</h2>");

// declare the variable to use for counting
var i = 0; 

// begin looping through as many times as needed to go through entire array and write out 

each ad format in the new list order
for (i in randadload) {
	document.write("<p>" + randadload[i] + "<br> </p>");
	}
// end loop for writing out the randomized list of ad formats 


// make a notation about what is coming next (and show successful conclusion of previous 

steps)
document.write("<h2>Creating dynamic module names and script-calling variables</h2>");



// declare variables that might be needed

// create an array to hold module names
modname = new Array();

// create array to hold the names of the google script, partial and full
googscript = new Array();
fullgoogscript = new Array();

// create an array to hold the id to be used for the script loader element
loaderid = new Array();
scriptloaderid = new Array();

// create an array to hold the id for the module
modid = new Array();

// create an array to hold the name of the id for the script inside module
modscriptid = new Array();

// create an array to hold the name of the id for the outer DIV tag
divoutloader = new Array();

// create an array to hold the name of the id for the inner DIV tag
divinloader = new Array();

scriptnodeloader = new Array();
scriptelement = new Array();

// declare the variable to use for counting
var i = 0; 

// create a variable to hold the current script number
var scriptnum = 0;

// begin looping through number of elements in the array
for (i in randadload) {

	// advance the counter by one increment for each iteration in the loop
	scriptnum ++;

	// create a script name based on the name of the ad format
	googscript[i] = randadload[i] + "-Main";

	// change the ad format name to all lower case
	loadlc = randadload[i].toLowerCase();

	// create a module name based on the name of the ad format
	modname[i] = "main" + loadlc;

	// create a DIV id name for the loader element based on the name of the ad format
	loaderid[i] = loadlc + "_loader";
	// create a script id name for the loader element based on the name of the ad format
	// scriptloaderid[i] = loadlc + "_scriptloader"'

	// create a DIV id name for the inner DIV tag based on the name of the ad format
	modid[i] = loadlc + "-inner";
	// create a script id name based on the name of the ad format
	modscriptid[i] = loadlc + "-script";

	//write out all the names just created to check for successful completion and for 

accuracy
	document.write("<p>Module name is " + modname[i] + " and script name is " + 

googscript[i] + " and loader ID is " + loaderid[i] + " and module id is " + modid[i] + "<br> 

</p>");


	// create a DIV tag to load the script into 
 	divinloader[i] = document.createElement("div");
	divinloader[i].setAttribute("id", loaderid[i]);
	divinloader[i].style.display="block";

	// use the DIV loader to write out the status of the scripts (ultimately hope to LOAD 

the scripts)
	divinloader[i].innerHTML = "<p>Pretend loading script " + scriptnum + " now... <br> 

GA_googleFillSlot(" + googscript[i] + ");" ;

	// create the content to be included in the script to be loaded
	fullgoogscript[i] = 'document.write("<p> This is actually a real script loading ' + 

googscript[i] + ' as a stand-in for a Google script loading " + randadload[i] + " 

advertisements.</p>");';


	// creating a script element
	scriptnodeloader[i] = document.createTextNode(fullgoogscript[i]);

	scriptelement[i] = document.createElement("script");	
	scriptelement[i].type = "text/javascript";
	scriptelement[i].setAttribute("id", scriptloaderid[i]);
	scriptelement[i].appendChild(scriptnodeloader[i]);

	// if this line runs, results in [object HTML scriptelement]
//	divinloader[i].innerHTML = scriptelement[i];


	newmodid = modid[i];
	newmodscriptid = modscriptid[i]


	// want to use this to move the script up to its final location
//	document.getElementById(newmodid).appendChild(divinloader[i]);
//	document.getElementById(newmodscriptid).appendChild(scriptelement[i]);	


	var moveithere = document.getElementById(newmodid);
	moveithere.appendChild(divinloader[i]);
	moveithere.appendChild(scriptelement[i]);

	}
	// end looping through elements in the array



</script>  



</body>

</html>

I appreciate any insights you can provide - feel free to call me an idjit if necessary, but please be specific if you do.

Thanks,

Kimm

I have been over this code several times and through as many tutorials as I can fine and I still can not figure out why it does not work. Is anyone here able to point out my error?

The objective of the code is to get the size in pixels of the viewport when the browser loads page, and when the browser window is resized. After obtaining that number I want to use it to set the size of my DIV to 770px if the viewport has gotten shorter than than 770, and to auto if my viewport is larger than 770.

Note, I am not posting the HTML or CSS code because it seems like this should be simple - I will gladly post that code if it turns out my question is not simple.

Code:

<script language="JavaScript" type = "text/javascript">
  <!--
  function inspectview() {
   var viewportheight; 
   // most modern browsers 
   if (typeof window.innerWidth != 'undefined')
   {
      viewportheight = window.innerHeight;
   } 
   // IE6 in standards compliant mode
   else if (typeof document.documentElement != 'undefined'
     && typeof document.documentElement.clientWidth !=
     'undefined' && document.documentElement.clientWidth != 0)
   {
       viewportheight = document.documentElement.clientHeight;
   }
    // older versions of IE 
   else
   {
       viewportheight = document.getElementsByTagName('body')[0].clientHeight;    
   if (viewportheight <= 770){
    document.getElementById("bg").style.height = "770px";    
    } else {
     document.getElementById("bg").style.height = "100%";
    }
   }
  window.onload = inspectview;
  window.onresize = inspectview;   
  //-->
  </script>

Thank you in advance

-Alaric_

Hi,

Here are sample divisions:

Code:

<style type="text/css">
#grandparent {width:100px;}
#parent {overflow:auto; height:100px; }
.child {overflow:hidden; margin-left:10px;}
</style>

<div id="grandparent">

<div id="parent">

<div class="child">1000000000000000000000000</div>
<div class="child">1000000000000000000000000</div>
<div class="child">1000000000000000000000000</div>
<div class="child">1000000000000000000000000</div>
<div class="child">1000000000000000000000000</div>
<div class="child">1000000000000000000000000</div>
<div class="child">1000000000000000000000000</div>

</div>

</div>

The <div class="child"> width value is always 10 pixels less than <div id="parent"> width value. How can it be calculated so any width value is given to <div id="parent">, its child gets 10 pixels less than that?

Any help is very much appreciated!
Mike

Hey all! My supervisor is tasking me with having a webpage resize the windows media player dynamically based on the users resolution. I have tried everything I can think of to make this happen but no luck. Is this even possible?

I'm using the following code to embed the video:
Code:

<object
classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95"
codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,5,1112"
type="application/x-oleobject" width="800" height="600" align="left"
standby="Loading Microsoft Windows Media Player components..." id="mediaPlayer">
        <param name="AutoStart" value="1" />
        <param name="FileName" value="../../../videos/Welcome_1.wmv" />
        <param name="ShowDisplay" value="False" />
        <param name="ShowControls" value="True" />
        <param name="ShowStatusBar" value="False" />
        <param name="Loop" value="False" />
        <embed
src="../../../videos/Welcome_1.wmv"
width="800" 
height="600" 
autostart="1" align="left" type="application/x-mplayer2"
pluginspage="http://www.microsoft.com/Windows/MediaPlayer/"
name="mediaPlayer"> </embed>
      </object>

I've tried creating variables and substituting those for the width and height of the object code e.g., Code:

<script type="text/javascript">var _width=screen.width; var _height=screen.height;</script>

followed by Code:

<object
classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95"
codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,5,1112"
type="application/x-oleobject" width=_width height=_height align="left"
standby="Loading Microsoft Windows Media Player components..." id="mediaPlayer">
        <param name="AutoStart" value="1" />
        <param name="FileName" value="../../../videos/Welcome_1.wmv" />
        <param name="ShowDisplay" value="False" />
        <param name="ShowControls" value="True" />
        <param name="ShowStatusBar" value="False" />
        <param name="Loop" value="False" />
        <embed
src="../../../videos/Welcome_1.wmv"
width=_width 
height=_height 
autostart="1" align="left" type="application/x-mplayer2"
pluginspage="http://www.microsoft.com/Windows/MediaPlayer/"
name="mediaPlayer"> </embed>
      </object>

but of course, this doesn't work. Is it even possible?? If so, your help is greatly appreciated.

Thank you,

M.

i want to set the second container's height according to the first container's.but how to achieve the height of the container dynamically.
thank you!