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.
