|
JavaScript - Div State Works In Ff Fails In Ie Why???
I have a form that passes values to a next step. It has two sub divs that show depending on what's selected from the dropdowns in the top two divs.
I'm trying to keep the selected sub divs open if the user hits previous step. The divs stay open in FF but not in IE. Any ideas? dropdowns Code: <table border="0" cellspacing="0" cellpadding="2">
<tr valign="top">
<td align="right">Morning:</td>
<td><select name="wcsave_10_msession" id="wcsave_10_msession" size="1" onblur="CheckField(this.form,this,'');" onchange="display1(this,'Concurrent sessions 1-6');">
<option value="" selected="selected">Choose one</option>
<option value="Mastery session 1 - Computer Lab: Searching Essentials"> <strong>Mastery session 1</strong> - Computer Lab: Searching Essentials</option>
<option value="Concurrent sessions 1-6">Concurrent sessions 1-6</option>
</select>
</td>
</tr>
<tr valign="top">
<td> </td>
<td>
<div id="Concurrent sessions 1-6" style="display: none;">
<table class="special">
<tr valign="top">
<td>Choose a session for each time slot.<br />
(9:15 a.m. - 10:15 a.m.)<br /><select name="wcsave_10_session_mconc1" id="wcsave_10_session_mconc1">
<option value="" selected="selected">Choose one</option>
<option value="Concurrent session 1 - IRB 101 for Research Nurses">Concurrent session 1 - IRB 101 for Research Nurses</option>
<option value="Concurrent session 2 - A Research Poster Contest as a Tool to Learn About Research/EBP">Concurrent session 2 - A Research Poster Contest as a Tool to Learn About Research/EBP</option>
<option value="Concurrent session 3 - Beginning the EBP Journey: Evaluating and Synthesizing the Literature">Concurrent session 3 - Beginning the EBP Journey: Evaluating and Synthesizing the Literature</option>
</select>
</td>
</tr>
<tr valign="top">
<td>(10:30 a.m. - 11:30 a.m.)<br /><select name="wcsave_10_session_mconc2" id="wcsave_10_session_mconc2">
<option value="" selected="selected">Choose one</option>
<option value="Concurrent session 4 - Making Sense of Statistics When Reading Research">Concurrent session 4 - Making Sense of Statistics When Reading Research</option>
<option value="Concurrent session 5 - Original Research Presentations">Concurrent session 5 - <em>Original Research Presentations</em></option>
<option value="Concurrent session 6 - IRB Considerations with Vulnerable Populations">Concurrent session 6 - IRB Considerations with Vulnerable Populations</option>
</select>
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr valign="top">
<td colspan="2"> </td>
</tr>
<tr valign="top">
<td align="right">Afternoon:</td>
<td><select name="wcsave_10_asession" id="wcsave_10_asession" size="1" onblur="CheckField(this.form,this,'');" onchange="display2(this,'Concurrent sessions 7-12');"><!--showDiv(this.value)-->
<option value="" selected="selected">Choose one</option>
<option value="Mastery session 2 - Beyond the Basics of Searching!"><strong>Mastery session 2</strong> - Beyond the Basics of Searching!</option>
<option value="Concurrent sessions 7-12">Concurrent sessions 7-12</option>
</select>
</td>
</tr>
<tr valign="top">
<td> </td>
<td>
<div id="Concurrent sessions 7-12" class="hiddenDiv">
<table class="special">
<tr valign="top">
<td>Choose a session for each time slot.<br />
(1:45 p.m. - 2:45 p.m.)<br /><select name="wcsave_10_session_aconc1" id="wcsave_10_session_aconc1">
<option value="" selected="selected">Choose one</option>
<option value="" selected="selected">Choose one</option>
<option value="Concurrent session 7 - EBP Protocols">Concurrent session 7 - EBP Protocols</option>
<option value="Concurrent session 8 - Writing for Publication">Concurrent session 8 - Writing for Publication</option>
<option value="Concurrent session 9 - Original Research Presentations">Concurrent session 9 - Original Research Presentations</option>
</select>
</td>
</tr>
<tr valign="top">
<td>(3:00 p.m. - 4:00 p.m.)<br /><select name="wcsave_10_session_aconc2" id="wcsave_10_session_aconc2">
<option value="" selected="selected">Choose one</option>
<option value="Concurrent session 10 - Writing a Research Question Using PICO">Concurrent session 10 - Writing a Research Question Using PICO</option>
<option value="Concurrent session 11 - EBP Project Presentations">Concurrent session 11 - EBP Project Presentations</option>
<option value="Concurrent session 12 - The Role of the Research Facilitator">Concurrent session 12 - The Role of the Research Facilitators</option>
</select>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
javascript: Code: var lastDiv = "";
function showDiv(divName) {
var items = document.getElementById('wc_addItem_ADV');
var form = document.getElementById('webcredit');
var total = document.getElementById('Total');
var amount = document.getElementById('amount');
// set checkboxes to 0
for (var i = 0; i < form.elements.length; i++ ) {
if (form.elements[i].type == 'checkbox') {
form.elements[i].checked = false;
document.getElementById(form.elements[i].id).value = "0";
}
}
total.value = '';
amount.value= '';
// hide last div
if (lastDiv) {document.getElementById(lastDiv).className = "hiddenDiv";}
//if value of the box is not nothing and an object with that name exists, then change the class
if (divName && document.getElementById(divName)) { document.getElementById(divName).className = "visibleDiv"; lastDiv = divName;
}
}
function showInitialDiv() {
var selBox = document.getElementById('wcsave_10_session_mconc1');
if (selBox == undefined || selBox == null)
return;
var val = selBox.options[selBox.selectedIndex].value;
if (val == null || val == '')
return;
showDiv(val);
}
I only call one of the sub div ID's but it seems to work in FF with no errors. Everything is called with: Code: <body onload="showInitialDiv();"> Similar TutorialsHey all, I have this code, that saves the "play" or "pause" audio-tag state in a cookie for recognizing on different pages. This code only works properly in Chrome, but not in other browsers. In IE, it doesn't save/recognize the cookies, apparently. And in Firefox, I don't even get the audio to play. Code: $(document).ready(function(){
if ($.cookie("audioState") == "pause") {
$("p#sound audio").get(0).pause();
$("p#sound span#sound-icon").css({backgroundPosition: "0 -37px"});
}
else if ($.cookie("audioState") == "play") {
$("p#sound audio").get(0).play();
$("p#sound span#sound-icon").css({backgroundPosition: "0 0"});
}
$("p#sound").click(function() {
var song = $(this).find("audio").get(0);
var soundIcon = $(this).find("span#sound-icon");
if (song.paused) {
song.play();
soundIcon.css({backgroundPosition: "0 0"}).hide().stop(1, 1).fadeIn(500);
$.cookie("audioState", "play");
} else {
song.pause();
soundIcon.css({backgroundPosition: "0 -37px"}).hide().stop(1, 1).fadeIn(500);
$.cookie("audioState", "pause");
}
});
});
Code: <p id="sound">MUSIC <span id="sound-icon"></span> <audio autoplay="autoplay" loop="loop"> <source src="audio/Breather2000-Afterlife.ogg" type="audio/ogg" /> <source src="audio/Breather2000-Afterlife.mp3" type="audio/mp3" /> Your browser does not support the audio tag. </audio> </p> What am I doing wrong? Thanks already! Ok, This one has plagued me for some time now. I am parsing an XML file for a search feature. On my local machine, the code below works fine in FF, but when I upload it, I get an error stating y[0] (the root element) is undefined. I think the problem may be with my onload method but I can't be sure. Code: function importXML()
{
if (document.implementation && document.implementation.createDocument)
{
xmlDoc = document.implementation.createDocument("", "", null);
xmlDoc.onload = createTable;
}
else if (window.ActiveXObject)
{
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async=false;
xmlDoc.onreadystatechange = function () {
if (xmlDoc.readyState==4) createTable();
}
}
else
{
alert('Your browser can\'t handle this script');
return;
}
xmlDoc.load("catalog.xml");
}
// and now for the part that fails
var y = xmlDoc.getElementsByTagName('data');
var dcount = 0;
for (t=0;t<y[0].childNodes.length;t++) { //this is the line where FF reports the error
if (y[0].childNodes[t].tagName == "record") {
dcount++;
}
}
The xml syntax is as follows Code: <data> <record> <item 1>text</item 1> <item 2>text</item 2> <item 3>text</item 3> </record> <record> <item 1>text</item 1> <item 2>text</item 2> <item 3>text</item 3> </record> </data> I just can't figure out why this works locally and not on the server. IE works fine, but then again it uses the activeXObject method so it should function differently. hi everyone, this is my 1st post here in this community forum, just would like to say "HI" to everyone. i would like to share with you my experience in developing multiple dependency selection form developed in java script, how this script works is that when 1st selection is selected, based on the value the user select, a second level selection will appear and so on. below is the Java-script code along with my form code too Javascript: <script type="text/javascript"> function nextSelect(o) { if (o.value == '0') { var next = o.nextSibling; while (next && next.nodeName != 'SELECT') { next = next.nextSibling; } next.length = 0; return; } var d = document; var useSelect = d.getElementById(o.name + '_' + o.value); if (!useSelect) { alert('Unknown id: ' + o.name + '_' + o.value); return; } var copy = useSelect.cloneNode(true); copy.style.display = 'inline'; var next = o.nextSibling; while (next && next.nodeName != 'SELECT') { next = next.nextSibling; } next.parentNode.insertBefore(copy, next); next.parentNode.removeChild(next); } </script> my form: <div style="display: none;"> <!-- ##### First Selection ####### --> <select name="second" id="first_dp" onchange="nextSelect(this);"> <option value="0">Choose</option> <option value="dp_2_38">2 3/8'</option> <option value="dp_4">4'</option> </select> <select name="second" id="first_hw" onchange="nextSelect(this);"> <option value="0">Choose</option> <option value="hw_3_12">3 1/2'</option> <option value="hw_4">4'</option> </select> <!-- ####### 2nd Selection ####### --> <select name="third" id="second_dp_2_38" onchange="nextSelect(this);"> <option value="0">Choose</option> <option value="dp_2_38_4.85">4.85 lbs/ft</option> <option value="dp_2_38_6.65">6.65 lbs/ft</option> </select> <select name="third" id="second_dp_2_78" onchange="nextSelect(this);"> <option value="0">Choose</option> <option value="dp_2_78_6.85">6.85 lbs/ft</option> <option value="dp_2_78_10.4">10.4 lbs/ft</option> </select> >>>>>>and so on till 3rd selection<<<<<<<<< </div> <form action="pdfHandle.php" method="post" id="pdfsearch"> <fieldset> <table border="0" cellpadding="0" cellspacing="0"> <tr> <td width="142" height="146"> <p> Type:<br /> Size:<br /> Weight:<br /> </td> <td width="266"><select name="first" onclick="nextSelect(this);"> <option value="0">Choose</option> <option value="dp">Drill Pipe</option> <option value="hw">Heavy Weight</option> </select><br/> <select name="select"> </select> <br/> <select name="select"> </select> <br/> <select name="select"> </select> </td> </tr> </table> <p> <input type="submit" name="submit" id="submit" value="Create PDF" /> <input type="reset" value="Reset Selection" /> </p> </fieldset> </form> ----------------------------------------------------------------------- i would like to know what i am missing here and what is making Safari n chrome not to run this page properly, when u execute this code, only the 1st selection will appear while the rest of the selections are Null, i hope someone will guide me through this or direct me to solution or any other way of doing this perhaps i thank you for viewing this post. Hi, I am using jQuery for the following scenario: There is a random number of divs, each sharing the same class (.slecteable), each having its own id (a unique string extracted from the database). A user clicks on a div. I get the id, and change the color of this div (in gets highlighted). Code: $('.selectable').livequery('click',function(){
var id;
id = $(this).attr('id');
//change color based on id.
});
Now comes the problem. Once a user clicks again on a div, if it wasn't highlighted, it should return to its original color. If it had been highlighted, and had returned to its original color due to a second click, it should get highlighted again. How would you do that? I wish I could post some code, but at this point, it would be rubbish. Thanks in advance. Regards, -jj. I am trying to make a simple alert come up stating a checkbox is checked when it changes, and then another alert for when the checkbox is unchecked. Problem is, only the alert for when the box is checked is coming up. Anyone know why? Code: function displayCheckPopUp()
{
if(document.activeElement.checked=true)
{
alert("A check box has been selected");
}
else if(document.activeElement.checked=false)<!--if(document.getElementById().checked=false)-->
{
alert("****");
}
}
Code: <input type="checkbox" name="Checkbox 1" value="Checkbox 1" id="first_cbox" onchange="displayCheckPopUp(this)" /> <p class="custom_style2"> Checkbox 1 </p> Currently i have rollover images when click on active a hide show div tag with the css property. the problem is that i want to keep the buttons on active state till someone clicks on another button then the button returns to a down state and the new button that was click on stay up. Code: <script language="JavaScript">
//here you place the ids of every element you want.
var ids=new Array('a1','a2','a3','a4', 'a5','a6');
function switchid(id){
hideallids();
showdiv(id);
}
function hideallids(){
//loop through the array and hide each element by id
for (var i=0;i<ids.length;i++){
hidediv(ids[i]);
}
}
function hidediv(id) {
//safe function to hide an element with a specified id
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById(id).style.display = 'none';
}
else {
if (document.layers) { // Netscape 4
document.id.display = 'none';
}
else { // IE 4
document.all.id.style.display = 'none';
}
}
}
function showdiv(id) {
//safe function to show an element with a specified id
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById(id).style.display = 'block';
}
else {
if (document.layers) { // Netscape 4
document.id.display = 'block';
}
else { // IE 4
document.all.id.style.display = 'block';
}
}
}
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_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_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>
please help Hi, I have a a html/PHP page divided into two, on the left div I have a list of subjects and on the right div I have used AJAX to populate this side with a list of questions (taken from database), this list depends on the selection made on the left. Each of the questions in the list has a checkbox, I want to be able to make selections using the checkboxes and then click on the other subjects but if I was to go back to the page with my selections the checkboxes checked previously will already be there. Any ideas on how I can do this? I would appreciate any help. I'm trying to diagnose the javascript part of an ajax script: Code: <form>
<ul id='May120128AM' name='apt_time' value='May120128AM'>
<input type="hidden" id='May120128AMhidden' name="user_id" value='May120128AM'>
</form>
<script type="text/javascript">
<!--
var request;
request = new XMLHttpRequest();
function checkData()
{
alert(request.readyState);
}
var apt_time = encodeURIComponent(document.getElementById(May120128AM').value);
var userid = encodeURIComponent(document.getElementById(May120128AMhidden').value);
var parameters = "apt_time"+apt_time //+"&"+"user_id"+userid;
request.open("POST", "/cgi-bin/my_script.php", true);
request.onreadystatechange = checkData;
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
request.send(parameters);
//-->
</script>
The checkData script puts each readyState in an alert box, so I know the javascript is firing. If I change the red line of code to this, the alert boxes no longer pop up, so I assume the javascript is not firing: Code: var parameters = "apt_time"+apt_time+"&"+"user_id"+userid; I thought name/value pairs were written like this: Code: name1=value1&name2=value2 I though that was exactly what the red line of code was doing. Does anyone know why it isn't firing? UPDATE: This works: Code: var parameters = "apt_time=+apt_time+&user_id=+userid"; I don't know why the above works and the other doesn't. They both look like they do the same thing - this: Code: apt_time=value1&user_id=value2 Hi Guys, I've written the below code which submits to a servlet, does a bit of processing and returns a JSON object. I'm reaching the servlet, but I never reach the alert("ready()") in the JavaScript. It looks as though the readyState never actually reaches state 4. Any ideas what is wrong ?? Thanks Code: function fetchhits() {
var httpRequest = null;
var url = "http://localhost:8080/Json/FetchTopHit?amount=1";
try {
httpRequest = new XMLHttpRequest(); /* e.g. Firefox */
} catch(e) {
try {
httpRequest = new ActiveXObject("Msxml2.XMLHTTP"); /* some versions IE */
} catch (e) {
try {
httpRequest = new ActiveXObject("Microsoft.XMLHTTP"); /* some versions IE */
} catch (E) {
httpRequest = false;
}
}
}
httpRequest.open("GET", url, true);
httpRequest.onreadystatechange = handler;
httpRequest.send(null);
}
function handler() {
alert("hander() start");
if (httpRequest.readyState == 4) {
alert("ready...");
if (httpRequest.status == 200) {
processJson (httpRequest.responseText);
}
}
}
function processJson(jsonObjectString) {
alert ("Process the Json Object");
}
Please help. I'm not sure why it's not populating. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Blood Control</title>
<meta name="keywords" content="">
<meta name="description" content="">
<META HTTP-EQUIV="Expires" CONTENT="0">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<!--- global javascript functions --->
<script language="JavaScript" type="text/javascript" src="https://www.bd.com/includes/global.js"></script>
<!--- global style sheet --->
<LINK rel="stylesheet" type="text/css" href="https://www.bd.com/includes/styles.css" media="screen">
<!--- print style sheet --->
<LINK rel="stylesheet" type="text/css" href="https://www.bd.com/includes/print.css" media="print">
<!--- browser specific style sheets --->
<STYLE TYPE="text/css">
BODY {
font-size: 75%;
font-family : Verdana, Arial, Helvetica;
color: #333333;
}
TD {
font-size: 75%;
font-family : Verdana, Arial, Helvetica;
color: #333333;
}
</STYLE>
<!----- HBX Include ----->
<!-- HBX INCLUDE DATA HERE www.bd.com -->
<!--WEBSIDESTORY CODE HBX1.0 (Universal)-->
<!--COPYRIGHT 1997-2005 WEBSIDESTORY,INC. ALL RIGHTS RESERVED. U.S.PATENT No. 6,393,479B1. MORE INFO:http://websidestory.com/privacy-->
<script language="javascript">
var _hbEC=0,_hbE=new Array;function _hbEvent(a,b){b=_hbE[_hbEC++]=new Object();b._N=a;b._C=0;return b;}
var hbx=_hbEvent("pv");hbx.vpc="HBX0100u";hbx.gn="aa.bd.com";
//BEGIN EDITABLE SECTION
//CONFIGURATION VARIABLES
hbx.acct="DM531126I7FB72EN3";//ACCOUNT NUMBER(S)
hbx.pn="PUT+PAGE+NAME+HERE";//PAGE NAME(S)
hbx.mlc="CONTENT+CATEGORY";//MULTI-LEVEL CONTENT CATEGORY
hbx.pndef="index.asp";//DEFAULT PAGE NAME
hbx.ctdef="full";//DEFAULT CONTENT CATEGORY
//OPTIONAL PAGE VARIABLES
//ACTION SETTINGS
hbx.fv="";//FORM VALIDATION MINIMUM ELEMENTS OR SUBMIT FUNCTION NAME
hbx.lt="auto";//LINK TRACKING
hbx.dlf="n";//DOWNLOAD FILTER
hbx.dft="n";//DOWNLOAD FILE NAMING
hbx.elf="n";//EXIT LINK FILTER
hbx.lc="y";//FORCE LOWERCASE
//SEGMENTS AND FUNNELS
hbx.seg="";//VISITOR SEGMENTATION
hbx.fnl="";//FUNNELS
//CAMPAIGNS
hbx.cmp="";//CAMPAIGN ID
hbx.cmpn="";//CAMPAIGN ID IN QUERY
hbx.dcmp="";//DYNAMIC CAMPAIGN ID
hbx.dcmpn="";//DYNAMIC CAMPAIGN ID IN QUERY
hbx.dcmpe="";//DYNAMIC CAMPAIGN EXPIRATION
hbx.dcmpre="";//DYNAMIC CAMPAIGN RESPONSE EXPIRATION
hbx.hra="";//RESPONSE ATTRIBUTE
hbx.hqsr="";//RESPONSE ATTRIBUTE IN REFERRAL QUERY
hbx.hqsp="";//RESPONSE ATTRIBUTE IN QUERY
hbx.hlt="";//LEAD TRACKING
hbx.hla="";//LEAD ATTRIBUTE
hbx.gp="";//CAMPAIGN GOAL
hbx.gpn="";//CAMPAIGN GOAL IN QUERY
hbx.hcn="";//CONVERSION ATTRIBUTE
hbx.hcv="";//CONVERSION VALUE
hbx.cp="";//LEGACY CAMPAIGN
hbx.cpd="";//CAMPAIGN DOMAIN
//CUSTOM VARIABLES
hbx.ci="";//CUSTOMER ID
hbx.hc1="";//CUSTOM 1
hbx.hc2="";//CUSTOM 2
hbx.hc3="";//CUSTOM 3
hbx.hc4="";//CUSTOM 4
hbx.hrf="";//CUSTOM REFERRER
hbx.pec="";//ERROR CODES
//INSERT CUSTOM EVENTS
//END EDITABLE SECTION
//REQUIRED SECTION. CHANGE "YOURSERVER" TO VALID LOCATION ON YOUR WEB SERVER (HTTPS IF FROM SECURE SERVER)
</script>
<script language="javascript1.1" src="https://www.bd.com/includes/hbx.js"></script>
<!--END WEBSIDESTORY CODE-->
<!----- WT Include ----->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="javascript">
var rand_no = Math.floor(Math.random()*999999);
// Declaring required variables
var digits = "0123456789";
// non-digit characters which are allowed in phone numbers
var phoneNumberDelimiters = "()#- .";
// characters which are allowed in international phone numbers
// (a leading + is OK)
var validWorldPhoneChars = phoneNumberDelimiters + "+";
// Minimum no of digits in an international phone no.
var minDigitsInIPhoneNumber = 0;
function form_action(form)
{
if (form.Share_Story.checked)
{
document.getElementById('share_story_enabled').style.display = 'block';
}
else
{
document.getElementById('share_story_enabled').style.display = 'none';
}
if (form.Share_Comment.checked)
{
document.getElementById('share_comment_enabled').style.display = 'block';
}
else
{
document.getElementById('share_comment_enabled').style.display = 'none';
}
if (form.Sign_Up.checked)
{
document.getElementById('sign_up_enabled').style.display = 'block';
}
else
{
document.getElementById('sign_up_enabled').style.display = 'none';
}
}
</script>
<script language="javascript">
function clearselect()
{
document.myform.State.options.length = 0;
}
function changeStates()
{
var indx=document.myform.Country.selectedIndex
var Country=document.myform.Country.options[indx].value
if (Country=="United States")
{
clearselect();
document.myform.State.options[0] = new Option('----- Select One -----','');
document.myform.State.options[1] = new Option('Alabama','AB');
document.myform.State.options[2] = new Option('Alaska','AK');
document.myform.State.options[3] = new Option('Arizona','AZ');
document.myform.State.options[4] = new Option('Arkansas','AR');
document.myform.State.options[5] = new Option('California','CA');
document.myform.State.options[6] = new Option('Colorado','CO');
document.myform.State.options[7] = new Option('Connecticut','CT');
document.myform.State.options[8] = new Option('Delaware','DE');
document.myform.State.options[9] = new Option('District of Columbia','DC');
document.myform.State.options[10] = new Option('Florida','FL');
document.myform.State.options[11] = new Option('Georgia','GA');
document.myform.State.options[12] = new Option('Hawaii','HI');
document.myform.State.options[13] = new Option('Idaho','ID');
document.myform.State.options[14] = new Option('Illinois','IL');
document.myform.State.options[15] = new Option('Indiana','IN');
document.myform.State.options[16] = new Option('Iowa','IA');
document.myform.State.options[17] = new Option('Kansas','KS');
document.myform.State.options[18] = new Option('Kentucky','KY');
document.myform.State.options[19] = new Option('Louisiana','LA');
document.myform.State.options[20] = new Option('Maine','ME');
document.myform.State.options[21] = new Option('Maryland','MD');
document.myform.State.options[22] = new Option('Massachusetts','MA');
document.myform.State.options[23] = new Option('Michigan','MI');
document.myform.State.options[24] = new Option('Minnesota','MN');
document.myform.State.options[25] = new Option('Mississippi','MS');
document.myform.State.options[26] = new Option('Missouri','MO');
document.myform.State.options[27] = new Option('Montana','MT');
document.myform.State.options[28] = new Option('Nebraska','NE');
document.myform.State.options[29] = new Option('Nevada','NV');
document.myform.State.options[30] = new Option('New Hampshire','NH');
document.myform.State.options[31] = new Option('New Jersey','NJ');
document.myform.State.options[32] = new Option('New Mexico','NM');
document.myform.State.options[33] = new Option('New York','NY');
document.myform.State.options[34] = new Option('North Carolina','NC');
document.myform.State.options[35] = new Option('North Dakota','ND');
document.myform.State.options[36] = new Option('Ohio','OH');
document.myform.State.options[37] = new Option('Oklahoma','OK');
document.myform.State.options[38] = new Option('Oregon','OR');
document.myform.State.options[39] = new Option('Pennsylvania','PA');
document.myform.State.options[40] = new Option('Puerto Rico','PR');
document.myform.State.options[41] = new Option('Rhode Island','RI');
document.myform.State.options[42] = new Option('South Carolina','SC');
document.myform.State.options[43] = new Option('South Dakota','SD');
document.myform.State.options[44] = new Option('Tennessee','TN');
document.myform.State.options[45] = new Option('Texas','TX');
document.myform.State.options[46] = new Option('Utah','UT');
document.myform.State.options[47] = new Option('Vermont','VT');
document.myform.State.options[48] = new Option('Virginia','VA');
document.myform.State.options[49] = new Option('Washington','WA');
document.myform.State.options[50] = new Option('West Virginia','WV');
document.myform.State.options[51] = new Option('Wisconsin','WI');
document.myform.State.options[52] = new Option('Wyoming','WY');
}
else if (Country=="Canada")
{
clearselect();
document.myform.State.options[0] = new Option('---------------Select One-------------','');
document.myform.State.options[1] = new Option('Alberta','AB');
document.myform.State.options[2] = new Option('British Columbia','BC');
document.myform.State.options[3] = new Option('Manitoba','MB');
document.myform.State.options[4] = new Option('New Brunswick','NB');
document.myform.State.options[5] = new Option('New Foundland','NL');
document.myform.State.options[6] = new Option('NorthWest Territories','NT');
document.myform.State.options[7] = new Option('Nova Scotia','NS');
document.myform.State.options[8] = new Option('Ontario','ON');
document.myform.State.options[9] = new Option('Prince Edward Island','PE');
document.myform.State.options[10] = new Option('Quebec','QC');
document.myform.State.options[11] = new Option('Saskatchewan','SK');
document.myform.State.options[12] = new Option('Yukon','YT');
}
else if (Country!="Canada" && Country!="United States")
{
clearselect();
document.myform.State.options[0] = new Option('Not Applicable','Not Applicable');
}
}
</script>
</head>
<body bgcolor="#ECF3FB" link="#2F61BD" vlink="#2F61BD" alink="#FF6600" marginheight="0" marginwidth="0" topmargin="0" leftmargin="0" onLoad="pageLoaded();">
<table border=0 cellpadding=0 cellspacing=0 width=768 align="center" bgcolor="#FFFFFF">
<tr>
<td width=4 height=7 background="https://www.bd.com/images/shadow_left.gif" valign=top><img src="https://www.bd.com/images/shadow_top_left.gif" alt="[spacer image]" width="4" height="7" hspace="0" vspace="0" border="0"></td>
<td width=760 rowspan=2 valign=top><!--- Global Header Include --->
<script type="text/javascript" src="https://www.bd.com/includes/anylink.js">
/***********************************************
* AnyLink CSS Menu script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
</script>
how do i make this table's initial state to be collapsed rather than expanded Code: <html xmlns="http://www.w3.org/1999/xhtml" >
<head><title>
Untitled Page
</title>
<script type="text/javascript">
function poorman_toggle(id)
{
var tr = document.getElementById(id);
if (tr==null) { return; }
var bExpand = tr.style.display == '';
tr.style.display = (bExpand ? 'none' : '');
}
function poorman_changeimage(id, sMinus, sPlus)
{
var img = document.getElementById(id);
if (img!=null)
{
var bExpand = img.src.indexOf(sPlus) >= 0;
if (!bExpand)
img.src = sPlus;
else
img.src = sMinus;
}
}
function Toggle_trGrpHeader2()
{
poorman_changeimage('trGrpHeader2_Img', 'http://www.saintjoe.edu/info_systems/help/email/minus_sign.gif', 'http://www.mumstudents.org/~gwang/Safari_Books/PHP%20Advanced%20for%20the%20World%20Wide%20Web/1.3_files/sign_plus.gif');
poorman_toggle('row1');
poorman_toggle('row2');
poorman_toggle('row3');
}
function Toggle_trGrpHeader1()
{
poorman_changeimage('trGrpHeader1_Img', 'http://www.saintjoe.edu/info_systems/help/email/minus_sign.gif', 'http://www.mumstudents.org/~gwang/Safari_Books/PHP%20Advanced%20for%20the%20World%20Wide%20Web/1.3_files/sign_plus.gif');
poorman_toggle('trRow1');
}
function IMG1_onclick() {
}
function IMG2_onclick() {
}
function IMG8_onclick() {
}
function IMG10_onclick() {
}
function IMG12_onclick() {
}
function IMG13_onclick() {
}
</script>
</head>
<body style="font-size: 12pt">
<div>
<table border="0" style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; cursor: crosshair; padding-top: 0px; background-color: transparent; border-right: gray thin solid; border-top: gray thin solid; border-left: gray thin solid; border-bottom: gray thin solid;" cellpadding="1" cellspacing="0" align="center">
<tr>
<td colspan="12" style="border-bottom: gray thin solid; text-align: center; height: 25px;" class="titlebg">
<span class="titlebg" style="color: gray">Our Affiliates</span></td>
</tr>
<tr id="trGrpHeader2">
<td class="number" colspan="4" rowspan="4" style="border-right: gray thin dashed;">
<span onclick="javascript:Toggle_trGrpHeader2();">
<img id="IMG12" src="http://img48.imageshack.us/img48/3168/viewallcopyjo5.png" language="javascript" onclick="return IMG12_onclick()" /></span></td>
<td colspan="1" style="width: 71px; height: 11px;"><img id="Img5" src="http://sz-ex.com/affiliates/socal1.gif" language="javascript" onclick="return IMG2_onclick()" /></td>
<td colspan="1" style="width: 63px; height: 11px;"><img src="http://sz-ex.com/affiliates/ff1.gif" /></td>
<td colspan="1" style="width: 76px; height: 11px;"><img id="Img6" src="http://zcoarea.ckc.com.ru/image3.gif" language="javascript" onclick="return IMG1_onclick()" /></td>
<td colspan="1" style="width: 51px; height: 11px;"><img id="Img7" src="http://sz-ex.com/affiliates/ssd1.gif" language="javascript" onclick="return IMG2_onclick()" /></td>
<td colspan="1" style="width: 40px; height: 11px">
<img id="IMG8" src="http://sz-ex.com/mini_v2-1.gif" language="javascript" onclick="return IMG8_onclick()" /></td>
<td colspan="1" style="width: 55px; height: 11px">
<img id="IMG10" src="http://i114.photobucket.com/albums/n267/f2a/FTAV1.jpg" language="javascript" onclick="return IMG10_onclick()" /></td>
<td class="number" rowspan="4">
</td>
<td class="number" rowspan="4" style="width: 80px; text-align: center; border-left: gray thin dashed;">
<img id="IMG13" src="http://img61.imageshack.us/img61/613/minibanneruf1.gif" language="javascript" onclick="return IMG13_onclick()" start="" /><br />
<span style="font-size: 8pt; color: dimgray"></span></td>
</tr>
<tr id="row1">
<td class="number" rowspan="3" style="width: 71px; height: 22px">
<img src="http://sz-ex.com/affiliates/ff1.gif" /></td>
<td class="number" rowspan="3" style="width: 63px; height: 22px">
<img id="IMG2" src="http://sz-ex.com/affiliates/socal1.gif" language="javascript" onclick="return IMG2_onclick()" /></td>
<td class="number" rowspan="3" style="width: 76px; height: 22px">
<img id="Img11" src="http://i114.photobucket.com/albums/n267/f2a/FTAV1.jpg" language="javascript" onclick="return IMG10_onclick()" /></td>
<td class="number" rowspan="3" style="width: 51px; height: 22px">
<img id="Img9" src="http://sz-ex.com/mini_v2-1.gif" language="javascript" onclick="return IMG8_onclick()" /></td>
<td class="number" rowspan="3" style="width: 40px; height: 22px">
<img id="Img4" src="http://zcoarea.ckc.com.ru/image3.gif" language="javascript" onclick="return IMG1_onclick()" /></td>
<td class="number" rowspan="3" style="width: 55px; height: 22px">
<img id="Img3" src="http://sz-ex.com/affiliates/ssd1.gif" language="javascript" onclick="return IMG2_onclick()" /></td>
</tr>
<tr id="row2">
</tr>
<tr id="row3">
</tr>
</table>
</div>
</body>
</html>
http://auspost.com.au/apps/postcode.html Basically I want to build the same thing. The data is freely available there as a download. I couldn't find anything existing in the jquery plugin space. Can anyone offer pointers on how to achieve it? Hey I'm trying to use the adipose plugin to make rollover buttons, Everything works the first time around. I click on the button and it takes me to the link, but when I click on the 'back button' on the browser window, the rollover button stays in the hover state and stops working. Can you help please? Here is the link for that javascript, it's not gonna fit in he http://jobyj.in/adipoli/#download Here is what I'm envisioning: The user selects a state, then in the 'Cities' box, he starts typing the name of his city. However, it autocompletes the name for him based on the state he chose. So if he chose California and started typing in "Los Angeles", it would autocomplete "Los Angeles" for him. Does that make sense? Is there a script out there that can do this? The guy who originally coded this is no longer with us and we can't seem to figure out why this code isn't working. Neither of us really know JS. I've messed with jQuery more than I've messed with straight up JS but even that is limited knowledge. Basically this code is supposed to keep track of the left navigation so when it goes to a new page it holds the opened menus open. Here's a snippet of HTML: Code: <ul id="leftnav">
<li class="widthT1">
<div id="2042-open" style="display: none;"><a href="javascript:treeToggle('2042', 'open', '/JobSeekers/Recently_Unemployed/index.aspx');" class="orangePlus">Recently Unemployed</a></div>
<div id="2042-close" style="margin-bottom:10px;"><a href="javascript:treeToggle('2042', 'close');" class="orangeMinus">Recently Unemployed</a>
<!--<div class="fix1"><hr class="grey1HR"/></div>-->
<ul class="fix4">
<li>
<div id="2063-open" style="display: none;"><a href="javascript:treeToggle('2063', 'open', '/JobSeekers/Recently_Unemployed/Apply_for_Unemployment_Insurance_Benefits/index.aspx');" class="orangePlusGT2">Apply for Unemployment Insurance Benefits</a></div>
<div id="2063-close"><a href="javascript:treeToggle('2063', 'close');" class="orangeMinusGT2">Apply for Unemployment Insurance Benefits</a>
<!--<div class="fix2"><hr class="grey2HR"/></div>-->
<ul>
The above is repeated but that should be enough to show you what it's doing? Here's the JS: Code: function getTreeStateArray()
{
var empty = new Array();
var soc = document.cookie.indexOf("treestate=");
if(soc != -1)
{
var eoc = document.cookie.indexOf("-", soc);
if(eoc == -1)
eoc = document.cookie.length;
return(unescape(document.cookie.substring(soc+10, eoc)).split("-"));
}
return(empty);
}
function setTreeStateArray(treeState)
{
document.cookie = "treestate=" + escape(treeState.join("-"));
}
function restoreTreeState(treeID)
{
var treestate = getTreeStateArray();
var i, j, treeNodeName, treeElements;
treeElements = document.getElementById(treeID).getElementsByTagName("div");
for(i = 0; i < treeElements.length; i++)
{
var sosuffix = treeElements[i].id.indexOf('-close');
if(sosuffix == -1)
sosoffix = treeElements[i].id.indexOf('-open');
if(sosuffix != -1)
{
var nodeName = treeElements[i].id.substring(0, sosuffix);
var found = false;
for(j = 0; j < treestate.length; j++)
{
if(treestate[j] == nodeName)
found = true;
}
if(found == true)
{
document.getElementById(nodeName + '-open').style.display = 'none';
document.getElementById(nodeName + '-close').style.display = 'block';
}
else
{
document.getElementById(nodeName + '-open').style.display = 'block';
document.getElementById(nodeName + '-close').style.display = 'none';
}
}
}
}
function removeNodeFromTreeState(nodeName)
{
var treestate = getTreeStateArray();
var newTreeState = new Array();
var i, treeNodeName;
for(i = 0; i < treestate.length; i++)
{
treeNodeName = treestate[i];
if(treeNodeName != nodeName)
newTreeState.push(treeNodeName);
}
setTreeStateArray(newTreeState);
}
function addNodeToTreeState(nodeName)
{
var treestate = getTreeStateArray();
var newTreeState = new Array();
var i, treeNodeName;
for(i = 0; i < treestate.length; i++)
{
treeNodeName = treestate[i];
if(treeNodeName == nodeName)
return;
newTreeState.push(treeNodeName);
}
newTreeState.push(nodeName);
setTreeStateArray(newTreeState);
}
function treeToggle(treeNodeName, treeNodeState, followLink)
{
if(treeNodeState == 'open')
{
addNodeToTreeState(treeNodeName);
document.getElementById(treeNodeName + '-open').style.display =
'none';
document.getElementById(treeNodeName + '-close').style.display =
'block';
if(typeof(followLink) != 'undefined')
window.location.href = followLink;
}
else
{
removeNodeFromTreeState(treeNodeName);
document.getElementById(treeNodeName + '-open').style.display =
'block';
document.getElementById(treeNodeName + '-close').style.display =
'none';
}
}
What happens is it remembers the first thing you click on, but nothing more. We looked at the cookie value and it seems to be right. 4digit number followed by - followed by 4 more digits etc etc (0000-0001-0002 etc) If anyone could help that would be wonderful. Thanks for any and all help, Justin A while back, Old Pedant wrote a nifty function which changes the class of different sets of <p> elements, in order to change the content and style of their css ':afters'. You can see it in action here: welcome > consult > ready ? > make line one > etc: the ':afters' are the small red markers which appear in the middle of the red lines. I'm now writing functions for "back" links which will return the page to its original state. I've managed to do this for most elements (change display, colour, etc): however, these ':afters' are proving a problem. The css for the original ':afters' Code: .hex p:after {
position:relative; top:0.74em; left:-2.10em; z-index:-1;
font-size:0.50em; content:":"; visibility:hidden; }
The logic of applying elaborate css, and then hiding the result is this: the css alters the line-height of the p element, so a dummy version is to applied at the outset, before the specific versions are activated. The css for the changed ':afters' Code: p.xV1:after, p.xV2:after, p.xV3:after, p.xV4:after, p.xV5:after, p.xV6:after {
color:#f03; visibility:visible; content:"x"; }
p.oV1:after, p.oV2:after, p.oV3:after, p.oV4:after, p.oV5:after, p.oV6:after {
color:#f03; visibility:visible; content:"O"; }
What needs to happen is for all of these p classes to be returned to the css '.hex p:after' . I think the function might look something like Code: function returnAfters(){
for (i=0; i<elP.length; i++) {
if (elP.item(i).className.charAt(1) == "V") {
elP.item(i).className = "hex p";}
}
The original function, altho I don't think it's needed to solve this, can be found here, at line 295. Meanwhile, one other problem area involves a jQuery function, so I'll post elsewhere. Cheers! URL: https://medicard1.com/services.html Site also employs CodeIgniter from original developer. Code below sets up a table with a form and script in separate cells of the same row. Looks good and click on check box works ok, but script seems to only run when the page is initially loaded. Does not change variable 'c' and display the change. Am in a bind for this one. My developer is away for the holiday and CEO wants it done ASAP. Anyone have an idea? <!-- Setup a table to hold the elements where I want them without conflicting with CodeIgniter - K.I.S.S.--> <table style="border:0px;"> <tr> <td style="width:600px; text-align:left;"> <!-- Un-submitted form with legend and checkbox input to acknowledge terms and display discount code --> <form name="acknowledge" action="" method=""> <legend>I acknowledge that I have read and understand the content of this page <!-- onClick should execute display_code() script --> <input style="border:0px; width:40px;" type="checkbox" name="investor" onClick="display_code()"/> </legend> </form> </td> <td style="width:200px; text-align:right;"> <!-- Script should check checked state of checkbox investor and set c to appropriate value --> <script type="text/javascript"> <!-- set c="" after get this working --> var c="NOT SET"; function display_code() { if (document.acknowledge.investor.checked) { var c="INVESTOR"; } else { <!-- set c="" after get this working --> var c="NO CODE"; } } document.write('Your code is: ' + c); </script> </td> </tr> </table> Here is the PHP: PHP Code: <?php if (($totalRows_getDie = mysql_num_rows($getDie)) != NULL) { echo "Die Category: <select name='DieCatId' class='dropMenu' id='DieCatId' onchange='jobDieChange(this.value)'> <option value='NULL'></option>"; do { echo "<option value='".$row_dieCatList['DieCatID']."'"; if (!(strcmp($row_dieCatList['DieCatID'], $row_getDie['DieCatID']))) {echo "selected=\"selected\"";} echo ">".$row_dieCatList['DieCatDesc']."</option>"; } while ($row_dieCatList = mysql_fetch_assoc($dieCatList)); $rows = mysql_num_rows($dieCatList); if($rows > 0) { mysql_data_seek($dieCatList, 0); $row_dieCatList = mysql_fetch_assoc($dieCatList); } echo "</select> <a href='popup.php?getpage=dieins' onclick='window.open(this.href, 'popupwindow', 'width=770,height=675,scrollbars,resizable'); return false;'>Add Die</a><br />"; echo "Die: <select name='DieID' class='dropMenu' id='DieID'>"; if ($totalRows_getDie != 0) { echo "<option value='".$row_getDie['DieID']."'>".$row_getDie['DieDesc']."</option>"; } echo "</select><br />"; echo "<input type='hidden' name='DiecutID' value='".$row_getDie['DiecutID']."' />"; } ?> And the JS: Code: var xmlhttpJDie;
function jobDieChange(str)
{
xmlhttpJDie=GetXmlHttpObject();
if (xmlhttpJDie==null)
{
alert ("Browser does not support HTTP Request");
return;
}
var url="/scripts/jobdie.php";
url=url+"?q="+str;
url=url+"&sid="+Math.random();
xmlhttpJDie.onreadystatechange=JobDieGet;
xmlhttpJDie.open("GET",url,true);
xmlhttpJDie.send(null);
}
function JobDieGet()
{
if (xmlhttpJDie.readyState==4)
{
document.getElementById("DieID").innerHTML=xmlhttpJDie.responseText;
}
}
In all browsers except IE, it works fine, but IE gets a Script error and won't update the second select. I've gone over this so many times I'm cross eyed! If someone could please help me figure out why IE doesn't like this I would appreciate it. Thank you! Hello all, I am trying to copy the billing information to be the same as the shipping information when they select the checkbox. Everything seems to work except for the State field which is a drop down. Depending on what country they select, the state field will automatically populate. Does anyone know how I can copy the billing state to be the same as shipping as well? Text file attached. Thanks in advance. I have a form that is used to insert a new classified ad or to update an existing ad. When the submit button is pressed a javascript function is called to validate the fields. Some of the fields are set as required. If the field is empty ( as form[i].value = '' ) then this sets an error flag and after all fields have been tested will display an alert and each field that has an error will be highlighted in red. This works great when a new ad is being created, but when the ad is being updated, and a required field is erased then it doesn't popup as an error, as if the script is just ignoring it. Here is the code snipit: Code: function submitbutton(mfrm) {
var me = mfrm.elements;
var r = new RegExp("[\<|\>|\"|\'|\%|\;|\(|\)|\&|\+|\-]", "i");
var r_num = new RegExp("[^0-9\.,]", "i");
var r_email = new RegExp("^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]{2,}[.][a-zA-Z]{2,3}$" ,"i");
var errorMSG = '';
var iserror=0;
// set notification background color
var warnColor = '#<?php echo $this->error_color; ?>';
// loop through all input elements in form
for (var i=0; i < me.length; i++) {
// check if element is mandatory; here mosReq="1"
if ((me[i].getAttribute('mosReq') == 1)&&(me[i].style.visibility != 'hidden')) {
if (me[i].type == 'radio' || me[i].type == 'checkbox') {
var rOptions = me[me[i].getAttribute('name')];
var rChecked = 0;
if(rOptions.length > 1) {
for (var r=0; r < rOptions.length; r++) {
if (rOptions[r].checked) {
rChecked=1;
}
}
} else {
if (me[i].checked) {
rChecked=1;
}
}
if(rChecked==0) {
errorMSG += me[i].getAttribute('mosLabel').replace(' ',' ') + ' : <?php echo html_entity_decode(addslashes(JText::_('COM_CLASSIFIEDSREDUX_REGWARN_ERROR')),ENT_QUOTES); ?>\n';
// notify user by changing background color, in this case to red
me[i].style.background = warnColor;
iserror=1;
}
}
if ((me[i].value == '') || (me[i].value.length < 2)) {
errorMSG += me[i].getAttribute('mosLabel').replace(' ',' ') + ' : <?php echo html_entity_decode(addslashes(JText::_('COM_CLASSIFIEDSREDUX_REGWARN_ERROR')),ENT_QUOTES); ?>\n';
me[i].style.background = warnColor;
iserror=1;
}
}
}
if(iserror==1) {
alert(errorMSG);
return false;
}
}
|
|||||||