Dear Cheyne,
I truly LOVE your Content Panel Switcher, and I can envision many uses for it
on our site if I could only "nest" the functionality. If I could get this to
work, then I could have an entire online store page centered for the user in a
very small display area, and would display many, many categories and "excerpts
from books"...all in a tight little window with content that simply "fades in
on demand"
What steps will reproduce the problem?
1. I'm using the default code (example below) to put a 2nd instance of the
Content-Panel-Switcher on a panel that fades in from the first instance of the
Content-Panel-Switcher, so instead of 2 of them side-by-side (as in the
"multiple" example) I want a 2nd instance of the Content Panel Switcher within
a panel that has "just faded into existence".
What is the expected output? What do you see instead?
After clicking on the "Content 2" button/text, a hidden div appears with the
nested/hidden "Content 3" and "Content 4" buttons. I should be able to click
on "Content 3" and "Content 4" and have their associated panels fadein
("Content 3" is set to "show" initially), but both the "Content 3" and "Content
4" buttons are non-functional.
What version of the product are you using? On what operating system?
I'm using the latest offering of Content Panel Switcher (1.1) on Windows XP.
Please provide any additional information below.
Below (and hopefully also "attached") is an example of the non-working code
("set2" buttons won't work nested within "set1"):
***********************************
<!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" xml:lang="en" lang="en"><head>
<title>Cheyne Wallace - Nested Content Panel Fades</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js">
</script>
-->
<!-- JS -->
<script type='text/javascript'
src='Content-Panel-Switcher/js/jquery.js'></script>
<link rel="stylesheet" type="text/css" media="screen"
href="Content-Panel-Switcher/style/jquery.content-panel-switcher.css" />
<script type='text/javascript'
src='Content-Panel-Switcher/js/jquery.content-panel-switcher.js'></script>
<script type='text/javascript'>
$(document).ready(function() {
jcps.fader(300, '#switcher-panel', '.set1');
jcps.fader(300, '#switcher-panel2', '.set2');
});
</script>
<!-- End Files for Content-Panel-Switcher -->
</head>
<body>
<!-- These are the first set of switcher buttons -->
<a id="content1" class="switcher set1">Content 1</a>
<a id="content2" class="switcher set1">Content 2</a>
<!-- These are the panels where your content will appear -->
<div id="switcher-panel"></div>
<!-- These are your actual content blocks, they're hidden from the end user -->
<div id="content1-content" class="switcher-content set1 show">This is content
1</div>
<div id="content2-content" class="switcher-content set1">
<!-- Nested buttons are here, but are non-functional -->
<br />
<!-- These are the second set of switcher buttons (Nested) -->
<a id="content3" class="switcher set2">Content 3</a>
<a id="content4" class="switcher set2">Content 4</a>
<!-- The follwing is nested within the "Content 2" button -->
<div id="switcher-panel2"></div>
<!-- These are your actual content blocks, they're hidden from the end user -->
<div id="content3-content" class="switcher-content set2 show">This is content
3</div>
<div id="content4-content" class="switcher-content set2 ">This is content
4</div>
</div> <!-- Closing DIV for "Nested" itemes within Content 2 -->
</body>
</html>
Original issue reported on code.google.com by jeffreyj...@gmail.com on 20 Apr 2012 at 5:37
Original issue reported on code.google.com by
jeffreyj...@gmail.comon 20 Apr 2012 at 5:37Attachments: