getting started with My Library?
in [JavaScript]
|
From: Geoff on 26 Mar 2010 06:15 Hello I do occasionally use Prototype but would like to try David Mark's My Library. Could someone please point me at a simple example as I have looked at the website but have yet to get a foothold. It is no doubt an excellent site but I need a really simple way in! Cheers Geoff
From: David Mark on 26 Mar 2010 09:38 Geoff wrote: > Hello > > I do occasionally use Prototype but would like to try David Mark's My > Library. That's a positive turn for sure. Sort of like occasionally using heroin and deciding to try jogging. :) > > Could someone please point me at a simple example as I have looked at > the website but have yet to get a foothold. It is no doubt an > excellent site but I need a really simple way in! Thank you for the kind words on the site. We are working feverishly on it in preparation for our launch this spring. All signs point to awesome. :) Apologies that I haven't quite finished the Object Reference. The OO interface is more friendly for beginners (as opposed to the API) and that seems to be the biggest hole at this point. Happily, it's gone from nowhere to about halfway done in the last 24-48 hours though. I will have it wrapped up completely over the weekend. As for a simple introductory example, you are in luck. Gabriel Gillini created a nice little slide show, which I copied to my site for posterity:- http://www.cinsoft.net/myimagegallery.html var d = new D(); d.onReady(MyImageGallery); function MyImageGallery() { var father = new E('pictures'); var mainImg = new I('detailedview'); var thumbsUl = father.query('ul'); var thumbsImg = father.query('ul img'); var preloadedImgs = {}; thumbsImg.forEach(function(img){ var src = API.getAttributeProperty(img, 'src'); preloadedImgs[src] = API.preloadImage(src.replace('_thumb', ''), 185, 185); }); thumbsUl.on('mouseover', function(e){ var target = new E(API.getEventTarget(e)); if(target.isTag('img')) { thumbsImg.removeClass('selected'); target.addClass('selected'); mainImg.change( preloadedImgs[target.getAttributeProperty('src')], { effects: API.effects.fade, duration: 1500 } ); } }); } Here's my quick take on it:- var API, D, E; if (API && E) { D().onReady(function () { var mainImg = I('detailedview'); var thumbsUl = E(E('pictures').descendants('ul', 0)); var thumbsImg = Q(API.toArray(thumbsUl.descendants('img'))); var preloadedImgs = {}; thumbsImg.forEach(function(img){ var src = E(img).getAttributeProperty('src'); preloadedImgs[src] = API.preloadImage(src.replace('_thumb', ''), 185, 185); }); thumbsUl.on('mouseover', function(e){ var target = E(API.getEventTarget(e)); if(target.isTag('img')) { thumbsImg.removeClass('selected'); target.addClass('selected'); mainImg.change( preloadedImgs[target.getAttributeProperty('src')], { effects: API.effects.fade, duration: 1500 } ); } }); }); } Notice that I declared API, D and E. This is a defensive measure in case the My Library script did not load for some reason (e.g. an overzealous firewall stripped it, network failure, etc.) It also makes the following line more concise. That second line makes sure that the required objects are there. As long as the library loads (and it loads in _everything_, even NN4, but better safe than sorry), API is guaranteed. E, however, could be undefined (if Function.protoype.call is missing from the host environment as in IE5.0). As I inherits from E, we don't have to check that and D has the same requirements as E, so the single conjunction is all that is needed to ensure the application will run. BTW, you don't need to remember all of that. Wouldn't have hurt to just do this:- if (API && E && D && I) { The only other changes were to eliminate queries (always a good idea) and to remove the unneeded - new - operators (just for demonstration purposes as I actually recommend using those with the constructors). Note that you _must_ use the - new - operator when calling these constructors from another frame (sort of like dialing a prefix for a long distance call). Also note that you can still use Q to juggle multiple elements as it takes an array _or_ a selector as its first argument. Now, I know what you are thinking. Why didn't I detect the fade effect? Certainly it could be missing, so this would seem prudent:- if (API && E && API.effects.fade) { ....or if really paranoid:- if (API && E && API.effects && API.effects.fade) { ....as effects will not be there in browsers without basic CSS support. But none of that is really necessary as the example only passes a _single_ effect to the change method. So if API.effects.fade is undefined, it will be as if no effect was passed at all and the slide show will still work. Multiple effects in an array would require feature detection. You can confirm this by testing in an older browser that has no opacity support (e.g. Opera < 9). I tested the example back to Opera 7 and IE5.5. The former worked without a fade effect and the latter worked _perfectly_ (despite the fact that I am using a multi-IE setup as the opacity-related functions in My Library are immune to the DirectX problems that plague such setups). Anything older will degrade gracefully (tested Opera 6 without error). Thanks for your interest. I wish you luck and recommend you join our forum:- http://groups.google.com/group/my-library-general-discussion/
From: Geoff on 26 Mar 2010 10:03 On Fri, 26 Mar 2010 09:38:59 -0400, David Mark <dmark.cinsoft(a)gmail.com> wrote: >Geoff wrote: >> Hello >> >> I do occasionally use Prototype but would like to try David Mark's My >> Library. > >That's a positive turn for sure. Sort of like occasionally using heroin >and deciding to try jogging. :) > >> >> Could someone please point me at a simple example as I have looked at >> the website but have yet to get a foothold. It is no doubt an >> excellent site but I need a really simple way in! > >Thank you for the kind words on the site. We are working feverishly on >it in preparation for our launch this spring. All signs point to >awesome. :) > >Apologies that I haven't quite finished the Object Reference. The OO >interface is more friendly for beginners (as opposed to the API) and >that seems to be the biggest hole at this point. Happily, it's gone >from nowhere to about halfway done in the last 24-48 hours though. I >will have it wrapped up completely over the weekend. > > >As for a simple introductory example, you are in luck. Gabriel Gillini >created a nice little slide show, which I copied to my site for posterity:- > >http://www.cinsoft.net/myimagegallery.html > >var d = new D(); >d.onReady(MyImageGallery); > >function MyImageGallery() >{ > var father = new E('pictures'); > var mainImg = new I('detailedview'); > var thumbsUl = father.query('ul'); > var thumbsImg = father.query('ul img'); > var preloadedImgs = {}; > thumbsImg.forEach(function(img){ > var src = API.getAttributeProperty(img, 'src'); > preloadedImgs[src] = API.preloadImage(src.replace('_thumb', ''), >185, 185); > }); > thumbsUl.on('mouseover', function(e){ > var target = new E(API.getEventTarget(e)); > if(target.isTag('img')) > { > thumbsImg.removeClass('selected'); > target.addClass('selected'); > mainImg.change( > preloadedImgs[target.getAttributeProperty('src')], > { > effects: API.effects.fade, > duration: 1500 > } > ); > } > }); >} > >Here's my quick take on it:- > >var API, D, E; > >if (API && E) { > D().onReady(function () { > var mainImg = I('detailedview'); > var thumbsUl = E(E('pictures').descendants('ul', 0)); > var thumbsImg = Q(API.toArray(thumbsUl.descendants('img'))); > var preloadedImgs = {}; > thumbsImg.forEach(function(img){ > var src = E(img).getAttributeProperty('src'); > preloadedImgs[src] = API.preloadImage(src.replace('_thumb', ''), >185, 185); > }); > thumbsUl.on('mouseover', function(e){ > var target = E(API.getEventTarget(e)); > if(target.isTag('img')) > { > thumbsImg.removeClass('selected'); > target.addClass('selected'); > mainImg.change( > preloadedImgs[target.getAttributeProperty('src')], > { > effects: API.effects.fade, > duration: 1500 > } > ); > } > }); > }); >} > >Notice that I declared API, D and E. This is a defensive measure in >case the My Library script did not load for some reason (e.g. an >overzealous firewall stripped it, network failure, etc.) It also makes >the following line more concise. > >That second line makes sure that the required objects are there. As >long as the library loads (and it loads in _everything_, even NN4, but >better safe than sorry), API is guaranteed. E, however, could be >undefined (if Function.protoype.call is missing from the host >environment as in IE5.0). As I inherits from E, we don't have to check >that and D has the same requirements as E, so the single conjunction is >all that is needed to ensure the application will run. > >BTW, you don't need to remember all of that. Wouldn't have hurt to just >do this:- > >if (API && E && D && I) { > >The only other changes were to eliminate queries (always a good idea) >and to remove the unneeded - new - operators (just for demonstration >purposes as I actually recommend using those with the constructors). >Note that you _must_ use the - new - operator when calling these >constructors from another frame (sort of like dialing a prefix for a >long distance call). > >Also note that you can still use Q to juggle multiple elements as it >takes an array _or_ a selector as its first argument. > >Now, I know what you are thinking. Why didn't I detect the fade effect? > Certainly it could be missing, so this would seem prudent:- > >if (API && E && API.effects.fade) { > >...or if really paranoid:- > >if (API && E && API.effects && API.effects.fade) { > >...as effects will not be there in browsers without basic CSS support. > >But none of that is really necessary as the example only passes a >_single_ effect to the change method. So if API.effects.fade is >undefined, it will be as if no effect was passed at all and the slide >show will still work. Multiple effects in an array would require >feature detection. You can confirm this by testing in an older browser >that has no opacity support (e.g. Opera < 9). I tested the example back >to Opera 7 and IE5.5. The former worked without a fade effect and the >latter worked _perfectly_ (despite the fact that I am using a multi-IE >setup as the opacity-related functions in My Library are immune to the >DirectX problems that plague such setups). Anything older will degrade >gracefully (tested Opera 6 without error). > >Thanks for your interest. I wish you luck and recommend you join our >forum:- > >http://groups.google.com/group/my-library-general-discussion/ Many thanks David. I will work my way through the above and keep an eye on your site over the weekend. Best wishes Geoff
From: David Mark on 26 Mar 2010 10:11 Geoff wrote: > On Fri, 26 Mar 2010 09:38:59 -0400, David Mark > <dmark.cinsoft(a)gmail.com> wrote: > >> Geoff wrote: >>> Hello >>> >>> I do occasionally use Prototype but would like to try David Mark's My >>> Library. >> That's a positive turn for sure. Sort of like occasionally using heroin >> and deciding to try jogging. :) >> >>> Could someone please point me at a simple example as I have looked at >>> the website but have yet to get a foothold. It is no doubt an >>> excellent site but I need a really simple way in! >> Thank you for the kind words on the site. We are working feverishly on >> it in preparation for our launch this spring. All signs point to >> awesome. :) >> >> Apologies that I haven't quite finished the Object Reference. The OO >> interface is more friendly for beginners (as opposed to the API) and >> that seems to be the biggest hole at this point. Happily, it's gone >>from nowhere to about halfway done in the last 24-48 hours though. I >> will have it wrapped up completely over the weekend. >> >> >> As for a simple introductory example, you are in luck. Gabriel Gillini >> created a nice little slide show, which I copied to my site for posterity:- >> >> http://www.cinsoft.net/myimagegallery.html >> >> var d = new D(); >> d.onReady(MyImageGallery); >> >> function MyImageGallery() >> { >> var father = new E('pictures'); >> var mainImg = new I('detailedview'); >> var thumbsUl = father.query('ul'); >> var thumbsImg = father.query('ul img'); >> var preloadedImgs = {}; >> thumbsImg.forEach(function(img){ >> var src = API.getAttributeProperty(img, 'src'); >> preloadedImgs[src] = API.preloadImage(src.replace('_thumb', ''), >> 185, 185); >> }); >> thumbsUl.on('mouseover', function(e){ >> var target = new E(API.getEventTarget(e)); >> if(target.isTag('img')) >> { >> thumbsImg.removeClass('selected'); >> target.addClass('selected'); >> mainImg.change( >> preloadedImgs[target.getAttributeProperty('src')], >> { >> effects: API.effects.fade, >> duration: 1500 >> } >> ); >> } >> }); >> } >> >> Here's my quick take on it:- >> >> var API, D, E; >> >> if (API && E) { >> D().onReady(function () { >> var mainImg = I('detailedview'); >> var thumbsUl = E(E('pictures').descendants('ul', 0)); >> var thumbsImg = Q(API.toArray(thumbsUl.descendants('img'))); >> var preloadedImgs = {}; >> thumbsImg.forEach(function(img){ >> var src = E(img).getAttributeProperty('src'); >> preloadedImgs[src] = API.preloadImage(src.replace('_thumb', ''), >> 185, 185); >> }); >> thumbsUl.on('mouseover', function(e){ >> var target = E(API.getEventTarget(e)); >> if(target.isTag('img')) >> { >> thumbsImg.removeClass('selected'); >> target.addClass('selected'); >> mainImg.change( >> preloadedImgs[target.getAttributeProperty('src')], >> { >> effects: API.effects.fade, >> duration: 1500 >> } >> ); >> } >> }); >> }); >> } >> >> Notice that I declared API, D and E. This is a defensive measure in >> case the My Library script did not load for some reason (e.g. an >> overzealous firewall stripped it, network failure, etc.) It also makes >> the following line more concise. >> >> That second line makes sure that the required objects are there. As >> long as the library loads (and it loads in _everything_, even NN4, but >> better safe than sorry), API is guaranteed. E, however, could be >> undefined (if Function.protoype.call is missing from the host >> environment as in IE5.0). As I inherits from E, we don't have to check >> that and D has the same requirements as E, so the single conjunction is >> all that is needed to ensure the application will run. >> >> BTW, you don't need to remember all of that. Wouldn't have hurt to just >> do this:- >> >> if (API && E && D && I) { >> >> The only other changes were to eliminate queries (always a good idea) >> and to remove the unneeded - new - operators (just for demonstration >> purposes as I actually recommend using those with the constructors). >> Note that you _must_ use the - new - operator when calling these >> constructors from another frame (sort of like dialing a prefix for a >> long distance call). >> >> Also note that you can still use Q to juggle multiple elements as it >> takes an array _or_ a selector as its first argument. >> >> Now, I know what you are thinking. Why didn't I detect the fade effect? >> Certainly it could be missing, so this would seem prudent:- >> >> if (API && E && API.effects.fade) { >> >> ...or if really paranoid:- >> >> if (API && E && API.effects && API.effects.fade) { >> >> ...as effects will not be there in browsers without basic CSS support. >> >> But none of that is really necessary as the example only passes a >> _single_ effect to the change method. So if API.effects.fade is >> undefined, it will be as if no effect was passed at all and the slide >> show will still work. Multiple effects in an array would require >> feature detection. You can confirm this by testing in an older browser >> that has no opacity support (e.g. Opera < 9). I tested the example back >> to Opera 7 and IE5.5. The former worked without a fade effect and the >> latter worked _perfectly_ (despite the fact that I am using a multi-IE >> setup as the opacity-related functions in My Library are immune to the >> DirectX problems that plague such setups). Anything older will degrade >> gracefully (tested Opera 6 without error). >> >> Thanks for your interest. I wish you luck and recommend you join our >> forum:- >> >> http://groups.google.com/group/my-library-general-discussion/ > > Many thanks David. I will work my way through the above and keep an > eye on your site over the weekend. > NP at all. That's what I'm here for. :) BTW, I forgot to mention that the API.toArray call will be superfluous after the next update (today or tomorrow). I don't like how some of the methods return array-like host objects, so will be changing them to return Array objects.
From: Garrett Smith on 26 Mar 2010 17:34 Geoff wrote: > Hello > > I do occasionally use Prototype but would like to try David Mark's My > Library. > I recommend avoiding that. I suggest instead to study the relevant specifications lined from the resources section. The pertinent FAQ Entry is in the resources section: http://jibbering.com/faq/#libraryResources -- Garrett comp.lang.javascript FAQ: http://jibbering.com/faq/
|
Next
|
Last
Pages: 1 2 Prev: FAQ Topic - What online resources are available? (2010-03-26) Next: IE9.js |