|
JavaScript - Load Javascript After Dom Load
Hi guys,
I am trying to insert the following call into my page; Code: <script type="text/javascript" defer="true">
$('#query').autocomplete({
serviceUrl:'service/autocomplete.ashx',
minChars:1,
delimiter: /(,|;)\s*/, // regex or character
maxHeight:400,
width:250,
deferRequestBy: 0, //miliseconds
params: { country:'Yes' }, //aditional parameters
// local autosugest options:
lookup: ['January', 'February', 'March', 'April', 'May'] //local lookup values
});
</script>
It works fine in all browsers except ie(6,7,8) Code: Internet Explorer can not open website. Operation Aborted. I understand it is caused by the jquery autocomplete function loading before the page / DOM has fully loaded. I tried adding Defer="true" to the script however this doesn't seem to work. Could someone please tell me what i must add to the script so that it loads after the dom has fully loaded? Thanks guys George Similar TutorialsHi all Is there a way to get the image(s) to load into the table after the page has loaded instead of the way I have it now? I have 4 tabs, but I would like the imgs in tabs 2,3,4 to load after page load. Example of how the tabs look. Code: <div class="tabbertab">
<h2>Australia_____</h2>
<table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#FFFFCC">
<caption class="highlight_Red">澳洲 Australia
</caption>
<tr>
<td><a href="pages/promotion.html#aus_ACE" rel="nofollow" target="_blank"><img src="pages/images/Pics/AUS/ace.jpg" alt="ACE / ATTC" width="110" height="69" border="0" align="left" class="ozimg_L"/> ...a few more images etc
the other tabs look the same. LT This script displays a link to a registration/login form that loads in a light box for Joomla. I've been goin nuts trying to figure out how to get this to load on page load with a delay. Anyone know how to get this done? PHP Code: <?php JHTML::_('behavior.mootools'); $document = JFactory::getDocument(); $document->addStyleSheet(JURI::base() . 'media/system/css/modal.css'); $document->addScript(JURI::base() . 'media/system/js/modal.js'); $document->addScriptDeclaration("window.addEvent('domready', function() {SqueezeBox.initialize({});});"); $user = & JFactory::getUser(); $uri = JFactory::getURI(); $url = $uri->toString(); $return = base64_encode($url); ?> <div id="lbframeid" style="position:absolute;top:1px;left:1px;height:0px;width:0px;overflow:hidden"> <a href="http://www.wowjoomla.com/"><h1>Joomla Login LightBox powered by WowJoomla.com</h1> </a> </div> <?php if ($user->get('guest')) :?> <a href="<?php echo JRoute::_('index.php?option=com_loginbox')?>" onclick="SqueezeBox.fromElement(this); return false;" rel="{handler: 'iframe', size: {x: 660, y: 500}}"><?php echo JText::_('SIGNUP_LOGIN')?></a> <?php else: ?> <?php echo JText::sprintf( 'HINAME', $user->get('name') ); ?> <br> <a href="javascript:void(0);" onclick="LB_onLogout(); return false;"><?php echo JText::_('LOGOUT')?></a> <?php endif; ?> <script type="text/javascript"> function LB_onLogout() { var form = new Element('form'); form.setProperty('method', 'POST'); form.setProperty('target', '_self'); form.setProperty('action', 'index.php'); var input = new Element('input'); input.setProperty('type', 'hidden'); input.setProperty('name', 'option'); input.setProperty('value', 'com_user'); form.appendChild(input); var input = new Element('input'); input.setProperty('type', 'hidden'); input.setProperty('name', 'task'); input.setProperty('value', 'logout'); form.appendChild(input); var input = new Element('input'); input.setProperty('type', 'hidden'); input.setProperty('name', 'return'); input.setProperty('value', '<?php echo $return; ?>'); form.appendChild(input); $E('body').appendChild(form); form.submit(); } </script> 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! 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> hello, iam kind of new at javascript, but iam trying my best to be better and better. so i have 3 divs (my_block, my_image, my_description) as you see in my code below Code: <div class = "my_block">
<div class = "my_image">
<img src="images/pic.jpg" width="600" height="600">
</div>
<div class = "my_description">
<a> Description goes here.... ! </a>
</div>
</div>
just i want to display the "my description" div only after the 100% image loading completion which exist in "my_image" div. so how can i get this done with Javascript please ?? thanks a lot 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 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! 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! 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! 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>
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> </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> </td>
</tr>
<!--<tr>
<td><b>Name:</b> </td>
<td><input type="text" name="firstName" class="textfield"/> <input type="text" name="middleName" class="textfield"/> <input type="text" name="lastName" class="textfield"/></td>
</tr>
<tr>
<td width="200"> </td>
<td> First Name Middle Name 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 <html:radio property="gender" name="UserForm" value="<%=ApplicationConstant.GENDER_FEMALE %>" tabindex="2"/>Female <span style="color:red;font-size:small;visibility: true">*</span>
<b>Birth Date: </b>
<input type="text" name="dateOfBirth" readonly="readonly" value="<bean:write property="dateOfBirth" name="UserForm"/>" ><a href="#" onClick="setYears(1900, 2013); showCalender(this, 'dateOfBirth');" > <img src="images/calendar.gif"></a>
<span style="color:red;font-size:small;visibility: true">*</span><b>Age: </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> </td>
</tr>
<tr>
<td> </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: </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: </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: </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: </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"/> <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> </td>
<td align="char" colspan="2" rowspan="2"><a href="javascript:addUser();"><img src="images/Register1.png" border="0"></img></a> <a href="index.jsp"><img src="images/Cancel1.png" border="0"></img></a></td>
</tr>
</logic:empty>
<logic:notEmpty name="UPDATE_USER">
<tr>
<td> </td>
<td align="char"><a href="javascript:updateUser();"><img src="images/update.png" border="0"></img></a> <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 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. 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> 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 Hi There, Below is some very basic html/javascript that asks for a user to enter a number in an input text box and then a button is pressed it writes out a line that number of times. It works, but when run in firefox the pages always seems to continue to load... that is, the cursor is continuously that when a page is loading (an arrow with a little circle) and the status bar in the bottom right hand corner seems to be always be at zero. It seems to be something in the for loop as when this is take out it works. Seems to work in IE however? Any ideas? Is this a FireFox thing or am I not terminating the loop properly? Code: <html>
<head>
<script type="text/javascript" language="javascript">
<!--
function writeloop(){
var noTimes = document.theForm.theAmount.value;
for(x=0;x<=noTimes;x++){
document.write("A line!"+"<br />");
}
}
function cleantext(){
document.theForm.theAmount.value="";
}
//-->
</script>
<title>Write Loop</title>
</head>
<body>
<form name="theForm" action="#">
<input type=button value="Press me" onclick="writeloop();" />
<br /><br />
Enter the amount of times: 
<input type=text name="theAmount" value="blah" onfocus="cleantext()"/>
</form>
</body>
Many thanks! Hi I have some Javascript on my website http://www.restoreanddesign.co.uk The top bar has 4 images on a random cycle on load up/ refresh. Im trying to validate the xhtml, but it is coming up with errors. I dont understand javascript enough to be able to fix this. Anyone know what needs to be done to validate this javascript. i have bolded/coloured the lines i think is causing the problems -------------------------------------------------------------------- Code: <script type="text/javascript" language="JavaScript">
// JavaScript Document
var imagenumber = 4 ;
var randomnumber = Math.random() ;
var rand1 = Math.round( (imagenumber-1) * randomnumber) + 1 ;
images = new Array
images[1] = "images/newtopbar.jpg"
images[2] = "images/newtopbar2.jpg"
images[3] = "images/newtopbar3.jpg"
images[4] = "images/newtopbar4.jpg"
var image = images[rand1]
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
Hi I am trying to load html stream directly into webbrowser in delphi. The html contains java script. It loads xml and xsl files and display the xml content in the web browser. I got an error, says access denied for the command xmlDoc.load(fname); If I save the html into a file, test.html, and double click it, it is fine, no problem. The code is actually copied from w3schools.com. the html code as followed: <html> <head> <script> function loadXMLDoc(fname){var xmlDoc; if (window.ActiveXObject) { xmlDoc=new ActiveXObject("Microsoft.XMLDOM"); } else { alert('Your browser cannot handle this script'); } xmlDoc.async=false; xmlDoc.load(fname); return(xmlDoc); } function displayResult() { xml=loadXMLDoc("catalog.xml"); xsl=loadXMLDoc("catalog.xsl"); if (window.ActiveXObject) { ex=xml.transformNode(xsl); document.getElementById("example").innerHTML=ex; } } </script> </head> <body id="example" onLoad="displayResult()"> </body> </html> The delphi code is procedure TForm1.WBLoadHTML(WebBrowser: TWebBrowser; HTMLCode: string) ; var v: OleVariant; HTMLDocument: IHTMLDocument2; begin memo1.Lines.LoadFromFile('d:\test\htmltxtold.html'); HTMLCode := memo1.Text; WebBrowser1.Navigate('about:blank') ; HTMLDocument := WebBrowser.Document as IHTMLDocument2; v := VarArrayCreate([0, 0], varVariant); v[0] := HTMLCode; HTMLDocument.Write(PSafeArray(TVarData(v).VArray)); HTMLDocument.Close; end; Thanks a lot |
|||||||