We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
MODX Community Forums Archive

Mootools Fx.Slide

    • 19889
    • 616 Posts
    mmjaeger Reply #21, 19 years, 1 month ago
    try faq.js file

    var Site = new Class({
	options: {
	},
	initialize: function(options) {
		this.faqSlide();
	},
	faqSlide: function() { // faq - requently asked questions
		this.fsliders = $$('dl.faq-container dd.content').map(function(el) {
			return new Fx.Slide(el, {
				duration: 	500,
				mode: 		'vertical',
				transition:	Fx.Transitions.Quad.easeOut,
				wait:		false
			}).hide();
		});	
		
		$$('dl.faq-container dt.title a').each( function(el, i) {			
			el.addEvent('click', function(e) {
				e = new Event(e).stop();
				this.fsliders[i].toggle();				
			}.bind(this));	
		}.bind(this));	
	}
});

// implement class
Site.implement(new Options, new Events);

// domready
window.addEvent('domready', function() {
	site = new Site();	
});
      • 19889
      • 616 Posts
      mmjaeger Reply #22, 19 years, 1 month ago
      cool - you got it - you don’t need to use a class - just look up the demo at mootools.net

      good luck
        • 10226
        • 412 Posts
        fruitwerks Reply #23, 19 years, 1 month ago
        the demo looks overly complex to me. I am glad this works, but I do not understand how it works so I feel weird about it. now the fun part of converting my faq’s over! smiley Can you summarize what issues I was running into and what was done to fix them?

        Thanks!
          • 10226
          • 412 Posts
          fruitwerks Reply #24, 19 years, 1 month ago
          Like I mentioned - I’m not sure how this works... In my attempts to validate my markup I have broken this function. I had it working so I took it live and changed the url - it still worked at that point. I changed the page alias and that is when I noticed it was broken, I changed some other things as well so I am not sure at which point it broke. Can someone who understands the <dl> tag take a quick look.

          http://sweetskies.fruitwerks.us/faq.php

          Thanks!
            • 19889
            • 616 Posts
            mmjaeger Reply #25, 19 years, 1 month ago
            well, you don’t include the faq.js file anymore.

            what are those tables for at the end of your page? you’d rather use a div or p - as to the hr tag, I believe it should be <hr /> if you’re using xhtml strict
              • 10226
              • 412 Posts
              fruitwerks Reply #26, 19 years, 1 month ago
              ok.. back on track. Had a conflict with the document aliases. What is the easiest way to justify the questions to the left - my proleft div or is there a better way, because;

              document type does not allow element "div" here; assuming missing "dd" start-tag.

              <div id="proleft">

              And if I put it anywhere else, it does not work... I am using tables as a band-aid for another issue. Most of my tables have been replaced with <p>’s - lots of them.

              here is why I was using tables and the height declaration. This only shows up in FireFox.. IE 6 & 7 render it just fine...

              http://sweetskies.fruitwerks.us/hmm.php
                • 19889
                • 616 Posts
                mmjaeger Reply #27, 19 years, 1 month ago
                I don’t think you need tables at all for your purpose neither in IE nor in Firefox - most problems you’re experiencing are just CSS related.
                  • 24704
                  • 35 Posts
                  redD Reply #28, 18 years, 10 months ago
                  Good afternoon to all.
                  I’ve got some problem kind your were talking about. I’ve tried to fix it but nothing works. Firebag tells me "Error: [Exception... "Could not convert JavaScript argument" nsresult: "0x80570009 (NS_ERROR_XPC_BAD_CONVERT_JS)" location: "JS frame :: /assets/plugins/mootools/JavaPack/mootools.js :: anonymous :: line 3" data: no]
                  Source: /assets/plugins/mootools/JavaPack/mootools.js
                  string: 3"
                  and also this:
                  "Error: this.getElements is not a function
                  Source: /manager/media/script/mootools/mootools.js
                  String: 2".

                  Here is part of page head:
                   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
	<title></title>
	<link rel="stylesheet" media="all" type="text/css" href="http://test1.ru/vw/vw.css" />
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<base href="http://test1.ru/">
<script type="text/javascript" src="assets/plugins/mootools/JavaPack/mootools.js"></script>
<script type="text/javascript" src="assets/plugins/mootools/lister.js"></script>
<script type="text/javascript" src="assets/plugins/mootools/hidelink.js"></script>
<script type="text/javascript">var MODX_MEDIA_PATH = "media";</script>
<script type="text/javascript">var MODX_MEDIA_PATH = "media";</script>
<script type="text/javascript" src="assets/plugins/directresize/lightbox/prototype.js"></script>
<script type="text/javascript" src="assets/plugins/directresize/lightbox/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="assets/plugins/directresize/lightbox/lightbox.js"></script>
<link rel="stylesheet" href="assets/plugins/directresize/lightbox/lightbox.css" type="text/css" media="screen" />
</head>

<body>

                  Here is lister.js:
                  var Site = new Class({
	options: {
	},
	initialize: function(options) {
		this.faqSlide();
	},
	faqSlide: function() { // faq - requently asked questions
		this.fsliders = $$('div.content div.more').map(function(el) {
			return new Fx.Slide(el, {
				duration: 	500,
				mode: 		'vertical',
				transition:	Fx.Transitions.Quad.easeOut,
				wait:		false
			}).hide();
		});	
		$$('div.content div.more a').each( function(el, i) {			
			el.addEvent('click', function(e) {
				e = new Event(e).stop();
				this.fsliders[i].toggle();				
			}.bind(this));	
		}.bind(this));	
	}
});
// implement class
Site.implement(new Options, new Events);
// domready
window.addEvent('domready', function() {
	site = new Site();	
});

                  Please can you tell what is wrong with it?
                    • 19889
                    • 616 Posts
                    mmjaeger Reply #29, 18 years, 10 months ago
                    you CANNOT use mootools AND prototype together - I guess that’s what causes the problem
                      • 24704
                      • 35 Posts
                      redD Reply #30, 18 years, 10 months ago
                      Quote from: mmjaeger at Nov 30, 2007, 02:53 AM

                      you CANNOT use mootools AND prototype together - I guess that’s what causes the problem
                      but the prototype.js is for the lightbox. i removed prototype at all but the slide effect still not works. At least now firebug shows only one error:
                      "Error: [Exception... "Could not convert JavaScript argument" nsresult: "0x80570009 (NS_ERROR_XPC_BAD_CONVERT_JS)" location: "JS frame :: assets/plugins/mootools/JavaPack/mootools.js :: anonymous :: line 3" data: no]
                      Source: assets/plugins/mootools/JavaPack/mootools.js
                      String: 3"