JavaScript links: Difference between revisions

The educational technology and digital learning wiki
Jump to navigation Jump to search
Line 226: Line 226:
quality and more in the spirit of modern web design, e.g. code that is based on
quality and more in the spirit of modern web design, e.g. code that is based on
a list and that can display without javascript or in old browsers if needed.
a list and that can display without javascript or in old browsers if needed.
There are a lot of free versions from commercial sites. Some of these work (and can be upgraded to a "pro" version), most include "nagware" elements, e.g. menuitems that point to their site and some are totally unusable.
The list below should be ok, but I didn't test them all - [[User:Daniel K. Schneider|Daniel K. Schneider]] 15:09, 20 April 2008 (UTC).


* [http://www.brainjar.com/dhtml/menubar/ Revenge of the Menu Bar] A tutorial from brainjar.com. Includes good and reusable code for menus that are efficient and reliable.
* [http://www.brainjar.com/dhtml/menubar/ Revenge of the Menu Bar] A tutorial from brainjar.com. Includes good and reusable code for menus that are efficient and reliable.
** [http://www.brainjar.com/dhtml/menubar/demo.html Demo page] (source included in the HTML page).
** [http://www.brainjar.com/dhtml/menubar/demo.html Demo page] (source included in the HTML page).
** Menus are made with div's and classes for these divs.
** Menus are made with div's and classes for these divs.
** Tested, works.


* [http://www.dhtmlgoodies.com/index.html?page=menuScripts DHTMLGoodies menus]
* [http://www.dhtmlgoodies.com/index.html?page=menuScripts DHTMLGoodies menus]
Line 252: Line 256:
** [http://javascript.cooldev.com/files/download.php?file=COOLjsTree COOLjsTree] (not tested)
** [http://javascript.cooldev.com/files/download.php?file=COOLjsTree COOLjsTree] (not tested)
** "Standard" editions are free
** "Standard" editions are free
* [http://javascript.internet.com/navigation/ javascript.internet.com/] / navigation has several menus, e.g.
** [http://javascript.internet.com/navigation/expanding-menu.html Expanding Menu]
** [http://javascript.internet.com/navigation/click-to-expand-menu.html Click-To-Expand Menu]
** [http://javascript.internet.com/navigation/xp-menus.html XP Menus]]
** The above use simple code, free. (some other examples may be too outdated, IE only, etc.)
* [http://www.howtocreate.co.uk/jslibs/script-showhidelevels Multi level menu controls]
** From [http://www.howtocreate.co.uk/ hotocreate] tutorial web site.
** free, modern multi-browser
** [http://www.howtocreate.co.uk/jslibs/ other version are available]


* [http://www.treemenu.net/ Tree Menu] (not tested)
* [http://www.treemenu.net/ Tree Menu] (not tested)
Line 262: Line 277:
** Includes an online menu-generator
** Includes an online menu-generator
** Free version must include a link to zapatec
** Free version must include a link to zapatec
* [http://hyperdisc.unitec.ac.nz/materials/javascript/top10/ pull down menu]
** Very simple, 3 lines of code using window.location.href


=== Style sheet switchers ===
=== Style sheet switchers ===

Revision as of 17:09, 20 April 2008

Definition

This is a short links page on JavaScript. Only sporadically maintainted !

Reference and Manuals

Introductions

JavaScript Reference

Important: The core JavaScript/JScript/Actionscript languages are defined by ECMAScript. There may be some little differences and various degrees of implementation.

Document object model (DOM)

Else please consult the Document Object Model (alias DOM) entry.

JavaScript specific DOM Reference

  • History: For older NS 4.7 browsers and non-standardized so-called DOM 0 (e.g. HTML inline, browser interfaces) you may read: JavaScript 1.3 Guide and JavaScript 1.3 Reference Guide. These are outdated, but still on of the best references on how to use the old-style "standard" JavaScript Objects.

FAQs and Short References

Tutorials and tutorial sites

Warning: Some tutorials are not very clear about what's standardized, what's obsolete and what's informal but well supported.

Beginners tutorials

  • SELFHTML Tutorial by Stephan Münz (German and French)

General on-line tutorials

  • JavaScript tutorial. Several tutorials by Mark "Tarquin" Wilton-Jones. One of the best on-line texts I have seen. Suitable for people with some programming experience.

old-style JavaScript

(but useful)

JavaScript, DOM and DHTML tutorials

DOM CSS

  • DOM CSS by Mark "Tarquin" Wilton-Jones. A tutorial about style switching.

Ajax and DHTML tutorials

JavaScript language tutorials

(for those who want to become real programmers)

Client-side modifications

There are browser extensions that allow a user to change behavior of web pages. The best know is Greasemonkey.

Collections and links sites

General indexes

Ressource sites with tutorials and help

Sites with javascript code

This chapter should only include free code or code that is free for education. I am not against commercial ware, but this web site targets poor academics and students in educational technology. - Daniel K. Schneider 16:33, 12 April 2008 (UTC).

See also tutorials above !

General developer libraries

See also AJAX

  • jQuery jQuery is a JavaScript library that takes this motto to heart: Writing JavaScript code should be fun... (12/2006).
  • DHTML Suite from dhtmlgoodies.com (to implement various DHTML widgets and functionalities).

Scripts and script collections

(this subcategory may need some sorting)

For programmers - both learning resource and code snippets or reusable code
Examples from books

Through the Web editor code

A list of Javascript HTML, XML, etc. WYSIWYG editors. By default, these are free. There may be better commercial but not listed solutions. Libraries listed here are all respectable, but (so far) we don't have any recommendation and features mentionned are not complete. See Comparison table and Standards schmandards 2007 for comparison.

Bigger
  • TinyMCE.
    • Is on of the more popular libraries and fairly easy to integrate and customize. Integrated in many popular CMS systems and cross-browser.
    • Used to have trouble with embedded lists (but this is maybe fixed now/ - DKS)
    • Wikipedia entry
  • FckEditor.
    • Crossplatform, XHTML 1.0, CSS, paste from Word, spell checker. Integration packs with various server-side languages.
    • Wikipedia Entry
  • Xinha, Crossplatform.
    • (DKS thinks it's the default one in the PostNuke CMS).
  • Loki.
    • Claims to be most standards compliant and encourages semantic markup.
  • WYMeditor is a web-based WYSIWYM (What You See Is What You Mean) XHTML editor).
    • Its main concept is to leave details of the document's visual layout, and to concentrate on its structure and meaning, while trying to give the user as much comfort as possible.
    • For certain applications where users ought to produce optional XHTML code, this is better than an WYSIWYG editor.
Smaller
  • HTMLBox. Cross-browser interactive open-source HTML textarea built on top of the jQuery library. Easy to use, best for smaller applications (users write smallers texts). 15KB only.
  • NicEdit. Even more lightweight than HTMLBox. Also can be used through widget code (JS is loaded from nicedit.com).

Popup and tooltip code

JavaScript/DHTML popups that are free and and work with modern browsers. While looking for 2-3 "products" I found several that didn't work properly - Daniel K. Schneider

  • Bride of Windows Popup, from Brainjar.com
    • It's actually a tutorial on how to write your on. But the code is enough mature to be used in production
    • A maybe outdated example I made is here.
  • openPopUps Popup code
    • Rather easy to use (besides some strange difference between div id and an argument to pass): popup contents is inserted within a div that has an id like "Div1", "Div2" etc. An onload function then should call the hideDiv function in order to hide these div's contents. Ginally there is a createWindow function to call for displaying it. The fifth argument is (related?) to the id of the div.
createWindow('My Window', 400, 'brown', 1, 0, 240, 375);
  • Widget.Tooltip.js.
    • Creates small tooltips with code like this (additional options can be added):
new Widget.Tooltip({ elementId: 'myElementId', tooltipContent: 'my tooltip content' });

Menus

There is a lot of menu code. Some commercial. Some freeware seems to be of better quality and more in the spirit of modern web design, e.g. code that is based on a list and that can display without javascript or in old browsers if needed. There are a lot of free versions from commercial sites. Some of these work (and can be upgraded to a "pro" version), most include "nagware" elements, e.g. menuitems that point to their site and some are totally unusable.

The list below should be ok, but I didn't test them all - Daniel K. Schneider 15:09, 20 April 2008 (UTC).

  • Revenge of the Menu Bar A tutorial from brainjar.com. Includes good and reusable code for menus that are efficient and reliable.
    • Demo page (source included in the HTML page).
    • Menus are made with div's and classes for these divs.
    • Tested, works.
  • Cooldev.com has 2 menus
  • Tree Menu (not tested)
    • Cross-browser DHTML tree. Free version must a include a link.
  • zapatec menu
    • Includes an online menu-generator
    • Free version must include a link to zapatec
  • pull down menu
    • Very simple, 3 lines of code using window.location.href

Style sheet switchers

Note: In Firefox you always can try manually. Menu View->Page style.

Rollover

Retrieved from "https://edutechwiki.unige.ch/mediawiki/index.php?title=JavaScript_links&oldid=17345"