phpwcms Support Forum

The phpwcms support forum will help to find answers to your questions. The small but strong community is here since more than 10 years.
https://forum.phpwcms.org/

Accordeon (Scriptfehler?)

https://forum.phpwcms.org/viewtopic.php?t=16280

Page 4 of 5

Re: Accordeon (Scriptfehler?)

Posted: Sun 3. Feb 2008, 23:55
by update
Wer's mal probieren möchte, die Dinger auch wieder zu zu klappen (zuzuklappen):
im head

Code: Select all

<script type="text/javascript" src="include/inc_js/scriptaculous/accordion/javascript/prototype.js"></script>
<script type="text/javascript" src="include/inc_js/scriptaculous/accordion/javascript/effects.js"></script>
<script type="text/javascript" src="include/inc_js/scriptaculous/accordion/javascript/accordion.js"></script>
	<script type="text/javascript">
		Event.observe(window, 'load', loadAccordions, false);
		function loadAccordions() {
			var topAccordion = new accordion('vertical_container', {
				classNames : {
					toggle : 'vertical_accordion_toggle',
					toggleActive : 'vertical_accordion_toggle_active',
					content : 'vertical_accordion_content'
				},
				defaultSize : {
				height : null,
				width : null
				},
				direction : 'vertical'
			});
		}
</script>
als template:

Code: Select all

	[FAQ_QUESTION]<h2 id="faq_id{FAQ_ID}" class="vertical_accordion_toggle">{FAQ_QUESTION}</h2>[/FAQ_QUESTION]
	<div class="vertical_accordion_content">
	[FAQ_ANSWER]
		<div class="faqAnswer" id="faqAnswer_id{FAQ_ID}">
			[FAQ_IMAGE]
			<div class="faqImage">
			{FAQ_IMAGE}
			[FAQ_CAPTION]
				<div class="faqCaption">
				{FAQ_CAPTION}
				</div>
			[/FAQ_CAPTION]
			</div>
			[/FAQ_IMAGE]
		</div>
	{FAQ_ANSWER}
	[/FAQ_ANSWER]
	</div>
als css

Code: Select all

		/*Vertical Accordions*/
		
		.accordion_toggle {
			display: block;
			height: 30px;
			width: 100%;
			background: url(images/accordion_toggle.jpg) no-repeat top right #a9d06a;
			padding: 0 1em 0 1em;
			line-height: 30px;
			color: #ffffff;
			font-weight: normal;
			text-decoration: none;
			outline: none;
			font-size: 1em;
			color: #000000;
			border-bottom: 1px solid #cde99f;
			cursor: pointer;
			margin: 0 0 0 0;
		}
		
		.accordion_toggle_active {
			background: #ff0000;
			color: #ffffff;
			border-bottom: 1px solid #f68263;
		}
		
		.accordion_content {
			background-color: #ffffff;
			color: #444444;
			overflow: hidden;
		}
			
		.accordion_content h2 {
			margin: 1.5em 0 0.5em 1em;
			color: #0099FF;
		}
			
		.accordion_content p {
			line-height: 150%;
			padding: 0.5em 1em 1.5em 0.5em;
		}
		.accordion_content img {
			line-height: 150%;
			padding: 0.2em 0.5em 0.5em 0.5em;
		}
			
		.vertical_accordion_toggle {
			display: block;
			height: 1.5em;
			width: 100%;
			background: #f8f8f8;
			padding: 0 1em 0 1em;
			line-height: 1.5em;
			color: #ffffff;
			font-weight: normal;
			text-decoration: none;
			outline: none;
			font-size: 1em;
			color: #000000;
			border-top: 1px solid #dddddd;
			border-left: 1px solid #dddddd;
			border-bottom: 1px solid #ff0000;
			border-right: 1px solid #ff0000;
			cursor: pointer;
			margin: 0 0 0.5em 0;
		}

		.vertical_accordion_toggle_active {
			background: #ff0000;
			color: #ffffff;
			border-bottom: 1px solid #666666;
			font-weight:bold;
		}

		.vertical_accordion_content {
			background-color: #ffffff;
			color: #444444;
			overflow: hidden;
		}

		.vertical_accordion_content h2 {
			margin: 1.5em 0 0.5em 1em;
			color: #0099FF;
		}

		.vertical_accordion_content p {
			line-height: 150%;
			padding: 0.5em 1em 1.5em 0.5em;
		}
		.vertical_accordion_content img {
			line-height: 150%;
			padding: 0.2em 0.5em 0.5em 0.5em;
		}
  			
		/* Container styling*/
		#horizontal_container {
			margin: 2em auto 2em auto;
			width: 100%;   
			height: 100px;    
		}
    
		#vertical_nested_container {
			margin: 2em auto 2em auto;
			width: 100%;
		}
Habe im Übrigen auch den ganzen Sonntag verdaddelt mit dem Ding. Einziges Manko: gibt irgendwie einen nicht auffindbaren Warnhinweis auf "Size" - nicht zu finden:
Warning: Error in parsing value for property 'size'. Declaration dropped.
Source File: http://www.stickmanlabs.com/accordion/
Line: 0 (also nirgends, hmm vielleicht findet ja jemand anderes da was
Viel Vergnügen :lol:

Achso - vergessen:
Einen CUSTOM BLOCK mit dem Inhalt

Code: Select all

<div id="vertical_container">{FAQ}</div>
und {FAQ} plaziert im Bereich, wo auch {CONTENT} ist (zB darunter, meinetwegen auch in der linken Spalte oder...) ;)

Re: Accordeon (Scriptfehler?)

Posted: Mon 4. Feb 2008, 15:34
by update
Und mit mootools (kleiner Tipp von Breitsch :) )
really simple:

Code: Select all

<script src="template/inc_js/mootools/mootools.js" type="text/javascript"></script>
<script type="text/javascript">
// <![CDATA[	
   window.addEvent('domready', function(){
      var accordion = new Accordion('h3.atStart', 'div.atStart', {
         opacity: false, duration: 1000, alwaysHide: true,
         onActive: function(toggler, element){
            toggler.setStyle('color', '#ff3300');
         },
         onBackground: function(toggler, element){
            toggler.setStyle('color', '#222');
         }
      }, $('accordion'));
   });
// ]]>
</script>
Das alwaysHide: true, macht, dass die Dinger geschlossen starten (das erste ist offen) und jeweils mit Klick auf- und zugemacht werden können - lässt sich jetzt ausbauen.

Natürlich Template usw entsprechend der superDiskussion hier anpassen usw... :lol:
Achso: und als Bonus: völlig ohne warnings/errors! :D

Re: Accordeon (Scriptfehler?)

Posted: Sat 9. Feb 2008, 16:00
by markus s
sehr gut !
ich möchte jetzt nur einen artikel mit toggle auf und zu machen.
und der artikel soll geschlossen sein, beim seitenaufruf.
wie günge dies ?

Re: Accordeon (Scriptfehler?)

Posted: Sat 9. Feb 2008, 16:58
by breitsch
accordion.showThisHideOpen(); //no open element on load
accordion.showThisHideOpen(0); //opens the first element on load
accordion.showThisHideOpen(1); //opens the second element on load

Re: Accordeon (Scriptfehler?)

Posted: Sat 9. Feb 2008, 18:32
by markus s
wie - wo einsetzen ? ich raffs nicht...

Re: Accordeon (Scriptfehler?)

Posted: Sat 9. Feb 2008, 20:38
by breitsch
<script src="template/inc_js/mootools/mootools.js" type="text/javascript"></script>
<script type="text/javascript">
// <![CDATA[
window.addEvent('domready', function(){
var accordion = new Accordion('h3.atStart', 'div.atStart', {
opacity: false, duration: 1000, alwaysHide: true,
onActive: function(toggler, element){
toggler.setStyle('color', '#ff3300');
},
onBackground: function(toggler, element){
toggler.setStyle('color', '#222');
}
}, $('accordion'));
accordion.showThisHideOpen(); //no open element on load
});
// ]]>
</script>

Der Witz ist bloss, dass dies scheinbar nicht mehr mit 'alwaysHide: true' zusammen geht, ging mit scriptacolus noch aber mit mootools 2 scheint das nicht zu funken.
Keine Ahnung warum.

Re: Accordeon (Scriptfehler?)

Posted: Wed 13. Feb 2008, 21:16
by markus s
habe den code um ein "show: 0," ergänzt und sieh da...
menu bleibt bei start geschlossen...

Code: Select all

<script src="template/inc_js/mootools/mootools.js" type="text/javascript"></script>
<script type="text/javascript">
// <![CDATA[
window.addEvent('domready', function(){
var accordion = new Accordion('h3.atStart', 'div.atStart', {
opacity: false, duration: 1000, alwaysHide: true,
show: 0,
onActive: function(toggler, element){
toggler.setStyle('color', '#ff3300');
},
onBackground: function(toggler, element){
toggler.setStyle('color', '#222');
}
}, $('accordion'));
accordion.showThisHideOpen(); //no open element on load
});
// ]]>
</script>

Re: Accordeon (Scriptfehler?)

Posted: Wed 13. Feb 2008, 21:34
by Jensensen
[x]

Re: Accordeon (Scriptfehler?)

Posted: Wed 13. Feb 2008, 21:55
by markus s
wo hastn das ausgegraben?
steht alles in den mootools anleitungen... jetzt in der vers.2.0 noch einfacher ...
aber man muss sich enlesen

Re: Accordeon (Scriptfehler?)

Posted: Wed 13. Feb 2008, 22:51
by update
Ergänzung ...ist eingebaut ;) und funktioniert! :)

Re: Accordeon (Scriptfehler?)

Posted: Wed 13. Feb 2008, 23:29
by godmd
Hallo Ihr! Ich hatte jetzt nicht so die Zeit, euren Thread laufend zu verfolgen oder nachzuvollziehen, will das Ganze aber dann gerafft und übersichtlich in die FAQ's stellen.

Was ist denn nu der Unterschied zwischen dem Muuhhh-Akkordeon und dem von Scriptaculous? Ihr seid offenbar bei Mootools geblieben, obwohl Scriptabulous das Ganze horizontal und vertikal und in Verschachtelung bietet? Warum?

Anka

Re: Accordeon (Scriptfehler?)

Posted: Thu 14. Feb 2008, 08:23
by update
it's going to be mootaculous - perhaps some day? :wink:

Re: Accordeon (Scriptfehler?)

Posted: Thu 14. Feb 2008, 12:41
by markus s
mootools sind an board.
mit dem obigen script, kann man den accordeon effekt leicht einfügen.
der accordeon links rechts geht auch mit den mootools.
siehe hier

Re: Accordeon (Scriptfehler?)

Posted: Sun 17. Feb 2008, 19:46
by godmd
Well and now I wanted to combine the accordion and GaleriX (integrate on one and the same page), but it seems the scripts don't like each other ...

Re: Accordeon (Scriptfehler?)

Posted: Sun 17. Feb 2008, 20:59
by juergen
godmd wrote: but it seems the scripts don't like each other ...
They hate each other :) blocking themselves .. same situation when the blog wants to blog comments, they are blocked :D
All times are UTC+02:00
Page 4 of 5

Powered by phpBB® Forum Software © phpBB Limited