JavaScript - How To Make A Configuration Page?

I am not that great with web design but i am trying to create something like this site http://www.avrilbandaids.com/voteomatic/

I am trying to make something for my site - andygrammernation.com that is similar to this but with a different color scheme and with the mediabase link changed to vote for Andy instead of Avril. If anyone knows how to do this and would like to walk me through it that would be amazing!!!

Thank you all so much!!!

I don't want my sidebar columns to be too long when the main content is shorter. Is there any way (javascript? jquery? something else?) to only let certain divs load when the main content reaches a certain height?

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

Hello,

I'm using "Cut & Paste Multiple Dynamic Combo Boxes" script. I want to configure it, so at first only 1st combo box is visible and the rest are hidden and only populate based on the selections. Also, when the last parameter (from the 5th combo box) was selected, I need to show the table with the search results based on the all selected parameters.

Here is what I have so far:
Code:

<script language="JavaScript" type="text/javascript">
<!--

/*
*** Multiple dynamic combo boxes
*** by Mirko Elviro, 9 Mar 2005
*** Script featured and available on JavaScript Kit (http://www.javascriptkit.com)
***
***Please do not remove this comment
*/

// This script supports an unlimited number of linked combo boxed
// Their id must be "combo_0", "combo_1", "combo_2" etc.
// Here you have to put the data that will fill the combo boxes
// ie. data_2_1 will be the first option in the second combo box
// when the first combo box has the second option selected


// first combo box

	data_1 = new Option("1", "$");

// second combo box

	data_1_1 = new Option("11", "-");
	data_1_2 = new Option("12", "-");
	data_1_3 = new Option("13", "-");

// third combo box

	data_1_1_1 = new Option("111", "*");
	data_1_2_1 = new Option("121", "*");
	data_1_3_1 = new Option("131", "*");

// fourth combo box

	data_1_1_1_1 = new Option("1111","%")
	data_1_1_1_2 = new Option("1112","%")
	data_1_2_1_1 = new Option("1211","%")
	data_1_3_1_1 = new Option("1311","%")
	data_1_3_1_2 = new Option("1312","%")
	data_1_3_1_3 = new Option("1313","%")

// fifth combo box

	data_1_1_1_1_1 = new Option("11111","%")
	data_1_1_1_1_2 = new Option("11112","%")
	data_1_1_1_2_1 = new Option("11121","%")
	data_1_1_1_2_2 = new Option("11122","%")
	data_1_1_1_2_3 = new Option("11123","%")
	data_1_1_1_2_4 = new Option("11124","%")
	data_1_2_1_1_1 = new Option("12111","%")
	data_1_3_1_1_1 = new Option("13111","%")
	data_1_3_1_2_1 = new Option("13121","%")
	data_1_3_1_2_2 = new Option("13122","%")
	data_1_3_1_2_3 = new Option("13123","%")
	data_1_3_1_2_4 = new Option("13124","%")
	data_1_3_1_2_5 = new Option("13125","%")
	data_1_3_1_3_1 = new Option("13131","%")
	data_1_3_1_3_2 = new Option("13132","%")

// other parameters

    displaywhenempty=""
    valuewhenempty=-1

    displaywhennotempty="-select-"
    valuewhennotempty=0


function change(currentbox) {
	numb = currentbox.id.split("_");
	currentbox = numb[1];

    i=parseInt(currentbox)+1

// I empty all combo boxes following the current one

    while ((eval("typeof(document.getElementById(\"combo_"+i+"\"))!='undefined'")) &&
           (document.getElementById("combo_"+i)!=null)) {
         son = document.getElementById("combo_"+i);
	     // I empty all options except the first one (it isn't allowed)
	     for (m=son.options.length-1;m>0;m--) son.options[m]=null;
	     // I reset the first option
	     son.options[0]=new Option(displaywhenempty,valuewhenempty)
	     i=i+1
    }


// now I create the string with the "base" name ("stringa"), ie. "data_1_0"
// to which I'll add _0,_1,_2,_3 etc to obtain the name of the combo box to fill

    stringa='data'
    i=0
    while ((eval("typeof(document.getElementById(\"combo_"+i+"\"))!='undefined'")) &&
           (document.getElementById("combo_"+i)!=null)) {
           eval("stringa=stringa+'_'+document.getElementById(\"combo_"+i+"\").selectedIndex")
           if (i==currentbox) break;
           i=i+1
    }


// filling the "son" combo (if exists)

    following=parseInt(currentbox)+1

    if ((eval("typeof(document.getElementById(\"combo_"+following+"\"))!='undefined'")) &&
       (document.getElementById("combo_"+following)!=null)) {
       son = document.getElementById("combo_"+following);
       stringa=stringa+"_"
       i=0
       while ((eval("typeof("+stringa+i+")!='undefined'")) || (i==0)) {

       // if there are no options, I empty the first option of the "son" combo
	   // otherwise I put "-select-" in it

	   	  if ((i==0) && eval("typeof("+stringa+"0)=='undefined'"))
	   	      if (eval("typeof("+stringa+"1)=='undefined'"))
	   	         eval("son.options[0]=new Option(displaywhenempty,valuewhenempty)")
	   	      else
	             eval("son.options[0]=new Option(displaywhennotempty,valuewhennotempty)")
	      else
              eval("son.options["+i+"]=new Option("+stringa+i+".text,"+stringa+i+".value)")
	      i=i+1
	   }
       //son.focus()
       i=1
       combostatus=''
       cstatus=stringa.split("_")
       while (cstatus[i]!=null) {
          combostatus=combostatus+cstatus[i]
          i=i+1
          }
       return combostatus;
    }
}

//-->
</script>

<form>
<table style="width: 49%">
				<tr>
					<td style="width: 200px">Option 1:</td>
					<td style="width: 213px">
<select name="combo0" id="combo_0" onChange="change(this);" style="width:200px;">
	<option value="none">-select-</option>
	<option value="1">1</option>
</select></td>
				</tr>
				<tr>
					<td style="width: 200px">Option 2:</td>
					<td style="width: 213px">
<select name="combo1" id="combo_1" onChange="change(this)" style="width:200px;">
	<option value="">  </option>
</select></td>
				</tr>
				<tr>
					<td style="width: 200px">Option 3:</td>
					<td style="width: 213px">
<select name="combo2" id="combo_2" onChange="change(this);" style="width:200px;">
	<option value="">  </option>
</select></td>
				</tr>
				<tr>
					<td style="width: 200px">Option 4:</td>
					<td style="width: 213px">
<select name="combo3" id="combo_3" onChange="change(this);" style="width:200px;">
	<option value="">  </option>
</select></td>
				</tr>
				<tr>
					<td style="width: 200px">Option 5:</td>
					<td style="width: 213px">
<select name="combo4" id="combo_4" onChange="change(this);" style="width:200px;">
	<option value="">  </option>
</select></td>
				</tr>
			</table></form>

This script is used in my html page and I don't have a database to choose from. So, I wonder if it's possible to make all these modifications with only html and JavaScript. Any help will be appreciated.

Thanks in advance.

Hello,

I am currently learning JS and want to use the following to add a counter alongside the "Items Remaining" to countdown from 5 then once the max number has been reached my button to disappear and it say "finished". Can anyone help me please?

Code:

<!doctype html>
<html>
<head>
<title>Adding Numbers Together</title>
</head>

<body>
<form id = "frmOne">
<table border="1" >

	<tr> <th> Items Remaining </th> <td><Input Type="Text" Name="val" > </td>
	</tr>
	<tr>
	<th> Number One:</th>
	<th> Number Two:</th>
	</tr>

	<tr>
	<td> <Input Type="Text" Name="txtFirstNumber" Size="5" value=""> </td>
	<td> <Input Type="Text" Name="txtSecondNumber" Size="5" value=""> </td>
	</tr>

	<tr>
	<td colspan="2"> Totals: <textarea Name="totals" style="width: 400px; height: 300px;"></textarea></td>
	</tr>

	<tr>
	<td colspan="2"> <Input Type="Button" Name="b1" Value="Add Numbers" onClick = calculate()> </td>
	</tr>
</table>
</form>

<script>
var Totals = [ ];

function calculate() {
        var form = document.getElementById("frmOne"); 
	var A = form.txtFirstNumber.value;
	var B = form.txtSecondNumber.value;

	Totals.push( A + " + " + B + " = " + (1*A+1*B) );
        
        form.totals.value = Totals.join("\n");

	form.txtFirstNumber.value = form.txtSecondNumber.value = "";
}
</script>
</body>
</html>

On various video sites you can click cinema mode and the page goes dark, whilst you watch the video.

On my page I have a box which appears, where the user enters their name and email address. But I would like the box to remain active and in view. While the rest of the page goes darker and unusable, Like on the video player websites


How do I do this?

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

I have a php file lets say file1.php, that printing a variable, its dynamic numbers output that already always increasing, like private message numbers that coming or others :

PHP Code:
<?php
echo $variable
?>



i want to put that variable output, in another files page title, lets say file2.php or file3.html,
in the front of the another files page titles, and auto refresh every x seconds, maybe like this :

Quote:
(1) - another text in the page title
after x seconds, get a private message
Quote:
(2) - another text in the page title
after another x seconds, get another private message
Quote:
(3) - another text in the page title




or its ok if just like this, only the variable, without the another text in the page title
Quote:
(1)




please share your knowledge to make it, maybe using javascript, jquery or others

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">&nbsp;</td>
    </tr>
    <tr> 
      <td align="left" colspan="3" class="mainHeader"><%=labelBean.getLabel("STOP_CHEQUE")%></td>
    </tr>
	<tr>
	<td colspan="3">&nbsp;</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>&nbsp;</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">&nbsp;</td>
    </tr>
    <tr> 
      <td colspan="3" align="center"> 
      <input  class="button" type="submit" value="Next" onClick="return validateAndSubmit();" >      
      </td>
    </tr>
    <tr> 
      <td colspan="3">&nbsp;</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'm learning javascript, and was wondering if it was Possible to have buttons/links that you click, the whole page fades out, and then fade's in, with different stuff. here are my ideas for just changing the stuff

Text:
1. having a javascript src file to start, and then when the button is clicked, that is formatted to white, the text layer is moved down, and a new javascript file is loaded?

2.variables?

any help would be appreciated!

Thanks, Cookies, whatever this forum gives out, you may receive!

Hello. My goal is to load the JS for a specific element before displaying that element. I integrated a third part script, and it works well. I set the timer he

The JS is in my heading as <script type="text/javascript" src="countdownpro.js"></script>

About mid-body I have: <span id="countdown1">2010-07-20 00:00:00 GMT+00:00</span> which allows for the setting of a target date to countdown to.

When the page first loads it shows the above long format target time, until the js/meta tags kick in to modify it to just show the actual countdown as 00:00:00.

I have attached countdownpro.js to this post. I tried shifting the function CD_Init() to the top of the script, and also appended it inline with the .html. I tried setting the big external script to "defer", but neither arrangement worked. I also tried placing the src file right at the top.

I appreciate your help.

I want to implement a javascript function where a submit button will be submitted from the parent page each time I close a child page. Please let me know what I did wrong in my code and please elaborate your answer so that I could understand it better. Thank you so much for your help.

I have the following jscript code but it is now working.

Code:

window.onunload = submitParent;
function submitParent() 
{
  var doc = window.opener.document,
      theForm = doc.getElementById("finalForm");
      theField = doc.getElementById("finalSelected");
  theForm.submit();
  theField.trigger('click');
}

My form from the parent page is as follow. I want my jscript to just click on the submit button once.
Code:

<form id = "finalForm "name= "finalForm" method="POST" action="">
<input type="Submit" id = "finalSelected" name="finalSelected"/>

I just wrote an essay to discover it had logged me out and I lost everything.

Grrrrrrr.

Here goes again, simplified this time.

I've got a sticky footer at the bottom of the page and a spry collapsible panel which expands to reveal content on mouse over.

The problem I'm facing is that the page doesn't scroll down with it, only the scroll bar gets larger to accommodate for a manual scroll down. This is kind of useless because the user might not even realise that there's extra content there in the first place if it's not automatic.

My question is, what's the best javascript code to use to automatically scroll the page down when the spry tab is opened and where would I insert it?

I've tried all morning with no success so far!

Thanks,

Nick,

I'm copy pasting this post this time round, I don't trust this website now

Hi,

I am Aditya. I am explaining below the exact scenario where I need the help:

I am developing a web application in which I need to integrate a javascript/html editor on some of the web pages and then provide 'Edit' buttons on those web pages so that users can edit the content on that partciular html/jsp page (like editing in wiki pages) and then, when they add some content and click on submit button, the new content should appear on the web page with all the formatting (i.e. bold, italics, color and so on) which was applied by user when he was entering the text.
Now, I need help for the below issues:
1. Please suggest me a good javascript/html editor (freely downloadable) which I can use to integrate with my web pages.
2. Once the user has entered some content using the above javascript editor, how to make that content reach the server and update the corresponding web page.

I am new to web development, so may be that these questions are too simple.
But, I need some help from you.

Waiting for your reply,

Thanks,
Aditya

Hi All,
Im new to this forum...need some of your help and advice.

I have a js code like this :

<script type="text/javascript">
<!--
var sipPos = 0;
$(document).ready(function() {

$("#panel-tab").click(function(e) {
//if(autoTimer) clearTimeout(autoTimer);
//autoTimer = null;
e.preventDefault();
$("#panel").animate({ left: sipPos }, 1764, 'linear', function() {
if(sipPos == 0) { sipPos = -856; }
else { sipPos = 0; }

});
});
});
-->
</script>

what it does is that it hide and show a panel by slidint it to the left.

But my client want that on page load the panel opens automatically for about 2-3 seconds just to let users know that its here. So ive written this :

<script type="text/javascript">
<!--
var sipPos = 0;
$(document).ready(function() {
var autoTimer = null;
autoTimer = setTimeout(function(){
$("#panel").animate({ left: sipPos });
autoTimer = setTimeout(function(){
$("#panel").animate({ left: sipPos = -856 });
}, 2000);
},1000);

$("#panel-tab").click(function(e) {
//if(autoTimer) clearTimeout(autoTimer);
//autoTimer = null;
e.preventDefault();
$("#panel").animate({ left: sipPos }, 1764, 'linear', function() {
if(sipPos == 0) { sipPos = -856; }
else { sipPos = 0; }

});
});
});
-->
</script>

But when the panel finished showing the button to open it again doesn't work...any help please..really urgent.
thks

//Sam