Show / Hide DIV OnClick No Longer Works
Feb 8, 2011
I have a page where an alternate address area is kept hidden via JavaScript and CSS divs. If you click that you want to use an alternate billing address, two divs are expanded. One with the form fields for entering in your alternate address, the other area has further info about why we need that alternate address. (Code is below). This works PERFECTLY for my needs....however, if you reload the page, the "show" button remains selected and OFF=ON and ON=OFF if you get my meaning...so when you click the radio that should be hiding the divs, it shows them and vice versa. Additionally if there is an error in the form and the page reloads to display the error, only the billing address area stays expanded (its inside the <form> tags), the text area next to it goes back to being hidden, and the show/hide OnClick no longer works. Ideally, I'd like the two to maintain the same state (i.e. if both we're shown, both stay shown).
CODE (trimmed down of course):
Code:
<head>
<style type="text/css" media="all">
.invis { visibility: hidden; display: none; }
.vis { visibility: visible; display: inline; }
</style>
<script language="javascript" type="text/javascript">
var c = 'invis';
var ids = new Array('id1', 'id2'); // IDs of your <div>s
function doSwap() {
c == 'vis' ? c = 'invis' : c = 'vis';
for (var i=0; i<ids.length; i++) {
document.getElementById(ids[i]).className = c;
}}
</script>
</head>
<body>
<div id="id1" class="invis">This is all just plain text that appears when the NO radio is clicked but disappears on reload</div>
<form>
<table>
<tr>
<td>
<input type="Radio" name=" " value="hide" onClick="doSwap()" id=""> YES
<input type="Radio" name=" " value="show" onClick="doSwap()" id=""> NO
</td>
</tr>
<tr id="id2" class="invis">
<td>extra address entry stuff that appears when the NO radio and that stays on page after reload</td>
</tr>
</table>
</body>
View 2 Replies
ADVERTISEMENT
Jan 22, 2006
I have a WYSIWYG editor based on the HTMLArea project that uses the
cssRules object of a stylesheet to add/update stylesheet rules for
table cells. Ever since I upgraded to FireFox 1.5, I get the following
error message when trying to access the cssRules object:
"Access to restricted URI denied"
The code I am trying to execute looks like this:
var currStyleSheet = editor._doc.styleSheets[0];
var currRules = currStyleSheet.cssRules;
var tdIndex = currRules.length;
for(i = 0; i < currRules.length; i++) {
if(currStyleSheet.cssRules.item(i).type == 1) {
//if it is a style rule
var currRule = currRules.item(i)
if (currRule.selectorText.toLowerCase() == "td") {
tdIndex = i;
}
}
}
This code is simply looking for any rules for TD elements. I am at a
loss as to what is going on and/or what changed if FireFox to cause
this error. It worked fine in previous releases of FireFox. The
document that I am trying to access the stylesheet for is within an
IFRAME, which is what I believe is causing the problem.
View 19 Replies
View Related
Jul 16, 2010
When I click the button, the images hide/show in IE, but this doesn't work in Firefox. I've tried JSLint and JavascriptLint, but haven't figured out what the issue is. This is the code below:
<script language="Javascript">
<![CDATA[
function openConsole(docId, attachmentFileName, name) {
if (window.customOpenConsole) {
[Code].....
View 3 Replies
View Related
Nov 16, 2011
I have two radio buttons on a form. I wish for one button to show a div that's hidden with {display:none;}, and the other to put it back to being hidden when selected. My code seemed sound to me but in firefox it doesn't really work, only in internet explorer. I would like to keep the coding as simple as possible:
[Code]..
View 10 Replies
View Related
Mar 17, 2010
Heres the code -
<html>
<head>
<title></title>
[code]....
View 7 Replies
View Related
Sep 29, 2010
I'm using simpleModal.js on a page and it works great however, once I try to add options to the modal it no longer works.
Here's what I'm using now and it works successfully:
If I try adding a width option it breaks...absolutely nothing happens:
View 1 Replies
View Related
Aug 10, 2009
Alright, me having a very basic knowledge of js I'm looking for some help with(what I think should be) a simple hide/show of a set of divs. I've broken down the ccs/html I'm looking at on a test page here...
The js I have in the page had been what I tried to modify from a simple hide/show, but it's not doing what I want it to do (obviously). The goal is when you click on link 3, I want white3 to hide and all the other white divs to show, when you click on link 3, white 2 will hide and the other white divs will show, and so on. So basically it's revealing what div you click to. A lot of what I've found have been just toggles, but I'm not very confident in my ability to adjust code.
View 7 Replies
View Related
Jan 30, 2010
I'm new to the forums, so if i post anything wrong let me know. I'm trying to use links to hide all the images, and show just ones from a certain category. I've used the img name attribute to group them and tried to do a function that shows only one img.
<script language="javascript">
function showone(x) {
document.getElementByName('a').style.display='none';
document.getElementByName('b').style.display='none';
document.getElementByName('c').style.display='none';
[Code]...
except the links don't work like they should, and I can't figure out why. I'm an idiot with javascript, so if feel free to make fun of me, and if anyone knows how to get this simple function to work,
View 9 Replies
View Related
Nov 12, 2010
i have php code that shows a list of colored boxes and when you click one it changes the color of a div... this works fine as i have used a changecss function... i have these colors in a database with their values and specific color names... what i am trying to do is when a color is clicked it will change the div and also print the color name....i have made a php loop to print all the color names and i have the display as none... how can i add to the onclick function that changes the color to also put the display of the certain color name to "block" and then if you select another color it hides that one and shows the new color.
View 8 Replies
View Related
Mar 3, 2009
Im trying to hide a div ( quick reply box) like IPB using this code it's hidden but the actual link to toggle it isn't a live link for some reason any idea's what im doing wrong would be good.
This is what i am trying to hide
Im not sure how i get this to toggle to show/ re hide the div.
<div id="myClickyDiv" onclick="swapMyToggledDiv();">Toggle</div>
View 3 Replies
View Related
May 27, 2010
I want a background image of a tick to appear in each coloured box in my attached image onclick. When another coloured box is clicked I want the image to show in that one and then hidden in the previous one clicked. There should be no ticks shown on page load.I'm clueless as to how to do this.Here's my code for the image attached:
<div class="colour-picker">
<div class="tick-off" id="red" onclick="changeclass();">
</div>
[code]....
View 1 Replies
View Related
Aug 12, 2011
I have a php page that essentially builds a pay report in the form of a table. The php side builds the page properly, though it took some time to get the table rows onmouseover and onmouseout functions to work for row highlighting. Now the issue is the table row's onclick function.
Here is what the outputed html looks like.
<head><script type="text/javascript" language="javascript">
function HideShowDiv(divID){
if (document.getElementById(divID).style.display == "none"){
document.getElementById(divID).style.display = "block");
document.writeln("show "+divID);
}else{
document.getElementById(divID).style.display = "none";
document.writeln("hide "+divID);
}} .....
<tr>
<td colspan="2" align="right">Some Association of Baseball</td>
<td align="right">$24</td>
<td align="center"></td>
</tr>
</table>
</div> <!-- Closes the main body div container -->
In my javascript function, the writeln() calls are for testing to see if the even is even firing. but nothing gets written to the page. Basically I want the row with the users name to be clickable which will show the details in the hidden div associated with the user.
View 5 Replies
View Related
Apr 20, 2010
I am trying to create a Link that changes its currently displayed text and also toggles the css.display property from inline to hidden. I'm sure there are solution outs there btu I have not been able to find one that does both functions with one click properly and is also easy to implement for people not as familiar with html and javascript. Obviously I am trying to create a show more, show less type link. currently this often shared code works fine to change the current state of the target ID's css.display from none to inline. My end goal is to be able to not only toggle the display of the LONG1 div but to also change the innerhtml of 'short1' from "Show More" to "Show Less".I am still learning about JS so Im really rough around the edges. I tried some different techniques btu I dont ahev them posted on my work pc.
View 14 Replies
View Related
Oct 30, 2009
I have created a user form in which visitors can fill in sections, some of which are hidden or displayed using the onclick to trigger a DIV to display or hide then submit the results to a database using ASP. All works fine with that, however... I have created another page which retrieves the results for an individual's form submission, and I want to hide the sections that were not completed (hidden when submitted). How can I get my page to hide or show DIVs, depending on the value retrieved from a particular field within the database? i.e. if Question1Response="A", show Div ID="A Section" If Question1Response="B", show Div ID="B Section" etc.
View 4 Replies
View Related
Jan 7, 2010
I want to hide/show table rows with an onclick event. Here are the relevant snippets of code I have:
Script:
$(document).ready(function() {
$("#plan1-title").click(function() {
$("#plan1").toggle();
[code]....
It works in all browsers (Firefox, Safari, Chrome, and Opera), however not a single version of IE 6-8 will toggle the table row.
View 2 Replies
View Related
Sep 12, 2011
I am trying to hide/show table when hide/show button is pressed
Problem: The code works fine when I remove 'slow' from line 10. But with 'slow' in line 10 content of toggleButton doesnt change from Hide to Show when pressed.
Code:
View 1 Replies
View Related
Nov 23, 2009
im trying to hide a div on page load,ive used this.
<script type="text/javascript">
function hideDiv(){
document.getElementById('sidebar').style.display = "none";[code].....
and this in the body tag
<body onload="javascript:hideDiv()">
it works fine hiding the div named sidebar, problem comes when i try to then use an Onclick event to show the hidden div, it just wont show.can this be done?
View 2 Replies
View Related
Jan 22, 2009
I am having problems, basically I have a set of nested lists I need to show and hide
Code:
<ul id="smenu3"><ul id="smenu4">
<li>stuff here..</li>
<li>stuff here..</li>
<li>stuff here..</li>
</ul><ul id="smenu5">
[Code]...
I always want "smenu3" to show with "smenu4" and "smenu5" collapsed... When the user clicks the link, it calls a javascript function to show "smenu4" like so...
[Code]...
View 7 Replies
View Related
Aug 2, 2006
I've got some PHP and javascript working together to create a
marginless image popup from another arbitrary image. This works
perfectly in Firefox, but IE bombs and I'm not really knowledgable
about Javascript to be able to tell immediately why. Here's the
relevant code from the page:
<a href="#"
onClick="window.open('http://www.somesite.com/popup.php?image=popup.jpg',
'popup', 'width=737,height=492, directories=no, location=no,
menubar=no, scrollbars=no, status=no, toolbar=no, resizable=no,
top=300, left=300'); return false" style="cursor:pointer"><img
src="http://www.somesite.com/pics/thumb.jpg" alt="Click here to see a
larger image"></a>
View 2 Replies
View Related
Jul 5, 2011
have the follow jwplayer i've got a link that loads the video into the player fine but now i am trying to add another one that load with the hd optionhere the single one works fine
Code:
<a title="Testimonial One" href="#" onclick="loadNplay('http://www.1st4film.biz/homepagefilms/looknorthlunchtime2.mp4')"><img src="images/24hrs.jpg" border="0"
[code]....
View 2 Replies
View Related
Aug 31, 2009
The following code works for Radio buttons. If I select 'No', the text field 'no1' is displayed. However, I'd like to set it up so if they select 'Permanent' in the dropdown then the 'no1' is displayed.
[Code]....
View 4 Replies
View Related
Aug 12, 2010
The below code works, until i try and move the bottom button into the form. I'm pretty sure it has something to do with the tut3 function and I probably need to reference the form somewhere in the function, but I dont know where.
Code:
<script language="javascript">
var properties = [<? echo $row['property_id'] ?>];
function tut3(){
var addRemove = document.getElementById('addRemoveProperty');
[Code]....
View 5 Replies
View Related
May 14, 2009
I've spend about 2 days writing this javascript code and it works great in IE only to find out that it does nothing in Safari/FF.
Here is my code:
<script type="text/javascript">function calculate() {
var thetotal = 0;
var silver = 0;
var gold = 0;
[Code]....
Basicly what the script does is using some variables in my form will calculate a total price in real time when you click the "Calculate" button. Works great in IE, but in Firefox/Safari it won't do a thing..
View 8 Replies
View Related
Apr 28, 2010
Hey all, I'm using a fairly simple accordion script. When I went to take a gander at the page in IE I found that the onclick function of the script doesn't respond. It works in FF, Safari, Chrome and Compatibility Mode in IE 8
the error message IE gives me is
Message: 'h' is null or not an object
Line: 13
Char: 77
Code: 0
URI: http://proposalfor.us/js/script.js
The problem line (as far as I can tell) is:
this.a[s]={}; this.a[s].h=h=T$$(e,v)[0]; this.a[s].c=c=T$$('div',v)[0]; h.onclick=new Function(this.n+'.pr(0,'+s+')');
View 1 Replies
View Related
Sep 1, 2011
I have a simple problem that I can't solve. I am trying to code a "More Info" button/link to display some more technical details of an item, if required or wanted. I haven't tried incorporating any code in to my web site yet, first I am trying to test how it can be done in a seperate file.
What I have right now is a table with two cells. In one cell is static text, in the other is a hyperlink. The onClick event calls a JS function called "more_info()" in which a global varible is altered to contain the value 1.
Directly after these two cells is more JS (this is before the table ends). The JS here is checking to see whether the value of the global variable has been changed. If the value is 1, display information. There is no "else" clause because I don't want information displayed unless the variable is equal to 1, so it is not required.
I think I know what the problem might be. The browser is reading the code in question before I ever click the link and has already been executed before the variable is changed. I know JS is object oriented so it will not sit there waiting for me to click the button before reading the logical statements.
[Code]...
View 6 Replies
View Related
Oct 18, 2011
I have a web page a lot of thumbnail images arranged in a table. I would like the user to be able to click on the thumbnail to open a window with a larger view of the image.
So I wrote a JS function to accept a URL as the argument and open a new pop-up window with the given parameters. I need this function to potentially run multiple times from multiple links (in this case images) on the same page. However, after the first time I click the link, the function runs, and I close the pop-up, the function will not run again if I click the same or another link on the page. If I refresh the page, the function will work once and then not again. Is there a buffer I need to clear or something to reset to allow multiple links to work?
I have tried the function call in a whole slew of ways. Here's my current code (I "..."'ed out the URLs for brevity):
<script type="text/javascript">
function zoomWindow(url)
{
zoomWindow=window.open(url,"", "toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=no, copyhistory=no, height=645px, width=550px");
[Code]....
View 2 Replies
View Related
