|
JavaScript - Problems With Style:display Not Working Ie
// JavaScript Document
function open_tab(el){ if(document.getElementById(el).style.display == "none"){ document.getElementById(el).style.display = "block"; } } function close_tab(el){ if(document.getElementById(el).style.display == "block"){ document.getElementById(el).style.display = "none"; } } Pretty basic code, works great in FireFox and Chrome in both HTML and ASPX pages. However in IE it only works properly in the .aspx pages. There are a series of links so when you click it hides the div's which are set to display:"block", except for one "div" which won't change to display"none" and I don't know why. Similar TutorialsHere is my code... Code: <html>
<head>
<script type="text/javascript">
function nameofmonth(month)
{
var monthname=new Array("January","February","March","April","May","June","July","August","September","October","November","December")
return monthname[month]
}
function monthdays(month,year)
{
var daysofmonth=new Array(31,28,31,31,30,31,31,31,30,31,30,31)
if(year%4==0)
daysofmonth[1]=29
return daysofmonth[month]
}
function close(){
document.getElementById("container").style.display='none'
}
function table()
{
var now=new Date()
var hour=now.getHours()
var minute=now.getMinutes()
var second=now.getSeconds()
var date=now.getDate()
var month=now.getMonth()
var year=now.getFullYear()
now.setFullYear(year,month,1)
var firstday=now.getDay()
var monthname=nameofmonth(month)
var daysofmonth=monthdays(month,year)
if(firstday>0)
var k=-(firstday-1)
else
k=1
var table="<table border=5 cellspacing=3cellpadding=8>"
table +="<tr><th colspan=7>"+monthname + date+"th</th> <td style='cursor:pointer' onclick='close()'>[close]</td></tr>"
table +="<tr><th>sun</th><th>mon</th><th>tue</><th>wed</th><th>thu</th><th>fri</><th>sat</th></tr>"
for(var i=0;i<5;i++)
{
table+="<tr>"
for(var j=0;j<7;j++)
{
if(k<=daysofmonth && k>0)
{ if(k==date)
table+='<td id="clock" bgcolor="aqua">'+k+'</td>'
else
table+='<td style="cursor:pointer">'+k+'</td>'
k=parseInt(k)
}
else
table+="<td></td>"
k++
}
table+="</tr>"
document.getElementById("calender").innerHTML=table
}
}
</script>
</head>
<body>
<input type="text" onclick="table()"/>
<table id="container"><tr><td id="calender"></td></tr></table>
</body>
</html>
HERE is a close cell in table.when it is clicked,the close() function will called and the calender will disappear.but it is not happening.please help me ,what is wrong.Thanks in advance... Hello, I'm trying to use a couple of radio buttons to toggle between text inputs being displayed, but although the code works well in IE and GC, it doesn't in FF. That's my code: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>number</title>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
<script type="text/javascript">
function toggle(){
if (Mailbox.style.display == "none") {
document.getElementById('Mailbox').removeAttribute('style');
document.getElementById('PhoneNum').removeAttribute('style');
// document.getElementById('Mailbox').setAttribute('style','display:block');
document.getElementById('PhoneNum').setAttribute( 'style', 'display:none');
} else {
document.getElementById('Mailbox').removeAttribute('style');
document.getElementById('PhoneNum').removeAttribute('style');
document.getElementById('Mailbox').setAttribute('style','display:none');
// document.getElementById('PhoneNum').setAttribute('style','display:block');
}
}
</script>
</head>
<body>
<input type="radio" name="type" value="Voicemail" onclick="toggle()" checked="checked"/> VoiceMail
<input type="radio" name="type" value="Phone" onclick="toggle()"/> Phone Number<br></br>
<div id="Mailbox">Mailbox: <input type="text" name="mailbox"/></div>
<div id="PhoneNum" style="display:none">Number: <input type="text" name="number"/></div>
</body>
</html>
Can anyone help me sort this out? Thanks a lot, David Hi every1, i am quite new to java-script programming. i created two images , one to display when during 'event.mouseout' and the other during mouseover Both images are the background images of a td element. I created a javascript : document.getElementById('bg_image').style.backgroundImage=url('sample.gif'); it works fine in Internet Explorer but doesnt in mozilla or opera thanx in advnc 4 any1 who wants ta help me. Hi all, I'm trying to hide a form button in javascipt. Within a function I have the following ... Quote: document.getElementById(button).display='none'; However it just errors and says button is undefined. button is the id and name of the form button btw. Do I need to define which form it is part of or something else? Many thanks for any pointers or help. Sir P hi all, i have some code that is not registering. thinking i'm missing something obvious, but i sure can't see it. can someone else's eyes peruse this for me? thanks! code for the combo box: PHP Code: select name="country" size="1" id="country" style="position:absolute; left:451px; top:260px; width:176px; color:#00008B; font-family:Arial; font-weight:bold; font-size:13px; z-index:13" onChange="PhoneMask();"> <option value="1">United States</option> <option value="2">Australia</option> <option value="3">China</option> <option value="4">Mexico</option> <option value="5">United Kingdom</option> </select> code for the different labels i want to display: PHP Code: /*THIS SECTION IS FOR THE DIFFERENT PHONE NUMBERS OF THE VARIOUS COUNTRY CHOICES*/ <div id="phoneLabelUS" style="position:absolute; left:10px; top:225px; width:207px; height:15px;" align="left"> <font style="font-size:12px" color="#FF0000" face="Arial"><b> *Telephone Number </b></font><font style="font-size:12px" face="Arial"><b><span class="style9">(xxx-xxx-xxxx)</span> </b></font></div> <div id="phoneLabelAU" style="position:absolute; left:10px; top:225px; width:207px; height:15px; visibility: hidden;" align="left"><font style="font-size:12px" color="#FF0000" face="Arial"><b>*Telephone Number </b></font><font style="font-size:12px" face="Arial"><b><span class="style9"> (xx-xxxx-xxxx)</span></b></font></div> <div id="phoneLabelOTHER" style="position:absolute; left:10px; top:225px; width:207px; height:15px; visibility: hidden;" align="left"> <font style="font-size:12px" color="#FF0000" face="Arial"><b> Telephone Number</b></font></div> /*------------------------------------------------------------------------------------*/ here is my PhoneMask() function: PHP Code: function PhoneMask() { if (document.getElementById("country").value == "1") { document.getElementById("phoneLabelOTHER").style.zIndex = 50; document.getElementById("phoneLabelOTHER").style.visibility = 'hidden'; document.getElementById("phoneLabelAU").style.zIndex = 50; document.getElementById("phoneLabelAU").style.visibility = 'hidden'; document.getElementById("phoneLabelUS").style.zIndex = 51; document.getElementById("phoneLabelUS").style.visibility = 'visible'; } elseif (document.getElementById("country").value == "2") { document.getElementById("phoneLabelOTHER").style.zIndex = 50; document.getElementById("phoneLabelOTHER").style.visibility = 'hidden'; document.getElementById("phoneLabelAU").style.zIndex = 51; document.getElementById("phoneLabelAU").style.visibility = 'visible'; document.getElementById("phoneLabelUS").style.zIndex = 50; document.getElementById("phoneLabelUS").style.visibility = 'hidden'; } else { document.getElementById("phoneLabelOTHER").style.zIndex = 51; document.getElementById("phoneLabelOTHER").style.visibility = 'visible'; document.getElementById("phoneLabelAU").style.zIndex = 50; document.getElementById("phoneLabelAU").style.visibility = 'hidden'; document.getElementById("phoneLabelUS").style.zIndex = 50; document.getElementById("phoneLabelUS").style.visibility = 'hidden'; } } Hi, on my site, I have added Style 1 and Style 2 in my menu at the top right http://www.thisisworthing.com/default.php# when I click on Theme 2, it doesn't work?! please help! I have this working on my other site: http://www.mypubspace.com what am i doing wrong?! This is killing me guys... I want to take the current location of an position:absolute div and add 100 to its style.top value. However I can't get that value, I can set it but not retrieve its current value. Here is a sample.... Code: function moveit(elem){ alert(elem.style.top); alert(document.getElementById("question1").style.top); } Demo: http://campo.cc/stage.htm Please help!!! Jutboy I have found that in IE8 I cannot give an element the alpha filter (opacity) if it has the position style set to something (relative or absolute). An element without the position style (it is the empty string) can have opacity in IE8. I have found that in IE7 I can only give an element the alpha filter if the position style is set to something (relative or absolute). An element without a position style will not take the alpha filter. This is a major conundrum. Does anyone have any insight into this bug? Given the above, I can only achieve opacity in one of the two browsers. I have both IE8 and IE7 running in standards mode. The opacity is being set programmatically with JS like so: obj.style.filter = "alpha(opacity="+opacity+")"; where opacity is an integer between 0 and 100. Obviously I don't have any problem with any other browser doing opacity because it is different styles for them and they don't care about the position style at all. I'm having to write a program in javascript that appends a html table to show numerical values... Here is my code which I'm stuck at... Code: <!DOCYTYPE html>
<html>
<head><title>Numeric Bases</title>
<style type="text/css">
body { padding: 2em; margin: 0px auto; background-color: white; color: #222; font-family: "Helvetica", "Arial", sans-serif;}
h1 {border-bottom: 1px solid #aaa; text-align: center; }
p#countdown { font-size: 150px; text-align: center; margin: 0; padding: 0;}
table { width: 50%; margin: 0 auto; }
caption { font-size: xx-large; font-weight: bold; }
thead > tr {background-color: #aaa; }
td, th { text-align: center; padding: 1em; border: 1px solid #ccc; }
tr.alternate { background-color: #eee; }
</style>
<script type="text/javascript" src="num-bases1.js"></script>
</head>
<table>
<caption>Numerical values in various bases</caption>
<thead><tr><th>Dec</th><th>Binary</th><th>Octal</th><th>Hex</th></tr></thead>
<tbody></tbody>
</table>
</body></html>
Code: /*
* The following function should generate table cells
* that contain an integer (in base 10), and its equivalent
* in Binary (base 2), Octal (base 8), and Hexidecimal (base 16).
*/
var num_bases = function(max_number) {
output = '';
for ( var count = 1; count <= max_number; count++){
var binary = count.toString(2);
var octal = count.toString(8);
var hex = count.toString(16);
output += '<tr><td>' + count + '</td><td>' + binary + '</td><td>' + octal + '</td><td>' +
hex + '</td></tr><tr class="alternate"><td colspan="4"></td></tr>';
}
// TODO:
// Write a for loop that appends HTML for the
// table row and cells to the output.
//
// The following is an example of a table row:
//
// <tr> <td>4</td> <td>100</td> <td>4</td> <td>4</td> </tr>
//
// Every other row should have an "alternate" class:
//
// <tr class="alternate">
document.getElementById('num-bases').innerHTML = output;
}
window.onload = function() {
num_bases(50);
}
I was having some problems getting my function to only perform when I click the shoot button. Right now I have it where if you click the buttons and it plays the whole game. I was wondering if there is some way to maybe hide it and then just print the results only when I press the shoot button. I posted my game here its the front page. http://mmoloot4u.com/ I am trying to find out so things so far i thought about doing this, but im not sure the best way. Could i remove assignments from document.getElementByIf('whatever').value from the onclick code for rock, paper, and scissors. Instead define corresponding variables in your <script> area and assign to those variables. Then in 'shoot' you can assign those variables to the corresponding element values? Hi, I am just a noob and this is my first go at javascript and html I am trying to figure out how to display info from an array in the <textarea>, I have tried a number of things nothings worked and I know it must be something simply but have tried a number of things I also have to clear the <textarea> after it displays the info mentioned above and I think I have that sorted but I also have to have the <textarea> display all signup info stored in the array when a user clicks on a button Here's the code Code: function show()
{
var myArray = new Array();
myArray[0] = document.getElementById('fullname').value; myArray[1] = document.getElementById('Address').value; myArray[2] = document.getElementById('Phone').value;
document.writeln('Thank you for signingup,' + ' ' + myArray[0] + '. Your details will be confirmed by E-mail to ' + myArray[2] );
document.writeln("<br>")
document.writeln('Details:')
document.writeln("<br>")
for (var i=0; i<myArray.length; i++)
{document.write(myArray[i] + "<br />"); }
}
Thanks Hi and thanks in advance! Someone on this site made a form for me that hides and displays fields, depending on which variable is chosen from a given array. They did a very good job with it with one exception. It seems the code that is used to hide certain fields also hides the form data rather than posting it when the form is submitted. Here is the code for both the java (listed first) and the form itself. Code: // Funtion
// Description: show or hide element in the form according to selected element
//
function show_hide(){
if (!document.getElementById) return false;
fila = document.getElementById('tr_firstname');
fila.style.display = "none"; //hide
fila = document.getElementById('tr_firstname_data');
fila.style.display = "none"; //hide
fila = document.getElementById('tr_email');
fila.style.display = "none"; //hide
fila = document.getElementById('tr_email_data');
fila.style.display = "none"; //hide
fila = document.getElementById('tr_email');
fila.style.display = "none"; //hide
fila = document.getElementById('tr_email_data');
fila.style.display = "none"; //hide
fila = document.getElementById('tr_receipt_invoice');
fila.style.display = "none"; //hide
fila = document.getElementById('tr_receipt_invoice_data');
fila.style.display = "none"; //hide
fila = document.getElementById('tr_url');
fila.style.display = "none"; //hide
fila = document.getElementById('tr_url_data');
fila.style.display = "none"; //hide
fila = document.getElementById('tr_description_comments');
fila.style.display = "none"; //hide
fila = document.getElementById('tr_description_comments_data');
fila.style.display = "none"; //hide
var strtext ;
var nuoption= document.frmbodydata.csreason.length;
var nuindice = document.frmbodydata.csreason.selectedIndex;
var nuvalueSelect = document.frmbodydata.csreason.options[nuindice].value;
var strtextSelect = document.frmbodydata.csreason.options[nuindice].text;
if (nuvalueSelect==0 )
{
return;
}
fila = document.getElementById('tr_description_comments');
fila.style.display = ""; //show
fila = document.getElementById('tr_description_comments_data');
fila.style.display = ""; //show
if (nuvalueSelect==1 || nuvalueSelect==3 || nuvalueSelect==4 || nuvalueSelect==5 )
{
fila = document.getElementById('tr_firstname');
fila.style.display = ""; //show
fila = document.getElementById('tr_firstname_data');
fila.style.display = ""; //show
fila = document.getElementById('tr_email');
fila.style.display = ""; //show
fila = document.getElementById('tr_email_data');
fila.style.display = ""; //show
}
if (nuvalueSelect==2 || nuvalueSelect==3 || nuvalueSelect==4 || nuvalueSelect==5 )
{
fila = document.getElementById('tr_url');
fila.style.display = ""; //show
fila = document.getElementById('tr_url_data');
fila.style.display = ""; //show
}
if (nuvalueSelect==4 )
{
fila = document.getElementById('tr_receipt_invoice');
fila.style.display = ""; //show
fila = document.getElementById('tr_receipt_invoice_data');
fila.style.display = ""; //show
}
}
//
// Function
// Description: Validate the form for submit
//
function ValidateForm( form ) {
var nuindice = form.csreason.selectedIndex;
var nuvalueSelect = form.csreason.options[nuindice].value;
if (nuvalueSelect==0 )
{
return false;
}
valor = form.receipt_invoice.value;
if (!freturn(valor)) return false;
valor = form.description_comments.value;
if (!freturn(valor)) return false;
if (nuvalueSelect==1 || nuvalueSelect==3 || nuvalueSelect==4 || nuvalueSelect==5 )
{
valor = form.firstname.value;
if (!freturn(valor)) return false;
}
valor = form.lastname.value;
if (!freturn(valor)) return false;
valor = form.email.value;
if (!freturn(valor)) return false;
if (nuvalueSelect==2 || nuvalueSelect==3 || nuvalueSelect==4 || nuvalueSelect==4 )
{
valor = form.url.value;
if (!freturn(valor)) return false;
}
alert ("Thank you for your comment.")
return true
}
//
// Function
// Description: Function to return TRUE or FALSE for inclomplete data
//
/*function freturn(pbolvalue)
{
if( pbolvalue == null || pbolvalue.length == 0 || /^\s+$/.test(pbolvalue) )
{
alert ("Incomplete Data, check please.");
return false;
}else{
return true;
}
}
*/
function ReloadCaptchaImage(captchaImageId)
{
var obj = document.getElementById(captchaImageId);
var src = obj.src;
var date = new Date();
var pos = src.indexOf('&rad=');
if (pos >= 0) { src = src.substr(0, pos); }
obj.src = src + '&rad=' + date.getTime();
return false;
}
Code: <center> <form id="frmbodydata" name="frmbodydata" onsubmit="return ValidateForm(this);" action="http://www.SnapHost.com/captcha/WebFormSubmit.aspx" method="post"> <input id="SnapHostID" name="SnapHostID" value="2FMYX5LLTQZQ" type="hidden" />
<table align="center" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>Reason for contact</td>
</tr>
<tr>
<td><select id="csreason" name="csreason" onchange="show_hide();" align="left"> <option value="0">Please Select One</option> <option value="1">Contact</option> <option value="2">Report Bad Link</option> <option value="3">Gallery Submission</option> <option value="4">Preferred Partner Submission</option> <option value="5">Link Exchange</option> </select></td>
</tr>
<tr id="tr_firstname" style="display:none;">
<td>First name/Last name</td>
</tr>
<tr id="tr_firstname_data" style="display:none;">
<td><input id="firstname" /><input id="lastname" align="left" type="text" /></td>
</tr>
<tr id="tr_email" style="display:none;">
<td>Email</td>
</tr>
<tr id="tr_email_data" style="display:none;">
<td><input id="email" size="30" maxlength="30" align="left" type="text" /></td>
</tr>
<tr id="tr_receipt_invoice" style="display:none;">
<td>Receipt/Invoice</td>
</tr>
<tr id="tr_receipt_invoice_data" style="display:none;">
<td><input id="receipt_invoice" name="receipt_invoice" size="15" maxlength="15" align="left" type="text" /></td>
</tr>
<tr id="tr_url" style="display:none;">
<td>URL</td>
</tr>
<tr id="tr_url_data" style="display:none;">
<td><input id="url" size="80" maxlength="80" align="left" type="text" /></td>
</tr>
<tr id="tr_description_comments" style="display:none;">
<td>Description/Comments</td>
</tr>
<tr id="tr_description_comments_data" style="display:none;">
<td><textarea id="description_comments" rows="10" cols="50" align="left"> </textarea></td>
</tr>
<tr>
<td><i>Enter security code</i></td>
<td>SECURITY CODE</td>
</tr>
<tr>
<td><input name="CaptchaCode" class="txtFields" maxlength="6" style="width:130px; height:28px; font-size:24px; text-align:center;" type="text" /></td>
<td><a href="http://www.SnapHost.com/captcha/ProCaptchaOverview.aspx"><img id="CaptchaImage" alt="Web Form Code" style="margin-left:20px; border:1px
solid #999999;" src="http://www.SnapHost.com/captcha/WebForm.aspx?id=2FMYX5LLTQZQ&ImgType=2" /></a> <br /> <a href="#" onclick="return ReloadCaptchaImage('CaptchaImage');"><span style="font-size:12px;">reload image</span></a></td>
</tr>
<tr>
<td align="center"><input src="http://www.theopenpussy.com/1/images/submit.gif" alt="Submit button" type="image" /></td>
</tr>
<tr>
<td></td>
</tr>
</tbody>
</table>
</form> </center>
Sorry for all the code! Is there anything I can do to maintain the hide and seek nature of the forms and show the data that is submitted, or am I stuck displaying all fields all the time? Evening all, I am new here and seeking some helping modifying this existing code that I found so that it will allow me to run 3 scrollers within the same page. I have tried to rename the variables and other elements within the script but still no luck.... I appreciate the responses: Code: <script type="text/javascript">
var goleftimage='images/left_arrow_1.jpg'
var gorightimage='images/right_arrow_1.jpg'
var menuwidth=380
var menuheight=60
var scrolldir="normal"
var scrollspeed=6
var menucontents='<nobr><center>SCROLLING CONTENT HERE</center></nobr>'
var iedom=document.all||document.getElementById
var rightdircode='onMouseover="moveleft()" onMouseout="clearTimeout(lefttime)"'
var leftdircode='onMouseover="moveright()" onMouseout="clearTimeout(righttime)"'
if (scrolldir=="reverse"){
var tempswap=leftdircode
leftdircode=rightdircode
rightdircode=tempswap
}
if (iedom)
document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100;left:-5000">'+menucontents+'</span>')
var actualwidth=''
var cross_scroll, ns_scroll
var loadedyes=0
function fillup(){
if (iedom){
cross_scroll=document.getElementById? document.getElementById("test2") : document.all.test2
cross_scroll.innerHTML=menucontents
actualwidth=document.all? cross_scroll.offsetWidth : document.getElementById("temp").offsetWidth
}
else if (document.layers){
ns_scroll=document.ns_scrollmenu.document.ns_scrollmenu2
ns_scroll.document.write(menucontents)
ns_scroll.document.close()
actualwidth=ns_scroll.document.width
}
loadedyes=1
}
window.onload=fillup
function moveleft(){
if (loadedyes){
if (iedom&&parseInt(cross_scroll.style.left)>(menuwidth-actualwidth)){
cross_scroll.style.left=parseInt(cross_scroll.style.left)-scrollspeed+"px"
}
else if (document.layers&&ns_scroll.left>(menuwidth-actualwidth))
ns_scroll.left-=scrollspeed
}
lefttime=setTimeout("moveleft()",50)
}
function moveright(){
if (loadedyes){
if (iedom&&parseInt(cross_scroll.style.left)<0)
cross_scroll.style.left=parseInt(cross_scroll.style.left)+scrollspeed+"px"
else if (document.layers&&ns_scroll.left<0)
ns_scroll.left+=scrollspeed
}
righttime=setTimeout("moveright()",50)
}
if (iedom||document.layers){
with (document){
write('<table border="0" cellspacing="0" cellpadding="1">')
write('<td valign="middle"><a href="#" '+leftdircode+'><img src="'+goleftimage+'"border=0></a> </td>')
write('<td width="'+menuwidth+'px" valign="top">')
if (iedom){
write('<div style="position:relative;width:'+menuwidth+'px;height:'+menuheight+'px;overflow:hidden;">')
write('<div id="test2" style="position:absolute;left:0;top:0">')
write('</div></div>')
}
else if (document.layers){
write('<ilayer width='+menuwidth+' height='+menuheight+' name="ns_scrollmenu">')
write('<layer name="ns_scrollmenu2" left=0 top=0></layer></ilayer>')
}
write('</td>')
write('<td valign="middle"> <a href="#" '+rightdircode+'>')
write('<img src="'+gorightimage+'"border=0></a>')
write('</td></table>')
}
}
</script>
I will include this within a php page and the menu contents will be dynamically pulled from a database, I can handle populating the menucontents however, I have failed to be able to have more than one scroller on the page at once. Thanks 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! Evening everyone Having some fits over getting Glider.js to operate correctly in IE7. Working fine in IE8, Firefox and Safari. Can't seem to figure out why the code isn't functioning properly, but I'm not JavaScript expert, either. Here is the URL: http://jetfuelcreative.com/clients/alf/index.php Here is the sections of code that is pertains to glider.js: Code: <script src="javascripts/prototype.js" type="text/javascript" charset="utf-8"></script> <script src="javascripts/effects.js" type="text/javascript" charset="utf-8"></script> <script src="javascripts/glider.js" type="text/javascript" charset="utf-8"></script> Code: <span class="glider-right-arrow"> <a href="#" onclick="my_glider.next();return false"><img src="images/glider-arrow-right.png" style="border:none" alt="arrow-right"/></a> </span> <span class="glider-left-arrow"> <a href="#" onclick="my_glider.previous();return false;"><img src="images/glider-arrow-left.png" style="border:none" alt="arrow-left"/></a> </span> Code: <script type="text/javascript" charset="utf-8">
var my_glider = new Glider('my-glider', {duration:.75});
</script>
Thanks for any help you can provide! this is really starting to irritate me, and I can't figure it out. Here is the Javascript: Code: function shipUPS(str){
var divShip=document.getElementById("deliv2");
if(str=="ups"){
if (divShip.style.display=="none") {
divShip.style.display = '';}
}
else {
if (divShip.style.display!="none") {
divShip.style.display = "none";}
}
}
CSS: Code: #deliv2 {
display: none;
}
and the HTML: Code: <div id="deliv1">Deliver To:
<select name="DelivToCust" tabindex="10" onchange="shipUPS(this.value)">
<option value="cust">Customer</option>
<option value="sr">Sales Rep</option>
<option value="pick">Pick-Up</option>
<option value="ups">Ship UPS</option>
<option value="Other">Other</option>
</select>
</div>
<div id="deliv2">Bill for Shipping?
</div>
as written, it doesn't work. If I change the CSS to: Code: #deliv2 {
display: ;
}
It works beautifully! however I want the DIV hidden from the start. could someone please help me figure this out? Thank you! So, I'm using a lot of js and I needed to find a work around to get it all working together, so I'm using InsertContent and RemoveContent to control several divs that I have. In this case it is 4 divs, but in other situations I'll have up to 10. My problem is that when the user starts with the first div displayed, the other 3 swap just fine, however, when clicking through the set of links, once the user gets to the 3rd link that is supposed to swap out the divs all the divs show up except the first, and the same happens on the fourth link. This is my js for the div swap functionality: Code: <script type="text/javascript">
<!--
function InsertContent(tid) {
if(document.getElementById(tid).style.display == "none") {
document.getElementById(tid).style.display = "";
}
else {
document.getElementById(tid).style.display = "none";
}
}
function RemoveContent(tid) {
if(document.getElementById(tid).style.display == "") {
document.getElementById(tid).style.display = "none";
}
else {
document.getElementById(tid).style.display = "";
}
}
//-->
</script>
These are the html links: Code: <div class="listimg"><a href="javascript:RemoveContent('view2','view3','view4'); InsertContent('view1'); swapimg(0); " ><img src="../assets/images/nokia/nokia01_thumb.jpg" id="item0" alt="" style="opacity:.99;" /></a></div>
<div class="listimg"><a href="javascript:RemoveContent('view1','view3','view4'); InsertContent('view2'); swapimg(1); "><img src="../assets/images/nokia/nokia02_thumb.jpg" id="item1" alt="" /></a></div>
<div class="listimg"><a href="javascript:RemoveContent('view1','view2','view4'); InsertContent('view3'); swapimg(2);"><img src="../assets/images/nokia/nokia03_thumb.jpg" id="item2" alt=""/></a></div>
<div class="listimg"><a href="javascript:RemoveContent('view1','view2','view3'); InsertContent('view4'); swapimg(3);"><img src="../assets/images/nokia/nokia04_thumb.jpg" id="item3" alt=""/></a></div>
And these are the divs that are being removed and added: Code: <div id="view1" style="display: " > <a href="../assets/images/nokia/nokia01_big.jpg" class="thickbox" title="Windowcling" rel="gallery-art" >view larger1</a> </div> <div id="view2" style="display:none" > <a href="../assets/images/nokia/nokia02_big.jpg" class="thickbox" title="Windowcling2" rel="gallery-art2" >view larger2</a> </div> <div id="view3" style="display:none" > <a href="../assets/images/nokia/nokia03_big.jpg" class="thickbox" title="Windowcling3" rel="gallery-art3" >view larger3</a> </div> <div id="view4" style="display:none" > <a href="../assets/images/nokia/nokia04_big.jpg" class="thickbox" title="Windowcling2" rel="gallery-art4" >view larger4</a> </div> Any help would be greatly appreciated. Thank you in advance! if I have an html page that uses the <style> or a <link> to call a style sheet these properties aren't available to JavaScript is there a good way to access them? eg Code: <html>
<head>
<title>expandable text area</title>
<style type="text/css">
#expandable{
height: 100px;
}
</style>
</head>
<body>
<form>
<textarea id="expandable" cols="30" rows="10"></textarea>
</form>
</body>
<script type="text/javascript">
document.getElementById('expandable').addEventListener('click',function(){
if(!this.style.height){
this.style.height = this.scrollHeight+'px';
}
alert(this.style.height);
}, true);
</script>
</html>
In this example I have the height set but I cannot access it since it is not declared in the style attribute of the html element I hope I have this post in the right place! Any help would be very much appreciated... I have a feature on my website that allows users to choose the website background (using alternate css sheets) and then uses an externally linked javascript file to store the background choice as a cookie so it is consistent throughout the website. This works perfectly locally (i.e. when previewing my website on my computer) but now it is uploaded to my host it doesn't appear to be working. (with the same browser) My javascript is he http://www. b r p - e n v .com/javascript/backgroundchange.js (with no spaces) The website that the javascript file is linked to is http://www. b r p - e n v .com (with no spaces) In the head I have: <script type="text/javascript" src="../javascript/backgroundchange.js"></script> ...then I have: <body onload="set_style_from_cookie()"> ...and for users to choose which background: <form> <input type="image" src="../images/white-background-thumb.jpg" onclick="switch_style('bg1');return false;" name="theme" value="White" id="bg1"> etc... </form> My problem is: The background reverts back to the default when moving to a different page. This would indicate that the background choice is not being saved in cookies. But this works locally! I have tried putting the javascript directly onto each page but I still had the same problem. I hope someone can help, I will be so grateful if I can get this to work. Many thanks indeed! Hi All, I have two sites using zeroclipboard (hosted at google code) one works only in firefox and barely, the other is not working at all. It does use Flash, but I think the issue is on the js side of things. On both links, clicking the filename below the thumbnail will copy and add the link as an IMG code to a div below. *working* link http://pics.boasbysatyra.com/access/spiders.php This one only works in FF, and the clip area is offset badly. Here is the template for the zc code: Code: <div class="photo" style="float: left; padding: 4px;">
<div class="exif"><a href="[~41~]?dir=[+images_dir+]&file=[+filename+]" rel="shadowbox[exif_[+content_id+]]" title="exif data for [+filename+]" alt="exif data for [+filename+]">EXIF Data</a></div>
<a class="thumb" rel="shadowbox[[+content_id+]]" href="[+images_dir+][+filename+]" title="[+title+] | [+description+]">
<img src="[+thumbs_dir+][+filename+]" alt="[+title+]" />
</a>
<div class="filecode" id="d_clip_button[+filename+]">[+filename+]
<script language="JavaScript">
var clip = new ZeroClipboard.Client();
clip.setText( 'http://pics.boasbysatyra.com[+images_dir+][+filename+]' );
clip.glue( 'd_clip_button[+filename+]' );
clip.addEventListener( 'onComplete', my_complete );
function my_complete( client, text ) {
$('.picklist').append('<div class="piclinks">[IMG]' + text + '[/IMG]</div>');
}
</script>
</div>
</div>
And the JS for the page: Code: var needRef;
//flag for page reload
function pEdit(){
needRef = 1;
}
Shadowbox.init({
handleOversize: "resize",
modal: true,
initialHeight: 32,
initialWidth: 400,
overlayOpacity: 0.85,
onClose: function(){//check for reload flag and reload
if (needRef == 1){window.location.href=window.location.href;}
}
});
ZeroClipboard.setMoviePath('/js/zc/ZeroClipboard10.swf');
function initMenu() {
$('#menu ul').hide();
$('#menu ul:first').show();
$('#menu li a').click(function() {
var checkElement = $(this).next();
if ((checkElement.is('ul')) && (checkElement.is(':visible'))) {
//return false;
}
if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$('#menu ul:visible').slideUp('normal');
checkElement.slideDown('normal');
return false;
}
});
}
$(document).ready(function() {
initMenu();
});
Now on to the totally broken one - it creates the elements required, but gives them a 0x0 area! http://jb.boasbysatyra.com/forum-pic...cs/nature.html Code: div class="photo" style="float: left; margin: 4px;">
<div class="exif"><a href="[~133~]?dir=[+images_dir+]&file=[+filename+]" rel="shadowbox[exif_[+content_id+]]" title="exif data for [+filename+]" alt="exif data for [+filename+]">EXIF Data</a></div>
<a class="thumb" rel="shadowbox[[+content_id+]]" href="[+images_dir+][+filename+]" title="[+title+] | [+description+]">
<img src="[+thumbs_dir+][+filename+]" alt="[+title+]" />
</a>
<div id="d_clip_container[+filename+]" style="position:relative; width: 120px; height: 0.5em;">
<div class="filecode" id="d_clip_button[+filename+]">[+filename+]
<script language="JavaScript">
var clip = new ZeroClipboard.Client();
clip.setText( 'http://jb.boasbysatyra.com[+images_dir+][+filename+]' );
clip.glue( 'd_clip_button[+filename+]','d_clip_container[+filename+]' );
clip.addEventListener( 'onComplete', my_complete );
function my_complete( client, text ) {
$('.picklist').append('<div class="piclinks">[IMG]' + text + '[/IMG]</div>');
}
</script>
</div>
</div>
</div>
On this one I wrapped it as suggested on the zc site, I originally started with the code for the other site - it didn't work, so I went tweaking... Here is the JS: Code: var needRef;
//flag for page reload
function pEdit(){
needRef = 1;
}
Shadowbox.init({
handleOversize: "resize",
modal: true,
initialHeight: 32,
initialWidth: 400,
overlayOpacity: 0.85,
onClose: function(){//check for reload flag and reload
if (needRef == 1){needRef = 0; window.location.href=window.location.href;}
}
});
ZeroClipboard.setMoviePath('/js/zc/ZeroClipboard10.swf');
$(document).ready(function() {
$(".dim img").fadeTo("slow", 0.65);
$(".dim img").hover(function(){
$(this).fadeTo("slow", 1.0);
},function(){
$(this).fadeTo("slow", 0.65);
});
$('#mainContent').hide().fadeIn(1200);
//When page loads...
$(".tab_content").hide(); //Hide all content
// $("ul.tabs li:first").addClass("active").show(); //Activate first tab
// $(".tab_content:first").show(); //Show first tab content
//On Click Event
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content
var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active ID content
return false;
});
});
(function($) {
$(document).ready(function(){
$('.menu1').ptMenu();
$('.menu2').ptMenu({vertical:true});
});
})(jQuery);
I have taken a look at this for a few days and tried many things with no luck, any help is appreciated. Thanks! |
|||||||