|
JavaScript - Make Script Work On Load
I am trying to make the following fill the value box when the page loads as opposed to pressing the button. I cant seem to do it. Any ideas??
PHP Code: <script> var keylist="abcdefghijklmnopqrstuvwxyz123456789" var temp='' function generatepass(plength){ temp='' for (i=0;i<plength;i++) temp+=keylist.charAt(Math.floor(Math.random()*keylist.length)) return temp } function populateform(enterlength){ document.pgenerate.output.value=generatepass(enterlength) } </script> <form name="pgenerate"> <input type="text" size=18 name="output"> <input type="button" value="Generate Password" onClick="populateform(this.form.thelength.value)"><br /> <b>Password Length:</b> <input type="text" name="thelength" size=3 value="7"> </form> Similar TutorialsHow do I make my Script load faster? Is there Code that will make my Script load faster, (so that it won't take so long to view) If so, can someone show me how to incorporate it into my Example Script? With appreciation I have 3 HTML form inputs fields that is dynamically generated by a "add more" button, with naming for the fields name as fieldName, fieldName1, fieldName2, fieldName3, and so on. Now, I'm trying to retrieve the value from this fields with JavaScript, using the script below. var bookingForm = document.forms['formName']; var qty = bookingForm.fieldName +'i'.value; with the 'i' been a generated numeric number by a for loop when I use alert(qty), it returns NaN, when I'm expecting the value for fieldName1, fieldName2, and so on. But when I use; var qty = bookingForm.fieldName.value I can get the value in that field but get NaN when I try to concatenate 1,2,3, with the fieldName. Any help will be very much appreciated. Hello! I have the following code that I just can't seem to get to work. Here are the issue that aren't working: 1. The items that are stored in the users account aren't showing up as selected when you enter the page. (They work in IE, not Chrome) 2. When you click the items, nothing happens. (It used to work and would add the item to the top image) If you need any more info, or more of the code, let me know. I removed most of the PHP to simplify it for revising, and I didn't include it's CSS. Code: <div id="avatar_form" width="95" height="141">
</div>
<div id="avatar_stack">
<p>
<img src="hs/news/Upload/images/blankx.png" alt="" /><input name="avatar[Extras]" type="radio" value="blank" <? if($prof[base]==blank) echo("checked='checked'");?> />
</p>
<p>
<img src="hs/news/Upload/images/skin1.gif" alt="" /><input name="avatar[Skin Tone]" type="radio" value="body1" <? if($prof[skin]==body1) echo('checked="checked"');?> <? if($prof[skin]==blank) echo("checked='checked'");?> />
</p>
<p>
<img src="hs/news/Upload/images/blankx.png" alt="" /><input name="avatar[Hair]" type="radio" value="blank" <? if($prof[hair]==blank) echo("checked='checked'");?> />
</p>
<p>
<img src="hs/news/Upload/images/girlface.gif" alt="" /><input name="avatar[Face]" type="radio" value="girlface" <? if($prof[face]==girlface) echo("checked='checked'");?> />
</p>
<p>
<img src="hs/news/Upload/images/blankx.png" alt="" /><input name="avatar[Hand Item]" type="radio" value="blank" <? if($prof[handitem]==blank) echo("checked='checked'");?> />
</p>
<p>
<img src="hs/news/Upload/images/shirt6.gif" alt="" /><input name="avatar[Shirt]" type="radio" value="shirt6" <? if($prof[shirt]==shirt6) echo("checked='checked'");?> />
</p>
<p>
<img src="hs/news/Upload/images/blankx.png" alt="" /><input name="avatar[Hat]" type="radio" value="blank" <? if($prof[hat]==blank) echo("checked='checked'");?> />
</p>
<p>
<img src="hs/news/Upload/images/pants7.gif" alt="" /><input name="avatar[Pants]" type="radio" value="pants7" <? if($prof[pants]==pants7) echo("checked='checked'");?> />
</p>
<p>
<img src="hs/news/Upload/images/blankx.png" alt="" /><input name="avatar[Shoes]" type="radio" value="blank" <? if($prof[shoes]==blank) echo("checked='checked' checked");?> />
</p>
<p>
<img src="hs/news/Upload/images/blankx.png" alt="" /><input name="avatar[Accessories]" type="radio" value="blank" <? if($prof[accessory]==blank) echo("checked='checked' checked");?> />
</p>
<p>
<img src="hs/news/Upload/images/blankx.png" alt="" /><input name="avatar[Costume]" type="radio" value="blank" <? if($prof[costume]==blank) echo("checked='checked' checked");?> />
</p>
</div>
<BR><BR><BR>
<script type="text/javascript">
var avatar_layers = new Array('Extras', 'Skin Tone', 'Hair', 'Face', 'Hand Item', 'Shirt', 'Hat', 'Pants', 'Shoes', 'Accessories', 'Costume')
var layer_colours = new Array('#fff', '#fff', '#fff', '#fff', '#fff', '#fff', '#fff', '#fff', '#fff', '#fff', '#fff')
var inactive_tab_background_colour = '#fff'
var inactive_tab_bottom_border_colour = '#fff'
var stack_height = 1
var on_top = 0
var key = null
onload = layout
function layout()
{
if(!document.getElementById('avatar_section')) return
document.onkeydown = keyhit
tabs()
hide_radio_buttons(document.getElementById('avatar_stack'))
StackImageHolders('avatar_stack');
P = document.getElementById('avatar_stack').getElementsByTagName('p')[on_top]
P.style.backgroundColor = layer_colours[on_top]
P.style.zIndex = stack_height++
LIs = document.getElementById('avatar_section').getElementsByTagName('li')
for(i=0; i<LIs.length; i++)
{
LIs[i].style.backgroundColor = inactive_tab_background_colour
LIs[i].style.borderBottomColor = inactive_tab_bottom_border_colour
}
LIs[on_top].style.backgroundColor = layer_colours[on_top]
LIs[on_top].style.borderBottomColor = layer_colours[on_top]
LIs[on_top].focus()
IMGs = document.getElementById('avatar_stack').getElementsByTagName('img')
for(i=0; i<IMGs.length; i++)
{
IMGs[i].className = 'black_border'
IMGs[i].style.cursor = 'pointer'
IMGs[i].onclick=function(){ChangeGarment(this)}
}
avatar_preview_and_hotkey_text()
update_avatar(document.getElementById('avatar_stack').firstChild)
/* I added the following two lines because Internet Explorer
wasn't updating the display properly after loading */
document.getElementsByTagName('body')[0].style.width='95';
document.getElementsByTagName('body')[0].style.width='95';
}
function keyhit(e)
{
thisKey = e ? e.which : window.event.keyCode
alt_key_down = e ? e.altKey : window.event.altKey
ctrl_key_down = e ? e.ctrlKey : window.event.ctrlKey
shift_key_down = e ? e.shiftKey : window.event.shiftKey
switch (thisKey) {
case 37: key = 'LEFT'
break
case 39: key = 'RIGHT'
break
default: key = null
}
if(key && alt_key_down && ctrl_key_down)
{
IMGs = document.getElementById('avatar_stack').getElementsByTagName('p')[on_top].getElementsByTagName('img')
for(i=0; i<IMGs.length; i++)
{
if(IMGs[i].className == 'red_border')
{
if((key == 'LEFT') && (i > 0))
{
i--
ChangeGarment(IMGs[i])
return
}
if((key == 'RIGHT') && (i < (IMGs.length - 1)))
{
i++
ChangeGarment(IMGs[i])
return
}
}
}
}
else if(key && alt_key_down && shift_key_down)
{
LIs = document.getElementById('avatar_section').getElementsByTagName('li')
if((key == 'LEFT') && (on_top > 0))
{
on_top--
bring_to_the_top(LIs[on_top])
return
}
if((key == 'RIGHT') && (on_top < (LIs.length - 1)))
{
on_top++
bring_to_the_top(LIs[on_top])
return
}
}
}
function tabs()
{
list = document.createElement('ul')
for(i=0; i<avatar_layers.length; i++)
{
list_item = document.createElement('li')
list_item.appendChild(document.createTextNode(avatar_layers[i]))
list_item.onmouseover=function(){this.className='mouse'}
list_item.onmouseout=function(){this.className=''}
list_item.tab_number=i;//faux attributes to "stick" the indexes i and j values
list_item.onclick=function(){
bring_to_the_top(this)
}
list_item.onfocus=function(){
bring_to_the_top(this)
}
list.appendChild(list_item)
}
document.getElementById('avatar_section').insertBefore(list, document.getElementById('avatar_stack'))
}
function hide_radio_buttons(caller)
{
INPUTs = caller.getElementsByTagName('input')
for(i=0; i<INPUTs.length; i++)
{
if(INPUTs[i].type == 'radio')
{
INPUTs[i].style.display = 'none';
}
}
}
function StackImageHolders(caller)
{
Ps = document.getElementById(caller).getElementsByTagName('p')
for(i=0; i<Ps.length; i++)
{
Ps[i].className = 'stack'
}
}
function avatar_preview_and_hotkey_text()
{
for(i=0; i<avatar_layers.length; i++)
{
preview = document.createElement('img')
preview.id = avatar_layers[i]
preview.className = 'preview'
preview.width = '95px'
preview.height = '141px'
preview.alt = 'avatar preview image'
document.getElementById('avatar_stack').appendChild(preview)
}
hotkey_text = document.createElement(' ')
hotkey_text.className = 'hotkeys'
hotkey_text.appendChild(document.createTextNode(''))
document.getElementById('avatar_stack').appendChild(hotkey_text)
}
function update_avatar(caller)
{
INPUTs = caller.parentNode.getElementsByTagName('input')
for(i=0; i<INPUTs.length; i++)
{
if(INPUTs[i].type == 'radio')
{
if(INPUTs[i].checked)
{
document.getElementById(INPUTs[i].name.match(/^.*[(.*)]$/)[1]).src='hs/news/Upload/images/' + INPUTs[i].value + '.gif'
INPUTs[i].previousSibling.className = 'red_border'
}
else
{
INPUTs[i].previousSibling.className = 'black_border'
}
}
}
}
function ChangeGarment(caller)
{
inputs = caller.parentNode.getElementsByTagName('input')
for(i=0;i<inputs.length;i++)
{
inputs[i].checked=false
}
caller.nextSibling.checked=true
update_avatar(caller)
}
function bring_to_the_top(caller)
{
tabs = document.getElementById('avatar_section').getElementsByTagName('li')
for(i=0; i<tabs.length; i++)
{
tabs[i].style.backgroundColor = inactive_tab_background_colour
tabs[i].style.borderBottomColor = inactive_tab_bottom_border_colour
}
on_top = caller.tab_number
caller.style.backgroundColor = layer_colours[caller.tab_number]
caller.style.borderBottomColor = layer_colours[caller.tab_number]
put_on_top = document.getElementById('avatar_stack').getElementsByTagName('p')[caller.tab_number]
put_on_top.style.zIndex = stack_height++
put_on_top.style.backgroundColor = layer_colours[caller.tab_number]
}
</script>
Right now, it only works with IE. This goes in the header... Quote: <script language="JavaScript1.2"> function makevisible(cur,which){ strength=(which==0)? 1 : 0.2 if (cur.style.MozOpacity) cur.style.MozOpacity=strength else if (cur.filters) cur.filters.alpha.opacity=strength*100 } </script> and this goes in the image: Quote: <img style="filter:alpha(opacity=20);-moz-opacity:0.2" onMouseover="makevisible(this,0)" onMouseout="makevisible(this,1)" src="SOURCE OF IMAGE"> It works great in IE, but not firefox or chrome. Any way I can alter this to get it to work in all 3 or at least Firefox and IE. Thanks for the help! How do I make a swf pop up, on load, on a home page? Similar to the lightbox technique, I want an swf file to pop up on the home page when it first loads. I have looked into a similar type of script called "milkbox" but have had no luck. Any Advice would be greatly appreciated as I need this working within a day. Thank you so much and sorry if this should be posted in the Flash Section. How do you make an image begin to load after a certain amount of time? e.g 3 seconds.
I have a single webpage that contains information on all 50 U.S. states. There are 50 links at the top to jump down to the state you want, and at the bottom of the information for each state a Back to Top link. I'm making the Back to Top link into something more complex, and it will require three or four lines of code. So that I don't have to repeat the code 50 times, and create a burden when I need to edit it, I want to place it in a .js file and call it x. Then below the information for each state I'll simply have: Code: <script language="JavaScript">document.write(x)</script> Does calling code from a .js file 50 times slow down the page load? Which method would load faster? Or is the difference negligible? Thank you, Peter Hi. I am new here. I wanted help for a JavaScript code. You might think I'm lazy for not writing it myself, but the truth is I am not a JavaScript coder. I just have a really simple website and I am trying to do something for which I know JS is required but I don't know how to do it. I've also searched around but couldn't find the appropriate code. What I want to do is to make an html page load a different background image every time it refreshes. I will have a list of background images and I want to be able to add in this list, without having to change anything else in the codes after I do this (I think this is made by making an array of images and by putting .length somewhere in the codes, but I don't know exactly how I should do this). I already know how to do an external file (.js) and link to it from my .html page. Now I want the code to put in the .js file, and the code to put in the <body> of my .html file. Please help me Thanks Here are the coding.. Code: <jsp:useBean id="chequeStopBean" scope="session" class="my.com.infopro.ibank.ui.bean.ChequeStopBean"/>
<jsp:useBean id="labelBean" scope="session" class="my.com.infopro.ibank.ui.bean.LabelBean"/>
<jsp:useBean id="lang" scope="session" class="my.com.infopro.ibank.ui.bean.LanguageBean" />
<%@ page language="java" import = "java.util.*" errorPage="" %>
<%@ page import="my.com.infopro.ibank.dto.ChequeDTO"%>
<%
request.getSession(true);
String contextPath = request.getContextPath();
chequeStopBean.queryAccList();
//RequestDispatcher dispatcher = null;
%>
<html>
<head>
<title><%=labelBean.getLabel("STOP_CHEQUE")%></title>
<meta HTTP-EQUIV="Pragma" content="no-cache">
<meta HTTP-EQUIV="Expires" content="-1">
<jsp:include page="/ScriptHeader.jsp"/>
<script language="javascript">
function validateAndSubmit() {
var msg1 = "<%=labelBean.getLabel("MSG_REQUIRED_FIELD")%>";
var msg2 = "<%=labelBean.getLabel("MSG_CANNOT_CONTAIN_CHARACTER")%>";
var msg3 = "<%=labelBean.getLabel("MSG_IN_THE_FIELD")%>";
var msg4 = "<%=labelBean.getLabel("MSG_PLEASE_ENTER")%>";
var msg5 = "<%=labelBean.getLabel("WITH")%>";
var msg6 = "<%=labelBean.getLabel("TO")%>";
var msg7 = "<%=labelBean.getLabel("MSG_CHARACTER")%>";
var msg8 = "<%=labelBean.getLabel("MSG_PLEASE_ENTER_VALID_NUMBER")%>";
var msg9 = "<%=labelBean.getLabel("MSG_REQUIRED_FIELD")%>";
var msg10 = "<%=labelBean.getLabel("MSG_WITH_EXACTLY")%>";
var msg11 = "<%=labelBean.getLabel("MSG_WITH_VALID_DATE")%>";
var msg12 = "<%=labelBean.getLabel("MSG_EXAMPLE_DATE")%>";
var msgNum11 = "<%=labelBean.getLabel("MSG_WITH_A_MINIMUM_VALUE_OF")%>";
var msgNum12 = "<%=labelBean.getLabel("MSG_WITH_A_MAX_VALUE_OF")%>";
var msgNum13 = "<%=labelBean.getLabel("MSG_PLEASE_ENTER_ROUND_INETEGER")%>";
var msgNum14 = "<%=labelBean.getLabel("MSG_PLEASE_ENTER_AT_MOST")%>";
var msgNum15 = "<%=labelBean.getLabel("MSG_DECIMAL_PLACES")%>";
var msgEnter = "<%=labelBean.getLabel("MSG_PLEASE_ENTER_VALID")%>";
var errorMsg = "<%=labelBean.getLabel("MSG_LOWECASE_ALPHABET_ALLOWED")%>"
var radioButtons = document.getElementsByName("radio");
for (var x = 0; x < radioButtons.length; x ++) {
if (radioButtons[x].checked) {
if(radioButtons[x].value=="1")
{
if (! validateTextEntry(form.chqNum, "<%=labelBean.getLabel("CHQNUM")%>" + " ", true,11,11, msg1, msg2, msg3,
msg4, msg5, msg6, msg7, msg10) )
return false;
if (! validateAlphabet(form.chqNum, "" + " ",1, msg2,"" ))
return false;
}
else if(radioButtons[x].value=="2")
{
if (! validateTextEntry(form.chqNumFrom, "<%=labelBean.getLabel("CHQNUMFROM")%>" + " ", true,11,11, msg1, msg2, msg3,
msg4, msg5, msg6, msg7, msg10) )
return false;
if (! validateTextEntry(form.chqNumTo, "<%=labelBean.getLabel("CHQNUMTO")%>" + " ", true,11,11, msg1, msg2, msg3,
msg4, msg5, msg6, msg7, msg10) )
return false;
if (! validateAlphabet(form.chqNumFrom, "" + " ",1, msg2,"" ))
return false;
if (! validateAlphabet(form.chqNumTo, "" + " ",1, msg2,"" ))
return false;
if(form.chqNumFrom.value == form.chqNumTo.value){
alert("<%=labelBean.getLabel("MSG_CANNOT_SAME")%>");
return false;
}
}
}
}
return true;
}
function show(id)
{
if (document.getElementById(id).style.display == 'none')
{
document.getElementById(id).style.display = 'block';
}
}
//-->
<!--
function hide(id)
{
document.getElementById(id).style.display = 'none';
}
</script>
</head>
<body onload="show('single')">
<form name="form" method="POST" action="<%=contextPath%>/ChequeStopServlet?tranx=confirm" dir="<%=lang.getDir()%>" >
<table width="500" align="center">
<tr>
<td align="left" colspan="3"> </td>
</tr>
<tr>
<td align="left" colspan="3" class="mainHeader"><%=labelBean.getLabel("STOP_CHEQUE")%></td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td colspan="3" class="subHeader"><%=labelBean.getLabel("CHQ_DETAIL") %></td>
</tr>
<tr>
<td colspan="3"><div align="center">
<p class="statusError">
<%if(request.getParameter("error") != null) out.println(labelBean.getLabel(request.getParameter("error"))); else out.println("");%>
</p>
</div></td>
</tr>
</table><br />
<table width="500" align="center">
<tr>
<td class="lbl"><span class="requiredFieldIndicator">* </span><%=labelBean.getLabel("ACC_NUMBER")%></td>
<td width="10" class="lbl">:</td>
<td width="305" align="left">
<select size="1" name="accNum">
<%
for (Iterator iter = chequeStopBean.getAccList().iterator(); iter.hasNext();) {
ChequeDTO chqDto = (ChequeDTO)iter.next();
%>
<option value="<%=chqDto.getAccNum()%>"><%=chqDto.getAccNum()%></option>
<% } %>
</select>
</td>
</tr>
<tr>
<td align="right">
<input type="radio" class="radioStyle" name="radio" value="1" onfocus="show('single');hide('multiple');hide('multiple1');return true;" checked="checked" >
<%=labelBean.getLabel("STOP_SINGLE")%>
</td>
<td> </td>
<td>
<input type="radio" class="radioStyle" name="radio" value="2" onfocus="hide('single');show('multiple');show('multiple1');return true;">
<%=labelBean.getLabel("STOP_MULTIPLE")%>
</td>
</tr>
<tr id="single">
<td class="lbl"><span class="requiredFieldIndicator">* </span><%=labelBean.getLabel("CHEQUE_NUMBER")%></td>
<td class="lbl"width="10">:</td>
<td colspan="2" align="left">
<input name="chqNum" type="text" size="15">
</td></tr>
<tr id="multiple" style="display: 'none'">
<td class="lbl"><span class="requiredFieldIndicator">* </span><%=labelBean.getLabel("FROM_CHEQUE_NUMBER")%></td>
<td class="lbl"width="10">:</td>
<td colspan="2" align="left">
<input name="chqNumFrom" type="text" size="15">
</td></tr>
<tr id="multiple1" style="display: 'none'">
<td class="lbl"><span class="requiredFieldIndicator">* </span><%=labelBean.getLabel("TO_CHEQUE_NUMBER")%></td>
<td class="lbl"width="10">:</td>
<td colspan="2" align="left">
<input name="chqNumTo" type="text" size="15">
</td></tr>
<tr>
<td class="lbl"><span class="requiredFieldIndicator">* </span><%=labelBean.getLabel("REASON")%></td>
<td class="lbl" width="10" >:</td>
<td colspan="2">
<select name="reason">
<option value="Lost"><%=labelBean.getLabel("LOST")%></option>
<option value="Stolen"><%=labelBean.getLabel("STOLEN")%></option>
<option value="Payment Cancellation"><%=labelBean.getLabel("PAYMENT_CANCELLATION")%></option>
<option value="Others"><%=labelBean.getLabel("OTHERS")%></option>
</select>
</td>
</tr>
<br/>
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td colspan="3" align="center">
<input class="button" type="submit" value="Next" onClick="return validateAndSubmit();" >
</td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td colspan="3" align="left" class="footer"><%=labelBean.getLabel("NOTE")%>
</td>
</tr>
<tr><td colspan="3" class="footer">
<ul>
<li><%=labelBean.getLabel("THE_ASTERISK")%></li>
</ul>
</td>
</tr>
</table>
<jsp:include page="/Footer.jsp" />
</form>
</body>
</html>
This is error for the first page.. This is picture that which i wan.. Thanks! Hello, i would like to advise me on sthg. I have built a website using a)MySQL b)HTML c)PHP and d)Javascript. My website consists of basic html pages/templates which have links to the left and point to another templates/pages. For example, i have 4 templates in my site 1st template is for: News 2nd : Library 3nd : Articles 4th : E-shop Each template consists of 1. a small menu with links,every link points to another page 2.space for the content/text of the html page 3. a form for searching in the website using php and a mysql database. Well, i'm thinking of adding some animation in my website using the jquery library.Let's say we have an accordion which has 4 choices and when the user clicks on the first choice the 1st template(NEWS) appears inside the slide of accordion,loads in the same slide, not in a new page!!!This is what i would like to do, place in each slide of the accordion one of my templates. CAn this be done??? Which are the disadvantages of adding in each slide of the accordion a different template for my site and remain in the same slide when the user clicks in one of the links of the template??? Consider that i'm using dynamic content and not static, i have a MySQL database behind. Also,as i have seen in most examples the options of accordion usually contain an image, a content, a text or links which open in a new window or tab not inside the slide!!!These links do not load in the same slide!!i would like to have a template which loads in the slide each time the user clicks on a link of it. CAn this be done?? I would be glad if sm could advise me! Thanks, in advance!!! Hi All, I have two scripts which I want to try and integrate. I am using a nice gallery script to show thumbnails which are appended to a an image wrapper which on click of the thumbnail shows the larger image in the image wrapper, I am trying to implement cloud zoom which is a plugin which uses image srcs to then point to an anchor href to show another larger zoom image either in the same place.. which is what I am trying to do or in another div beside. I have had to set me img srcs up in a certain way to easily enter some product details. and I need to try an manipulate the code to make it work to suit my file layout. I am using a var= images [ with a series of file locations and info such as below { src: 'romanticabride/thumbs/tn_Shauna.jpg', srcBig: 'romanticabride/images/Shauna.jpg', title: 'Shauna', longDescription: '<b><H1>Shauna</H1></b><br><b>Romantica Of Devon <br><br><h2>Sizes Available:</h2><br> 6 - 32.<b><br><b><br><b><b><b><H2>Colours Available:</h2><b><br>Various<br>Please Enquire Below<br><br><br><br><a href="mailto:tracy@cherishbridal.co.uk?subject=Web Enquiry Regarding Romantica Shauna Bridal Gown"class="enquiry rose glow" >Click To Enquire About This Item </a>' }, what I need is for cloud zoom to work when the main image wrapper is hovered over which means it will need to add a class or when the whichever srcBig: is hovered over it gets wrapped by href to make the script work . one of my pages is http://www.cherishbridal.co.uk/romaticabride.html the cloud zoom script is at http://www.professorcloud.com/mainsite/cloud-zoom.htm.. I am happy to share a jsfiddle with someone or explain further or post some code. Thank you in advance I want this script to load after the page load the script is: Code: <script type="text/javascript" src="http://localtimes.info/clock.php?cp3_Hex=0F0200&cp2_Hex=FFFFFF&cp1_Hex=000080&fwdt=118&ham=0&hbg=0&hfg=0&sid=&mon=&wek=&wkf=&sep=&continent=Asia&country=Indonesia&city=Jakarta&widget_number=116"></script> the script in My page is like: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>My test page</title> </head> <body> <h1>Tony</h1> <h2>Welcome Tony Website</h2> <script type="text/javascript" src="http://localtimes.info/clock.php?cp3_Hex=0F0200&cp2_Hex=FFFFFF&cp1_Hex=000080&fwdt=118&ham=0&hbg=0&hfg=0&sid=&mon=&wek=&wkf=&sep=&continent=Asia&country=Indonesia&city=Jakarta&widget_number=116"></script> <h3>Tony is ... and is....</h3> <h3>He will....</h3> </body> </html> So how can I make this script loads after all elements of My page are loaded and without changing it's position (the script position)? Hi, I was wondering how to add a "loading page please wait" page to my web page, and then run any javascript only after the page loads? My web page contains some fade in/out scripts for pages, and all my pages are basically just divs and in one html file. Just a simple black container (not entire web page) with the words "loading" or something would be fine, then this page would fade out, then my main page would fade in. Thanks. Hello, Well I have script that claims that it loads the flash content while it is showing seconds or advertisement. So as I don't know about scripts I have no Idea if it actually do that or not as What I visually see is that it let flash content load once the seconds of disappears. So that's why I want an expert advice on it. And how the seconds of this script works Only if this script actually do what It claims, then I would like to know when does it send alert to load the content (as I would like to put the alert from the start) and how to show it for more or less seconds. Relevant Markup: Live Demo http://files.cryoffalcon.com/MyFootP...%20Loader.html What is the live demo made up of: Code: <div class="colorchooser">
<!--more-->
<div class="displaygame_part">
<center>
<div id="ads" class="ads">
<h1>
ADVERTISEMENT</h1>
<center>
<script type="text/javascript"><!--
google_ad_client = "ca-pub-0726197409084548";
/* bloghutsgame */
google_ad_slot = "5324930917";
google_ad_width = 336;
google_ad_height = 280;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></center>
To skip it click <a href="javascript:ShowHide();">here</a>
<script type="text/javascript">
window.onload = function() {
startCountDown(8, 1000);
}
function startCountDown(i, p, f) {
// store parameters
var pause = p;
var fn = f;
// make reference to div
var countDownObj = document.getElementById("countDown");
if (countDownObj == null) {
return;
}
countDownObj.count = function(i) {
// write out count
countDownObj.innerHTML = i;
if (i == 0) {
// execute function
fn();
// stop
return;
}
setTimeout(function() {
// repeat
countDownObj.count(i - 1);
},
pause
);
}
// set it going
countDownObj.count(i);
}
</script>
<center>
<img border="0" height="117" width="201" src="@---put the link of the image of fancy pants(its the loader)---@" />
</center>
<div id="countDown" style="display: inline;">
</div>
seconds for the game to load...
</div>
<div id="gamecontent" style="visibility:hidden; display:none">
<div class="gofulldear">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="100%" height="100%"> <param name="movie" value="http://games.balloontowerdefense.net/b/balloon_tower_defense_4_expansion.swf">
<param name="quality" value="high">
<param name="allowNetworking" value="internal">
<embed src="http://games.balloontowerdefense.net/b/balloon_tower_defense_4_expansion.swf" width="100%" height="100%" align="center" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" allownetworking="internal"></embed> </object>
</div>
</div>
<script type="text/javascript">
function turn_vis_on(id) {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById(id).style.display = 'inline';
obj = document.getElementById(id);
obj.style.visibility = "visible";
}
}
function turn_vis_off(id){
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById(id).style.display = 'none';
obj = document.getElementById(id);
obj.style.visibility = "hidden";
}
}
function ShowHide()
{
turn_vis_off("ads");
turn_vis_on("gamecontent");
// alert('4sec!');
}
document.getElementById("ads").style.zIndex = 100;
timeoutID = setTimeout(ShowHide, 15000);
</script>
</center></div>
</div>
Note: It is game so there can be sound or music in it./ For any more information requirement please let me know I will edit it, so to make it as relevant as possible^^. Hey every1. Im a web design student who is trying to make my first webpage for a school project. my problem: I have 2 javascripts i would like to run smooth on my page, but they wont. I have read the info about using the <body onload="dothis()"; "dothat()"> but my problem is the way the 1 javascript is made. i believe so that is. First script: A matrix look-a-like screen for a link. Code: <script type="text/javascript">
// <![CDATA[
var height=9; // height of the effect in rows - must be an odd number
var speed=66; // lower is faster
var reveal=99; // between 0 and 100
// the higher, the faster the word is 'decoded'
var repeat=10; // if '0' the script does not repeat
// if set to a number this is the delay until the script repeats
var alink="http://www.noma.nu"; // place to link to
// set to alink="" if not needed
/***************************\
* The Matrix JavaScripted.. *
*(c) 2003-6 mf2fm web-design*
* http://www.mf2fm.com/rv *
* DON'T EDIT BELOW THIS BOX *
\***************************/
var timer, table, x, y, columns, ma_txt, ma_cho;
reveal/=100;
var m_coch=new Array();
var m_copo=new Array();
window.onload=function() This is part im having troubles with. If i do as your toturial tells me i should put Function() down in the body onload command. But it wont work. { if (document.getElementById) {
var matrix, tbody, tr, td;
matrix=document.getElementById("matrix");
ma_txt=matrix.firstChild.nodeValue;
ma_txt=" "+ma_txt+" ";
columns=ma_txt.length;
while (matrix.childNodes.length) matrix.removeChild(matrix.childNodes[0]);
table=document.createElement("table");
table.cellSpacing=0;
table.style.margin="auto";
table.style.width="auto";
table.style.border="none";
tbody=document.createElement("tbody");
for (x=0; x<height; x++) {
tr=document.createElement("tr");
for (y=0; y<columns; y++) {
td=document.createElement("td");
td.className="matrix";
td.appendChild(document.createTextNode(String.fromCharCode(160)));
tr.appendChild(td);
}
tbody.appendChild(tr);
}
table.appendChild(tbody);
matrix.appendChild(table);
ma_cho=ma_txt;
for (x=0; x<columns; x++) {
m_copo[x]=0;
ma_cho+=String.fromCharCode(32+Math.floor(Math.random()*94));
}
x=0;
timer=setInterval("mytricks()", speed);
}}
function mytricks() {
var mtmp, mrow;
var z=x;
x=0;
for (y=0; y<columns; y++) {
x=x+(m_copo[y]==100);
mrow=m_copo[y]%100;
if (mrow && m_copo[y]<100) {
if (mrow<height+1) {
mtmp=table.rows[mrow-1].cells[y];
mtmp.firstChild.nodeValue=m_coch[y];
mtmp.style.color="#33ff66";
mtmp.style.fontWeight="bold";
}
if (mrow>1 && mrow<height+2) {
mtmp=table.rows[mrow-2].cells[y];
mtmp.style.fontWeight="normal";
mtmp.style.color="#00ff00";
}
if (mrow>2) table.rows[mrow-3].cells[y].style.color="#009900";
if (mrow<Math.floor(height/2)+1) m_copo[y]++;
else if (mrow==Math.floor(height/2)+1 && m_coch[y]==ma_txt.charAt(y)) zoomer(y);
else if (mrow<height+2) m_copo[y]++;
else if (m_copo[y]<100) m_copo[y]=0;
}
else if (Math.random()>0.9 && m_copo[y]<100) {
if (reveal>Math.random() && (z+1)/columns>Math.random()) m_coch[y]=ma_cho.charAt(y);
else m_coch[y]=ma_cho.charAt(Math.floor(Math.random()*ma_cho.length));
m_copo[y]++;
}
}
if (x==columns) {
if (repeat) {
ma_cho=ma_txt;
for (x=0; x<columns; x++) {
m_copo[x]=0;
ma_cho+=String.fromCharCode(32+Math.floor(Math.random()*94));
}
}
else clearInterval(timer);
}
}
function zoomer(ycol) {
var mtmp, mtem, ytmp;
if (m_copo[ycol]==Math.floor(height/2)+1) {
for (ytmp=0; ytmp<height; ytmp++) {
mtmp=table.rows[ytmp].cells[ycol];
mtmp.firstChild.nodeValue=m_coch[ycol];
mtmp.style.color="#33ff66";
mtmp.style.fontWeight="bold";
if (alink) {
mtmp.style.cursor="pointer";
mtmp.onclick=function() {window.location.href=alink};
}
}
mtmp=ma_cho.indexOf(ma_txt.charAt(ycol));
m_copo[ycol]+=199;
setTimeout("zoomer("+ycol+")", speed);
}
else if (m_copo[ycol]>200) {
mtmp=table.rows[m_copo[ycol]-201].cells[ycol];
mtem=table.rows[200+height-m_copo[ycol]].cells[ycol];
m_copo[ycol]-=1;
mtmp.style.fontWeight="normal";
mtem.style.fontWeight="normal";
setTimeout("zoomer("+ycol+")", speed);
}
else if (m_copo[ycol]==200) m_copo[ycol]=100+Math.floor(height/2);
if (m_copo[ycol]>100 && m_copo[ycol]<200) {
mtmp=table.rows[m_copo[ycol]-101].cells[ycol];
mtmp.firstChild.nodeValue=String.fromCharCode(160);
mtem=table.rows[100+height-m_copo[ycol]].cells[ycol];
mtem.firstChild.nodeValue=String.fromCharCode(160);
m_copo[ycol]-=1;
setTimeout("zoomer("+ycol+")", speed);
}
}
// ]]>
</script>
Second script: a simple digital clock. Code: <script type="text/javascript">
function showClock()
{
// create a new Date() object
var currentTime=new Date();
var hours=currentTime.getHours();
var minutes=currentTime.getMinutes();
var seconds=currentTime.getSeconds();
var area=currentTime.getTimezoneOffset();
area=area/60;
var clock=hours;
// add a zero in front of numbers<10
if (minutes<10){
minutes="0" + minutes;
}
if (seconds<10){
seconds="0" + seconds;
}
document.getElementById('clock').innerHTML="<table><tr><td width=80 align=center>"+clock+":"+minutes+":"+seconds+"</td>"
+""
+"";
t=setTimeout('showClock()',500);
// setTimeout calls showClock() function every 500 miliseconds, that means 0.5 seconds
}
</script>
<body onload="showclock()"> this is where the clock load. It works fine. how do i get the other script to load with this.
I can get them both to run but not at same time. Any1 outthere who have a solution. I believe it has something to do with Function() part in the matrix code. can i change that do another command? Hello all, I made a fade script that will fade any element in or out. Works great on all browser I've tested but IE 7. With IE I have only tested this will IE 8 and IE 7. IE 7 the effect doesn't work. No error message or anything. I'm unsure what to do from here. I was hoping I could find some help here. Code: function fade(obj, duration, toggle) {
steps = 1000;
elem = document.getElementById(obj);
function fadeIn() {
for(var i = 0; i <= 1; i+=(1/steps)) {
setTimeout("elem.style.opacity = "+ i +"", i * duration);
setTimeout("elem.style.filter='alpha(opacity="+ i * 102 +")'", i * duration);
}
}
function fadeOut() {
for(var i = 0; i <= 1; i+=(1/steps)) {
setTimeout("elem.style.opacity = "+ (1-i) +"", i * duration);
setTimeout("elem.style.filter='alpha(opacity="+ (1-i) * 102 +")'", i * duration);
}
}
/* One for Fade in and anything will be fade out*/
if(toggle == 1) {
fadeIn();
}
else {
fadeOut();
}
}
Thanks, Jon W I need to assign a key in the javascript to actually make the javascript work,. I have a bookmark in chrome , a javascript , which actually works when clicked on it .,. but how can i edit it so that i can actually make it work on click a key or combination of keys. i want to declare the key or keycombo in the script itself .,. the script is for catching the selected text on the webpage and opening a new tab(or window) and doing an exact search search of the selected text using google.com .,., So I want it to work it this way ., select the text press a key and it opens a new tab (or window) with an xact search .,. i want to declare the key or keycombo in the script itself .,. the script is for catching the selected text on the webpage and opening a new tab(or window) and doing an exact search search of the selected text using google.com .,., So I want it to work it this way ., select the text press a key and it opens a new tab (or window) with an xact search .,. Thanks in advance ., Nani Code: <script type="text/javascript">
<!--
NS4 = (document.layers) ? true : false;
function launchVsee2() {
try {
location='vsee:';
} catch (err) {
location='http://www.vsee.com';
return true
}
}
//-->
</script>
This app works as a URI and can be triggered to run in an address bar, when launched it will launch the app. Now, I can get this script to run in Firefox; it will test for the URI and if not avail it will redirect to the site website of that app. However when I run this in IE it will just load a page that says the site is in valid and not redirect. Anyone have any tips on how to get this working in IE. ALSO in addition this will not run in Safari either; same issue as IE. Thanks in advance I am terrible at this. I want to get this functionality seen here http://davidlynch.org/js/maphilight/docs/demo_usa.html (image map areas highlighting on mouseover) to work on this here http://scratchitrich.com/test/ can anybody walk me through how to make this work? Thanks! |
|||||||