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
>>>
>>
>>
