Go to main content

Navigation menu

Textpattern CMS support forum

You are not logged in. Register | Login | Help

  1. Index
  2. » How do I…?
  3. » submenue with accordion.js and page-reload-behaviour

Pages: 1 2

#13 2008-01-19 22:45:03

ballmann
Member
Registered: 2006-10-14
Posts: 37

Re: submenue with accordion.js and page-reload-behaviour

YEAH YEAH YEAH – IT WORKS :-)
you´re great!
i´m so happy to see this menu work this way! wonderful!
i tried it for over two weeks … and now the magic thing happens!
you can see the working page here: http://testen.ballmann.net/work/

thank you very very much!
well, if you need some help with css-stuff or printdesign – don´t hesitate to contact me :-)

enjoy your weekend!
regards,
matthias

Offline

#14 2008-01-19 23:15:43

ballmann
Member
Registered: 2006-10-14
Posts: 37

Re: submenue with accordion.js and page-reload-behaviour

aehm, mmmh, well … ah, sorry to bother you again with one tiiiny little little question:
there´s another section on my site – my diary, some kind of photoblog (http://testen.ballmann.net/diary/)
and the submenu should work the same way as the now-working-as-a-charm-worksection-menu.

but the code is slightly different: there are two <txp:category_list>-tags which list some picture-categories.
so, no articles.
the categories are equal to the months: 2008-01, 2008-02, etc.

i used the code which works now in the work-section and modified it: <txp:if_category> instead of <txp:if_article_category> and such things.
but it doesn´t work as expected for the 2007-div: the menu will not stay with this year.
2008 works very good.

any (hopefully) last ideas for this little problem?
if its ok i post the code of this page because maybe you see the problem at first sight … thank you (again) … :-)

<txp:output_form form="head" /> 
<script type="text/javascript" src="/js/mootools.js"></script>
<script type="text/javascript" src="/js/slimbox.js"></script>
<script type="text/javascript" src="/js/diarylightbox.js"></script>
		<txp:if_category name="2008-01,2008-02,2008-03,2008-04,2008-05,2008-06,2008-07,2008-08,2008-09,2008-10,2008-10,2008-11,2008-12">
			<script type="text/javascript">
				window.addEvent('domready', function(){
					var accordion = new Accordion('h5.atStart', 'div.atStart', {
						display: 0,
						opacity: false,
						onActive: function(toggler, element){
							toggler.setStyle('text-decoration', 'underline');
						},

onBackground: function(toggler, element){ toggler.setStyle(‘text-decoration’, ‘none’); } }, $(‘accordion’)); }); </script> </txp:if_category> <txp:if_category name=“2007-12”> <script type=“text/javascript”> window.addEvent(‘domready’, function(){ var accordion = new Accordion(‘h5.atStart’, ‘div.atStart’, { display: 1, opacity: false, onActive: function(toggler, element){ toggler.setStyle(‘text-decoration’, ‘underline’); },

onBackground: function(toggler, element){ toggler.setStyle(‘text-decoration’, ‘none’); } }, $(‘accordion’)); }); </script> </txp:if_category> <txp:else /> <script type=“text/javascript”> window.addEvent(‘domready’, function(){ var accordion = new Accordion(‘h5.atStart’, ‘div.atStart’, { display: 0, opacity: false, onActive: function(toggler, element){ toggler.setStyle(‘text-decoration’, ‘underline’); },

onBackground: function(toggler, element){ toggler.setStyle(‘text-decoration’, ‘none’); } }, $(‘accordion’)); }); </script>
</head>
<body>
<txp:zem_prblock target=”_blank”>
<txp:output_form form=“header” />
<div id=“content”>
<txp:output_form form=“navigation” />
<div id=“column_2”>
<div id=“accordion”>
<h5 class=“toggler atStart”>2008</h5>
<div class=“element atStart”>
<ul>
<txp:category_list categories=“2008-01,2008-02,2008-03” active_class=“active” type=“image” section=“diary” />
</ul>
<br />
</div>
<h5 class=“toggler atStart”>2007</h5>
<div class=“element atStart”>
<ul>
<txp:category_list categories=“2007-12” active_class=“active” type=“image” section=“diary” />
</ul>
</div>
</div>
</div>
<div id=“column_3”>
<txp:if_category>
<txp:bos_image_index link=“1” capt=“1” wrap_capt=“h6” thumb=“1” sortby=“name” sortdir=“desc” />
<txp:else />
<div class=“diary”><txp:bos_image_index cat=“2008-01” limit=“1” link=“1” capt=“1” wrap_capt=“p” thumb=“1” sortby=“name” sortdir=“desc” /></div>
</txp:if_category>
</div>
</div>
</txp:zem_prblock>
<script src=“http://www.google-analytics.com/urchin.js” type=“text/javascript”>
</script>
<script type=“text/javascript”>
_uacct = “UA-2289084-1”;
urchinTracker();
</script>
</body>
</html>

Offline

#15 2008-01-20 00:07:06

els
Moderator
From: The Netherlands
Registered: 2004-06-06
Posts: 7,458

Re: submenue with accordion.js and page-reload-behaviour

You have a ‘loose’ <txp:else /> in there ;) This should work:

<txp:if_category name="2008-01,2008-02,2008-03,2008-04,2008-05,2008-06,2008-07,2008-08,2008-09,2008-10,2008-10,2008-11,2008-12">
	<script type="text/javascript">
		window.addEvent('domready', function(){
			var accordion = new Accordion('h5.atStart', 'div.atStart', {
				display: 0,
				opacity: false,
				onActive: function(toggler, element){
					toggler.setStyle('text-decoration', 'underline');
				},

				onBackground: function(toggler, element){
					toggler.setStyle('text-decoration', 'none');
				}
			}, $('accordion'));
		}); 
	</script>
</txp:if_category>
<txp:if_category name="2007-12">
	<script type="text/javascript">
		window.addEvent('domready', function(){
			var accordion = new Accordion('h5.atStart', 'div.atStart', {
				display: 1,
				opacity: false,
				onActive: function(toggler, element){
					toggler.setStyle('text-decoration', 'underline');
				},

				onBackground: function(toggler, element){
					toggler.setStyle('text-decoration', 'none');
				}
			}, $('accordion'));
		}); 
	</script>
</txp:if_category>
<txp:if_category>
<txp:else />
	<script type="text/javascript">
		window.addEvent('domready', function(){
			var accordion = new Accordion('h5.atStart', 'div.atStart', {
				display: 0,
				opacity: false,
				onActive: function(toggler, element){
					toggler.setStyle('text-decoration', 'underline');
				},

				onBackground: function(toggler, element){
					toggler.setStyle('text-decoration', 'none');
				}
			}, $('accordion'));
		}); 
	</script>
</txp:if_category>

One more thing: I noticed you are using category names with capitals, e.g. Print, Online and Other. It is better to always use all lowercase section and category names, otherwise it can sometimes cause problems.

Edit: Do you realize that in a couple of years you’ll have a really long piece of code on your page? ;)

Last edited by els (2008-01-20 00:25:10)

Offline

#16 2008-01-20 12:15:10

ballmann
Member
Registered: 2006-10-14
Posts: 37

Re: submenue with accordion.js and page-reload-behaviour

oh, thank you!
sometimes the simplest errors aren´t the obvious ones :-)

the section-names were all lowercase … i filled in the titles instead of the names. but it´s changed now.

well, yes – maybe the code will be really long. but til today i changed my website so many times – in a couple of years there will be another version of this website.
and maybe another version of txp and many new lovely scripts which make our lives (and nights) so wonderful :-)

thank you for all!
matthias

Offline

#17 2008-01-20 12:42:44

els
Moderator
From: The Netherlands
Registered: 2004-06-06
Posts: 7,458

Re: submenue with accordion.js and page-reload-behaviour

Glad it helped :)

Offline

Pages: 1 2

  1. Index
  2. » How do I…?
  3. » submenue with accordion.js and page-reload-behaviour

Board footer

Powered by FluxBB