JavaScript - Please Help Me In This Javascript Img Load Code

Basically, what I'm trying to do is set the left margin of an image based on the width of the image, because I want the image to appear centered relative to the link table above. I've been using this code:

Code:

function insertImageMargin()
{
	var marg = getImageMargin();
	document.getElementById("comic").style.marginLeft = marg + "px";
}
	

function getImageMargin()
{
	var com = document.getElementById("comic");
	return 440 - com.width / 2;
}

What happens is, the first time com.width is 0, but if I hit reload, it is the width of the image, and the code works correctly. How do I get this to work the first time, or can you suggest an alternate approach?

Hi to all

I have a javascript code that when a page loads, some contents must be load
within a given div tag.
But the problem is that this javascript code sometimes work an somtimes Not work.

What's the problem?

Thank You...

Hello,

I have a page that uses the Yahoo Buzz JS widget which renders a button and count of clicks from Yahoo servers. The display of the widget is at the top of the page - which causes the rest of the page to appear to load slowly (cause it's waiting on the Yahoo JS to finish).

Ordinarily, I would place all JS calls at the bottom of the page as not to affect the performance of the rest of the page. But since this JS actually renders an UI element, I don't know how to move the code to the bottom of the page (if I move the JS, the UI widgit appears at the bottom).

Any suggestions on how to do this?

Code:

<div class="swidgets">
<script type="text/javascript" 
   src="http://d.yimg.com/ds/badge2.js"
   badgetype="square">
   http://www.example.com/page.htm
</script>
</div>

Hi Guys,

A client has given me some code but i need to add some code to it so it loads a URL along with the rest of the code. Below is the javascript code i need to work with, i know its to do with Google Tracking (Dart) but i dont understand it as I've never done JavaScript befo

Code:

<script type="text/javascript">
function dart_tracking(callback) {

// Google Conversion Tracking
var img = new Image();
img.src="
https://www.googleadservices.com/pagead/conversion/REMOVED/?value=0&label=REMOVED&guid=ON&script=0
";

var img2 = new Image();
img2.src="
https://www.googleadservices.com/pagead/conversion/REMOVED/?value=0&label=REMOVED&guid=ON&script=0
";

_gaq.push(['_trackEvent', 'subscribeButton', 'clicked']);

if (typeof callback != "undefined") {
setTimeout(callback, 1500);
}
}
</script>

Now the above code loads up when a subscribe button is clicked on my clients webpage, now how do i go about adding code to this so lets say http://www.Google.co.uk is loaded too?

Any help would be great.

Thank you!

Hello everyone!
This is my first post. I know some html and css, but not much about javascript, and I have an existential problem with a portfolio i'm helping to design:

The portfolio itself is for a night photographer that covers different events. For each event there is a page where the photos from that event are displayed.
The thing is i don't want to write html code for each and every event, so i've been investigating how to automate this process and i've been answered: javascript.

I want a horizontal layout page for each event, where all the images from its folder are displayed, with a horizontal scrollbar and no vertical scrollbar. I've managed to cover this with a combination between css and javascript code.

The javascript code i'm using:

<script src="../../docs/js/jquery-1.2.6.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">

$(function(){
$("#page-wrap").wrapInner("<table cellspacing='30'><tr>");
$(".post").wrap("<td>");
});
</script>

Then i call for each image in the body of the html page:

<div id="page-wrap">
<div class="post">
<img src="../../images/baobab04.02.11/1.jpg" width="720" height="480" border="0" />
</div>

<div class="post">
<img src="../../images/baobab04.02.11/2.jpg" width="720" height="480" border="0" />
</div>

</div>

I've read about this function to loop for each image in a directory:

foreach(string fileName f in Directory.GetFiles("SomeDirectory"))
{
...
}

But i'm lost as to how to implement it and make a new <div class="post"> for each file in the directory.

Thank you all in advance

I'm trying to build a gallery. So far I've used jquery for the scrolling thumbnails. The problem I am having is deciding which would be the best way to load the larger version of the thumbnails into a div? Currently I am using a jquery attribute replace, but the only problem I'm having is I want to use lightbox for the large images. Some of the images have text so they need to be big if the user would like to read them.

Right now lightbox is working except that it doesn't understand what image it's on when you click on the large version. I believe this is because of the attribute replace.

Here is where you can view the problem:

http://www.tsutsumidaphoto.com/Mihoko/akiko3.php

If you click on any thumbnail after the first then click on the large version it will bring up the first image then go from there.

Any suggestions, I've tried for too long on my own!

Hello!
I am developing my personal website!
And I am trying to implement it with JS completely. which means I need the page to be one front end page.
But the back-end pages would be the ones which do the work and calculations!
In other words and more explaination:
I would like to have one "index.php" page that contains only a nav bar which handles the mission.
Once the page load it loads with the content of "home.php" (the landing page) if the "contact" tab is clicked then I would like to load the "ContactMe.php" page content.
I have done this already! but the problem is:
"home.php" uses alot of javascript functions and jquery plug-ins. when I load it, it looks messy that you think the JS is disabled in your machine :-\
Note: the loading has been done with those methods: .load(), $.ajax! -> same results!

The conclusion:
* "home.php"
* "ContactMe.php"
* "About.php"
Is it possible to load those pages in the "index.php" and still have their JS functions function correctly and display as if they were accessed individually?

The goal that I am trying to achieve is that I make my whole website for the visitor as "One Page Site"! I am challenging myself with it though!

Thank you in advance for your informative posts!


Please Note that I have only put the <html><head><body> tags in the index.php and removed them from the back-end pages such as home.php, contactme.php and about.php! for that sake that it works correctly! but with no hope!

Hey guys.
I need a Javascript that clicks on particular co-ordinates on page load. I'll even make do with a script that clicks on a random co-ordinate on page load. Just a simple click has to be made automatically on page load on the page.

I tried using and editing this code:
Code:

<html>

<head>

<script>
window.onload = function(){
  document.getElementById("autoid").click();
}
</script>

</head>

<body>

<a href="http://google.com" id="autoid">Search Engine</a>

</body>

</html>

but its of no use because I want it to click on another javascript, thats another
Code:

<script type="text/javascript">
[Script data goes here that takes about 700 x 700 pixels on the screen]
</script>

I want a click to be made on this script somehow. I can add
Code:

window.setTimeout('clickit()',5000);
function clickit(){
   location.href = document.getElementById("autoid");

myself which will delay it so the click occurs after page load but I just want a click to happen on top of that javascript.

Any help will be greatly appreciated.
Cheers!

Hi - I have an ASP.Net 2.5 application and I need to call a javascript function when one of the pages loads initially. I've tried:

Code:

string ScriptToCall = @"EnableCheckboxes(" + cblDetails.ClientID + ", false);";
ClientScript.RegisterStartupScript(this.GetType(), "addScript", ScriptToCall, true);

where EnableCheckboxes is a javascript function on the page. This doesn't work (doesn't disable the CheckBoxList), although the EnableCheckboxes function DOES work when I call it in other ways, so I'm sure that the problem is that I'm not calling it properly on page load.

I've tried:

Code:

ClientScript.RegisterStartupScript(this.GetType(), "addScript", "alert('Hello');", true);

which DOES work, so I know I'm on the right track, but how do I do this?

Thanks!

Ok, basically I am using the script bellow to produce a javascript slideshow similar to this: http://www.valvesoftware.com/ but instead of the red boxes I want an image representing each slide.

My problem is, I can't figure out how to call in a different image for each of these tabs (Paginates).

Any help would be much appreciated, thanks.

HEAD: Code:

<style type="text/css">
/*<![CDATA[*/

#tst {
  position:relative;width:880px;height:400px;
}

#paginate {
  position:absolute;z-Index:4;left:760px;top:15px;height:20px;
}

#paginate .default {
  position:relative;width:100px;height:50px;margin-bottom:27px;border:solid black 1px;background:url(images/imagehold.png);
}

#paginate .active {
  background:url(images/imagehold_o.png);
}

/*]]>*/
</style><script type="text/javascript">
// Animate (24-June-2011)
// by Vic Phillips http://www.vicsjavascripts.org.uk

// To progressively change the Left, Top, Width, Height or Opacity of an element over a specified period of time.
// With the ability to scale the effect time on specified minimum/maximum values
// and with three types of progression 'sin' and 'cos' and liner.

// The functional code size is 1.39K

// **** Application Notes

// **** The HTML Code
//
// when moving an element the inline or class rule style position of the element should be assigned as
// 'position:relative;' or 'position:absolute;'
//
// The element would normally be assigned a unique ID name.
//

// **** Initialising the Script.
//
// The script is initialised by assigning an instance of the script to a variable.
// e.g A = new zxcAnimate('left','id1')
// whe 
//  A           = a global variable                                                               (variable)
//  parameter 0 = the mode(see Note 1).                                                           (string)
//  parameter 1 = the unique ID name or element object.                                           (string or element object)
//  parameter 2 = the initial value.                                                              (digits, default = 0)

// **** Executing the Effect
//
// The effect is executed by an event call to function 'A.animate(10,800 ,5000,[10,800]);'
// whe 
//  A           = the global referencing the script instance.                                 (variable)
//  parameter 0 = the start value.                                                            (digits, for opacity minimum 0, maximum 100)
//  parameter 1 = the finish value.                                                           (digits, for opacity minimum 0, maximum 100)
//  parameter 2 =  period of time between the start and finish of the effect in milliseconds. (digits or defaults to previous or 0(on first call) milliSeconds)
//  parameter 3 = (optional) to scale the effect time on a specified minimum/maximum.         (array, see Note 3)
//                 field 0 the minimum value. (digits)
//                 field 1 the maximum value. (digits)
//  parameter 3 = (optional) the type of progression, 'sin', 'cos' or 'liner'.                (string, default = 'liner')
//                 'sin' progression starts fast and ends slow.
//                 'cos' progression starts slow and ends fast.
//
//  Note 1:  Examples modes: 'left', 'top', 'width', 'height', 'opacity.
//  Note 2:  The default units(excepting opacity) are 'px'.
//           For hyphenated modes, the first character after the hyphen must be upper case, all others lower case.
//  Note 3:  The scale is of particular use when re-calling the effect
//           in mid progression to retain an constant rate of progression.
//  Note 4:  The current effect value is recorded in A.data[0].
//  Note 5:  A function may be called on completion of the effect by assigning the function
//           to the animator intance property .Complete.
//           e.g. [instance].Complete=function(){ alert(this.data[0]); };
//



// **** Functional Code - NO NEED to Change

function zxcAnimate(mde,obj,srt){
 this.to=null;
 this.obj=typeof(obj)=='object'?obj:document.getElementById(obj);
 this.mde=mde.replace(/\W/g,'');
 this.data=[srt||0];
 return this;
}

zxcAnimate.prototype={

 animate:function(srt,fin,ms,scale,c){
  clearTimeout(this.to);
  this.time=ms||this.time||0;
  this.data=[srt,srt,fin];
  this.mS=this.time*(!scale?1:Math.abs((fin-srt)/(scale[1]-scale[0])));
  this.c=typeof(c)=='string'?c.charAt(0).toLowerCase():this.c?this.c:'';
  this.inc=Math.PI/(2*this.mS);
  this.srttime=new Date().getTime();
  this.cng();
 },

 cng:function(){
  var oop=this,ms=new Date().getTime()-this.srttime,s=this.data[1],f=this.data[2],d=Math.floor(this.c=='s'?(f-s)*Math.sin(this.inc*ms)+s:this.c=='c'?f-(f-s)*Math.cos(this.inc*ms):(f-s)/this.mS*ms+s);
  d=Math.max(d,s<0||f<0?d:0);
  this.data[0]=d;
  this.apply();
  if (ms<this.mS){
   this.to=setTimeout(function(){oop.cng(); },10);
  }
  else {
   this.data[0]=this.data[2];
   this.apply();
   if (this.Complete) this.Complete(this);
  }
 },

 apply:function(){
  if (isFinite(this.data[0])){
   if (this.mde!='opacity') this.obj.style[this.mde]=this.data[0]+'px';
   else zxcOpacity(this.obj,this.data[0]);
  }
 }

}

function zxcOpacity(obj,opc){
 obj.style.filter='alpha(opacity='+opc+')';
 obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=opc/100-.001;
}

</script>

BODY: Code:

<script  type="text/javascript">
/*<![CDATA[*/

function zxcFadeSlideShow(o){
 var obj=document.getElementById(o.ID),imgs=obj.getElementsByTagName('IMG'),z0=0,ary=[],ms=o.FadeDuration,hold=o.Hold,srt=o.AutoStart,pag=document.getElementById(o.PaginateID),pary=[],z1=0;
 for (;z0<imgs.length;z0++){
  imgs[z0].style.position='absolute';
  imgs[z0].style.zIndex=z0>0?'0':'2';
  imgs[z0].style.left='0px';
  imgs[z0].style.top='0px';
  zxcOpacity(imgs[z0],z0>0?0:100);
  ary[z0]=new zxcAnimate('opacity',imgs[z0],z0>0?0:100);
 }
 if (pag){
  this.cls=['default','default active'];
  for (;z1<ary.length;z1++){
   pary[z1]=document.createElement('DIV');
   pary[z1].className=this.cls[z1>0?0:1];
   pag.appendChild(pary[z1]);
   this.addevt(pary[z1],'mouseup','page',z1);
  }
 }
 this.ary=ary;
 this.pary=pary;
 this.lstp=pary[0];
 this.ms=typeof(ms)=='number'?ms:1000;
 this.hold=(typeof(hold)=='number'?hold:1000)+this.ms;
 this.srt=typeof(srt)=='number'?srt+this.ms:false;
 this.to=null;
 this.cnt=0;
 this.lst=ary[this.cnt];
 this.Auto(this.hold);
}

zxcFadeSlideShow.prototype={

 Next:function(cnt,goto){
  this.Pause();
  if (this.lstp){
   this.lstp.className=this.cls[0];
  }
  this.lst.obj.style.zIndex='0';
  this.lst.animate(this.lst.data[0],0,this.ms,[0,100]);
  this.lst=this.ary[cnt];
  this.lst.obj.style.zIndex='2';
  this.lst.animate(this.lst.data[0],100,this.ms,[0,100]);
  if (this.pary[cnt]){
   this.lstp=this.pary[cnt];
   this.lstp.className=this.cls[1];
  }
  this.cnt=cnt;
  if (goto&&this.srt){
   var oop=this;
   this.to=setTimeout(function(){ oop.auto(); },this.srt);

  }
 },

 page:function(nu){
  this.Next(nu,true);
 },

 addevt:function(o,t,f,p){
  var oop=this;
  if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](p);}, false);
  else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](p); });
 },

 Auto:function(ms){
  var oop=this;
  this.to=setTimeout(function(){ oop.auto(); },ms||500);
 },

 Pause:function(){
  clearTimeout(this.to);
 },

 auto:function(){
  this.Pause();
  var oop=this,cnt=this.cnt;
  cnt=++cnt%this.ary.length;
  this.to=setTimeout(function(){ oop.Next(cnt); oop.auto(); },this.hold);
 }


}

S=new zxcFadeSlideShow({
 ID:'tst',              //(optional) unique ID name of the paent DIV.                   (string )
 PaginateID:'paginate', //(optional) unique ID name of the paginate DIV.                (string, default = no pagination)
 FadeDuration:1000,     //(optional) the fade duration in milli seconds.                (number, default = 1000)
 Hold:6000,             //(optional) the 'hold' between auto rotation in milli seconds. (number, default = 1000)
 AutoStart:2000         //(optional) auto start after goto.                             (number, default = no auto start)
});

x=new zxcAnimate('opacity',document.getElementById('tst'))
//x.animate(0,100,1000)
/*]]>*/
</script>

So I wrote a script to slide various divs horizontally.

It takes 2 seconds to start and then begins, sliding, then stops, then slides, until all four slides are shown, and the slides back to the first one.

My issue is I have two buttons that should take over and kill the auto sliding. Also the script is giving me errors. That mastertimer, and loopertimer is not defined... Why is that?

Here is the code

Code:

<script type="text/javascript">// <![CDATA[
function restartSlide(item){
  item.style.left = parseInt(item.style.left) + 60 +'px';

  var resetLooperSl = setTimeout(function(){restartSlide(item)},15);
  if(parseInt(item.style.left) >= 0){clearTimeout(resetLooperSl);return;}
}

function stopSlide(){
  clearTimeout(loopTimer);
}


function animateSlide(element,limit,transition){

 if(transition == "stop" && parseInt(element.style.left) > -2460){
   limit = limit - 820;
 }
 else if(transition == "stop" && parseInt(element.style.left) <= -2460){
   limit = limit + 820;
   stopSlide();
 }

 element.style.left = parseInt(element.style.left) -20 + 'px';

 if(parseInt(element.style.left)<= limit){
   setTimeout(function(){animateSlide(element,limit,"stop")},4000); 
  clearTimeout(MasterTimer);
 }

 var loopTimer = setTimeout(function(){animateSlide(element,limit,"flow")},15);

}


function autoSlide(){
 var MasterTimer;
 var RestarterTime;
 var adContainer = document.getElementById('adwrap');

 adContainer.style.left = '0px';

 MasterTimer = setTimeout(function(){animateSlide(adContainer,0,"stop")},3000);
 RestarterTimer = setTimeout(function(){restartSlide(adContainer)},25000);

}

addEvent(window, 'load', autoSlide);

function btnSlideNow(elem, incremental){

  elem.style.left = parseInt(elem.style.left) + incremental + 'px';
  
  setTimeout(function(){btnSlideNow(elem, incremental)},30)
}

function btnActions(elem){
   var incremental;

   if(elem.id == 'btnAdLeft'){incremental = 30}
   else  if(elem.id == 'btnAdRight'){incremental = -30}
   btnSlideNow(elem, incremental);
}

function adButtons(){
   document.getElementById('btnAdLeft').onclick = function(){btnActions(this)}
   document.getElementById('btnAdRight').onclick = function(){btnActions(this)}
}

addEvent(window, 'load', adButtons);
// ]]></script>

Also I'd like to see how you experienced scripters would write this cleaner. I'd like to see that, as I am new to js. It would help me learn.

thanks

I have a question is it bad or what are the disadvantages of doing what I am going to explain.
I want to put the same javascript file two time in the same page e-g
Code:

<script type="text/javascript" src="http://www.mydomain.com/javascript.js"></script>

<script type="text/javascript" src="http://www.mydomain.com/javascript.js"></script>

Now many people will ask why would I want to do that, well the reason is that I am using blogger and blogger doesn't let me see all code from which the page is made rather split it into two parts named as POSTS and EDIT HTML. So I am going to place this script in those both areas but at the end when the page loads it is actually going to two the same script two times which is not error.
Another question would be why am I not using same script in one place rather than two places if at the end the page code is going to become one. Well the answer would be because that script is used by other scripts too so I CAN'T CHANGE THE LOCATION if I do so, then the script stops working.

hello Friends
In my jsp project i am using the calendar control which selects the Birth Date of the client and on that basis it calculates the age after completion of all the fields user get registered successfully.but when registered user trying to update his date of birth his age field is blank please tell me why this happening
Also please tell me the javascript function
My jsp code is:
Code:

<%@page import="java.lang.reflect.Array"%>
<%@ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean" %>
<%@ taglib uri="/WEB-INF/struts-html.tld" prefix="html" %>
<%@ taglib uri="/WEB-INF/struts-logic.tld" prefix="logic" %>

<%@page import="java.util.ArrayList"%>
<%@page import="com.udhc.model.City"%>
<%@page import="com.udhc.model.User" %>
<%@page import="com.udhc.model.Country"%>
<%@page import="com.udhc.model.State"%>
<%@page import="com.udhc.config.ApplicationConstant"%>
<%@page import="org.apache.struts.Globals" %>
<%@page import="com.udhc.utility.CommanUtility"%>
<%@page import="java.util.HashMap"%>
<%@page import="com.udhc.form.UserForm"%>
<%@page import="com.udhc.utility.DateUtlity"%>
<%@page import="java.util.Calendar"%>
<jsp:include page="Header.jsp"></jsp:include>
<link type="text/css" href="css/jquery.ui.core.css" rel="stylesheet" />
	<link type="text/css" href="css/jquery.ui.datepicker.css" rel="stylesheet" />
	<link type="text/css" href="css/jquery.ui.theme.css" rel="stylesheet" />
	<link type="text/css" href="css/calendar.css" rel="stylesheet"></link>
<script type="text/javascript" language="javascript" src="js/jquery.js"></script>
    <script type="text/javascript" language="javascript" src="js/jquery.ui.core.js"></script>
    <script type="text/javascript" language="javascript" src="js/jquery.ui.widget.js"></script>
    <script type="text/javascript" language="javascript" src="js/jquery.datepicker.js"></script>
    <script type="text/javascript" language="javascript" src="js/calendar.js"></script> 
   <script type="text/javascript">
   <%
      User user= (User)session.getAttribute(ApplicationConstant.UDHC_USER_MODEL);
   %>
   
	 // Array of max days in month in a year and in a leap year
   
	    	
	
       
	function addUser()
	{
		if(validate())
		{
			document.forms[0].method = "POST";
			document.forms[0].nextStep.value = "addUser";
			document.forms[0].action = "User.do";
			document.forms[0].submit();
		}
   }


	function updateUser()
	{
		if(validate())
		{
			document.forms[0].method = "POST";
			document.forms[0].nextStep.value = "updateUser";
			document.forms[0].action = "User.do";
			document.forms[0].submit();
		}
	}

	 function ClearOptions(OptionList) 
   {
	  for (x = OptionList.length; x >= 0; x = x - 1) 
	    {
	     OptionList[x] = null;
	    }
    }

	 function AddToOptionList(OptionList, OptionValue, OptionText) 
    {
	   OptionList[OptionList.length] = new Option(OptionText, OptionValue);
    }

 }

      function getSecretQuestion()
     {
    	var questionId=document.forms[0].secretQuestion.value;
    	  if(questionId== "")
    	  {
        	  alert("Select Secret question");
    	  }     
    	  else
    	  {
        	  $ajax({
        			   type: "get",
        			   url: "Register.do",
        			   error: function(data){alert("Error");}
             	    });
    	  }
    	     
     }

      function finish()
      {
    	  var countryId = document.forms[0].country.value;
  	    
  	    if(countryId == "")
  	    	{
  	    	  alert("Please select country.");
  	    	}
  	    else
  	    	{    
  	            $.ajax({
  	              type: "get",
  	              url:  "Register.do",
  	              data:  "nextStep=getStateListByCountry&country="+countryId,
  	              error: function(data) {alert("Error");},
  	              success: function(response) 
  	              {
  	            	    var stateList = document.forms[0].state;
  	                  ClearOptions(stateList);
  	                  AddToOptionList(stateList,"","Select State");

  	                  $.each($(response).find("state"), function(i, state)
  	                		  {
  	                          var stateId = $(state).children("stateId").text();
  	                          var stateName = $(state).children("stateName").text();
  	                          
  	                          AddToOptionList(stateList,stateId,stateName);
  	                      });

  	                
  	              }
  	           });
  	    	}

    	
      }

      </script>
	 
	
	<%
	  ArrayList<City> cityList =(ArrayList<City>)request.getAttribute("CITY_LIST");
	  ArrayList<Country> countryList =(ArrayList<Country>)request.getAttribute("COUNTRY_LIST");
	  ArrayList<State> stateList =(ArrayList<State>)request.getAttribute("STATE_LIST");
	%>
	
	
		
<div>&nbsp;</div>
<input type="hidden" name="<%=org.apache.struts.taglib.html.Constants.TOKEN_KEY %>" value="<bean:write name="<%=Globals.TRANSACTION_TOKEN_KEY%>"/>" />

<div style="float: left;">
   <logic:notEmpty name="UPDATE_USER">
     <a href="User.do?nextStep=userHome">Back</a>
   </logic:notEmpty>
</div>
<div style="width: 700px; margin-left: 100px;" class="border">

<table class="back_img" cellspacing="5" width="100%" height="600">
	<tr valign="top">
		<td height="10"><h3><u>User Registration</u></h3></td>
	</tr>
	<tr valign="top">
		<td>
			<table>
			     <tr>
			        <td>&nbsp;</td>
			     </tr>
				<!--<tr>
				    <td><b>Name:</b> </td>
					<td><input type="text" name="firstName" class="textfield"/>&nbsp;&nbsp;&nbsp;<input type="text" name="middleName" class="textfield"/>&nbsp;&nbsp;&nbsp;<input type="text" name="lastName" class="textfield"/></td>
				</tr>
				<tr>
				    <td width="200">&nbsp;</td>
					<td>&nbsp;&nbsp;&nbsp;&nbsp; First Name &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Middle Name &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Last Name</td>
				</tr>-->
				<tr>
				    <td><span style="color:red;font-size:small;visibility: true">*</span><b>Gender:</b></td>
					<td><html:radio property="gender" name="UserForm" value="<%=ApplicationConstant.GENDER_MALE %>" tabindex="1"/>Male &nbsp;<html:radio property="gender" name="UserForm" value="<%=ApplicationConstant.GENDER_FEMALE %>" tabindex="2"/>Female&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:red;font-size:small;visibility: true">*</span>
					<b>Birth Date:&nbsp;&nbsp;</b>
				    <input type="text" name="dateOfBirth" readonly="readonly"  value="<bean:write property="dateOfBirth" name="UserForm"/>" ><a href="#"  onClick="setYears(1900, 2013); showCalender(this, 'dateOfBirth');" >&nbsp;<img src="images/calendar.gif"></a>
					 &nbsp;&nbsp;
								     
				     <span style="color:red;font-size:small;visibility: true">*</span><b>Age:&nbsp;</b>
				     <!--  <input type="text" id='idAge' name="age" class="textfield4" ondblclick="closeCalender();calcAge();" tabindex="4" maxlength="3"></input>-->
				     
				      <input type="text" id='idAge' name="age" class="textfield4" onclick="pickDate(month,day,year);" tabindex="4" maxlength="3"></input>
				     </td>
				</tr>
				<tr>
				   <td><span style="color:red;font-size:small;visibility: true">*</span><b>Password:</b></td>
				   <td><html:password name="UserForm" property="userPassword" styleClass="textfield"/></td>
				</tr>
				<tr>
				   <td><span style="color:red;font-size:small;visibility: true">*</span><b>Confirm Password:</b> </td>
				   <td><input type="password" name="confirmPassword" class="textfield" value="<bean:write name="UserForm" property="userPassword"/>"/></td>
				</tr>
				<tr>
				   <td><span style="color:red;font-size:small;visibility: true">*</span><b>Secret Question:</b> </td>
				   <td><select name="secretQuestion" class="selectfield" style="width:220px;">
				        <option value="">Select secret Question?</option>
				       <%
				       HashMap<String, String> qHash = CommanUtility.getQuestion();
				       if(session.getAttribute(ApplicationConstant.UDHC_USER_MODEL) != null)
			    	   {
			    		   //User user = (User)session.getAttribute(ApplicationConstant.UDHC_USER_MODEL);
			    		   if(user != null)
			    		   {
			    			   for(int i = 1; i <= qHash.size(); i++)
						       {
						    	   if((i+"").equals(user.getSecretQuestion()))
						    	   {
						    		   %>
						    		   <option value="<%=i %>" selected="selected"><%=qHash.get(i+"") %></option>
						    		   <%
						    	   }
						    	   else
						    	   {
						    		   if(qHash.get(i+"") != null)
							    	   {
							    		   %>
							    		   <option value="<%=i %>"><%=qHash.get(i+"") %></option>
							    		   <%
							    	   }
						    	   }
						       }
			    		   }
			    	   }
				       else
				       {
				    	   for(int i = 1; i <= qHash.size(); i++)
					       {
					    	   if(qHash.get(i+"") != null)
					    	   {
					    		   %>
					    		   <option value="<%=i %>"><%=qHash.get(i+"") %></option>
					    		   <%
					    	   }
					       }
				       }
				       
				       %>
				       </select>
				   </td>
				</tr>
				<tr>
				   <td><span style="color:red;font-size:small;visibility: true">*</span><b>Secret Answer:</b> </td>
				   <td><html:text property="secretAnswer" name="UserForm" styleClass="textfield"/></td>
				</tr>
				<tr>
				   <td><b>Contact details:</b> </td>
				   <td>&nbsp;</td>
				</tr>
				<tr>
				   <td>&nbsp;</td>
				   <td>
					   <table>
					     <tr>
					        <td><span style="color:red;font-size:small;visibility: true">*</span>Address 1:</td>
					        <td><html:text property="address1" name="UserForm" styleClass="textfield1"/></td>
					     </tr>
					     <tr>
					        <td>Address 2:</td>
					        <td><html:text property="address2" name="UserForm" styleClass="textfield1"/></td>
					     </tr>
					   </table>
					   <table>
					   <tr>
					        <td><span style="color:red;font-size:small;visibility: true">*</span>Country:&nbsp;</td>
					        <td>
						        <html:select property="country" name="UserForm" styleClass="selectfield" onchange="javascript:getStateList();">
						            <html:option value="">Select Country</html:option>
									<html:optionsCollection name="COUNTRY_LIST" value="countryId" label="name" />
							    </html:select>
					        </td>
					     </tr>
					     <tr>
					        <td><span style="color:red;font-size:small;visibility: true">*</span>State:</td>
					        <td>
					             <html:select property="state" name="UserForm" styleClass="selectfield" onchange="javascript:getCityList();">
						            <html:option value="">Select State</html:option>
									<html:optionsCollection name="STATE_LIST" value="stateId" label="name" />
							    </html:select>

					        	</td> 
					        <td><span style="color:red;font-size:small;visibility: true">*</span>City:&nbsp;</td>
					        <td>
						        <html:select property="cityId" name="UserForm" styleClass="selectfield">
						            <html:option value="">Select City</html:option>
									<html:optionsCollection name="CITY_LIST" value="cityId" label="name" />
							    </html:select>
					        </td>
					        <td>PIN:</td>
					        <td><html:text property="pinCode" name="UserForm" styleClass="textfield"/></td>
					     </tr>
					     <tr>
					       <td>Phone:&nbsp;</td>
					       <td><html:text property="phone" name="UserForm" styleClass="textfield"/></td><td><span style="color:red;font-size:small;visibility: true">*</span>Cell:</td><td><html:text property="cellNo" name="UserForm" styleClass="textfield"/></td>
				         </tr>
				         <tr>
					        <td><span style="color:red;font-size:small;visibility: true">*</span>Email:&nbsp;</td>
					        <td colspan="4"><html:text property="email" name="UserForm" styleClass="textfield1"/></td>
					     </tr>
					   </table>
					 </td>
				</tr>
				<tr>
				  <td valign="top"><b>Other Relevant Information:</b></td>
				  <td>
				    <table>
				      <tr>
				         <td>Height:</td>
				         <td><html:text property="height" name="UserForm" styleClass="textfield3"/><b>Cm.</b></td>
				         <td>Weight:</td>
				         <td><html:text property="weight" name="UserForm" styleClass="textfield3"/><b>Kg</b></td>
				      </tr>
				      <tr>
				         <td>Blood Pressu </td>
				         <td><html:text property="bPSystolic" name="UserForm" styleClass="textfield4"/>&nbsp;<html:text property="bPDiastolic" name="UserForm" styleClass="textfield4"/><b>mmHg</b></td>
				         <td>Pulse rate:</td>
				         <td><html:text property="pulseRate" name="UserForm" styleClass="textfield3"/></td>
				      </tr>
				    </table>
				  </td>
				</tr>
				<logic:empty name="UPDATE_USER">
					<tr>
					    <td>&nbsp;</td>
					    <td align="char" colspan="2" rowspan="2"><a href="javascript:addUser();"><img src="images/Register1.png" border="0"></img></a>&nbsp;&nbsp;<a href="index.jsp"><img src="images/Cancel1.png" border="0"></img></a></td>
					</tr>
				</logic:empty>
				<logic:notEmpty name="UPDATE_USER">
				<tr>
				    <td>&nbsp;</td>
				    <td align="char"><a href="javascript:updateUser();"><img src="images/update.png" border="0"></img></a>&nbsp;&nbsp;<a href="User_Home.jsp"><img src="images/Cancel1.png" border="0"></img></a></td>
				</tr>
				</logic:notEmpty>
			 </table>
		</td>
	</tr>
	<logic:messagesPresent message="true">
	    <tr>
	        <td colspan="2" align="center">
			  <html:messages id="message" message="true">
			    <div class="error">
			      <bean:write name="message"/>
			    </div>
		      </html:messages>
		  </td>
	    </tr>
	</logic:messagesPresent>
</div>


   </table>
    <table id="calenderTable">
       <tbody id="calenderTableHead">
         <tr>
           <td colspan="4" align="center">
	     <select onChange="showCalenderBody(
                   createCalender(document.getElementById('selectYear').value,
	           this.selectedIndex, false));"
                   id="selectMonth">
	              <option value="0">Jan</option>
	              <option value="1">Feb</option>
	              <option value="2">Mar</option>
	              <option value="3">Apr</option>
	              <option value="4">May</option>
	              <option value="5">Jun</option>
	              <option value="6">Jul</option>
	              <option value="7">Aug</option>
	              <option value="8">Sep</option>
	              <option value="9">Oct</option>
	              <option value="10">Nov</option>
	              <option value="11">Dec</option>
	          </select>
            </td>
            <td colspan="2" align="center">
	    <select onChange="showCalenderBody(createCalender(this.value, 
	      document.getElementById('selectMonth').selectedIndex, false));"
              id="selectYear">
	    </select>
			</td>
           <td align="center">
	    <a href="#" onClick="closeCalender();calcAge();">
              <font color="#003333" size="+1">X</font>
            </a>
	   </td>
	</tr>
       </tbody>
       <tbody id="calenderTableDays">
         <tr style="">
           <td>Sun</td><td>Mon</td><td>Tue</td><td>Wed</td>
           <td>Thu</td><td>Fri</td><td>Sat</td>
         </tr>
       </tbody>
       <tbody id="calender"></tbody>
    </table>





<jsp:include page="Footer.jsp"></jsp:include>

Hi,

I am looking for some code that will do the following

Form to post any URL to an iFrame and load said URL.

I been told Javascript can do this, but I am also after the form bit as well if possible.

I have selectitem list which has name value pairs SelectItem(value, name), i need to iterate in JS and i need to populate in to option list, like below, but it dint work for me. Please any help


function loadme(listVle){
// listVle is the List<SelectItem>
var ele = document.getElementById('numadts');
for (var i=0;i<listVle.length;i++) {
var elOpt = document.createElement('option');
var fldName = listVle.item(i).getAttribute('name'); // This line the problem is
elOpt.text = fldName;
elOpt.value = fldName;
try {
ele.add(elOpt, null);
}
catch(ex) {
ele.add(elOpt);
}
}
}

and the HTML
<BODY>
<FORM>
<select name="numadts" id="numadts" onclick="loadme()"">
</select>
</FORM>
</BODY>