Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 199
  • Last Modified:

Div change script missing something???

I wrote a simple script to change a div's visibility onClick.

I have 3 divs and only one is visible at a time.

By clicking the next or previous buttons it changes the visiblity to show the correct div. I wrote each click to be a function to change the css styles of each to show the correct div and hide the others.

It does not work, please help me to accomplish this functionality please, thank you.

Here is my code:
<script type="text/javascript">
function changePopuptoPane1() {
	document.getElementById('paneOne').style.visiblity='visible';
	document.getElementById('paneTwo').style.visiblity='hidden';
	document.getElementById('paneThree').style.visiblity='hidden';
}
function changePopuptoPane2() {
	document.getElementById('paneOne').style.visiblity='hidden';
	document.getElementById('paneTwo').style.visiblity='visible';
	document.getElementById('paneThree').style.visiblity='hidden';
}
function changePopuptoPane3() {
	document.getElementById('paneOne').style.visiblity='hidden';
	document.getElementById('paneTwo').style.visiblity='hidden';
	document.getElementById('paneThree').style.visiblity='visible';
}
</script>
<style type="text/css">
#paneOne {
	visibility:visible;
}
#paneTwo {
	visibility:hidden;
}
#paneThree {
	visibility:hidden;
}
#paneOne span {
	cursor:pointer;
}
#paneTwo span {
	cursor:pointer;
}
#paneThree span {
	cursor:pointer;
}
</style>
<div class="innerContent">
 
	<div id="paneOne">
		This is Pane 1<br>
		<span onClick="changePopuptoPane2();">Next</span>
	</div>
	<div id="paneTwo">
		This is Pane 2<br>
		<span onClick="changePopuptoPane1();">Previous</span> || <span onClick="changePopuptoPane3();">Next</span>
	</div>
	<div id="paneThree">
		This is Pane 3<br>
		<span onClick="changePopuptoPane2();">Next</span>
	</div>
 
</div>
 
</div>

Open in new window

0
Shaye Larsen
Asked:
Shaye Larsen
  • 9
  • 5
1 Solution
 
PhatzerCommented:
Try replacing:
style.visiblity='hidden';

With
style.display='none';

-AND-

Try replacing:
style.visiblity='visible';

With
style.display='block';

Also...

Try replacing:
visibility:hidden;

With
display:none;

-AND-

Try replacing:
visibility:visible;

With
display:block;
0
 
Shaye LarsenAuthor Commented:
Thanks, but no go. Nothing happens when I click, not even an error...???
0
 
PhatzerCommented:
Hmm, OK...

Also try changing
<script type="text/javascript">

To:
<script type="text/javascript" language="javascript">

-AND-

Try changing
onClick="

To:
onclick="
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
Shaye LarsenAuthor Commented:
Still nothing...
0
 
PhatzerCommented:
OK, I wonder if it's because there's as style sheet style set for the panes, have you tried:

<div id="paneTwo" style="display: none;">

and taken the #paneTwo out of the style sheet?
0
 
Shaye LarsenAuthor Commented:
Hmm, I think there is something wrong with the page I'm on... I have it in a lightbox and I'm using it to change the content in the lightbox. I decided to take it to another page off of the lightbox and it works great...

Here is the working one, can't show you the non-working one cause it is no accessible.

http://dalelarsen.com/beta13/test3.php
0
 
PhatzerCommented:
Yeah works fine in Safari on Leopard.

Do you have some other code on the other page that has an error maybe? That might prevent the javascript from running.
0
 
Shaye LarsenAuthor Commented:
I just tried changing the id names to make sure they weren't conflicting but that didn't fix it...
0
 
Shaye LarsenAuthor Commented:
Okay, I'll check to see if there are errors
0
 
Shaye LarsenAuthor Commented:
There aren't any errors that I could find with firebug. I removed the other scripts on the page. It is just that script alone on the lightbox now and it still doesn't work.

I am using a lightbox plugin called fancybox -- http://fancy.klade.lv/

It loads the content via ajax
0
 
PhatzerCommented:
Hmm I'm not sure how much more I can help, as I've not had any experience with that plugin.
0
 
Shaye LarsenAuthor Commented:
Okay, I appreciate your help.
0
 
Shaye LarsenAuthor Commented:
Okay, I made a mistake, you have the solution. When I said it was working on one page and not in the lightbox I had not tried display instead of visibility in the popup, the first time I tried it that way I didn't get it to work because of caching. Anyway, I got it working!
Thanks!
0
 
Shaye LarsenAuthor Commented:
Thank you!
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 9
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now