|
JavaScript - If Display:none, Then Do Something...
I'm trying to set an if statement so if one element is set to display:none, another element(s) sets margin-left to a certain number of pixels.
Sort of like this (however, it's not working): Code: <script>
if (document.getElementById('#why-choose-content').style.display = 'none') {
document.getElementById('#always-content').style.margin-left = '335px';
}
</script>
Here is the site in question: http://bit.ly/8XfM0Q You can get a better idea of what I mean by clicking the 'plus' icons for the three colored tabs above the main content. Or if anybody has a more elegant way to get the divs to toggle under their respective headers, I'd love to hear. Thank you. Similar TutorialsWhy isnt this working? Code: function display_form(obj) {
var button_name = obj.id.split("dialog_");
var t = document.getElementById(button_name[1] + '_form').style.visibility = 'visible';
alert(t);
}
IE is saying: Code: id is 'null' or not an object Hi, I'm just the custom scrollbar javascript 'Flexcroll' to customise div scrollbars on my website. However the section of my website I'm using this on has 'tabbed divs'. Ie. I'm hiding some div's using 'display:none;' then using javascript to change their state to 'display:block;' It seems if the div im attaching the 'Flexcroll' scrollbar to is initially 'display:none' then this scrollbar doesn't work when its shown on the page. Has anyone come across this issue before, and if so what was your solution? Any help, much appreciated! Thanks Curt hey all, Am trying to display the div tag and its content by clicking it. the code below displays the whole source code when cliked on the div with id = softros. I want to make this script to display the div in view source format of the browser when clicked on any div. Thanks in advance, looking forward for your ideas Regards, Bala <html> <head> <script> function viewSource() { window.open('view-source:'+location.href); } </script> </head> <body> <div id="softros" onClick="viewSource();" style="border:1px red solid;"> <img src="images/rain_small.jpg" alt="rain_small" title="rain_small" /> </div> </body> </html> Hi, I am trying to have an array of pictures rotating among them every 300 milliseconds. I am having a hard time to walk through the arrays to set new x and y values and rotate them to the new place. I think I have problems with my display code, where I should display the new position every time I call settimeout, exchanging the positions x and y from the array indexes position. There is my code: Code: <?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>hexagonal array</title>
<script type="text/javascript">
<!--
var pixArray = Array(6);
function shiftPix(element, count, index) {
var pi = 3.1415926535;
// left: x coordinate, top: y coordinate
y = 300 + 150 * Math.cos(2 * pi * (count + index)/6);
x = 300 + 150 * Math.sin(2 * pi * (count + index)/6);
element.style.left = x + "px";
element.style.top = y + "px";
}
function display() {
for (j = 0; j < 6 ; j++) {
setTimeout("shiftPix(" + x + ", " + y + ")", 300);
counter++;
shiftPix(pixArray[j], counter, j);
}
}
// -->
</script>
</head>
<body>
<h3>Hexagonal Array </h3>
<div id="John" style="position:absolute;left:300px;top:450px">
<img src="picture1.jpg" alt="John Santore" width="90" height="120" />
</div>
<div id="Seikyung" style="position:absolute;left:430px;top:375px">
<img src="picture2.jpg" alt="Seikyung Jung" width="90" height="120" />
</div>
<div id="Glenn" style="position:absolute;left:430px;top:225px">
<img src="picture3.jpg" alt="Glenn Pevlicek" width="90" height="120" />
</div>
<div id="Lee" style="position:absolute;left:300px;top:150px">
<img src="picture4.jpg" alt="Lee Mondshein" width="90" height="120" />
</div>
<div id="Abdul" style="position:absolute;left:170px;top:225px">
<img src="picture5.jpg" alt="Abdul Sattar" width="90" height="120" />
</div>
<div id="Toby" style="position:absolute;left:170px;top:375px">
<img src="picture6.jpg" alt="Toby Lorenzen" width="90" height="120" />
</div>
<script type="text/javascript">
<!--
var counter = 0;
pixArray[0] = document.getElementById("John");
pixArray[1] = document.getElementById("Seikyung");
pixArray[2] = document.getElementById("Glenn");
pixArray[3] = document.getElementById("Lee");
pixArray[4] = document.getElementById("Abdul");
pixArray[5] = document.getElementById("Toby");
display();
// -->
</script>
</body>
</html>
I would like to display the elements in my array but it is NOT working. Here's my code: Code: <HTML>
<HEAD>
<TITLE>Test Input</TITLE>
<script type="text/javascript">
function addtext() {
var openURL=new Array("http://google.com","http://yahoo.com","http://www.msn.com","http://www.bing.com");
document.writeln('<table>');
for (i=0;i<=openURL.length-1;i++){
document.writeln('<tr><td>openURL[i]</td></tr>');
}
document.writeln('</table>');
}
</script>
</HEAD>
<body onload="addtext()">
</BODY>
</HTML>
Here's the ouput: Code: openURL[i] openURL[i] openURL[i] openURL[i] It should display: Code: http://google.com http://yahoo.com http://msn.com http://bing.com Any comments or suggestions are greatly apprecitated. thanks [Hi all! I am obviously new to Javascript, blah blah blah, etc ... Please help me by pointing out what is wrong with my code while changing as little as possible ... and if you could also please explain the part that says t = total( parseFloat(a,10), parseFloat(b,10), parseFloat(c,10), parseFloat(d,10)); if(!isNaN(t)) f.value = t; as I copied that portion from someone and I really don't understand it. Thank you soooo much!] <html> <head> <title>Problem 3</title> <style type="text/css"> body { background-color:blue; font-family:verdana; font-size:large; } input { width: 60px; } </style> <script type="text/javascript"> var f = (a*0.1)+(b*0.15)+(c*0.25)+(d*0.2)+(e*0.3) if ( grade5Obj.value.length < 1 ) alert("Please enter a grade in every box!"); else displayObj.value=ourText + nameObj.value + '!'; }; function update() var a = document.getElementById( 'grade1' ).value, b = document.getElementById( 'grade2' ).value, c = document.getElementById( 'grade3' ).value, d = document.getElementById( 'grade4' ).value, e = document.getElementById( 'grade5' ).value, f = document.getElementById( 'ans' ), t=0; t = total( parseFloat(a,10), parseFloat(b,10), parseFloat(c,10), parseFloat(d,10)); if(!isNaN(t)) f.value = t; </script> </head> <body> <form action="" method="post"> <p>Enter the first grade <input id="grade1" onkeyup="update()"><br> <p>Enter the second grade <input id="grade2" onkeyup="update()"><br> <p>Enter the third grade <input id="grade3" onkeyup="update()"><br> <p>Enter the fourth grade <input id="grade4" onkeyup="update()"><br> <p>Enter the fifth grade <input id="grade5" onkeyup="update()"><br> <p>Your final grade is <input name="finalGrade" readonly="true"> <input type="button" value="Click me!" onclick="finalGrade value=document.getElementById( 'ans' )"></p> </form> </body> </html> Hello im using this code to display a countdowntimer Code: <script type="text/javascript">
var timecd;
timecd = document.getElementById('<%= Text1.ClientID %>').value;
var GAME = ' | Hells Gate |';
var OpenTimeCOUNTER = '';
var TargetCOUNTER = document.getElementById('COUNTER');
var SecondsCOUNTER = timecd;
var TargetTimeCOUNTER = new Date();
var TimeBeginnCOUNTER = TargetTimeCOUNTER.getTime();
var TimeEndCOUNTER = TimeBeginnCOUNTER + (SecondsCOUNTER * 1000);
TargetTimeCOUNTER.setTime(TimeEndCOUNTER);
var DayCOUNTER = TargetTimeCOUNTER.getDate();
var MonthCOUNTER = TargetTimeCOUNTER.getMonth() + 1;
var YearCOUNTER = TargetTimeCOUNTER.getYear();
if (YearCOUNTER < 999) YearCOUNTER += 1900;
var hCOUNTER = TargetTimeCOUNTER.getHours();
var mCOUNTER = TargetTimeCOUNTER.getMinutes();
var sCOUNTER = TargetTimeCOUNTER.getSeconds();
var fdayCOUNTER = ((DayCOUNTER < 10) ? "0" : "");
var fmonthCOUNTER = ((MonthCOUNTER < 10) ? ".0" : ".");
var fhCOUNTER = ((hCOUNTER < 10) ? "0" : "");
var fmCOUNTER = ((mCOUNTER < 10) ? ":0" : ":");
var fsCOUNTER = ((sCOUNTER < 10) ? ":0" : ":");
var EndDateCOUNTER = fdayCOUNTER + DayCOUNTER + fmonthCOUNTER + MonthCOUNTER + "." + YearCOUNTER;
var EndTimeCOUNTER = fhCOUNTER + hCOUNTER + fmCOUNTER + mCOUNTER + fsCOUNTER + sCOUNTER;
var counterthing = window.setTimeout("CountDownCOUNTER()", 1000);
function CountDownCOUNTER() {
var CurrentDateCOUNTER = new Date();
var CurrentTimeCOUNTER = CurrentDateCOUNTER.getTime();
OpenTimeCOUNTER = Math.floor((TargetTimeCOUNTER - CurrentTimeCOUNTER) / 1000);
var sCOUNTER = OpenTimeCOUNTER % 60;
var mCOUNTER = ((OpenTimeCOUNTER - sCOUNTER) / 60) % 60;
var hCOUNTER = ((OpenTimeCOUNTER - sCOUNTER - mCOUNTER * 60) / (60 * 60));
var fhCOUNTER = ((hCOUNTER < 10) ? "0" : "");
var fmCOUNTER = ((mCOUNTER < 10) ? ":0" : ":");
var fsCOUNTER = ((sCOUNTER < 10) ? ":0" : ":");
var TimeCOUNTER = fhCOUNTER + hCOUNTER + fmCOUNTER + mCOUNTER + fsCOUNTER + sCOUNTER;
var OutputStringCOUNTER = TimeCOUNTER;
if (OpenTimeCOUNTER <= 0) {
OutputStringCOUNTER = '<a href="Default.aspx">Refresh<\/a>';
window.clearTimeout(counterthing);
}
TargetCOUNTER.innerHTML = OutputStringCOUNTER;
document.title = (OutputStringCOUNTER.substring(0, 2) == "<a") ? "!!!READY!!!" : OutputStringCOUNTER + GAME;
counterthing = window.setTimeout("CountDownCOUNTER()", 1000);
}
</script>
When im debuging the project it shows ok without any problems: But when i host the website on the server i Get a NaN:NaN:NaN Don't know what is hapening... any help would be great Thanks Ricardo Hi, I have an application wherein for one page I want to display a Listbox on selection of a radio button. There should be 2 radio buttons and when the user clicks on the 2nd one "My Process", a list box should be displayed with several options. Can anybody pls help me with this as I'm a beginner to JS.. Many thanks Pooja. The navigation for the web site I'm doing requires JS to remotely work so I want to make some kind of back-up scenario. Basicly, how can I make it so my main navigation will only display if there is script? One thought I had was put it in a div, hide it in the CSS, then use JS to show it but if there is a better way to do this I'd like to know. hi, i am currently doing a program that will display the image continuously. the image name will be like pic1.jpg , pic2.jpg , pig3.jpg untill pic10.jpg this is my code so far : <html> <head> <script type="text/JavaScript"> var fileName; function display() { fileName = new Array(); for( i=0; i<5; i++) { fileName[i] = new Image(); fileName[i].src = "screenshot_" + i + ".jpeg"; } } display(); </script> </head> <body> </body> </html> but when i run it, it give me infinity loop, can anyone tell me what is the problem of that ? thanks in advance for the reply Hi There, I am attempting to do a site which is of a similar format to a TV listings website. Each day's schedule will be on a different HTM page (contained within an iFrame), and I would like it to display the current day's schedule on the appropriate day. I have searched the forum, but can't find anything exactly like this (maybe I'm searching for the wrong thing), so any answers greatly appreciated. Thanks, Roz helow to all im new here? iwant to ask on how to display the sum of the 20 numbers i allready get the everage but i want to display the sum together of the everage this my code.. <html> <body> <script type = "text/javascript"> var numtotal = parseInt(prompt("How many numbers do you want to sum up?","")); var total = 0; for (var i=0; i<numtotal; i++) { var ans = parseFloat(prompt ("Enter a number", "")); if ((isNaN(ans)) || (ans == "")) { alert ("You must enter a number!! "); i -- ; } else {total = total + ans/numtotal}; } alert (total); // the total </script> </body> </html> any body help me please? Hello everyone. I'm using the script Old Pedant posted here (huge thanks man!), however, I'm looking to have the timer display six numbers at all times. For example: If the timer has 15 hours, 35 minutes, and 10 seconds left it is currently displaying as: 15:35:10 - Perfect! If the timer has 5 hours, 35 minutes, and 10 seconds left it is currently displaying as: 5:35:10 - Humm, not so perfect. In the second example, would like the timer to keep a zero in front of the hours when ever it drops below 10. So the second example should display as: 05:35:10. Any help is greatly appreciated. Posted below is the modified code I'm using. Thanks! Code: <html>
<head>
<script type="text/javascript">
// really really simple to get the time from the server
// this is for an ASP server:
//var serverTime = <%= DateDiff("s",#1/1/1970#,Now())%>;
// PHP Servers:
var serverTime = <?php echo time(); ?>;
// serverTime will hold the number of seconds since 1/1/1970 0:00:00 as it is on the server
// we must adjust it to compensate for GMT offset
// My server is on Pacific Daylight Time, so 7 hours offset:
serverTime += 0 * 3600; // 7 hours, 3600 seconds per hour
// NOTE: This adjustment MAY NOT be needed for PHP servers...I dunno.
//
// so calculate how far off the client is from the server:
var now = new Date();
var clientTime = now.getTime(); // number of *milliseconds* since 1/1/1970 0:00:00 on client
serverTime *= 1000; // convert server time to milliseconds, as well
// the client and server disagree by this much:
var clockOff = serverTime - clientTime; // could well be negative!
// hopefully you can see, from basic algebra, that
// serverTime = clientTime + clockOff
// we want target to be 0:00:00 of next day
var target = new Date( serverTime ); // serverTime in JS form
// so bump the day by one and leave time as 0,0,0:
target = new Date( target.getFullYear(), target.getMonth(), target.getDate() + 1 );
// and now ready for our timer countdown:
var ticker = null; // the interval timer
function countdown( )
{
var clientNow = ( new Date() ).getTime();
var serverNow = clientNow + clockOff; // see? this is where we use that offset!
var millisLeft = target.getTime() - serverNow; // milliseconds until server target time
var secsLeft = Math.round( millisLeft / 1000 );
var timeLeft;
var timeLeftWords;
if ( secsLeft <= 0 )
{
timeLeftWords = "Expired!";
timeLeft = "0 days 00:00:00";
clearInterval( ticker );
} else {
var secs = secsLeft % 60;
var minsLeft = Math.floor( secsLeft / 60 );
var mins = minsLeft % 60;
var hrsLeft = Math.floor( minsLeft / 60 );
var hrs = hrsLeft % 24;
var days = Math.floor( hrsLeft / 24 );
timeLeftWords = days + " days, " + hrs + " hours, " + mins + " minutes, " + secs + " seconds";
timeLeft =
+ (hrs < 10 ? "0" : "" ) + hrs + ":"
+ (mins < 10 ? "0" : "" ) + mins + ":"
+ (secs < 10 ? "0" : "" ) + secs;
}
document.getElementById("ticktock").innerHTML = timeLeft;
}
function startup( )
{
countdown(); // first time
setInterval( countdown, 1000 ); // then once a second
}
</script>
</head>
<body onload="startup()">
Time: <span id="ticktock"></span><br/>
</body>
</html>
All, If a user is going to my site with IE7 or less I call the following JS file. Code: // JavaScript Document
var ie6_warning=navigator.userAgent.indexOf('MSIE 6')
if (ie6_warning > 0)
{
document.write("<div style='border: 1px solid #F7941D; background: #FEEFDA; text-align: center; clear: both; height: 75px; position: relative; z-index:5000'> <div style='position: absolute; right: 3px; top: 3px; font-family: courier new; font-weight: bold;'><a href='#' onclick='javascript:this.parentNode.parentNode.style.display=\"none\"; return false;'><img src='http://info.template-help.com/files/ie6_warning/ie6nomore-cornerx.jpg' style='border: none;' alt='Close this notice'/></a></div> <div style='width: 740px; margin: 0 auto; text-align: left; padding: 0; overflow: hidden; color: black;'> <div style='width: 75px; float: left;'><img src='http://info.template-help.com/files/ie6_warning/ie6nomore-warning.jpg' alt='Warning!'/></div> <div style='width: 275px; float: left; font-family: Arial, sans-serif; color:#000'> <div style='font-size: 14px; font-weight: bold; margin-top: 12px; color:#000'>You are using an outdated browser</div> <div style='font-size: 12px; margin-top: 6px; line-height: 12px; color:#000'>For a better experience using this site, please upgrade to a modern web browser.</div> </div><div style='width: 75px; float: left;'><a href='http://www.firefox.com' rel="nofollow" target='_blank'><img src='http://info.template-help.com/files/ie6_warning/ie6nomore-firefox.jpg' style='border: none;' alt='Get Firefox 3.5'/></a></div><div style='width: 75px; float: left;'><a href='http://www.browserforthebetter.com/download.html' rel="nofollow" target='_blank'><img src='http://info.template-help.com/files/ie6_warning/ie6nomore-ie8.jpg' style='border: none;' alt='Get Internet Explorer 8'/></a></div> <div style='width: 73px; float: left;'><a href='http://www.apple.com/safari/download/' rel="nofollow" target='_blank'><img src='http://info.template-help.com/files/ie6_warning/ie6nomore-safari.jpg' style='border: none;' alt='Get Safari 4'/></a></div> <div style='float: left; width: 73px;'><a href='http://www.google.com/chrome' rel="nofollow" target='_blank'><img src='http://info.template-help.com/files/ie6_warning/ie6nomore-chrome.jpg' style='border: none;' alt='Get Google Chrome'/></a></div><div style='float: left;'><a href='http://www.opera.com/' rel="nofollow" target='_blank'><img src='http://info.template-help.com/files/ie6_warning/ie6nomore-opera.jpg' style='border: none;' alt='Opera'/></a></div> </div></div>" );}
Right now it only goes 75pixels. How can I make it so that it spans the whole screen of the users computer? Thanks in advance! Hello everyone, I need help to show popup only once a day per user! The Problem is that the users of my blog gets mad when the popup displays, so i only want to show it once a day. please add the codes to it fully and send it back over thanks! [CODE]<link href='http://pwnagesource.netii.net/java/jquery.fancybox.css' media='screen' rel='stylesheet' type='text/css'/> <!--[if lte IE 6]><link href="java/jquery.fancybox_ie.css" media="screen" rel="stylesheet" type="text/css" /><![endif]--> <script src='http://pwnagesource.netii.net/java/jquery-1.4.3.min.js' type='text/javascript'/> <script src='http://pwnagesource.netii.net/java/jquery.fancybox-1.3.4.js' type='text/javascript'/> <script type="text/javascript"> $j = jQuery.noConflict(); $j.fn.countDown = function(settings,to) { settings = jQuery.extend({ startFontSize: '14px', endFontSize: '14px', duration: 1000, startNumber: 10, endNumber: 0, callBack: function() { } }, settings); return this.each(function() { //where do we start? if(!to && to != settings.endNumber) { to = settings.startNumber; } //set the countdown to the starting number $j(this).text(to).css('fontSize',settings.startFontSize); //loopage $j(this).animate({ 'fontSize': settings.endFontSize },settings.duration,'',function() { if(to > settings.endNumber + 1) { $j(this).css('fontSize',settings.startFontSize).text(to - 1).countDown(settings,to - 1); } else { settings.callBack(this); } }); }); }; </script> <script type="text/javascript"> $j(function() { $j.fancybox( "<div style='margin-left: 20px;'></br><h3 style='background-color: #000; padding: 8px; color: white; text-shadow: white 1px 2px 2px;-moz-text-shadow: black 1px 2px 2px;-webkit-text-shadow: black 1px 2px 2px;font-weight: bold;font-family: \"Trebuchet MS\", Helvetica, Geneva, san-serif; font-size: 20px; '>TheEmoLab" | Subscribe To Our Newsletter!</h3><center></br><td align='left'> <p style='color:#666; font-style:italic; margin:0px 0px 5px 0px; '>Get Free Email Updates Daily!</p></td><form action='http://feedburner.google.com/fb/a/mailverify' class='emailform' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=theemolab/feed', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' style='margin: 0pt;' target='popupwindow'><input name='uri' type='hidden' value='theemolab/feed'/><input name='loc' type='hidden' value='en_US'/><input class='mbttext' name='email' onblur='if (this.value == "") {this.value = "Enter your email...";}' onfocus='if (this.value == "Enter your email...") {this.value = ""}' type='text' value='Enter your email...'/><input alt='' class='mbtbutton' title='' type='submit' value='Submit'/></form></tr></tbody></table></center></br><hr style='padding-bottom: 0; margin: 0 0 7px 0;' /><p style='padding-bottom:0;text-align: center; font-weight: bold;margin-top: 0; padding-top:0;'>This dialog box will close in <span id='dialog_close_countdown'>30</span> seconds.</p></div>", { 'autoDimensions' : false, 'width' : 500, 'height' : 215, 'overlayOpacity' : '0.8', 'overlayColor' : '#000', 'onComplete' : function() { $j('#dialog_close_countdown').countDown({ startNumber: 30, callBack: function(me) { $j.fancybox.close(); } }); } }); }); </script>[ICODE] Hi, I thought this would be relatively simple, but it's more complicated than I thought, and I can't seem to find the question resolved anywhere. My problem is that on my site I sometimes have promotions that will end at midnight. I have to physically change the code at midnight to remove the promotional material. How would one go about using Javascript to only display a <div> during a certain time? Like "Use coupon code 123 to get free shipping! Good until midnight!" and set it to stop displaying that content at 12:00 AM. Then I could remove it the next day. Or the opposite, and have it take effect a midnight, etc. I'm sure it's been done before, right? Hi. this is my code for a form i am working on, i want it so that when "Non_Conformance_Type" = ID1 that <tbody id="ID1" style="display: none;"> </tbody> is displayed. Code: <script type="text/javascript">
// <![CDATA[
function display(obj,id1,id2,id3,id4,id5,id6,id7,id8) {
txt = obj.options[obj.selectedIndex].value;
document.getElementById(id1).style.display = 'none';
document.getElementById(id2).style.display = 'none';
document.getElementById(id3).style.display = 'none';
document.getElementById(id4).style.display = 'none';
document.getElementById(id5).style.display = 'none';
document.getElementById(id6).style.display = 'none';
document.getElementById(id7).style.display = 'none';
document.getElementById(id8).style.display = 'none';
if ( txt.match(id1) ) {
document.getElementById(id1).style.display = 'block';
}
if ( txt.match(id2) ) {
document.getElementById(id2).style.display = 'block';
}
if ( txt.match(id3) ) {
document.getElementById(id2).style.display = 'block';
}
if ( txt.match(id4) ) {
document.getElementById(id2).style.display = 'block';
}
if ( txt.match(id5) ) {
document.getElementById(id2).style.display = 'block';
}
if ( txt.match(id6) ) {
document.getElementById(id2).style.display = 'block';
}
if ( txt.match(id7) ) {
document.getElementById(id2).style.display = 'block';
}
if ( txt.match(id8) ) {
document.getElementById(id2).style.display = 'block';
}
}
// ]]>
</script>
and... Code: <div id='Type_Non_Conformance_container'>
<select name='Type_Non_Conformance' id='Type_Non_Conformance' size='1' onchange="display(this,ID1,ID2,ID3,ID4,ID5,ID6,ID7,ID8)">
<option value='' %Type_Non_Conformance%></option>
<option value='ID1' %e89cf9a575493ea05184443c64bf031d%>Can Not Locate Product</option>
<option value='ID2' %4cf35d2927674904ba13019f94f16827%>Can Not Locate Email</option>
<option value='ID3' %8939f9a23e7bc218f93e8b223a364924%>Item Adjustment</option>
<option value='ID4' %27c35559235fb503e7fba0f1896cd4f2%>Missing Shipping Instructions</option>
<option value='ID5' %304931fb92d418057887a6b0727d83e7%>Partial Shippment Release</option>
<option value='ID6' %76bf955f6d4ce8498b71b82d16c656a9%,>Lost Sale</option>
<option value='ID7' %f7fa215ea76de432e1c83d283441c798%>Transfer/Order Did Not Ship</option>
<option value='ID8' %b6ed7f7429483a76bc42a5b26a1bbb3e%>Other</option>
</select>
</div>
and... Code: <tbody id="ID1" style="display: none;">
<div id='heading_container'>
<div id='heading'>Can Not Locate Product</div>
</div>
<div id='Order_Transfer_Number_1_ID1_container'>
<input type='text' name='Order_Transfer_Number_1_ID1' id='Order_Transfer_Number_1_ID1' value='%Order_Transfer_Number_1_ID1%' size='20' class='sfm_textbox'/>
</div>
<div id='Order_Transfer_Number_2_ID1_container'>
<input type='text' name='Order_Transfer_Number_2_ID1' id='Order_Transfer_Number_2_ID1' value='%Order_Transfer_Number_2_ID1%' size='20' class='sfm_textbox'/>
</div>
<div id='label8_container'>
<label id='label8' for='Order_Transfer_Number_1_ID1' class='sfm_form_label'>Order/Transfer #</label>
</div>
<div id='label9_container'>
<label id='label9' for='Order_Transfer_Number_2_ID1' class='sfm_form_label'>-</label>
</div>
<div id='Taker_Number_ID1_container'>
<input type='text' name='Taker_Number_ID1' id='Taker_Number_ID1' onkeypress='return sfm_decimal_key_handler(this, event,".")' value='%Taker_Number_ID1%'/>
</div>
<div id='label7_container'>
<label id='label7' for='Taker_Number_ID1' class='sfm_form_label'>Taker #</label>
</div>
<div class='element_label' id='Order_Transfer_ID1_0_container'><input type='radio' name='Order_Transfer_ID1' id='Order_Transfer_ID1_radio_0' value='Order' %24304b44337785c961add086070b3981%/><label for='Order_Transfer_ID1_radio_0' class='element_label' id='Order_Transfer_ID1_radio_0_label'>Order</label></div>
<div class='element_label' id='Order_Transfer_ID1_1_container'><input type='radio' name='Order_Transfer_ID1' id='Order_Transfer_ID1_radio_1' value='Transfer' tabindex='1' %9b4d481b434f7128f666cbc9a19d7c7a%/><label for='Order_Transfer_ID1_radio_1' class='element_label' id='Order_Transfer_ID1_radio_1_label'>Transfer</label></div>
<div id='label10_container'>
<label id='label10' for='Product_Number_ID1' class='sfm_form_label'>Part #</label>
</div>
<div id='Picker_Name_Last_ID1_container'>
<input type='text' name='Picker_Name_Last_ID1' id='Picker_Name_Last_ID1' value='%Picker_Name_Last_ID1%' size='20' class='sfm_textbox'/>
</div>
<div id='Product_Number_ID1_container'>
<input type='text' name='Product_Number_ID1' id='Product_Number_ID1' value='%Product_Number_ID1%' size='20' class='sfm_textbox'/>
</div>
<div id='Picker_Name_First_ID1_container'>
<input type='text' name='Picker_Name_First_ID1' id='Picker_Name_First_ID1' value='%Picker_Name_First_ID1%' size='20' class='sfm_textbox'/>
</div>
<div id='label11_container'>
<label id='label11' for='Picker_Name_First_ID1' class='sfm_form_label'>Picker Name</label>
</div>
<div id='label12_container'>
<label id='label12' for='Picker_Name_First_ID1' class='sfm_form_label'>Last</label>
</div>
<div id='label13_container'>
<label id='label13' for='Picker_Name_First_ID1' class='sfm_form_label'>First</label>
</div>
<div id='label15_container'>
<label id='label15' for='Actions_ID1' class='sfm_form_label'>Actions To Be Taken</label>
</div>
<div id='Actions_ID1_container'><textarea name='Actions_ID1' id='Actions_ID1' cols='50' rows='8' class='sfm_textarea'>%Actions_ID1%</textarea></div>
<div id='label14_container'>
<label id='label14' for='Comments_ID1' class='sfm_form_label'>Comments</label>
</div>
<div id='Comments_ID1_container'><textarea name='Comments_ID1' id='Comments_ID1' cols='50' rows='8' class='sfm_textarea'>%Comments_ID1%</textarea></div>
<div class='element_label' id='Picker_Confirm_ID1_container'><input type='checkbox' name='Picker_Confirm_ID1' id='Picker_Confirm_ID1' value='Yes' %4e8c663c6495851abfac06ef48a73f85%/><label for='Picker_Confirm_ID1' class='element_label' id='Picker_Confirm_ID1_label'>Picker Confirm Action Is Done</label></div>
<div id='Screen_Clipping_ID1_container'>
<input type='file' name='Screen_Clipping_ID1' id='Screen_Clipping_ID1'/>
</div>
<div id='label16_container'>
<label id='label16' class='sfm_form_label'>Upload Any Screen Clippings</label>
</div>
</tbody>
Please help, Thanks! I'm using php to write nested div's to a page. The div's display depending on a condition PHP Code: (if condition true) echo "<script type='text/javascript'>display(divID1);</script>"; echo "<div id='divID1'>"; (if condition true) echo "<script type='text/javascript'>display(divID2);</script>"; echo "<div id='divID2'>"; echo "<table id='tableID'><tr><td></td></tr></table>"; This is the javascript function Code: <script type='text/javascript'>
function display(id)
{
document.getElementById(id).style.display='block';
}
</script>
while both divs have {display: none;} as default, the outer div {border:solid;} does display but inner div {border:solid;} does not display. I've tried this: PHP Code: (if condition true) echo "<script type='text/javascript'>display(divID);</script>"; echo "<div id='divID1'>"; (if condition true) echo "<script type='text/javascript'>display(tableID);</script>"; echo "<table id='tableID'><tr><td></td></tr></table>"; then display using block, inline-block, table, inline-table, and still the inner element div or table will not display. Can anyone help me with this? Can someone show me how to get the summary box to the top right position under The Lighthouse address and align with the Date, Amount, etc box? Here is what I got. <title>The Lighthouse</title> <link href="lhouse.css" rel="stylesheet" type="text/css" /> <script src="list.js" type="text/javascript"></script> <script type="text/javascript"> function amountTotal() { var total = 0; for (var i=0; i < 35; i++) { total=amount[i]+total; } return total; } </script> </head> <body> <div id="title"> <img src="logo.jpg" alt="The Lighthouse" /> The Lighthouse<br /> 543 Oak Street<br /> Delphi, KY 89011<br/> (542) 555-7511 </div> <div id="data_list"> <script type="text/javascript"> document.write("<table border='1' rules='rows' cellspacing='0'>"); document.write("<tr>"); document.write("<th>Date</th><th>Amount</th><th>First Name"); document.write("</th><th>Last Name</th><th>Address</th>"); document.write("</tr>"); for (var j=0; j<35; j++) { if (j % 2 == 0) { document.write("<tr>"); } else { document.write("<tr class='yellowrow'>"); } document.write("<td>"+date[j]+"</td>"); document.write("<td class='amt'>"+amount[j]+"</td>"); document.write("<td>"+firstName[j]+"</td>"); document.write("<td>"+lastName[j]+"</td>"); document.write("<td>"+street[j]+"<br />"); document.write(city[j]+', '+state[j]+' '+zip[j]); document.write("</td>"); document.write("</tr>") } </script> </div> <div id="totals"> <script type="text/javascript"> var contributions=j; var $total=amountTotal(); document.write("<table border='1' cellspacing='1'>"); document.write("<tr>"); document.write("<th id='sumTitle' colspan='2'>"); document.write("Summary"); document.write("</th>"); document.write("</tr>"); document.write("<tr>"); document.write("<th>Contributors</th>"); document.write("<td>"+contributions+"</td>"); document.write("</tr>"); document.write("<tr>"); document.write("<th>Amount</th>"); document.write("<td>"+"$"+$total+"</td>"); document.write("</tr>"); document.write("</table>"); </script> </div> </body> </html> how can I display the same Javascript Graph more then once on the same HTML page. Everytime I add another graph using the same code on the same HTML page only one graph will show. Here is the code that I have: <html> <head> <title>Graph</title> <body> <title>Data</title> <p align="center"> </p> <p align="center"><font size="4"><b>test</b></font></p> <center> <script type="text/javascript" src=".\JavaFiles\wz_jsgraphics.js"> </script> <script type="text/javascript" src=".\JavaFiles\line.js"> </script> <div id="lineCanvas" style="overflow: auto; position:center;height:300px;width:800px;"></div> <script type="text/javascript"> var g = new line_graph(); g.add(' 1.0',197); g.add(' 2.0',721); g.add(' 3.0',852); g.render("lineCanvas","test"); </script> <p align="left"><font size="2"><b>Test </b></font></p> </body> What can I do to fix that. Thanks |
|||||||