|
JavaScript - Element.style.display='none' Is Not Working
Here 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... Similar Tutorials// 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. 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 Hi All, I'm using the following code to (try to) update the style of an element in javascript. As you'll no doubt gather from the code, I'm trying to edit the opacity of the element. This code executes fine in FF, Opera and Chrome. However, Internet explorer keeps responding with 'style is null or not an object'. Basically, I don't think it's returning the correct element from the DOM, or, for that matter, any element. To add some more specific guidance, on the homepage I call launch_randomise() in the onload method, which, after 5 seconds, calls randomise_bottom_images() which calls itself and the bottom image regeneration function every 5 seconds, ensuring the images are regenerated every five seconds. Regenerating the bottom images is a three-step process: 1, fade out, 2 switch innerHTML, 3, fade back in. My functions for altering the opacity or innerHTML quite obviously rely on being able to talk about a DOM object, I know no other way of achieving this. I tried straight out getElementById but this doesn't seem to work in IE8, fine in FF, Op, GC. So, after much googling I replaced getElementById(string) with my own getElement(string). However, this still doesn't work. Any thoughts? Any help would be much appreciated!! Getting elements/setting style functions Code: function getElement(id, type)
{
var inputs = document.getElementsByTagName(type);
var descField = null;
for(var i=0;i<inputs.length;i++)
{
if(inputs.item(i).getAttribute('id') == id )
{
descField = inputs.item(i);
break;
}
}
return descField;
}
// setStyleById: given an element id, style property and
// value, apply the style.
// args:
// i - element id
// p - property
// v - value
//
function setStyleById(i, p, v) {
//var n = document.getElementById(i);
var n = getElement(i, 'div');
n.style[p] = v;
}
Full Code: Code:
function getElement(id, type)
{
var inputs = document.getElementsByTagName(type);
var descField = null;
for(var i=0;i<inputs.length;i++)
{
if(inputs.item(i).getAttribute('id') == id )
{
descField = inputs.item(i);
break;
}
}
return descField;
}
// setStyleById: given an element id, style property and
// value, apply the style.
// args:
// i - element id
// p - property
// v - value
//
function setStyleById(i, p, v) {
//var n = document.getElementById(i);
var n = getElement(i, 'div');
n.style[p] = v;
}
function replace_html(el, html) {
if( el ) {
oldEl = (typeof el === "string" ? document.getElementById(el) : el);
newEl = document.createElement(oldEl.nodeName);
// Preserve any properties we care about (id and class in this example)
newEl.id = oldEl.id;
newEl.className = oldEl.className;
//alert(newEl.id);
//set the new HTML and insert back into the DOM
newEl.innerHTML = html;
// alert(newEl.innerHTML);
if(oldEl.parentNode)
oldEl.parentNode.replaceChild(newEl, oldEl);
else
oldEl.innerHTML = html;
//return a reference to the new element in case we need it
return newEl;
}
};
function populate_array()
{
// this function's sole job is to populate the array of items to be used.
var da = new Array(8);
da[0] = new Array(3);
da[0][0] = "portfolio/garage_conversion_before.jpg";
da[0][1] = "portfolio/garage_into_kitchen.jpg";
da[0][2] = "pfimage1";
da[1] = new Array(3);
da[1][0] = "portfolio/refurb_old.jpg";
da[1][1] = "portfolio/refurb_new.jpg";
da[1][2] = "pfimage2";
da[2] = new Array(3);
da[2][0] = "portfolio/fireplace_old.jpg";
da[2][1] = "portfolio/fireplace_new.jpg";
da[2][2] = "pfimage3";
da[3] = new Array(3);
da[3][0] = "portfolio/bathroom1_old.jpg";
da[3][1] = "portfolio/bathroom1_new.jpg";
da[3][2] = "pfimage4";
da[4] = new Array(3);
da[4][0] = "portfolio/kitchen1_old.jpg";
da[4][1] = "portfolio/kitchen1_new.jpg";
da[4][2] = "pfimage5";
da[5] = new Array(3);
da[5][0] = "portfolio/bathroom2_old.jpg";
da[5][1] = "portfolio/bathroom2_new.jpg";
da[5][2] = "pfimage6";
da[6] = new Array(3);
da[6][0] = "portfolio/bathroom3_old.jpg";
da[6][1] = "portfolio/bathroom3_new.jpg";
da[6][2] = "pfimage7";
da[7] = new Array(3);
da[7][0] = "portfolio/ext1_old.jpg";
da[7][1] = "portfolio/ext1_new.jpg";
da[7][2] = "pfimage8";
return da;
}
function switchimage(folioItemNum, ImageState)
{
var isOpera, isIE = false;
if(typeof(window.opera) != 'undefined'){isOpera = true;}
if(!isOpera && navigator.userAgent.indexOf('Internet Explorer')){isIE = true;}
// folioItemNum tells us which folio item to access,
// ImageState tells us which image to set.
// we will use ajax/dom to re-write the document.
var OldImageState = 1 - ImageState;
// 2d array of items.
var darray = populate_array();
// take one item and fade out
opacity(darray[folioItemNum][2], 100, 0, 500);
// re-arrange.
// with time delay.
window.setTimeout(function (a,b,c,d,e){
var y = "<a href=\"" + c + "\" rel=\"lightbox[" + d + "]\" class=\"hiddenimg\"><img src=\"" + c + "\" class=\"folioimghidden\"/></a><a href=\"" + b + "\" rel=\"lightbox[" + d + "]\"><img src=\"" + b + "\" class=\"folioimg\"/></a>";
replace_html(e, y);
opacity(e, 0, 100, 500);
},500,document.getElementById(darray[folioItemNum][2]),darray[folioItemNum][ImageState],darray[folioItemNum][OldImageState],folioItemNum,darray[folioItemNum][2]);
// done.
}
function regenbottomimgs()
{
var isOpera, isIE = false;
if(typeof(window.opera) != 'undefined'){isOpera = true;}
if(!isOpera && navigator.userAgent.indexOf('Internet Explorer')){isIE = true;}
var array = Array(3);
array[0] = -1;
array[1] = -1;
array[2] = -1;
array[0] = get_unique_random_int(6, array, 3);
array[1] = get_unique_random_int(6, array, 3);
array[2] = get_unique_random_int(6, array, 3);
var darray = populate_array();
var imgstr = "<img src=\"" + darray[array[0]][1] + "\" class=\"scaleddown1\" /><img src=\"" + darray[array[1]][1] + "\" class=\"scaleddown2\" /><img src=\"" + darray[array[2]][1] + "\" class=\"scaleddown2\" />";
opacity("bottomimgs", 100, 0, 500);
window.setTimeout(function (a,b){
var x = replace_html(b, a);
opacity(b, 0, 100, 500);
},500,imgstr,"bottomimgs");
}
function get_random_int(Max)
{
var randomnumber = Math.round( Math.random() * Max );
return randomnumber;
}
function get_unique_random_int(Max, List, List_Length)
{
var stop = 1
var esc = 0
var x = 0;
var i = 0;
while ( stop == 1 )
{
esc = 0;
x = get_random_int(Max);
for ( i = 0; i < List_Length; i++ )
{
if ( x == List[i] )
{
esc = 1;
break;
}
}
if ( esc == 0 )
{
stop = 0;
}
}
return x;
}
function randomise_bottom_images()
{
regenbottomimgs();
setTimeout("randomise_bottom_images()",5000);
}
function launch_randomise()
{
setTimeout("randomise_bottom_images()", 5000);
}
function switchallnew()
{
switchimage(0,1);
switchimage(1,1);
switchimage(2,1);
switchimage(3,1);
switchimage(4,1);
switchimage(5,1);
switchimage(6,1);
switchimage(7,1);
}
function opacity(id, opacStart, opacEnd, millisec)
{
//speed for each frame
var speed = Math.round(millisec / 100);
var timer = 0;
//determine the direction for the blending, if start and end are the same nothing happens
if( opacStart > opacEnd )
{
for(i = opacStart; i >= opacEnd; i--) {
setTimeout(function (opacity, id) {
setStyleById(id, "opacity", (opacity / 100));
setStyleById(id, "MozOpacity", (opacity / 100));
setStyleById(id, "KhtmlOpacity", (opacity / 100));
setStyleById(id, "filter", "alpha(opacity=" + opacity + ")");
},(timer * speed), i, id);
timer++;
}
}
else if(opacStart < opacEnd)
{
for(i = opacStart; i <= opacEnd; i++)
{
setTimeout(function (opacity, id) {
setStyleById(id, "opacity", (opacity / 100));
setStyleById(id, "MozOpacity", (opacity / 100));
setStyleById(id, "KhtmlOpacity", (opacity / 100));
setStyleById(id, "filter", "alpha(opacity=" + opacity + ")");
},(timer * speed), i, id);
timer++;
}
}
}
Thanks, A. Hi all, I'm working on a script which is actually a very simple tab system. Code: <script>
window.addEvent('domready', function() {
var tabs = $$('div[id^="tab"]');
tabs.fade('hide');
$$('#buttons li a').each(function(element,index){
element.addEvent('click',function(){
tabs.fade(0);
tabs[index].fade(1);
});
});
});
</script>
<ul id="buttons">
<li><a href="#">button 1</a></li>
<li><a href="#">button 2</a></li>
<li><a href="#">button 3</a></li>
<li><a href="#">button 4</a></li>
</ul>
<div id="tab1">content for button 1</div>
<div id="tab2">content for button 2</div>
<div id="tab3">content for button 3</div>
<div id="tab4">content for button 4</div>
I'm trying to change the style of the selected button. I mean that the button which is selected each time, should be highlighted (bold text). How can I add this function in the existing code? Can you help me please? I'm using the 1.2.0 version of mootools for this. 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 I want to create an array for a religious website that will display a different Bible verse for each day of the year. This is how I incremented each day of the year. Code: var myDate=new Date(); myDate.setFullYear(2011,2,4); myDate.setDate(myDate.getDate()+1); How do I make the connection between the array and the new date as it changes? This is a snippet from the array. Code: var dailyVerseRef=new Array(); dailyVerseRef[0]="Genesis 1:1"; dailyVerseRef[2]="Genesis 1:2"; dailyVerseRef[3]="Genesis 1:3"; dailyVerseRef[4]="Genesis 1:4"; dailyVerseRef[5]="Genesis 1:5"; dailyVerseRef[6]="Genesis 1:6"; dailyVerseRef[7]="Genesis 1:7"; dailyVerseRef[8]="Genesis 1:8"; I used a switch to go through the days of the week, but to go through the days of the year seems more difficult. 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 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 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?! 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. 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? 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! The bit of code in bold in the code below is giving me this error in IE: Error: Code: Webpage error details User Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; Trident/4.0; Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1) ; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; .NET CLR 3.5.30729; Tablet PC 2.0; InfoPath.2; OfficeLiveConnector.1.4; .NET CLR 3.0.30729; OfficeLivePatch.1.3; MSN OptimizedIE8;ENGB) Timestamp: Tue, 16 Mar 2010 15:07:11 UTC Message: HTML Parsing Error: Unable to modify the parent container element before the child element is closed (KB927917) Line: 0 Char: 0 Code: 0 URI: http://www.mateinastate.co.uk/users/mateinastate Code: Code: if(document.getElementById('msn1').innerHTML=="")
{
document.getElementById('msn1').style.display='none';
}
if(document.getElementById('yahoo1').innerHTML=="")
{
document.getElementById('yahoo1').style.display='none';
}
if(document.getElementById('skype1').innerHTML=="")
{
document.getElementById('skype1').style.display='none';
}
if(document.getElementById('facebook1').innerHTML.toLowerCase().substr(0,18)=='<a href="http://">')
{
document.getElementById('facebook1').style.display='none';
}
else if(document.getElementById('facebook1').innerHTML.toLowerCase().substr(0,11)=='<a href="">')
{
document.getElementById('facebook1').style.display='none';
} else
{
document.getElementById('fbook-add').innerHTML='Facebook Profile';
}
What it's saying isn't actually true (I don't think)... this is how the section is laid out: Code: <div id="submenu1" class="anylinkcss"> <ul> <li class="contact-pm"><a href="/index.php?do=pm&act=new&to=$RateViewProfileUserName$&returnurl=$ReturnURL$">PM me</a></li> <li class="contact-email"><a href="/index.php?do=email&id=$RateViewProfileUserId$">E-mail me</a></li> <li class="contact-msn" id="msn1">$RateViewProfileUser-profile_msn$</li> <li class="contact-yahoo" id="yahoo1">$RateViewProfileUser-profile_yahoo$</li> <li class="contact-skype" id="skype1">$RateViewProfileUser-profile_skype$</li> <li class="contact-facebook" id="facebook1"><a href="$RateViewProfileUser-profile_facebook$"><span id="fbook-add"></span></a></li> </ul> </div> <script type="text/javascript" src="/html_1/js/contact-information.js"></script> Does anyone know why this might error in just IE? 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! Hi, I'm relativly new to JS and brand new to the forum so you might need to dumb down your replys for my slightly lacking knowledge. That being said I do have a very solid grasp of html, css and am getting there with JS and its various frameworks. I'm integrating wordpress into an existing site for a friend and currently have the main blog page appear in a DIV. This is the best way to integrate in this case due to many reasons mostly of way the site is constructed. Code: <div class="scroll-pane" id="scrollbox"> WORDPRESS BLOG </div> My issue is that links within that DIV, in the blog, when clicked redirect the page. The simple answer to this would be to have them just open in a new page, which I can easily do with the below code. Code: function Init()
{
// Grab the appropriate div
theDiv = document.getElementById('scrollbox');
// Grab all of the links inside the div
links = theDiv.getElementsByTagName('a');
// Loop through those links and attach the target attribute
for (var i=0, len=links.length; i < len; i++) {
// the _blank will make the link open in new window
links[i].setAttribute('target', '_blank');
}
}
window.onload = Init;
But what I'd rather it do is have any link clicked inside the DIV to reload in that same DIV, similar to an iframe, but obviously without using an iframe, due to it's compatibility issues. Is this possible by editing the above code? If not what do I need? Thanks in advance for any help! 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! 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! 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! Ok, here's the page as it is right now: http://www.crackin.com/dev/index.php The paganation for the top 3 images is Sweet Pages: http://tutorialzine.com/2010/05/swee...tion-solution/ The content loading below is a page-replace script I got he http://css-tricks.com/dynamic-page-replacing-content/ And I'm also trying to integrate shadowbox (or lightbox, whichever will work) into the lower set of images. I have 2 problems right now I can't figure out, and I'm sure it somehow has to do with the fact I'm trying to mash 3 different JS addons into a single page, I'm still pretty new to this whole JS thing... First problem I'm having is that IE7 and Opera don't like the links in the upper images. Clicking a gallery image does not load the associated page below from those 2 browsers, however IE8 and FF seem to work fine. Second problem is getting shadowbox/lightbox to work on those lower images. I tried a couple different things but main thing I did is make sure the script is actually working by setting the header text to a link with shadowbox attached and that worked. That same link doesn't work when applied to the lower images (loads image in new window). Lightbox does the same thing. Thanks for any help. |
|||||||