Hello
Rather than
$('#slider ul')
Try
$('slider').getElement('ul')
Then
$('slider').getElement('ul').getStyle('margin-left').toInt() should work once
you make that change.
On 12 Jun 2012, at 13:44, iiminov wrote:
> hi everyone,
>
>
> apologies for double posting. as per my previous post i am still having
> issues with getting this to animate.
>
> the only functionality part missing is the smooth transition (animation):
> $('#slider ul').animate({ left: clickednum }, 400, 'swing', function() { });
>
> currently replaced by:
> $$('#slider ul').setStyle('margin-left', clickednum);
>
>
> i've been converting next() and back() functions to mootools and again i run
> into a problem with calculations. this one is supposed to be simple; get the
> current value of margin-left, add (or in this case take away) window width
> and set new value for the margin-left. i've been trying to make use of this
> http://mootools.net/docs/core/Element/Element.Style#Element:getStyle function
> to help me with updating my margins but again i can't seem to get the values
> i am expecting:
> $('#slider ul').getStyle('margin-left').toInt() // does not evaluate
> $('#slider ul').getStyle('marginLeft').toInt() // does not evaluate
> $$('#slider ul').getStyle('marginLeft') // gives value of margin-left with px
> i.e. 0px, 640px, etc
> $$('#slider ul').getStyle('marginLeft').toInt() - slider.getWidth() // gives
> NaN - doh - you can add string and number together - LOL
>
> if i understand correctly:
> $('#slider ul').getStyle('margin-left').toInt() - slider.getWidth() // should
> do the trick for next()
> $('#slider ul').getStyle('margin-left').toInt() + slider.getWidth() // should
> do the trick for back()
>
> and the entire statement should look like this:
> $$('#slider ul').setStyle('margin-left', $('#slider
> ul').getStyle('marginLeft').toInt() - slider.getWidth()); // update
> left-margin for next()
>
>
> i would appreciate if someone can point me in the right direction. or poke me
> where i am doing something stupid.
>
>
> thank you,
> iiminov
>
> ps: i can post the entire code if someone would like to see it.
>
>
>
>
> On Tuesday, June 12, 2012 11:53:57 AM UTC+1, iiminov wrote:
> hi philthathril,
>
>
> thank you for a few pointers earlier. the code you provided didn't work right
> away but i was able to get the desired functionality outcome without too much
> trouble.
>
> $$('#numbers li').addEvent('click', function() {
> decount = this.get('html').toInt(); // pre-declared outside
> var slider = document.id('slider'), // same as $('slider')
> clickednum = - decount * slider.getWidth() + slider.getWidth(); //
> important calculation
> $$('#slider ul').setStyle('margin-left', clickednum);
> $$('.activenum').removeClass('activenum');
> this.addClass('activenum');
> window.location.hash = decount;
> });
>
>
> the only functionality part missing is the smooth transition (animation):
> $('#slider ul').animate({ left: clickednum }, 400, 'swing', function() { });
>
> currently replaced by:
> $$('#slider ul').setStyle('margin-left', clickednum);
>
>
> anyone with suggestions where i should look in regards animation?
>
>
> thank you all for you support,
> iiminov
>
>
> ps:
> i've tried wrapping the code to stop em stepping on each other but it seems
> i've missed a few places.
> i've tried a few ways of executing no conflict mode as suggested by joomla
> docs.
> i've also tried that jquery module for joomla in hope that it would catch
> everything but with the same amount of luck :[
> so in the end i though by converting code to mootools should solve the
> headache and won't have to include separate jquery library.
>
>
>
>
> On Monday, June 11, 2012 3:25:32 PM UTC+1, philthathril wrote:
> Ok, let's get your converted code to a mootools state first.
>
> $$('#numbers li').addEvent('click' function(e) {
> var slider = document.id('slider'), // same as $('slider')
> decount = this.get('html').toInt(),
> clickednum = decount * (slider.getSize().x * 2);
>
> $$('#slider ul').setStyle('margin-left', clickednum);
> $$('.activenum').removeClass('activenum');
> this.addClass('activenum');
> window.location.hash = decount;
> });
>
> Take note that when finding an element by id (e.g, slider), you do not need
> to include the hash (#) in the "document.id()" or "$()" method - that's a
> jquery thing. Work with that for a little while and see if it gets you any
> further. Also a way to work with multiple libraries is to encapsulate your
> functionality so they don't step on each others' toes....
>
> // include jQuery library here
> (function($) {
> // Code here that uses $ to mean jQuery
> })(jQuery);
>
> // include Mootools library here
> (function($) {
> // Code here that uses $ to mean mootools' document.id... or just use
> document.id directly (which I prefer)
> })(document.id);
>
> Happy coding,
>
> ~Philip
>
>
> On Mon, Jun 11, 2012 at 5:30 AM, iiminov <iimi...@gmail.com> wrote:
> greetings all,
>
>
> i am looking for some help converting jquery code to mootools. just to let
> you know i am not that well versed in jquery or mootools. so here goes.
>
>
> jquery code in question:
> [code]
> $("#numbers li").click(function() {
> var clickednum = $(this).html() * - $('#slider').width() +
> $('#slider').width();
> $('#slider ul').animate({ left: clickednum }, 400, 'swing',
> function() { });
> $('.activenum').removeClass('activenum');
> $(this).addClass('activenum');
> decount = $(this).html();
> window.location.hash = $(this).html();
> });
> [/code]
>
>
> my attempt at mootools:
> [code]
> $$('#numbers li').addEvent('click', function() {
> var clickednum = - this.get('html') * $$('#slider').getWidth() +
> $$('#slider').getWidth();
> $$('#slider ul').setStyle('margin-left', clickednum);
> $$('.slider_content h2').set('text', clickednum);
> $$('.activenum').removeClass('activenum');
> this.addClass('activenum');
> decount = this.get('html').toInt();
> window.location.hash = this.get('html').toInt();
> });
> [/code]
>
>
> its not perfect but in theory should at very least give me the same
> functionality as jquery (without animated transition).
>
>
> problem #1:
> [code]var clickednum = - this.get('html') * $$('#slider').getWidth() +
> $$('#slider').getWidth();[/code]
> does not produce desired result. in other words if:
> $$('#slider').getWidth() = 640px
> $$('#numbers li') - will have numbers ranging from 1 to infinity
> (incrementing for every list item in unordered list)
>
> so for instance if [code]this.get('html')[/code] hapens to be the first li.
> then the above should translate to [code]var clickednum = - 1 * 640 +
> 640;[/code] and result in zero. however i get -640640 as the result via
> [code]$$('.slider_content h2').set('text', clickednum);[/code].
>
>
> question #1:
> what am i doing wrong on these lines?
> [code]
> var clickednum = - this.get('html') * $$('#slider').getWidth() +
> $$('#slider').getWidth();
> $$('#slider ul').setStyle('margin-left', clickednum);
> [/code]
>
>
> problem #2:
> how to do mootool version of this [code]$('#slider ul').animate({ left:
> clickednum }, 400, 'swing', function() { });[/code]?
> i've tried a few ways of using morph() but it didn't work for me. why? i
> don't know.
>
>
> ps: in case you wonder why i need to go from jquery to mootools is because of
> joomla site i am working on. despite my efforts to make both libraries work
> at the same time the result is not satisfactory. so my last resort is to
> convert jquery into mootools.
>
>
> any help is much appreciated.
> thanks your time,
> iiminov
>
