Fx.Slide Guide

a place to get help

Moderator: 1.2 Moderators

Forum rules
  • Every time you need help create a new thread (but please use the search function before, as your problem maybe has already been solved)
  • use code highlighting (help)
  • After your problem has been solved you have to rename the subject to "[solved] <Topicname>" AND set the Topic icon as solved (the green check)
Post a reply

Re: Fx.Slide guide

Postby kevpatts on Thu Jul 16, 2009 12:03 pm

Hey all,

I seem to be having a problem with this. The inclusion of this method seems to mess with the CSS styling of the menu I am looking to use it for. The HTML looks like:
Line number On/Off | Expand/Contract | Select all
  1. <head>
  2. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  3. <title>MooTools Menu</title>
  4. <script type="text/javascript" src="mootools-core.js"></script>
  5. <script type="text/javascript" src="mootools-more.js"></script>
  6. <script type="text/javascript" src="mooefx.js"></script>   
  7.        
  8. <link href="style.css" rel="stylesheet" type="text/css" />
  9. </head>
  10.  
  11. <body>
  12. <div id="sidebar">
  13.     <ul><li><font class="main toggler">Tutorial</font></li></ul>
  14.     <div class="togglable">
  15.     <ul><li class="sub"><a href="p1.html">Ajax</a></li>
  16.         <li class="sub"><a href="p2.html">CSS/HTML</a></li>
  17.         <li class="sub"><a href="p3.html">Coldfusion</a></li>
  18.         <li class="sub"><a href="p4.html">PHP/MySQL</a></li></ul>
  19.     </div>
  20.     <ul><li><font class="main toggler">Contact me</font></li></ul>
  21.     <div class="togglable">
  22.     <ul><li class="sub"><a href="http://woork.blogspot.com">Woork.blogspot.com</a></li></ul>
  23.     </div>
  24. </div>
  25. </body>
  26. </html>
  27.  


The CSS looks like:
Line number On/Off | Expand/Contract | Select all
  1. #sidebar {
  2.     width:200px;
  3.     font: 11px "Lucida Grande", "Arial", "Helvetica", "Verdana", "sans-serif";
  4. }
  5.  
  6. #sidebar ul {
  7.     list-style: none;
  8. }
  9.  
  10. #sidebar a, #sidebar font.main {
  11.     width: 130px;
  12.     display: block;
  13.     padding: 3px 5px 3px 40px;
  14.     background: url(tab_small.png);
  15.     margin: 4px 0;
  16.     text-decoration: none;
  17. }
  18.  
  19. #sidebar li.sub a {
  20.     color: #555555;
  21. }
  22.  
  23. #sidebar font.main {
  24.     font-size: 17px;
  25.     font-weight: bold;
  26.     color: #000000;
  27.     text-shadow: #888888 2px 2px 1px;
  28.    
  29.     background: url(tab_big.png);
  30.     padding: 7px 5px 7px 40px;
  31.     margin: 10px 0px 4px 0px;
  32. }
  33.  
  34. #sidebar div {
  35.     width: 250px;
  36. }


and the JavaScript looks like:
Line number On/Off | Expand/Contract | Select all
  1. window.addEvent('domready', function() {
  2.     var MainMenus = $$('#sidebar li font.toggler');
  3.     var SubMenus = $$('#sidebar div.togglable');
  4.  
  5.     SubMenus.set('slide',{
  6.         duration:600,
  7.         transition:Fx.Transitions.Back.easeIn
  8.     });
  9.    
  10.     SubMenus.slide('hide');
  11.    
  12.     MainMenus.addEvent('click',function(e){
  13.         e.stop();
  14.         var index = MainMenus.indexOf(this);
  15.         if(!SubMenus.some(function(content,i){
  16.             var slide = content.get('slide');
  17.             if(slide.open && i != index){
  18.                 slide.slideOut().chain(function(){SubMenus[index].slide('in')});
  19.                 return true;
  20.             }
  21.         })){
  22.             SubMenus[index].slide('toggle');
  23.         }
  24.     });
  25.     var SubMenuItems = $$('#sidebar li.sub');
  26.     /*
  27.     SubMenuItems.each(function(el) {
  28.     var fx = new Fx.Morph(el,{ duration: 150, link:'cancel'});
  29.         el.addEvents({
  30.         'mouseenter': function() { fx.start({
  31.             'margin-left': 10
  32.             });
  33.         },
  34.         'mouseleave': function() { fx.start({
  35.             'margin-left': 0
  36.             });
  37.         }
  38.         });
  39.     });
  40.     */
  41. });


You'll notice that I'm looking to use two effects but even with the morph effect commented out I have the problem. If I remove the
Line number On/Off | Expand/Contract | Select all
  1. <script type="text/javascript" src="mooefx.js"></script>
line them the CSS looks like I'd expect and if I only use the Morph effect then it looks correct also.

Any help?

Edit: Also, this throws an error in IE8 and doesn't work in IE7 either.
kevpatts
 
Posts: 4
Joined: Thu Jul 16, 2009 11:56 am
Top

Re: Fx.Slide guide

Postby derleek on Wed Sep 09, 2009 3:59 pm

Just realized this is incompatible with the newest version of safari (not sure if it is compatible w/ other versions).

edit: The error given by safari is "Result of expression 'contents.slide' [undefined] is not a function." on the line...

Line number On/Off | Expand/Contract | Select all
  1. contents.slide('out');
User avatar
derleek
mootools fan
 
Posts: 74
Joined: Tue Aug 26, 2008 12:40 am
Top

Re: Fx.Slide guide

Postby derleek on Mon Sep 14, 2009 6:42 am

Well it appears that, for whatever reason, using the slide(element) function does not work while trying to apply it to an array (via $$).

Anyone have a clue why this might be?

It seems like this could be a minor problem within mootools itself.
User avatar
derleek
mootools fan
 
Posts: 74
Joined: Tue Aug 26, 2008 12:40 am
Top

Re: Fx.Slide Guide

Postby ccl on Fri Nov 20, 2009 6:30 pm

Just wondering, with this example, if i implemented this onto a webpage and i wanted other links on this page to close/hide the content div is it just a simple case giving it a class="menu-item"? - like <a href="#" class="menu-item">some link here</a>.

Cheers,
ccl
 
Posts: 14
Joined: Thu Nov 19, 2009 12:25 pm
Top

Re: Fx.Slide Guide

Postby jrealist1 on Sun Nov 22, 2009 9:50 pm

THANKS!!! Great tutorial /Guide - I'm going to read the other guides now :D
jrealist1
 
Posts: 12
Joined: Thu Nov 19, 2009 11:31 pm
Top

Re: Fx.Slide guide

Postby snoggle on Thu Feb 25, 2010 1:18 am

slosd wrote:Great tutorial! I thought a demo page would be nice, so here it is: http://dev.freedig.org/mootools/fx_slide.html


I get the following IE Error on your site - Invalid argument. mootools.v1.2.js, line 2019 character 3
The line is - this.style[property] = value;

Other than that it works great. Any fixes for the IE problem?
snoggle
 
Posts: 13
Joined: Mon Nov 23, 2009 8:58 pm
Top
Previous
Post a reply

Return to Help

Who is online

Users browsing this forum: No registered users and 2 guests

Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
phpBB SEO