Davs Rants and Random Thoughts

June 27, 2006

YUI Code Samples

Filed under: ajax, yui, css, javascript, code, Yahoo! — Dav Glass @ 8:15 am

Below are links to Code Samples I have posted to the YDN-Javascript Group.

YUI Examples

Other

Games

197 examples listed. Last updated: Sat, Jul 19th 2008 19:54 PST

Add to:
| Digg it | Slashdot | Y! MyWeb

143 Responses to “YUI Code Samples”

  1. MyAvatars 0.2 Dan Sorensen Says:
    September 14th, 2006 at 3:05 pm

    The calendar attached to an input field is excellent! Yahoo should have included that with the library.

  2. MyAvatars 0.2 Dav Glass Says:
    September 14th, 2006 at 7:57 pm

    Thanks, I was thinking about updating it to be more of a widget, so you could just call it like:

    YAHOO.widget.attachCal(’elm’, options);

    I’ll be sure and put it on my list of enhancements 8-)

  3. MyAvatars 0.2 Shyne Says:
    September 16th, 2006 at 1:17 pm

    Wow, YUI is fantastic and its great to see some extensions to it. Hassle Dustin Diaz and see if you can get some of it in the library !

    The select replacements are something I was going to implement myself, and the wysiwyg editor is fantastic as well !

  4. MyAvatars 0.2 Dav Glass Says:
    September 16th, 2006 at 2:56 pm

    Shyne the YUI is totally the most powerful JS library out there, but it is a little hard for beginner and intermediate programmers to build things with it.

    Thanks for the compliment, since I do work at Yahoo!, some of my code may end up in the library 8-) I am also hoping to eventually work for that team 8-)

  5. MyAvatars 0.2 Shyne Says:
    September 16th, 2006 at 4:19 pm

    Ah well that explains it.. you work at Yahoo :) I guess I shoulda read around your site more.

    I reckon your editor combined with the inline edit could be a nice rival for http://wikiwyg.net/ !

  6. MyAvatars 0.2 Dav Glass Says:
    September 16th, 2006 at 7:05 pm

    I haven’t seen that one 8-)

    I may just have to make a demo of that too 8-)

  7. MyAvatars 0.2 Ryan Says:
    September 28th, 2006 at 10:28 am

    Awesome! Calendar Attached to Text Input is JUST what I was looking for.
    Thanks for the GREAT examples.

  8. MyAvatars 0.2 Dav Glass Says:
    September 28th, 2006 at 1:14 pm

    Ryan –

    Glad they helped..

  9. MyAvatars 0.2 William Says:
    October 25th, 2006 at 8:07 pm

    Your Beatiful select boxes are not working in IE6 or IE7

  10. MyAvatars 0.2 Dav Glass Says:
    October 31st, 2006 at 8:06 pm

    William –

    I have just released a new tool called DHTMLForms (which replaces the old example of the DHTML Selects), you can see it here:

    http://blog.davglass.com/files/yui/dhtmlforms/

  11. MyAvatars 0.2 SanBaldo » Blog Archive » Code Samples based on YUI lib Says:
    January 7th, 2007 at 1:30 pm

    […] Two great examples of how to use the YUI Library CSS Grid Builder - Mouse Gestures (via Davs Rants blog). These icons link to social bookmarking sites where readers can share and discover new web pages. […]

  12. MyAvatars 0.2 Tim Says:
    January 12th, 2007 at 5:25 am

    Hi

    Thanks for the great YUI calendar example - it is the best implementation I have seen.
    Are the js files for this example availible ? - I am doing something wrong in my code and cant get it to work.

    thanks
    Tim

  13. MyAvatars 0.2 Dolittle Says:
    March 4th, 2007 at 2:59 pm

    Hi

    Great work.
    Is it possible to use drag and drop on tree branches?

    Thanks

  14. MyAvatars 0.2 Dav Glass Says:
    March 4th, 2007 at 4:19 pm

    @Dolittle

    The current version of the TreeView doesn’t support DragDrop out of the box.

    But there is a pretty good how-to here:
    http://sonjayatandon.com/08-2006/how-to-add-dragdrop-behavior-to-a-yui-tree/

  15. MyAvatars 0.2 dolittle Says:
    March 5th, 2007 at 3:47 pm

    Dav,

    Thanks. I’ve found your link very useful for making the yui TreeView combined with DragDrop.
    I don`t use ruby so I used the code in one of the comments.
    It has some minor mistake in it though (the comment).

    I`ll be happy to work with you on a nice DD TreeView to publish here if you like.
    Of course, with the appropriate credit to Sonjaya Tandon.
    I think allot of people are looking for this extension to yui.
    There is a great TreeView on the yui-ext
    but I want to stay as close to the basic yui as possible

    Thanks

  16. MyAvatars 0.2 Dolittle Says:
    March 11th, 2007 at 8:01 am

    Dav,

    I was looking at your inline editing example. It helped me allot figuring out how to do it in my application.
    I think there is a small bug. When you dbl-click an item for editing and then dbl-click it again.
    I`m not sure if this is important or not.

    Another thing is I think you tried to prevent insertion of html code .
    I`m not sure it`s working. I used:

    var checkText = this.value.replace(/()/g,function(thematch){if (thematch==”

  17. MyAvatars 0.2 Snig Says:
    March 27th, 2007 at 12:46 am

    Thanks for the wonderful code snippets…

    Anyway, I am trying to activate a tab programmatically by javascript (suppose, by a button click or a hyperlink etc). Unfortunately, I am unable to find any clue on how to select a tab by some js code, instead of user clicking on the tab itself.

    Please help….

    Thanks.

  18. MyAvatars 0.2 Dav Glass Says:
    March 28th, 2007 at 5:20 pm

    Snig –

    You could do something like this:

    var myTabs = new YAHOO.widget.TabView(/* etc etc */);

    myTabs.set(’activeIndex’, 1); // This would set the second tab to active.

    Hope that helps :)

  19. MyAvatars 0.2 Amy Says:
    April 13th, 2007 at 8:54 am

    Dav,
    You just saved me hours of work. I was trying to implement drag and drop in tabs and was thrilled to find your example. Thank you.

  20. MyAvatars 0.2 Dav Glass Says:
    April 13th, 2007 at 9:58 am

    Amy, I’m glad that the example helped :)

  21. MyAvatars 0.2 joeldg - navigating the surface » YUI and Grids, nifty stuff Says:
    April 14th, 2007 at 8:35 pm

    […] I have spent some time lately looking at various libs to use on a site I want to design, and by design I mean make it a true little piece of genius (and maybe learn something new while we are at it). I am not looking for a prototype replacement, I am looking more for a way to NOT use script.acuo.us, Dojo or the other libs that I thing are interesting, but they just seem to rub me wrong. I checked out the Adobe SPRY lib, decided it was too much other stuff, and eventually I kept finding myself coming back around to YUI which is pretty swanking and basically handles everything that I would have needed five others to bring together all the things I need.  It is also split up in  the various parts so you only  bring in what you need as you need it   see some code samples that I found and love, yay […]

  22. MyAvatars 0.2 Derek Says:
    April 19th, 2007 at 4:37 pm

    Wow man i really admire your work most of these things i really didnt know you could do in just YUI This will help me alot to use YUI where flash applications arent required. thx!

  23. MyAvatars 0.2 Art Says:
    July 24th, 2007 at 11:08 am

    This is an amazing page! your samples are great, thank you for sharing.

    I was wondering if you can elaborate on how you setup the rounded corners overlay sample? I’m not sure which css you’re using or if you’re using css at all (maybe using javascript directly?) to get the rounded corners?

    Thanks!

  24. MyAvatars 0.2 Samuel Says:
    July 26th, 2007 at 9:21 am

    Thanks Dav for your code YUI: Builtin Alert Override - Uses SimpleDialog has helped me replacing my javascript alerts with YUI dialogs. I would like you to do me one more favour by giving me a similar example to replace the confirm dialog boxes too. Thank you.

  25. MyAvatars 0.2 Dav Glass Says:
    July 26th, 2007 at 9:47 am

    @Art — The rounded corners are all CSS based.. The CSS file used is here:
    http://blog.davglass.com/files/yui/overlay2/style.css

    @Samuel — Confirm boxes are a bit tricker to do, that is why I haven’t done one :)
    With Confirm boxes the programmer is expecting it to stop the page, ask a question and get a response back.. You can’t do that with a Panel..

    Dav

  26. MyAvatars 0.2 Samuel Says:
    July 26th, 2007 at 10:02 am

    Thanks for the immediate response.
    I got a similar code while surfing on http://www.lib.virginia.edu/scripts/yui_dialog_1.0/examples/demo.html but its too much for me ;-)
    Well I got an idea that they use the stopEvent function of the YUI util class and then depending on the response continue but i’m afraid so I had asked you.
    Anyways thanks a lot :)
    Samuel.

  27. MyAvatars 0.2 Samuel Says:
    July 31st, 2007 at 4:47 am

    Hey dav,
    What is the best YUI control that I can use to open a as a child window to load a web page? The child page also does postbacks.
    Samuel

  28. MyAvatars 0.2 Dav Glass Says:
    July 31st, 2007 at 7:18 am

    @Samuel –

    Take a look at this example:
    http://blog.davglass.com/files/yui/overlay1/

  29. MyAvatars 0.2 YUI 2.3.0: Six New Components and a Prettier Face » Yahoo! User Interface Blog Says:
    July 31st, 2007 at 4:45 pm

    […] Text Editor (beta): YUI developer Dav Glass brings you the new YUI RTE, featuring rich-text editing with robust A-Grade browser support. […]

  30. MyAvatars 0.2 Chris Banford Says:
    August 6th, 2007 at 8:17 am

    Heya Dav,Thanks a lot for the pointer to this page (from the YUI mail list) — I’d checked this site before, but hadn’t found this page… Very glad that we’ve based our app on YUI — really looking forward to getting over this initial discovery phase, so I can start building slick stuff ;-)-Chris

  31. MyAvatars 0.2 Dav Glass Says:
    August 6th, 2007 at 8:29 am

    Chris –

    Glad to help :)

  32. MyAvatars 0.2 Some Notes on the YUI Rich Text Editor » Yahoo! User Interface Blog Says:
    August 13th, 2007 at 1:07 pm

    […] a Rich Text Editor (RTE) prototype to show that it was possible to build one on top of YUI. Of all my YUI examples, it quickly became one of the most requested, and the project indirectly resulted in me joining the […]

  33. MyAvatars 0.2 Some Notes on the YUI Rich Text Editor « outaTiME Says:
    August 13th, 2007 at 7:50 pm

    […] a Rich Text Editor (RTE) prototype to show that it was possible to build one on top of YUI. Of all my YUI examples, it quickly became one of the most requested, and the project indirectly resulted in me joining the […]

  34. MyAvatars 0.2 Jeff Says:
    August 23rd, 2007 at 2:02 pm

    Sorry about the basic question, but how can you get the popup calendar to display the current month (and current date selected) if the date entered in the text field is not well-formed?

    If you enter 8/23 in the text field and get the popup cal, the month reads “undefined NaN” and the calendar is greyed out. Then, as you might expect, when you click the forward month or back month links you start at 1900.
    Overall though, very helpful stuff. :)

  35. MyAvatars 0.2 Dav Glass Says:
    August 23rd, 2007 at 4:07 pm

    @Jeff –

    In the function showCal, you could add some type checking before calling setProperty

  36. MyAvatars 0.2 Jesse Says:
    August 25th, 2007 at 6:41 am

    Your examples are brilliant to say the least but there is only one thing missing… You mentioned you are not a windows guy but you should consider testing your code on windows as there are more windows users on the net then other. I am running your examples on windows with firefox and noticed some of them throw errors or just do not work at all.The “Container Effects based off of my widget.Effects” samples do not even work on win/ff.

  37. MyAvatars 0.2 Dav Glass Says:
    August 25th, 2007 at 8:35 am

    @Jesse -

    I don’t own a Windows machine (and don’t plan on spending the money to get one), so that would be a little difficult :)

  38. MyAvatars 0.2 Frank Says:
    August 28th, 2007 at 3:46 am

    The following example works great (http://blog.davglass.com/files/yui/class/f2e/example3/solution2.php) but I use addTabs to dynamically add tabs. This works also great. But, when youadd a tab then the id of the tab div and the id of the content div of the tab is not added. To add the id of the tab div I found out I need to add ” id: value” to the addTab like:  indexTabs.addTab(new YAHOO.widget.Tab({      label: ‘<?php echo $title; ?>’,      dataSrc: ‘<?php echo $filename); ?>’,      cacheData: true,       id: ‘<?php echo $module; ?>’  }));But what I’m missing is how to add the id of the content tab. Can’t find it anywhere. Any idea’s?

  39. MyAvatars 0.2 Frank Says:
    August 28th, 2007 at 5:05 am

    Problem solved by using this example: http://blog.davglass.com/files/yui/class/f2e/example3/solution.php. <br><br>But I still like to know if how to do this with the solution2.php example….

  40. MyAvatars 0.2 Dave Says:
    September 3rd, 2007 at 2:54 pm

    I’m attempting to use the Rich Text Editor (that really is quite brilliant) within a .NET application - I can load data from an XML file into the editor with all the formatting, BUT any attempt to save any additions or amendments are causing me grief - the page postback seems to clear all the alterations and re-save the original - the page load event brings in the original text, but this is within a ‘If Not Page.IsPostBack’ so I can only guess it’s the JavaScript reloading! Any idea how I get round this one?RegardsDave

  41. MyAvatars 0.2 Dav Glass Says:
    September 5th, 2007 at 6:33 am

    @Dave –

    Can you send me a link so that I can see it in action?

    Send it to dav dot glass at yahoo dot com..

  42. MyAvatars 0.2 Ye Says:
    September 7th, 2007 at 1:13 pm


    YUI: RTE hidden when rendered

    works great in FF, but when in IE (my verision: 6.0.2900) it has a little problem — when after clicking the save button, there editor still partially showing over the page.

  43. MyAvatars 0.2 YUI Version 2.3.1: Bug-Fix Release » Yahoo! User Interface Blog Says:
    September 19th, 2007 at 1:53 pm

    […] Text Editor (beta): YUI developer Dav Glass brings serious performance improvements to the YUI RTE, among the only full-featured RTEs to […]

  44. MyAvatars 0.2 YUI Version 2.3.1: Bug-Fix Release « outaTiME Says:
    September 19th, 2007 at 7:34 pm

    […] Text Editor (beta): YUI developer Dav Glass brings serious performance improvements to the YUI RTE, among the only full-featured RTEs to […]

  45. MyAvatars 0.2 Jen Says:
    October 1st, 2007 at 11:10 am

    I can’t get the “DataTable with DragDrop rows” example to work.  Do you have an example that shows dragging a row from one datatable and dropping to another?

  46. MyAvatars 0.2 Adi Says:
    October 2nd, 2007 at 12:08 pm

    We really really really want to use the new YUI RTE and were wondering when you might or if you plan on building support for embedding flash widgets.  Any recommendations if this is not in the works?FYI: I’m sure the blogging world would welcome this addition greatly!

  47. MyAvatars 0.2 Sunil Says:
    October 27th, 2007 at 5:17 pm

    Hey Dave…First up - great resource, appreciate all the hard work you’re putting in….I have the need for a splitpane control, either vertical or horizontal, where each panel would auto re-size - like a message preview pane in a mail app for example …. I don’t think that YUI comes with one straight out the box (?) I was wondering if you have implemented such a control, point me in the right direction etc….?thanksSunil ps it says David Glass

  48. MyAvatars 0.2 marr Says:
    November 11th, 2007 at 8:39 pm

    Great site - very useful.  I need to swap out some old stuff and insert yours…  I’m also trying to find a portal manager, similar to MyYahoo.  Know where I can find the code?Thanks,mm

  49. MyAvatars 0.2 peta Says:
    November 29th, 2007 at 6:44 am

    very useful… thank you so much for all the work you have put in, after 13 years of HTML I think I am finally ready to take on CSS LoL, thanks to peoplr like yourself :)

  50. MyAvatars 0.2 Mark Says:
    December 3rd, 2007 at 3:21 pm

    Dav, Can I get some clues on how to configure the rtEditor?I want to lose the color pickers, font options and the underline button.Thanks

  51. MyAvatars 0.2 Dav Glass Says:
    December 3rd, 2007 at 3:31 pm

    This section of the Editor’s landing page will show you:
    http://developer.yahoo.com/yui/editor/#toolbar
     
    Let me know if that doesn’t help :)
    Dav

  52. MyAvatars 0.2 Peter Retief Says:
    December 15th, 2007 at 4:10 am

    I have been using YUI with rails - very useful - one can use js helpers for re-usePlease don’t ever get a windows machine(I unfortunately have a few for my sons games but never for anything work related)

  53. MyAvatars 0.2 S.Sajan Says:
    December 19th, 2007 at 12:00 am

    Hi,     I want to implement the YUI tabView with .net..Is it possible to implement YUI tabView Control to .net..I have been using YUI Tabview with .net it’s working fine in FireFox not in IE7. when i specified Html file in Tabview it’s working Fine Both Browser .When i specify the .net File it’s Show the javascript error “Unknown javascript error” ..How i fix this issue….Thanks & Regards,S.Sajan

  54. MyAvatars 0.2 Jasen H Says:
    December 19th, 2007 at 10:41 am

    Dav, I am building a dock (since I can’t find one) for some of our YUI dialog based tools and my plan is to use a Panel with a YUI DD target to simulate the effect.  One of the things I would like is to be able to slide the DD target panel in and out from the left side of the screen like a tray.  I think your effects would help me accomplish this but I am wondering about the roadmap for your tools library.For example I see the Effects class in YUI with FADE and SLIDE and I’m wondering if it would be (smaller|better|whatever) to make my own YUI Effect rather than use your whole toolkit just to get that cool “BlindRight” effect.  My suspicion is that I should write my own YUI Effect.  Are there any plans to add some of your effects to the YUI code base?  In other words are your effects going be deprecated at some point soon and be ported to the YUI ContainerEffect heirarchy?  Or am I just nuts for asking?  :)-jasen

  55. MyAvatars 0.2 Dav Glass Says:
    December 19th, 2007 at 10:53 am

    Jasen –

    I’m not sure if my Effects will be placed in the actual library. They may lead as a starting point for an official Effects package..

    All of the source is available, so you can download it and chop out the effects that you don’t need.

    Dav

  56. MyAvatars 0.2 Webmaster 38 » Blog Archive » YUI : DHTML Form Controls at ajax scripts compound Says:
    January 3rd, 2008 at 6:59 pm

    […] - Download Leave a […]

  57. MyAvatars 0.2 Mike Says:
    January 6th, 2008 at 12:37 pm

    Hi Dave,The “yui calendar with key strokes” has different key effects between IE and Firefox. Particularly, the “up” and “down” arrows need to manage the bubble with a javascript command like sv.cancelBubble=false;Otherwise, the calendar arrow moves upwards AND THENthe arrow causes the screen to scroll in IE.

  58. MyAvatars 0.2 Benjie Says:
    January 18th, 2008 at 2:30 am

    Hi Dave,I’m just starting to read things on YUI. I am trying to build a page with two columns 50/50 divided by a line on the center. Tabview on top with links to javascripts… I just need hints and thoughts… Thanks!!!

  59. MyAvatars 0.2 nick Says:
    January 19th, 2008 at 2:42 pm

    I like your effects, i think you saved a lot of people a gread deal of work, however there seems to be a problem with them randomly in IE 6 and IE7. The sliding effects don’t work properly.I tested it with Mozilla and they work fine though.Just thought i’d tell you, and thanks again.

  60. MyAvatars 0.2 Sue Zheng Says:
    January 21st, 2008 at 11:02 am

    Hi Dave,Your DHTML From Controls example is cool. Just wonder if this tool is available for downloading. Thanks!


    Suezie

  61. MyAvatars 0.2 Mohan Kumar Says:
    January 24th, 2008 at 11:58 pm

    Hi Dav,I want the following effect. i am having 10 images to show to the user. I want to show three images at a time. We should provide back and front buttons. when  we click these buttons the images  should scroll  left and right(Three at a time)  .I want to achieve these functionality using yui library.I am familiar with yui library. So give some ideas to implement my functionality.You can see what I want in the following site.http://games.yahoo.com/games/frontHere you can see staff picks and video games options.They are showing three images at a time and they also show two buttons with which we can animate(scroll) the images three at a time to left and right.I think they are using yui library to achieve this functionality.Please give your feed back regarding this.thanks,Mohan

  62. MyAvatars 0.2 hemant Says:
    February 3rd, 2008 at 8:19 am

    Hi Dav,i have written code for drag and drop just like your’s drag handle ,but my first list is fix .everything was fine till i open it in IE .  it says “children is null or not an object”what to do ?plz help me thanks

  63. MyAvatars 0.2 rajesh katkam Says:
    February 4th, 2008 at 10:02 pm

    Hi dav,We have around 30 eot(private embedded fonts for IE) font files to be insert in the YUI editor fonts menu.we are inserting those 30 fonts dynamically.But we are only getting 23 fonts working.other fonts are not working.these 30 fonts are not in the local system.If we placed those fonts(TTF files) in the local fonts directory,all the fonts are working.

  64. MyAvatars 0.2 jeff Says:
    March 14th, 2008 at 8:57 am

    Can I borrow your brain for a couple of days?  Thanks for sharing these great examples.

  65. MyAvatars 0.2 tashfeen Says:
    March 18th, 2008 at 1:34 pm

    For the rounded corners, can they be used without having to set the width and height in the script and css?

  66. MyAvatars 0.2 Dav Glass Says:
    March 18th, 2008 at 10:07 pm

    @tashfeen What example are you referring to? I have 160+ examples :D

  67. MyAvatars 0.2 tashfeen Says:
    March 27th, 2008 at 8:37 am

    sorry about that.I was talking about the following one:YUI: Overlay with rounded corners & a knobI am trying to create roundd corners and avoid using images. I would rahter do it with YUI as we are already using it on our site. Thanks!

  68. MyAvatars 0.2 harish Says:
    April 3rd, 2008 at 5:57 am

    I have problem with Image upload, please send me the exact code of file upload..I got one example in your site  http://blog.davglass.com/files/yui/editor36/#  but it is not working at my sites. actually i have problem in YAHOO.util.Connect.setForm(formObject, true); 

  69. MyAvatars 0.2 Dave Says:
    April 4th, 2008 at 1:32 am

    Dav,Thanks for the code sample. It really helped me understand YUI.I have a question. In your image editor example, is there any way i can save the final image consisting of text and images to the server?Thanks

  70. MyAvatars 0.2 Dav Glass Says:
    April 4th, 2008 at 4:20 pm

    @tashfeen –

    In order to do it with that large of rounded corners, you will probably have to use images.

    Dav

  71. MyAvatars 0.2