Web Dev Bros » scriptaculous http://www.webdevbros.net hot talk about web development Thu, 20 Jan 2011 19:55:06 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 New JavaScript FX library from Vienna, Austria: script.aculo.us is past, scripty2 is the future! http://www.webdevbros.net/2009/06/28/new-javascript-fx-library-from-vienna-austria-script-aculo-us-is-past-scripty2-is-the-future/ http://www.webdevbros.net/2009/06/28/new-javascript-fx-library-from-vienna-austria-script-aculo-us-is-past-scripty2-is-the-future/#comments Sun, 28 Jun 2009 10:56:25 +0000 Michal http://www.webdevbros.net/?p=327 image.png

Thomas Fuchs is the pioneer of the first FX JavaScript library script.aculo.us and as he and his work reside in Vienna (which is more or less my hometown) I have to support his new open source product called scripty2 which is a successor of script.aculo.us.

To keep things short: It’s a first release and therefore still in Alpha. It looks promising, especially because it’s only 5KB of size (gzipped & excl. PrototypeJS).

Check out the demos to see if it’s something you gonna need for your future work or not.

image.png

]]> http://www.webdevbros.net/2009/06/28/new-javascript-fx-library-from-vienna-austria-script-aculo-us-is-past-scripty2-is-the-future/feed/ 1 create a contextmenu with javascript & prototypejs in seconds http://www.webdevbros.net/2008/04/08/create-a-contextmenu-with-javascript-prototypejs-in-seconds/ http://www.webdevbros.net/2008/04/08/create-a-contextmenu-with-javascript-prototypejs-in-seconds/#comments Tue, 08 Apr 2008 17:44:43 +0000 Michal http://www.webdevbros.net/2008/04/08/create-a-contextmenu-with-javascript-prototypejs-in-seconds/ Did you ever wanted to build a context menu like google does it? I have figured out an easy and quick way to achieve this with a small amount of CSS and 3 lines of javascript.

contextmenu.png

Click here for a demo

All you need to get started is the latest version of prototypejs. I bet you have it already ;)
We will build our menu with the following structure:

PLAIN TEXT
HTML:
  1. <div id="menu">
  2.   <a href="">item</>
  3.   ...
  4. </div>
  5. <a href="">more...</a>

First there comes the div container which is called menu in this example. It contains the menu items which are ordinary a tags. After the menu we place a link which will display our contextmenu. Now lets apply some style to the menu so it really looks like a nice contextmenu. Apply the following styles..

PLAIN TEXT
CSS:
  1. #menu {
  2.   position:absolute;
  3.   border:1px outset #aaa;
  4.   border-right:2px outset #aaa;
  5.   background:#fff;
  6.   margin:8px 0px 0px 8px;
  7. }
  8. #menu a {
  9.   display:block;
  10.   padding:4px 20px;
  11.   border-bottom:1px solid #aaa;
  12.   font-weight:bold;
  13. }

We positioned the menu absolute therfore it will appear over the "more..." link. Thats good because we want to have the menu on our mouse when we click the link. The margin moves it a bit away so we can still see the link a little. The rest is for nice appereance. Oh, i forgot: the links within the menu are displayed as block. Thats for the line breaks.

The only thing which is missing now is tons of Javascript. Hmm, not really. We are fine with 3 statements. We don't calculate any positions of the menu, because it is already positioned. Thats the nice thing and makes us write less javascript. ok, lets tune our html..

PLAIN TEXT
HTML:
  1. <div id="menu" style="display:none"
  2.   onmousemove="$(this).show()"
  3.   onmouseout="$(this).hide()">
  4.   <a href="#">item</>
  5. </div>
  6. <a href="javascript:void(0)"
  7.   onclick="$('menu').show()">
  8.   more...
  9. </a>

When the user clicks on more... we show the menu ($('menu').show()). Now we have to keep it visible till he/she moves away the mouse out of the menu. For this reason we keep showing it onmousemove. Finally if the mouse leaves the menu we hide it ($(this).hide()).

Last but not least we added display:none because the menu should not be visible by default (note: you have to assign this inline, otherwise it wont work. For more details check the prototypejs API).

Get the full source code here by viewing the source. If you are familiar with script.aculo.us you could add nice effects when showing and hiding the menu. (Effect.Appear and Effect.Fade)

Tested in IE7, FF2

I use this kind of menus in all my apps. If you need more menus in one page. e.g. context menu for a user (delete, modify, permissions) then just render an own menu for each person. It generates more HTML but makes it easy to use.

]]> http://www.webdevbros.net/2008/04/08/create-a-contextmenu-with-javascript-prototypejs-in-seconds/feed/ 2 Library with extensions for prototypejs and script.aculo.us http://www.webdevbros.net/2007/12/21/library-with-extensions-for-prototypejs-and-scriptaculous/ http://www.webdevbros.net/2007/12/21/library-with-extensions-for-prototypejs-and-scriptaculous/#comments Fri, 21 Dec 2007 14:47:24 +0000 Michal http://www.webdevbros.net/2007/12/21/library-with-extensions-for-prototypejs-and-scriptaculous/ prototype extensions library Today i have found scripteka.com which is an awesome resource for prototype and scriptaculous extensions. It offers one of the best extensions around on a very clear and web2ish site. Currently they offer 88 extensions which include javascript calendars, password strength meters, reflection generators, image croppers, faders, .... Go to scripteka.com and look yourself what they offer. Its good stuff which is based on one of the best libraries out there.

]]> http://www.webdevbros.net/2007/12/21/library-with-extensions-for-prototypejs-and-scriptaculous/feed/ 1 Web 2.0 balloon tooltip with prototype and scriptaculous http://www.webdevbros.net/2007/05/29/web-20-balloon-tooltip-with-prototype-and-scriptaculous/ http://www.webdevbros.net/2007/05/29/web-20-balloon-tooltip-with-prototype-and-scriptaculous/#comments Tue, 29 May 2007 21:20:46 +0000 Michal http://www.webdevbros.net/2007/05/29/web-20-balloon-tooltip-with-prototype-and-scriptaculous/ A very nice balloon tooltip from BeauScott.com is another gift of the web 2.0 era. Look at the stylish appearance and enjoy...

Balloon tooltip

This beauty from BeauScott uses the prototype javascript library including some little extensions and scriptaculous. Supported features are for example getting the tooltips content direclty from an XML or HTML file. Furthermore its interface for the usage is simple as well. Example:

PLAIN TEXT
JAVASCRIPT:
  1. var h = new HelpBalloon({
  2.    title: 'Webdevbros.com',
  3.    content: 'webdevbros is providing you some freaky content.'
  4. });

Here is the original post from Beau Scott:
http://www.beauscott.com/2006/08/19/ajax-enabled-help-balloons/

]]> http://www.webdevbros.net/2007/05/29/web-20-balloon-tooltip-with-prototype-and-scriptaculous/feed/ 1