Get rid of the "more" js include as well as the layout, Actions and Editor includes. If anything one of those files will be causing the page to error
As you can see here it works fine... http://www.novahost.com.au/moo/ Have tested it in IE, FF, Chrome and safari and works fine. Otherwise can you give me a url I can look at what you have up online please? Steve -----Original Message----- From: deep [mailto:[email protected]] Sent: Friday, 14 August 2009 8:58 PM To: MooTools Users Subject: [Moo] Re: Auto Fade in Fade out It showing me, only first image. no effect . no error. what to do? On Aug 14, 3:52 pm, "Steve Onnis" <[email protected]> wrote: > It all works form me > > Are you getting an error? If so what is it? > > -----Original Message----- > From: deep [mailto:[email protected]] > Sent: Friday, 14 August 2009 8:25 PM > To: MooTools Users > Subject: [Moo] Re: Auto Fade in Fade out > > Hey steve, > > Thnaks for your immidiate response. i have tried your code but it > seems its not working for me. :( > bellow is the code. > [code] > <html> > <head> > <script type="text/javascript" > > > <script type="text/javascript" src="mootools-1.2.3-core-yc.js"></ > script> > <script type="text/javascript" src="mootools-1.2.3.1-more.js"></ > script> > <script type="text/javascript" src="layout.js"></script> > <script type="text/javascript" src="Actions.js"></script> > <script type="text/javascript" src="Editor.js"></script> > > <script type="text/javascript"> > var SlideShow = new Class({ > Implements : [Events, Options], > Extends: Fx, > options : { > delay : 1000, > duration : 2000, > onInitialize : $empty, > onChange : $empty, > onMouseOver : $empty, > onMouseOut : $empty, > onPress : $empty, > onStart : $empty, > onComplete : $empty > }, > initialize : function(element, options) { > this.setOptions(options); > this.container = element, > this.children = > this.container.getElements(this.container.getFirst > ().tagName); > > this.options.init = !options.onInitialize ? $empty : > options.onInitialize.bind(this); > this.options.start = !options.onStart ? $empty : > options.onStart.bind > (this); > this.options.mouseover = !options.onMouseOver ? $empty : > options.onMouseOver.bind(this); > this.options.mouseout = !options.onMouseOut ? $empty : > options.onMouseOut.bind(this); > this.options.click = !options.onPress ? $empty : > options.onPress.bind > (this) > > this.children.addEvent("mouseover", function() > {this.options.mouseover.run();}.bindWithEvent(this)); > this.children.addEvent("mouseout", function() > {this.options.mouseout.run();}.bindWithEvent(this)); > this.children.addEvent("click", function() > {this.options.click.run > ();}.bindWithEvent(this)); > > this.intervalID = null; > this.currentIndex = 0; > this.children.setStyle("opacity", 0); > this.children[0].setStyle("opacity", 1); > > this.count = this.children.length; > this.position = this.currentIndex+1; > > this.init(); > > }, > > init : function () { > this.options.init.run() > }, > start : function () { > this.fireEvent("start"); > }, > mouseover : function () { > this.options.mouseover.run() > }, > > click : function () { > this.options.click.run() > }, > complete : function () { > this.fireEvent("complete"); > }, > play : function () { > this.intervalID = this.next.periodical(this.options.delay, > this) > }, > > stop : function () { > $clear(this.intervalID); > }, > > next : function () { > this.fadeOut(); > this.fadeIn(); > this.fireEvent("change"); > }, > > fadeIn : function () { > this.currentIndex = this.currentIndex+1 == > this.children.length ? > 0 : ++this.currentIndex; > this.position = this.currentIndex + 1; > new Fx.Morph(this.children[this.currentIndex], { > duration : this.options.duration, > wait : false, > onStart : function () > {this.fireEvent("start")}.bind(this), > onComplete : function () > {this.fireEvent("complete")}.bind(this) > }).start({"opacity": 1}); > }, > > fadeOut : function () { > new Fx.Morph(this.children[this.currentIndex], {duration : > this.options.duration, wait : false }).start({"opacity": 0}); > }, > > getCount : function () { > return this.count; > }, > getPosition : function () { > return this.position; > }, > getItem : function () { > return this.children[this.currentIndex]; > } > }); > > /// JS for html page > > window.addEvent("domready", function () { > slideShow = new SlideShow ($("slide"), { > delay : 2000, > duration : 1000, > onInitialize : function () { > this.start(); > }, > onStart : function () { > var img = this.getItem().getElement("img"); > var captionStr = img.get("alt") == null ? > img.get("title") == > null ? img.get("src").split("/").getLast() : img.get("title") : img.get > ("alt") > $("currentPosition").set("text", > this.getPosition()); > $("totalCount").set("text", this.getCount()); > $("caption").set("text", captionStr); > }, > onMouseOver : function () { > this.stop(); > $("status").set("text", "stopped"); > }, > onMouseOut : function () { > this.play(); > $("status").set("text", "playing"); > } > > }).play(); > > }); > > </script> > <style> > #outer { > padding:10px; > background:#c0c0c0; > width:322px; > border:1px outset #ccc > } > #slide { > list-style:none; > list-style-type:none; > margin:0px; > padding:0px; > position:relative; > height:150px; > width:320px; > background:#fff; > border:1px outset #ccc > } > #slide li { > position:absolute; > width:320px; > text-align:center > } > > #slideIndicator { > font-family:arial; > padding:5px; > text-align:center; > font-size:11px; > } > #caption { > font-size:16px; > font-family:tahoma; > font-weight:bold; > padding:0px 0px 10px 0px; > } > </style> > </head> > <body> > <div id="outer"> > <div id="caption"></div> > <ul id="slide"> > <li><img src="images/logo_newyear.gif" /></li> > <li><img src="images/newyear03.gif" /></li> > <li><img src="images/googlepump.gif" /></li> > <li><img src="images/newyear04.gif" /></li> > <li><img src="images/newyear08.gif" /></li> > </ul> > > <div id="slideIndicator"> > <span id="currentPosition"></span>/<span > id="totalCount"></span><br / > > </div> > </div> > > </body> > </html> > [/code] > > please try it on your machine and please tell me what i need to change > here so it can work for me. > > Thank you > > On Aug 14, 3:19 pm, "Steve Onnis" <[email protected]> wrote: > > I have cleaned this up a bit more and put it into a Class > > >http://mooshell.net/Vzgwz/4 > > > Also added > > > - onInitialize : First thing that happens > > - onChange : When it switches from one item to the next > > - onStart : When it starts to move to the next item. > > - onComplete : When it finishes changing to the next item > > - onMouseOver : Function for mouse over > > - onMouseOut : Function for mouse out > > - onPress : Function for mouse click > > > Might have more a play with it when I get around to using it myself.... > > > Any suggestions or feedback feel free to holla > > > Steve > > > -----Original Message----- > > From: deep [mailto:[email protected]] > > Sent: Friday, 14 August 2009 7:19 PM > > To: MooTools Users > > Subject: [Moo] Re: Auto Fade in Fade out > > > Hello Steve , > > > This is exactly i have been looking for. :) thanks a lot. Now i ll > > try to apply this with my feeds > > If gets stuck somewhere again i will knock here. > > > Thanks a lot again for sharing this code. > > > Deepali > > > On Aug 14, 11:28 am, "Steve Onnis" <[email protected]> wrote: > > > I need to do something similar soon so I thought I would knock something > > > together > > > > Is this the sort of thing you are looking for? > > > >http://mooshell.net/snwMS/ > > > > With this you can so it with pretty much anything. I have used a <ul> > > list > > > for this example but you can use divs or what ever, as long as it is > > nested. > > > You can style the html how ever you need to...this is just a demo and > > could > > > be extended to suit what ever your needs were. > > > > Steve > > > > -----Original Message----- > > > From: deep [mailto:[email protected]] > > > Sent: Friday, 14 August 2009 2:53 PM > > > To: MooTools Users > > > Subject: [Moo] Re: Auto Fade in Fade out > > > > Thanks for your reply Aaron Newton, > > > I ll check those tutorials. > > > > Actually i want this kind of effect actually > > > >http://twitspy.com/ > > > > after 4 sec it show new twitter entry. Is that done with mootools? > > > > please suggest me some tutorial for this effect. > > > > On Aug 13, 8:29 pm, Aaron Newton <[email protected]> wrote: > > > > You might read up on effects in the mootorialhttp://www.mootorial.com > > > > > On Wed, Aug 12, 2009 at 9:51 PM, deep <[email protected]> wrote: > > > > > > Hello, > > > > > > I have goggled a lot. but couldn't able to find out for the auto > fade > > > > > in fade out effect using mootools. > > > > > > I have found this link but its showing the fading effect on click. > > > >http://www.sweetvision.com/2008/03/17/using-mootools-to-fade-between-... > > > > > > Actually i want to give this effect to show my latest feeds. > > > > > > Can anyone have worked on this kind of effect. or can anyone show me > > > > > related link to this topic? > > > > > > Thanks in advance.
