<?xml version="1.0" encoding="UTF-8"?><rss
version="2.0"
xmlns:content="http://purl.org/rss/1.0/modules/content/"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:atom="http://www.w3.org/2005/Atom"
xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
xmlns:series="http://unfoldingneurons.com/"
> <channel><title>Comments on: Create an Animated Sliding Button Using&#160;MooTools</title> <atom:link href="http://davidwalsh.name/animated-button/feed" rel="self" type="application/rss+xml" /><link>http://davidwalsh.name/animated-button</link> <description>Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.</description> <lastBuildDate>Thu, 09 Feb 2012 02:40:12 +0000</lastBuildDate> <sy:updatePeriod>hourly</sy:updatePeriod> <sy:updateFrequency>1</sy:updateFrequency> <generator>http://wordpress.org/?v=3.3</generator> <item><title>By: ethan</title><link>http://davidwalsh.name/animated-button/comment-page-1#comment-17653</link> <dc:creator>ethan</dc:creator> <pubDate>Mon, 17 May 2010 08:18:15 +0000</pubDate> <guid
isPermaLink="false">http://davidwalsh.name/?p=4841#comment-17653</guid> <description>how can i make it work with master/content pages?</description> <content:encoded><![CDATA[<p>how can i make it work with master/content pages?</p> ]]></content:encoded> </item> <item><title>By: Avinash</title><link>http://davidwalsh.name/animated-button/comment-page-1#comment-16205</link> <dc:creator>Avinash</dc:creator> <pubDate>Mon, 22 Feb 2010 12:27:41 +0000</pubDate> <guid
isPermaLink="false">http://davidwalsh.name/?p=4841#comment-16205</guid> <description>Hi,Nice work,Can u please say what the below line will do in above code.var  prev = btn.getPrevious(&#039;a&#039;).set(&#039;tween&#039;,{ duration: 200 });Specially getPrevious function</description> <content:encoded><![CDATA[<p>Hi,</p><p>Nice work,</p><p>Can u please say what the below line will do in above code.</p><p> var  prev = btn.getPrevious(&#8216;a&#8217;).set(&#8216;tween&#8217;,{ duration: 200 });</p><p>Specially getPrevious function</p> ]]></content:encoded> </item> <item><title>By: Daniel Due</title><link>http://davidwalsh.name/animated-button/comment-page-1#comment-16146</link> <dc:creator>Daniel Due</dc:creator> <pubDate>Tue, 16 Feb 2010 19:01:50 +0000</pubDate> <guid
isPermaLink="false">http://davidwalsh.name/?p=4841#comment-16146</guid> <description>Insane :) Hehe.. have to love it..Great for exercise ... Soon to be implemented on my secret project :D</description> <content:encoded><![CDATA[<p>Insane :) Hehe.. have to love it..</p><p>Great for exercise &#8230; Soon to be implemented on my secret project :D</p> ]]></content:encoded> </item> <item><title>By: Jordan Walker</title><link>http://davidwalsh.name/animated-button/comment-page-1#comment-16131</link> <dc:creator>Jordan Walker</dc:creator> <pubDate>Tue, 16 Feb 2010 14:33:35 +0000</pubDate> <guid
isPermaLink="false">http://davidwalsh.name/?p=4841#comment-16131</guid> <description>That is a really neat user interface object, I am sure clients will understand what you want from them when buttons start opening and closing for them.</description> <content:encoded><![CDATA[<p>That is a really neat user interface object, I am sure clients will understand what you want from them when buttons start opening and closing for them.</p> ]]></content:encoded> </item> <item><title>By: Gary Hussey</title><link>http://davidwalsh.name/animated-button/comment-page-1#comment-16127</link> <dc:creator>Gary Hussey</dc:creator> <pubDate>Tue, 16 Feb 2010 04:19:52 +0000</pubDate> <guid
isPermaLink="false">http://davidwalsh.name/?p=4841#comment-16127</guid> <description>Nice little dilly hoper here David.@derdummkopf
you could just take the function from within .each() and name it. then pass it a single mootooled element $(&quot;one_element_ID&quot;).&lt;code&gt;function makeSlideBTN(btn) {
var prev = btn.getPrevious(&#039;a&#039;).set(&#039;tween&#039;,{ duration: 200 });
var span = prev.getElement(&#039;span&#039;);
btn.addEvents({
mouseenter: function(e) {
btn.addClass(&#039;button_c&#039;);
prev.tween(&#039;width&#039;,225);
span.fade(&#039;in&#039;);
},
mouseleave:function(e) {
btn.removeClass(&#039;button_c&#039;);
prev.tween(&#039;width&#039;,70);
span.fade(&#039;out&#039;);
}
});
}window.addEvent(&quot;domready&quot;,function(){
//make an element slide
makeSlide($(&quot;whattever-ID&quot;))
})&lt;/code&gt;Remember to keep the classname or it&#039;ll not have any style</description> <content:encoded><![CDATA[<p>Nice little dilly hoper here David.</p><p>@derdummkopf<br
/> you could just take the function from within .each() and name it. then pass it a single mootooled element $(&#8220;one_element_ID&#8221;).</p><p><code></p><p>function makeSlideBTN(btn) {<br
/> var prev = btn.getPrevious('a').set('tween',{ duration: 200 });<br
/> var span = prev.getElement('span');<br
/> btn.addEvents({<br
/> mouseenter: function(e) {<br
/> btn.addClass('button_c');<br
/> prev.tween('width',225);<br
/> span.fade('in');<br
/> },<br
/> mouseleave:function(e) {<br
/> btn.removeClass('button_c');<br
/> prev.tween('width',70);<br
/> span.fade('out');<br
/> }<br
/> });<br
/> }</p><p>window.addEvent("domready",function(){<br
/> //make an element slide<br
/> makeSlide($("whattever-ID"))<br
/> })</p><p></code></p><p>Remember to keep the classname or it&#8217;ll not have any style</p> ]]></content:encoded> </item> <item><title>By: David Walsh</title><link>http://davidwalsh.name/animated-button/comment-page-1#comment-16122</link> <dc:creator>David Walsh</dc:creator> <pubDate>Mon, 15 Feb 2010 22:01:20 +0000</pubDate> <guid
isPermaLink="false">http://davidwalsh.name/?p=4841#comment-16122</guid> <description>@derdummkopf:  How would you accomplish this without each?  The only way I can see of doing so would repeat walks through the DOM to get the previous items.@John:  It may be something where you don&#039;t show IE users this effect.</description> <content:encoded><![CDATA[<p>@derdummkopf:  How would you accomplish this without each?  The only way I can see of doing so would repeat walks through the DOM to get the previous items.</p><p>@John:  It may be something where you don&#8217;t show IE users this effect.</p> ]]></content:encoded> </item> <item><title>By: John</title><link>http://davidwalsh.name/animated-button/comment-page-1#comment-16121</link> <dc:creator>John</dc:creator> <pubDate>Mon, 15 Feb 2010 21:57:41 +0000</pubDate> <guid
isPermaLink="false">http://davidwalsh.name/?p=4841#comment-16121</guid> <description>I like. However, IE not allowing border-radius kinda kills the effect. Looks much better in firefox or chrome.</description> <content:encoded><![CDATA[<p>I like. However, IE not allowing border-radius kinda kills the effect. Looks much better in firefox or chrome.</p> ]]></content:encoded> </item> <item><title>By: derdummkopf</title><link>http://davidwalsh.name/animated-button/comment-page-1#comment-16119</link> <dc:creator>derdummkopf</dc:creator> <pubDate>Mon, 15 Feb 2010 20:39:14 +0000</pubDate> <guid
isPermaLink="false">http://davidwalsh.name/?p=4841#comment-16119</guid> <description>sorry for this stupid question, i&#039;am a newbe
but how looks the function if i have only one button
$$(&#039;.slidebttn&#039;).each(function(btn) {...i think each is then not necessary or?</description> <content:encoded><![CDATA[<p>sorry for this stupid question, i&#8217;am a newbe<br
/> but how looks the function if i have only one button<br
/> $$(&#8216;.slidebttn&#8217;).each(function(btn) {&#8230;</p><p>i think each is then not necessary or?</p> ]]></content:encoded> </item> <item><title>By: adlib</title><link>http://davidwalsh.name/animated-button/comment-page-1#comment-16116</link> <dc:creator>adlib</dc:creator> <pubDate>Mon, 15 Feb 2010 18:41:40 +0000</pubDate> <guid
isPermaLink="false">http://davidwalsh.name/?p=4841#comment-16116</guid> <description>this one doesn&#039;t work very well with opera...</description> <content:encoded><![CDATA[<p>this one doesn&#8217;t work very well with opera&#8230;</p> ]]></content:encoded> </item> <item><title>By: Paul Winslow</title><link>http://davidwalsh.name/animated-button/comment-page-1#comment-16115</link> <dc:creator>Paul Winslow</dc:creator> <pubDate>Mon, 15 Feb 2010 15:39:24 +0000</pubDate> <guid
isPermaLink="false">http://davidwalsh.name/?p=4841#comment-16115</guid> <description>I like this, but I think it comes with a very slight usability issue - when I hovered over and the &quot;Use Twitter account&quot; text popped out, I tried a couple of times to move over and click it like it was offering an alternative sign-in method. Could be a teeny bit frustrating for an impatient user thinking they&#039;re just slipping off the button when it shoots back in.</description> <content:encoded><![CDATA[<p>I like this, but I think it comes with a very slight usability issue &#8211; when I hovered over and the &#8220;Use Twitter account&#8221; text popped out, I tried a couple of times to move over and click it like it was offering an alternative sign-in method. Could be a teeny bit frustrating for an impatient user thinking they&#8217;re just slipping off the button when it shoots back in.</p> ]]></content:encoded> </item> </channel> </rss>
<!-- Performance optimized by W3 Total Cache. Learn more: http://www.w3-edge.com/wordpress-plugins/

Minified using disk: basic
Page Caching using disk: enhanced (User agent is rejected)
Database Caching using disk: basic
Object Caching 866/868 objects using disk: basic

Served from: davidwalsh.name @ 2012-02-09 01:09:56 -->
