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

#1 2008-01-18 16:47:18

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

submenue with accordion.js and page-reload-behaviour

hey everybody!

i use mootools and the accordion-js for a menue which shows my work in a print-, online- and other-category.
the tags to generate the category-lists are inside three divs that are animated via the accordion.js and mootools.js.
if someone enters the page the online- and other-category slide down to give access (and view) to the print-category.

since the accordion-/toogler-divs animate on every pagereload i want to stop this initial animation so that the divs are only animated if i click on “print”, “online” or “other.” it’s a bit confusing when someone clicks on a link in the list and the animation reloads every time. any ideas how i can manage to get this behaviour from the script?

and in addition to that and also very important: the automatically opened div is always the “print”-div. so when a visitor chooses to take a look at my “online”-work he can click on “online” and gets all the websites. but: as soon as he clicks on one particular link in the “online”-section the page reloads and the online-menue is closed since the automatically opened div … is always the “print”-div.
any ideas how to solve this problem and provide the visitor with an accordion-like list of my work which doesn’t close and animate with every reload?

i already posted in the mootools-forum but the only i answer i got was that it has something to do with the “show”-option. but since i’m no js-insider i don’t know how to use this hint. i tried several possibilities but failed every time.

thank you very much!

Offline

#2 2008-01-18 17:27:49

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

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

ballmann wrote:

and in addition to that and also very important: the automatically opened div is always the “print”-div.

Is this what you mean? In my case there are only two accordion items and the first one opens by default. If you choose the second one (‘Schilderijen’) and then one of the items in there, you will see that ‘Schilderijen’ is the one that is opened automatically.
I managed to do this by using if_section conditionals for loading a slightly different javascript (added display: 1,) that opens the current section’s menu item automatically. (In your case this would be if_category.)

Offline

#3 2008-01-18 17:45:07

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

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

hi els,

yeah – this looks like the right thing!
the only thing i didn’t understand: you use two js? but how do you get the modified version to load?
or does the schilderijen-section use a different template and this template calls the modified version as the “normal” template calls the unmodified script?

i already use the if_categoriy-condition on my site (for other functions), but i didn’t use them to load a script.
thank you very much for your help on this!

Offline

#4 2008-01-18 18:06:09

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

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

I’m using the same template for all sections. This is in the head of the page:

<txp:if_section name="schilderijen">
	<script type="text/javascript">
		window.addEvent('domready', function(){
			var accordion = new Accordion('li.atStart', 'ul.atStart', {
				display: 1,
				opacity: false,
				onActive: function(toggler, element){
					toggler.setStyle('background-color', '#036');
				},

				onBackground: function(toggler, element){
					toggler.setStyle('background-color', '#369');
				}
			}, $('accordion'));
		}); 
	</script>

<txp:else />
	<script type="text/javascript">
		window.addEvent('domready', function(){
			var accordion = new Accordion('li.atStart', 'ul.atStart', {
				opacity: false,
				onActive: function(toggler, element){
					toggler.setStyle('background-color', '#036');
				},

				onBackground: function(toggler, element){
					toggler.setStyle('background-color', '#369');
				}
			}, $('accordion'));

		}); 
	</script>
</txp:if_section>

The only difference is the display: 1, in the code. I think the default is display: 0,, which opens the first one.
In your case you wouldn’t be able to use the <txp:else />, but you’d need to use three times <txp:if_category name="..."> for print, online and other. For the third one I think you need to use display: 2,. But I must say I’m not very good with js, even this ‘simple’ thing has taken me half a day to figure it out ;) So I hope I’m right about the display: 2,.

Edit: you can probably leave out the events (onActive and onBackground) if you don’t use them; possibly all you need is the display option.

Last edited by els (2008-01-18 18:54:26)

Offline

#5 2008-01-19 12:21:59

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

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

hi els – and thank you very much for your help!
what a great idea to do this with if_section … very smart!

i changed my templates and tried this with if_category – but it doesn’t work!
if i use the if_category with <txp:else /> the page only loads the else-script.
and if i get rid of the else-option and paste the <txp:if_category name=”…”>-part three times no script at all will be loaded!

but i tried the scripts with the display-option without any if-tags – and they work!
so, it seems the reason has to be the <txp:if_category>-tag … and maybe it can’t be used in the head-part of a page?

since the construction of my site depends on those categories it would be the perfect solution – if it would work.
could this be the reason – the if_category-tag and the head-section of the page?

Offline

#6 2008-01-19 14:32:41

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

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

ballmann wrote:

so, it seems the reason has to be the <txp:if_category>-tag … and maybe it can’t be used in the head-part of a page?

Yes it can. if_category looks for a category in the URL, so the URL of the pages in question has to contain something like /category/category-name or ?c=category-name. So what do the URLs of the pages where you want the scripts to load look like?

Offline

#7 2008-01-19 15:43:06

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

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

oh, now it gets weird: my urls show no category at all!
but why?
i took a look at the preferences for the website – and the preference for url-scheme is “/section/title”.
and there´s no option to show a category … but i know what you mean: i saw those links including categories on other sites.
is there something wrong with my code? 

<txp:output_form form="head" /> 
<script type="text/javascript" src="/js/mootools.js"></script>
<script type="text/javascript" src="/js/slimbox.js"></script>
<txp:if_category name="Print">
	<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=“Online”> <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 name=“Other”> <script type=“text/javascript”> window.addEvent(‘domready’, function(){ var accordion = new Accordion(‘h5.atStart’, ‘div.atStart’, { display: 2, 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>
</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”>Print</h5>
<div class=“element atStart”>
<ul>
<txp:article_custom form=“liste” limit=“40” category=“Print” section=“Work” sortby=“Posted” sortdir=“desc” />
</ul>
<br />
</div>
<h5 class=“toggler atStart”>Online</h5>
<div class=“element atStart”>
<ul>
<txp:article_custom form=“liste” limit=“40” category=“Online” section=“Work” sortby=“Posted” sortdir=“desc” />
</ul>
<br />
</div>
<h5 class=“toggler atStart”>Other</h5>
<div class=“element atStart”>
<ul>
<txp:article_custom form=“liste” limit=“40” category=“Other” section=“Work” sortby=“Posted” sortdir=“desc” />
</ul>
<br />
</div>
</div>
</div>
<div id=“column_3”>
<txp:article form=“article” limit=“1” />
</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>

Last edited by ballmann (2008-01-19 15:46:12)

Offline

#8 2008-01-19 17:44:40

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

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

Do you have a link to this site, so I can have a look at it? And are you by any chance using gbp_permanent_links?

Last edited by els (2008-01-19 17:52:56)

Offline

#9 2008-01-19 17:48:20

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

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

sure :-)
this is the work-section: http://testen.ballmann.net/work/

Offline

#10 2008-01-19 17:52:38

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

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

Ah, now I understand! You are not linking to category pages, but to individual article pages. I’m sure there is a way to get it working for that as well, just give me some time to think it through.

Offline

#11 2008-01-19 17:55:15

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

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

oh, thank you so much for your help … :-)
it would be so nice to get it work like the if_section-solution – it’s so damn elegant!

Offline

#12 2008-01-19 18:07:39

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

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

Okay, I’m not 100% certain this will work, but could you give it a try? (If you are using a separate page template for section ‘work’ you can leave out the if_section tags.)

<txp:if_section name="work">
	<txp:if_individual_article>

		<txp:if_article_category name="Print">
			<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_article_category>

		<txp:if_article_category name="Online">
			<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_article_category>

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

						onBackground: function(toggler, element){
							toggler.setStyle('text-decoration', 'none');
						}
					}, $('accordion'));
				}); 
			</script>
		</txp:if_article_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_individual_article>
</txp:if_section>

Offline

Pages: 1 2

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

Board footer

Powered by FluxBB