JavaScript - Is This Script Opener Right? Getting Element Class

Hi, I'm very new to javascript and don't really ask questions in forums because i usually find what I'm looking for in other threads. I have a situation where I open a popup window from what I'll call "the main page", insert some text and open a 2nd popup from there. After making a selection, that window closes to bring the 1st popup back to focus. When I submit the form in that window, some info is changed in a database. How can I refresh or reload the main page to show the changes? Is the "main page" still the opener after opening and closing windows?

Hello
In phase of my deployment I send the user a window from a servlet and inorder to communicate with an applet already loaded in another window in the browser I thought I could set the window.opener.location="${formbean.property}"; and it partly works, it get set, I see the new window flash, but it then executes that url. Two questions?
1. setting the window.opener.location in an onLoad() should not force a post back to the server, correct? I am just trying to keep that window I want up there and set an internal property so I can access the applet in the other window. Trying to make this "synthetically" a child of that page opened with the applet so I can call the applets methods simply.
2. Is there another way for a new browser window to directly access an applet in another page? I could go the route of making a probe applet and hoping they share the same JVM, (JRE1.6.0.25) access it that way. Is/how that the way to do it?

Here is my issue: I am opening a popup from the main browser window, where the use logs in to a 3rd party site. After logging in, the popup window is being redirected to our site, where I have to send back a message to the original window.

I am using window.opener for sending the message. Everything works fine in IE*/Firefox/etc, but if the 3rd party site is added to the trusted sites in IE, the window.opener won't work anymore.

Why does this happen? How could this be resolved?

Thanks in advance,
norbip

Hello,
Here is what I have: a regular main window that opens a small pop-up for preview purposes. This pop-up window has a text link to close it and a text link to close it and reach a page with more detail in the main window.

I have been trying an infinite number of things so far and I cannot get this last link to work in Opera 10. All workarounds are just fine in FF 3 and IE 8.

Here is the function called when clicking the link to "close and go":

Code:

<script type="text/javascript">
function fermer_extrait()
	{
	window.opener.location='http://www.wereIwantToGo.com';
	window.close(); 
	}
	</script>

I have tried the same thing with
Code:

window.opener.location.href='http://www.wereIwantToGo.com';

and some other window property like "outerWidth" for testing purposes.

In every case, Opera doesn't do anything when I click that link and I get this error:
Code:

JavaScript - http://www.mypage.php
Event thread: click
Error:
name: ReferenceError
message: Security error: attempted to write protected variable 'href'
stacktrace:   Line 1 of function script 
    window.opener.location.href='http://www.wereIwantToGo.com'; window.close()

"protected variable" will change according to the attempt I made (href, location, outerwidth).

I'm gessing there is something very strict in the way Opera handles javascript. I'm a beginner and I have reached my limits. This is where I ask for help...

So, how can I get that pop-up to close and get the main window to change location?

Thanks in advance for any help!

Hello,


I am new to Javascript. I copied this script from the web, but I get an error at this line:


parent.removeChild(child);


The error says "Invalid argument".


Any suggestions are greatly appreciated.



Code:

<div id="parent" align=center>
<form name=mainfrm method=post>

<script language="JavaScript">
function doDelete(str1,str2) {
var parent = document.getElementById(str1);
var child = document.getElementById(str2);
parent.removeChild(child);
alert ("box removed");
}
</script>

<br><br>
<table>
<td class=stdbut1
onmouseover="this.className='stdbut1on'"
onClick="doDelete('parent','child');" 
onmouseout="this.className='stdbut1'">Delete Box</td>
</table>
<br><br>

<div id="child" class=titlebox1>Box</div>

</form>
</div>

Hi all,

I've messing around with CSS and I would like to change the <body> 'class' when the user selects a hyperlink.
To do this I've employed the OnClick method within the hyperlink which calls the function updateBodyClass().
Within upDateBodyClass() I would like to add the string "extraMenu" to the body class.

Before selecting the hyperlink the body is:
<body id="twoColLayout" class="tools">

I want this to change to:
<body id="twoColLayout" class="tools extraMenu">

This is the code I currently have but it doesn't work. Please can someone point me in the right direction. Thankyou in advance for your time.

<html>
<head>
<title>test</title>
<meta http-equiv="Content-Script-Type" content="text/javascript">


<script>
function updateBodyClass()
{
document.getElementById("body").className="tools";
document.getElementById("body").className+=" extraMenu"
return;
}
</script>

</head>


<body id="twoColLayout" class="tools">

<a href="index.php" onClick="updateBodyClass()">Search Bookmarks</a>
</body>
</html>

Hello

I am pretty new to AJAX & I am making a simple program to input new text refresh inside the HTML element that has the id='result'.

My Problem:
- The AJAX script fails when I try to change the text inside 'result' using my code, sometimes a whole new page opens with the text I wanted to put inside the result HTML element. Sometimes I just get a notification that an error occured.
- I believe it is because of my function state_changed & using the parameter element_id with the function getElementById(element_id).innerHTML = ...;
- It should be easy to see where my problem occurs when you look at my code

Any advice on why the script fails & how to fix it would be extremely helpful.

Code:

var xmlHttp;

function ajax_compatible() 
{
   // Post: Returns an object if browser is AJAX compatible else false.
   
   if (window.XMLHttpRequest)
   {
      // users web browser can support AJAX
      return ( new XMLHttpRequest() );
   }
   else if (window.ActiveXObject)
   {
      // users web browser is IE6 and IE5
      return ( new ActiveXObject("Microsoft.XMLHTTP") );
   }
   else {
       alert("Unfortunately your browser does not support AJAX.");
      return null;
   }
}


function get_cookie(cookie_name) 
{ 
	if (document.cookie.length > 0) 
	{ 
	  c_start = document.cookie.indexOf(cookie_name + "="); 
	  
	  if (c_start != -1) 
	  {  
		c_start = c_start + cookie_name.length+1; 
		c_end   = document.cookie.indexOf(";",c_start) 
		
		if (c_end == -1) 
		{
		   c_end = document.cookie.length;
		}
		
		return unescape(document.cookie.substring(c_start,c_end)) 
	  }  
	} 
	return "" 
} 


function add_comment()
{
   // Post: Add user comment & rating to database and update new table row.
   // DO WE NEED TO SEND COOKIE ASWELL OR IS IT ALREADY DONE???
   
   xmlHttp = ajax_compatible();
   
   if (xmlHttp == null) {
       return;
   }
   
   var url = 'http://localhost:8000/cgi-bin/main.py';
   
   alert("add_comment() running");
   
   // Extract CGI variables to pass onto python script
   var id = document.getElementById('videoID').value;
   var video_id = 'videoID=' + id;
   var rating   = 'rating=' + document.getElementsByName('rating').value;
   var comment  = 'comment=' + document.getElementById('comment').value;
   var add_rating = 'addRating=' + document.getElementById('addRating').value;
   //var cookie = document.cookie;
   
   cgi_var = video_id + '&' + rating + '&' + comment + '&' + add_rating; // + '&' + cookie;
   
   // open python script 
   xmlHttp.open('POST',url,true);
   xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); 
	   
   // Error is in below line
   xmlHttp.onreadystatechange = state_changed(id); 
   // if I use the following line then it works
   // xmlHttp.onreadystatechange = test; 
   xmlHttp.send(cgi_var);
}


function state_changed(element_id)
{
   // Post: Use one function that will be used for each page update.
   //       This function sends the text returned by the python server script
   //       onto the browser(HTML element with the id 'element_id') to be displayed.
   
   if (xmlHttp.readyState == 4) 
	{
	   document.getElementById(element_id).innerHTML = xmlHttp.responseText;
	}

}

function test()
{
   // Post: used to test where the problem occurs
   // This function works
   
   if (xmlHttp.readyState == 4) 
	{
	   document.getElementById('result').innerHTML = xmlHttp.responseText;
	}

}

Hello,

I have this short script he

Code:

function resizeImages() { //Function will be ran onload in the <body> tag
	var img = document.images; //Puts all the images in an array
	
	for (var i = 0; i < img.length; i++) { //A loop to execute a set of functions for every image
		var parentElement = img[i].parentNode; //Gets parent element of image
		
		var parentWidth = parentElement.width(); //Gets width of parent element (value is an integer without "px")
		var imgWidth = img[i].width(); //Gets image width
		
		var parentHeight = parentElement.height(); //Gets height of parent element
		var imgHeight = img[i].height();//Gets image height
		
		if (parentWidth < imgWidth){
			img[i].width(parentWidth); //Sets width of image to width of parent element
			img[i].style.height = "auto"; //Scales height
		}
		
		if (parentHeight > imgHeight){
			img[i].height(parentHeight);  //Sets height of image to height of parent element
			img[i].style.width = "auto"; //Scales width
		}
		
		alert(parentWidth); //To test if parentNode is working correctly.  Should return an integer.
	}
}

It's got some JQuery in it (.width() and .height()) to make manipulation of the dimensions easier to manage.

Basically, it's supposed to resize all the images on the webpage to the size of their parent elements (divs) without losing aspect ratio. Image overflow will be hidden so that no matter what the aspect ratio of the image and it's container the largest possible area of the image will be exposed.

The alert() function I have at the bottom is supposed to run as a test that each loop is working correctly. However, my images don't get resized and I get no alert. I think the loop may be breaking out before it goes through everything. Anyone have ideas? I'm not a Javascript coder.

Thank you,
Jared

Hello fellas,

First problem
I want to initialize class php-like
PHP Code:
$i = 1;
$name = 'myClass' . $i;
$h = new $name(); 


How to do it in javascript ?

Second
If I'm adding a <script> to <head>, and in this new script there's a class named npcscript.
How come right after adding the element, I can't initialize the class?

Thanks for your time,
nico

Hello, I'm building a simple custom dropdown menu for a web-site so that I can control look and feel as well as the behavior of an iframe.

I've set it up so that when the user clicks on any of the menu's active components, an "if" sequence in the clickHandler() function is activated that gets the element's class. If the event occurred on a dropdown option, the event-target id is checked, and the appropriate function is called. At least this is how it's supposed to work.

All of the drop-down options have been assigned the "dmo" class. When I test the menu and click on other elements, it works fine. But when I click the "dmo" drop-down options, nothing happens. Firebug and IE Explorer Developer Tools both show no errors, but on clicking a dropdown option, the correlate code doesn't run at all, and after hours of head-banging, I have no idea why.

I need help on this one. Here's the code.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style type="text/css">

BODY {
	background:#000;
}
.DropMenu {
	width:228px;
	height:1.5em;
}
.DropMenu span {
	color:#FFF;
	font-size:0.875em;
	font-family:Verdana, Geneva, sans-serif;
	font-weight:bold;
}
.DropMenuLabel {
	float:left;
	width:85px;
	height:1.5em;
	padding:0.2em 0 0 0;
	text-indent:0.3em;
}
.DropMenuTopList {
	width:130px;
	float:left;
	height:1.5em;
	padding:0 0 0 0;
	cursor:pointer;
}
.DropMenuTopList img {
	padding:0.4em 0 0 0.3em;
	cursor:pointer;
}
.DropMenu span {
	color:#FFF;
	font-size:.875em;
	font-family:Verdana, Geneva, sans-serif;
	font-weight:bold;
	vertical-align:center;
}
#dropMenuButton {
	cursor:pointer;
}
#dropMenuOptions {
	position:relative;
	width:130px;
	left:85px;
	padding:0.2em 0 0 0;
	visibility:hidden;
	cursor:pointer;
}
.MenuList {	
	list-style-type:none;
	top:0;
	left:0;
	width:100%;
	margin:1.5em 0 0 0;
	padding:0;
}
.MenuList li{
	height:1.5em;
	margin:0.2em 0 0 0;
	padding:0;
	width:100%;
	background-color:#666;
	border-color:#AAA;
	border:0.5px solid;
	text-indent:0.3em;
}
.dmo {
	z-index:100;
}

</style>

<script type="text/javascript" language="javascript">

window.onload = function() 
	{	
		setBehavior();
	}

function setBehavior()
	{
		/*
		var downButton = document.getElementById('dropMenuButton')
		downButton.onclick = new Function ( "showMenu()" );
		*/
		window.onclick = new Function ( "evt" , "clickHandler( evt )" );
	}

function clickHandler( evt )
	{
	
		var dropMenu = document.getElementById('dropMenuOptions');
	
		var e = evt;
		var targ;
	
		if (e.target) {targ = e.target}
		else if (e.srcElement) {targ = e.srcElement}
		
		var targClass = targ.getAttribute('class');
				
		/* classnames 
		
		dmb - dropdown button - this should toggle the dropdown visibility on and off on click, and toggle visibility on over/out
		dmo - option - once clicked, this should turn the dropdown visibility off
		
		*/
		
		var exclude = ("dmb" || "dmo")
		if (targClass != exclude )
			{
				hideMenu()				
			}
		
		else if (targClass == "dmb" )
			{
				if (dropMenu.style.visibility == "visible") { hideMenu() }
				else showMenu();
			}

		else if (targClass == "dmo" )
			{
				if ( targ.id == "option1" ){ window.open(www.bing.com,"Bing") }
				else if ( targ.id == "option2" ){ window.open(www.bing.com,"Bing") }
				else if ( targ.id == "option3" ){ window.open(www.cuil.com,"Cuil") }
				hideMenu();
			}
	}

function showMenu()
	{
		var dropMenu = document.getElementById('dropMenuOptions');
		
		dropMenu.style.visibility= "visible";
	}

function hideMenu()
	{
		var dropMenu = document.getElementById('dropMenuOptions');
		
		dropMenu.style.visibility= "hidden";
	}

</script>


</head>

<body>

<div id="customMenu" class="DropMenu">
	<span>
    
    <div class="DropMenuLabel">Options:</div>
    
    <div class="DropMenuTopList dmb" id="dropMenuTopList">Temp Text
   	    <img class="dmb" id="dropMenuButton" src="Assets/Buttons/DropMenuDownButton.png">
        </img>
    </div>
    
    <div class="dmo DropMenuOptions" id="dropMenuOptions">
        <ul id="menuList" class="dmo MenuList">
            <li id="option1" class="dmo">Option1</li>
            <li id="option2" class="dmo">Option2</li>
            <li id="option3" class="dmo">Option3</li>
        </ul>                
    </div>
        
    </span>    

</div>


</body>
</html>

The bit of code in bold in the code below is giving me this error in IE:

Error:
Code:

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; Trident/4.0; Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1) ; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; .NET CLR 3.5.30729; Tablet PC 2.0; InfoPath.2; OfficeLiveConnector.1.4; .NET CLR 3.0.30729; OfficeLivePatch.1.3; MSN OptimizedIE8;ENGB)
Timestamp: Tue, 16 Mar 2010 15:07:11 UTC

Message: HTML Parsing Error: Unable to modify the parent container element before the child element is closed (KB927917)
Line: 0
Char: 0
Code: 0
URI: http://www.mateinastate.co.uk/users/mateinastate

Code:
Code:

if(document.getElementById('msn1').innerHTML=="")
{
	 document.getElementById('msn1').style.display='none';
}
if(document.getElementById('yahoo1').innerHTML=="")
{
	 document.getElementById('yahoo1').style.display='none';
}
if(document.getElementById('skype1').innerHTML=="")
{
	 document.getElementById('skype1').style.display='none';
}
if(document.getElementById('facebook1').innerHTML.toLowerCase().substr(0,18)=='<a href="http://">')
{
	 document.getElementById('facebook1').style.display='none';
}
else if(document.getElementById('facebook1').innerHTML.toLowerCase().substr(0,11)=='<a href="">')
{
	 document.getElementById('facebook1').style.display='none';
} else
{
	 document.getElementById('fbook-add').innerHTML='Facebook Profile';
}

What it's saying isn't actually true (I don't think)... this is how the section is laid out:

Code:

<div id="submenu1" class="anylinkcss">
<ul>
<li class="contact-pm"><a href="/index.php?do=pm&act=new&to=$RateViewProfileUserName$&returnurl=$ReturnURL$">PM me</a></li>
<li class="contact-email"><a href="/index.php?do=email&id=$RateViewProfileUserId$">E-mail me</a></li>
<li class="contact-msn" id="msn1">$RateViewProfileUser-profile_msn$</li>
<li class="contact-yahoo" id="yahoo1">$RateViewProfileUser-profile_yahoo$</li>
<li class="contact-skype" id="skype1">$RateViewProfileUser-profile_skype$</li>
<li class="contact-facebook" id="facebook1"><a href="$RateViewProfileUser-profile_facebook$"><span id="fbook-add"></span></a></li>
</ul>
</div>

<script type="text/javascript" src="/html_1/js/contact-information.js"></script>

Does anyone know why this might error in just IE?

Hi, I'm relativly new to JS and brand new to the forum so you might need to dumb down your replys for my slightly lacking knowledge. That being said I do have a very solid grasp of html, css and am getting there with JS and its various frameworks.

I'm integrating wordpress into an existing site for a friend and currently have the main blog page appear in a DIV. This is the best way to integrate in this case due to many reasons mostly of way the site is constructed.
Code:

<div class="scroll-pane" id="scrollbox">
	WORDPRESS BLOG		     
</div>

My issue is that links within that DIV, in the blog, when clicked redirect the page. The simple answer to this would be to have them just open in a new page, which I can easily do with the below code.

Code:

function Init()
{
  // Grab the appropriate div
  theDiv = document.getElementById('scrollbox');
  // Grab all of the links inside the div
  links = theDiv.getElementsByTagName('a');
  // Loop through those links and attach the target attribute
  for (var i=0, len=links.length; i < len; i++) {
    // the _blank will make the link open in new window
    links[i].setAttribute('target', '_blank');
  }
}
window.onload = Init;

But what I'd rather it do is have any link clicked inside the DIV to reload in that same DIV, similar to an iframe, but obviously without using an iframe, due to it's compatibility issues.

Is this possible by editing the above code? If not what do I need?

Thanks in advance for any help!

Hello,
I am new with Javascript and running into this problem that I don't understand.

I define a base class that only contains an array "elements", and a derived class that contains nothing more (for simplicity):

Code:

  function baseClass() {
     this.elements = new Array;
  }

  function derivedClass() {
  }
  derivedClass.prototype = new baseClass;

Then I create two instances of the derived class, and add two elements in each:

Code:

   a = new derivedClass();
   a.elements.push("A");
   a.elements.push("B");

   b = new derivedClass();
   b.elements.push("C");
   b.elements.push("D");

When I examine the contents of these arrays, I see that both a.elements and b.elements contain {"A","B","C","D"} ! I.e. as if the two arrays are in fact the same array! But these are two separate instances of the class, I expect two separate arrays.

Note that if instead I use the base class:

Code:

   a = new baseClass();
   a.elements.push("A");
   a.elements.push("B");

   b = new baseClass();
   b.elements.push("C");
   b.elements.push("D");

then I get a.elements = {"A","B"} and b.elements = {"C","D"}, as I would expect.

Could someone explain to me the problem with using the derived class?

Thank you,
Stephanos

I have the following code

Code:

<div class="thdnrml">
<td><a href="somelink">fonfof</a></td>
</div>

what i want to do is this:
Code:

<div class="thdnrml">
<td><a href="somelink">fonfof</a><a href="anotherlink">another_link</a></td>
</div>

how can i go about achieving this?

Hi,

(new to javascript)

Code:

digAudio = document.createElement("audio");	
	digAudio.setAttribute('src',hypeDocument.documentName()+'_Resources/'+'digging.m4a');
	digAudio.id = "diggingAudio";
	newAudio = document.getElementById("diggingAudio"); //returns null

the audio element is added (I can play the audio) but I can't get it by its id ?

thank you