JSGallery is a very nice AJAX image gallery built with Mootools.

Look & effects of the script is configurable. It supports browsing with keyboard between images and also pages.

Features of this AJAX gallery:

• nice transitions for page change, image select, etc.
• supports easy to build no-script version
• preloads images with separate indicators (optional)
• a bunch of options to change the default styles and bevaviours
• visibility of prev/next handles is controlled by mouse distance
• use the arrow keys to go to previous/next image
• use number keys to go to a certain page (beginning with 1)
• prevents too fast change of images (ugly effect interruption)

• Filed under: Gallery, Goodies, Other License

Description

ddmenu is a simple MooTools-based script to create you’re own context menus.

Features

• The Menu Appearance is adapted to the System Content Menu behavior.
• Crtl-Switch: Press the Crtl-key and right click to switch between ddmenu and browser default context menu.
• Shift-Switch: Press the Shift-key and right click to open ddmenu beside the browser default context menu.
• Fully customizable: Menu styling can be easily defined in external stylesheet.
• Cross-browser: Full A-Graded browsers support (Opera is supported through Ctrl + Left Click)
• Fade-in (settable)
• Two tricky functions to enable/disable menu items

Specification

• Requires: < mootools 1.2 beta 2
• Tested browsers: Firefox 2, Safari 3, Internet Explorer 6/7, Opera 9 under Windows. Firefox 2, Safari 3 under Mac OS X
• Last modified on: 1/1/08
• Latest version: 0.2
• Author: janlee

Demos

• Right click anywhere on a page to bring up a menu. Use “Ctrl + Left Click” if you’re Browser doesn’t understand right clicks.
• mooeDit - A This experimental HTML-Editor uses the ddmenu in a Textarea

How to use it

1. Download moo.ddmenu.0.21.js and ddmenu.css. Include them in your page

   <link rel="stylesheet" href="css/ddmenu.css" type="text/css" media="screen" />
   <script type="text/javascript" src="js/mootools-beta-1.2b1.js"></script>
   <script type="text/javascript" src="js/moo.ddmenu.0.2.js"></script>

2. Create the menu-HTML width the items and they’re IDs

   <div class="ddmenu def" id="ddmenu2" style="display:none">
   <ul>
   <li class="title">Menu Title</li>
   <li class="item" id="menu_item1"><a href="#">My item 1</a></li>
   <li class="item" id="menu_item2"><a href="#">My item 2</a></li>
   <li class="item" id="menu_big_item"><a href="#">This is a oversized item...</a></li>
   <li class="sepline"></li>
   <li class="item" id="menu_item_with_icon1"><a class="objects" href="#">Another item</a></li>
   <li class="item" id="menu_item_with_icon2"><a class="letter" href="#">Disabled item</a></li>
   <li class="item" id="menu_item_with_icon3"><a class="umbrella" href="#">With icon</a></li>
   <li class="sepline"></li>
   <li class="item" id="menu_spec_links"><a href="#">Enable on Links</a></li>
   <li class="item" id="menu_spec_texts"><a href="#">Enable on Texts</a></li>
   <li class="item" id="menu_spec_images"><a href="#">Enable on Images</a></li>
   </ul>
   </div>

3. Initialize ddmenu class passing the options. This example calls console.info when a menu item is clicked. (Take a look in the JS-Source for more informations)
   

   function iniz () {
   pagemenu = new DDMenu ('ddmenu2', document, { //document can be the whole page,
   //an element or a parent of elements
   onOpen: function (e) {
   this.enableItems(true); //enable all
   this.enableItems('menu_item_with_icon2',false); //disable menu_item_with_icon2
   },
   
   onItemSelect: function (act_id, act_el, menu_bindon) {
   console.info("menu action -> item id: \"%s\" from: %o in %o", act_id, act_el, menu_bindon)
   }
   });
   }

Version history

• v.0.21 [2/08]
  • Fixes for MooTools 1.2 Beta 2
• v.0.2 [1/08]
  • Correct positioning
  • Scroll-save
  • Ctrl and Shift Switches
  • Fade In
  • CSS-Styles reworked and adapted
• v.0.1 [11/07]
  • Initial Version with a basic menu script structure
  • Event-calls and enableItems() functions
  • Ajusted the when-menu-is-opened events on the system context menu behavoir

Today I have decided to share with you the way I code in dreamweaver. If you thinking about coding practice that is not what I am about to show you. There are no questions for me in terms of coding. It is strictly semantic markup but as a designer I like when thinks looks pretty. Whatever I do I like to keep it simple, organized and pretty.

I played a bit with various dreamweaver functions that day and I have discovered the possibility to create your own theme for coding view. It is always very useful to create a nice working environment because it motivates you and stimulates your creativity process. If you are that type of person who walks around with open eyes watching colour combinations, grid systems, patterns in your daily life you probably will understand why it is important for me to keep my working area interesting and motivating. Anyway, no more talking let me show you my coding view in Dreamweaver. You can see on the first image the css code and the html code on the second. If you are interested what colours I have used here they are.

CSS Colours

• import: #002142
• media: #003366
• comment: #969696
• important: #99CC00
• property: #00356A
• selector: #99CC00
• string: #0071E1
• value: #42A0FF

HTML Colours

• anchor: #99CC00
• atribute value: #42A0FF
• comment: #969696 I
• form: #99CC00
• image: #99CC00
• table: #99CC00
• text: #0071E1

I was also thinking about changing the font type but I have not found anything which would be as readable as the default font - Courier New.

If you guys had the same idea using different colours or font types please send me a link to your code view image. I would be very happy to get inspired by your ideas. Thank you!

from Lewro’s blog is online playground of beginner designer Roman Leinwather