scriptaculous « WordPress.com Tag Feed

JavaScript Frameworks Übersicht

webdevteam — Fri, 11 Sep 2009 11:00:25 +0000

Eine nette Übersicht ist hier zu finden.

Die Matrix soll lediglich die unterschiedlichen API-Stile sowie die Funktionsweisen der JavaScript-Bibliotheken veranschaulichen.

SCRIPTACULOUS-PURPOSE

csecyborg — Wed, 09 Sep 2009 03:58:19 +0000

our project is scriptaculous.we have chosen this project because its very interesting and attractive to both children and adults.
its a simple yet mind catching gaming concept.In this puzzles and games can be played. two applications have been developed by us.First is a jigsaw puzzle and second is a catchy make over game.
1.Jigsaw puzzle:
its something interesting to watch over and for playing in the side of kids as well a good mind game for youths as well.
according to our knowledge we can use the number of pieces to shuffle and play in this game.
we have used java script to play this game.we got this scripts by working with resembling puzzles and finally found this code and edited to our usage.
2.Make over game:
This is an another interesting application in our project.this is something related to drag and drag concept. for ex.,we have taken the concept of cones,ice creams,other garnishing items required for the ice creams to be dragged and dropped accordingly.
we have used the java script in this application.

scriptaculous

cyborg1 — Tue, 08 Sep 2009 11:44:11 +0000

hai

SCRIPTACULOUS PURPOSE

csecyborg — Tue, 08 Sep 2009 11:16:19 +0000

Scriptaculous is an java script library we are doing scriptaculous in javascriptintegrated with html language .script.aculo.us provides you with easy-to-use, cross-browser user interface JavaScript libraries to make your web sites.

We have selected this because its very interesting to each and every one regarding the puzzles and some maker over games.it improve the thinking capacity of small childern and as well as adults.We developed two applications regarding scriptaculous.They are:

*PUZZLE GAME

*MAKEOVER GAME

From this puzzle game we can give the work to our brain regarding the thinking hoe to move the puzzle piece and where to place that piece and to think how many moves we are moving to make the correct puzzle and we have mainly notice how many moves we are moving .we have to make the puzzle in few moves.

In such a way that we can make puzzles in our own by taking our images and cut the images to some pieces and can do our own puzzles also.

For makeover games in online only we play some games using drag and drop concepts bu here

SCRIPTACULOUS

csecyborg — Tue, 08 Sep 2009 10:40:33 +0000

Scriptaculous

Scriptaculous is an java script library we are doing scriptaculous in javascript

integrated with html language .script.aculo.us provides you with easy-to-use, cross

-browser user interface JavaScript libraries to make your web sites and web

applicationsfly.

In javascriptit include animation framework, drag and drop, Ajax controls

DOM utilities, and unit testing.It’s an add-on to thefantastic Prototype.To make an

element draggable, create a new instance of class Draggable.For additional built-in

functionality, make a Sortable instead.There is also a class named Draggables that

exposes functions for observing drag actions.Draggables become much more useful

when you use them with droppables, which are the areas that you can drag draggables to.

In this we have deveoloped two appliation based on drag and drop method

1.Picture Puzzle

2.Ice cream Maker

In this first step we have searchred in google with scriptaculous and we

have found in www.dollmakerscript.com

1.PICTUREPUZZLE::

In this puzzle drag and drop function is used and ims screentag is used.here the code follows

code::

<html>

<head>

</script>

</head>

<body>

<divclass=”wikistyle”> <linkrel=”stylesheet”title=”Sunburst”href=”http://script.aculo.us/github/styles/sunburst.css” />

<style>

<p>/* I don`t know, but this rule hasn`t apliied */<br />

#puzzle { width:450px; }<br />

.congrats { color: #fff; background: #080 }</p>

</style>

</div>

<p>

</p>

(function()

{

var p = $(‘puzzle’), info = $(‘puzzleinfo’), moves = 0;

Sortable.create(‘puzzle’, {

tag:’img’,overlap:’horizontal’,constraint: false,

onUpdate:function(){

info.update(‘You\’ve made ‘ + (++moves) + ‘ move’ + (moves>1 ? ’s’ : ”));

if(Sortable.sequence(‘puzzle’).join(”)==’123456789′)

info.update(‘You\’ve solved the puzzle in ‘ + moves + ‘ moves!’).morph(‘congrats’);

}

});

})();

</script>

</body>

</html>

2.ICE CREAM MAKER::

In this drag and drag method is used for draging and object and form an icecreame

in the objective field

code::

<html>

<head>

<!–

if (top.location != self.location)

top.location = self.location;

// –>

</script>

</head>

<body>

<!– Drag and Drop Doll Maker Code from dollmakerscript.com –>

var dms_file_type=’jpg’;

var dms_width=150;

var dms_height=150;

//–></script>

<br>

<h2>IceCream</h2>

<br>

<h2>Whipped Cream</h2>

<br>

<br>

<h2>Letter</h2>

<br>

<br>

<!– cone IceCream Maker –>

<br>

</div>

</script>

</script>

</body>

</html>

still we can create more applications with using drag and drop method in scriptaculous

scriptaculous

cse41 — Tue, 08 Sep 2009 10:12:11 +0000

Drag and drop!!!!!!!!!!!!!

function()

{

var p = $(‘puzzle’), info = $(‘puzzleinfo’), moves = 0;

Sortable.create(‘puzzle’, {

tag:’img’,overlap:’horizontal’,constraint: false,

onUpdate:function(){

info.update(‘You\’ve made ‘ + (++moves) + ‘ move’ + (moves>1 ? ’s’ : ”));

if(Sortable.sequence(‘puzzle’).join(”)==’123456789′)

info.update(‘You\’ve solved the puzzle in ‘ + moves + ‘ moves!’).morph(‘congrats’);

}

});

In this we have deveoloped two appliation based on drag and drop method

1.Picture Puzzle

2.Ice cream Maker

In this first step we have searchred in google with scriptaculous and we

have found in www.dollmakerscript.com

scriptaculous

cse41 — Wed, 02 Sep 2009 06:07:18 +0000

our team members are
RADHADEVI.Y
RENUGADEVI.B
PRABU.K
ARULMOZHLI
PREMALATHA
SARATHKUMAR
HURRISH
scriptaculous is an javascriptingb language it include
frames tables and arraylist
now it also include drag and drop method
we doing one application in drag and drop method

Toggle effect using Scriptaculous

hellydhindsa — Sun, 09 Aug 2009 07:59:16 +0000

Another post dedicated to Scriptaculous and to a nice way to implement Toggle effect.

This tutorial explains how to implement a simple Toggle effect using Scriptaculous framework. I prepared a simple tutorial you can download to see it in action:

Download this tutorial

To use scriptaculous effect on your pages you have to add this lines of code in the tag:

Then, you can apply Scriptaculous Toggle effect using this simple code, for example calling this function inside “onClick” attribute:

Effect.toggle(‘ID’,'type-of-effect’); return false

…where “ID” is the element you want to apply the toggle effect and “type-of-effect” is a toggle “sub-effect” (blind, appear, slide). I chose as toggle sub-effect “blink”:

About me

…some content…

In this way you can apply this effect to every element using HTML “id” attribute.

Download this tutorial

Effect appear (fade-in) using Scriptaculous

hellydhindsa — Sun, 09 Aug 2009 07:58:18 +0000

Scriptaculous Fade effect is one of my favorite effects of this framework and in this post I want to use it to implement a Digg-line sign-in bar.

My friend Ivan asked to me how to implement the same Digg-like fade-in effect which you can see when you click on the Login link on the Digg topbar. This is very simple using Scriptaculous and toggle effect with only few lines of HTML code.

Download this tutorial

Step 1: Download Scriptaculous Framework
Before to start, you have to download scriptaculous framework here and add a link to prototype.js and scriptaculous.js in the tag of your page:

Step 2: HTML code
HTML code is very simple

Effect.toggle() function takes as input two parameters: layer ID (in this case “login”) and type of effect (in this case “appear” to simulate fade-in effect).

Download this tutorial

Drag and drop to order list elements with Scriptaculous

hellydhindsa — Sun, 09 Aug 2009 07:57:16 +0000

Drag and drop feature is a popular effect in modern website interfaces and a simple way to implement it is using Scriptaculous.

This tutorial explains how to use Scriptaculous to implement an HTML list with drag and drop feature to reorder list elements.

Download this tutorial

Step 1: Add scriptaculous framework
To enable drag and drop effect you have to download Scriptaculous framework here and add a link to prototype.js and scriptaculous.js in the tag of your page:

Step 2: HTML Code
Add a

elements with a progressive ID like in the following example:
- Adobe
- Apple
- Microsoft
- Macromedia
- Symantec
- Mozilla Foundation
- Skype
&lt/p>

Add this javascript code below the previous code:

Sortable.create(‘myList’,{ghosting:false, constraint:true, hoverclass:’over’,
onChange:function(element){
// Total elements in the list (in this case 7
element)
var totElement = 7;
var newOrder = Sortable.serialize(element.parentNode);
for(i=1; i<=totElement; i++){
newOrder = newOrder.replace("myList[]=","");
newOrder = newOrder.replace("&",",");
}
// display the string with the new order in the <Pgt; with id listNewOrder
$('listNewOrder').innerHTML = 'New Order: ' + newOrder;
}
});

newOrder is a string variable which returns the new order of all elements of “myList” for example:

1,2,4,3,5,6,7

… where list element 4 has moved before list element 3. The new order is:

li element 1 –> position 1
li element 2 –> position 2
li element 3 –> position 4 (changed from position 3 to position 4)
li element 4 –> position 3 (changed from position 4 to position 3)
li element 5 –> position 5
li element 6 –> position 6
li element 7 –> position 7

If you use PHP or another server side language like ASP or Coldfusion you can save the new list order assigning the value of newOrder to an hidden HTML element in this way:

$(‘newOrderInput’).value = newOrder;

… and adding an hidden input field with id newOrderInput in your HTML code after

Opacity change using Scriptaculous

hellydhindsa — Sun, 09 Aug 2009 07:56:13 +0000

Scriptaculous is a great framework to implement superb animated effects for your website. It’s simple to use and in general final result is awesome.

This tutorial explains how to use Scriptaculous to implement a nice “change opacity” effect for a layer and its content.

Download this tutorial (include Scriptaculous 1.8.1)

Step 1: include scriptaculous libraries
Create a new page index.html and addadd a link to prototype.js and scriptaculous.js in the tag of your page:

Step 2: HTML code
This is an example about how to use opacity change effect. You have a container layer with ID el1, a chechkbox and some content like the following:

Database: design Entity-Relationship model
Complete the document with functional analysis

When you click on the checkbox, if the checkbox was “not checked” you call a function (changeOpacity()) to set the layer opacity to 30%. If the chechbox was “checked”, the function set the layer opacity from 30% to 100%. You can add new similar layers using a progressive numeration for ID (el2, el3, el4…). In this case remember to change the parameter in input in changeOpacity() function for each layer (changeOpacity(2), changeOpacity(3), changeOpacity(4)…).

Step 3: JavaScript function changeOpacity
Now, add this simple function into the <head&gt tag of your page to enable change opacity effect:

It’s all! Download this tutorial and try it!

Download this tutorial (include Scriptaculous 1.8.1)

Gettyone-like search options menu with Scriptaculous

hellydhindsa — Sun, 09 Aug 2009 07:54:37 +0000

Another great menu which uses Scriptaculous Fade effect to appear and disappear.

My friend Thomas asked to me how to implement a Gettyone-like search options menu which display a layer with some search options below the input search field, when an user click on the input field to searching for something.

The code is very simple and I added a nice Scriptaculous toggle – appear effect to display/hide the search options menu.

Download this tutorial

Step 1: include scriptaculous libraries
Create a new page index.html and addadd a link to prototype.js and scriptaculous.js in the tag of your page:

Step 2: HTML code
Add an input search field with an hidden input hiddenStatusMenu to “save” the actual status of the search options menu (0=hidden; 1=visible) with ID searchMenu initially hidden:

Simple images slider to create Flickr-like slideshows

hellydhindsa — Sun, 09 Aug 2009 07:53:24 +0000

If you like Flickr slideshow, this article explains how to implement it using Prototype-UI framework.

Since long time I was looking for a simple way to implement a Flickr-like slideshow (“image carousel”) and finally I found a good compromise between complexity and result to implement it using Prototype-UI, an awesome JavaScript framework based on Prototype and Scriptaculous.

So, to help my readers I implemented a slideshow ready to use and this step-by-step tutorial explains how to customize it and use it in your web projects. Not fear! It’s really simple!

Last update: March 10, 2008 – IE6 issue fixed by Anonymous

Download this tutorial

Step 1: HTML code
The HTML code for this tutorial is very simple. You have to include in the tag of the page you want to display your slideshow these files:

..and this CSS file to stylize your slideshow:

Now you can add the following code into the tag:

…some content here..
…some content here..

….

You have to put the content you want to display on your slideshow (for example an image) into a

element of the

….

If you use a server side language (PHP, Coldfusion, ASP…) you can populate dinamically the list. For example if you are a PHP developer you could use some code like this:

“>

… and add this these lines of code before to close the tag:

Step 2: CSS code to stylize your slideshow
You can modify the look of your simply modifying the related style sheet. For example to change the slideshow width (to display in this way more or less images on your slideshow) you can change the width attribute of the following CSS elements:

#horizontal_carousel {
width: 250px;
height: 100px;
padding:10px;
background:#f6f6f6;
border:solid 1px #e9e9e9;
}
#horizontal_carousel .container {
width: 260px;
overflow: hidden;
}

…or if you want to change the look of horizontal previous / next buttons you can change the following code:

#horizontal_carousel .previous_button {
float: left;
width: 23px;
height: 7px;
background: url(img/but_prev.png) no-repeat;
z-index: 100;
cursor: pointer;
}

#horizontal_carousel .next_button {
float: left;
width: 23px;
height: 7px;
background: url(img/but_next.png) no-repeat;
z-index: 100;
cursor: pointer;
}

Internet Explorer 6 Issue Solved
Some readers signaled me an issue with Internet Explorer 6. An anonymous friend suggested the solution to fix it:

#horizontal_carousel .container {
position:relative;
width: 555px;
overflow: hidden;
}

Thanks!

Download this tutorial

Scriptaculous effects compilation ready to use

hellydhindsa — Sun, 09 Aug 2009 07:52:26 +0000

This post is a compilation of five Scriptaculous tutorials ready to use in your projects (with source code to download) inspired to some Web 2.0 sites.

It includes: images slider Flickr-like, opacity change, drag and drop to reorder a list, fade-in effect and Edit in Place.

1. Simple images slider to create Flickr-like slideshows
A simple image slider ready to use to implement a Flickr-like slideshow.

2. Opacity change using Scriptaculous
This tutorial explains how to use Scriptaculous to implement a nice opacity change effect for a layer and its content.

3. Drag and drop to order list elements with Scriptaculous
This tutorial explains how to use Scriptaculous to implement an HTML list with drag and drop feature to reorder list elements.

4. Effect appear (fade-in) using Scriptaculous
Digg-like fade-in effect which you can see when you click on the Login link on the Digg topbar.

5. Edit in place with Scriptaculous and PHP
This tutorial explains how to implement a simple Edit in Place effect (Flickr-like) using Scriptaculous and PHP

Related Content
Mootools effects compilation
Five web 2.0 CSS menu tutorials

Improve form usability with auto messages

hellydhindsa — Sun, 09 Aug 2009 07:51:29 +0000

Animated auto messages are useful to improve FORM usability and Scriptaculous is a great framework to use in this case.

This tutorial explains how to improve form usability adding an auto message which appears and disappears with a nice fade-in and fade-out effect when an user select a field.

I used Scriptaculous toggle effect to implement it. For more info download the full code or take a look at how it works.

Download this tutorial

Step 1: include scriptaculous libraries
Create a new page index.html and add a link to prototype.js and scriptaculous.js in the tag of your page:

Step 2: HTML code
Add an input search field with an hidden input field with ID msgstatus to “save” the actual status of auto message (0=hidden; 1=visible):

10 Useful tutorials to learn Scriptaculous

hellydhindsa — Sun, 09 Aug 2009 07:50:30 +0000

This is a list of ten useful articles about Script.aculo.us which includes practical, basic and advanced tips to help you to implement quickly modern solutions for your web projects.

What’s news about Script.aculo.us? Take a look here.
If you have other interesting links to suggest, please leave a commment.

1. Creating an Ajax Application with Scriptaculous and NetBeans
This tutorial demonstrates the usage of the Java Persistence APIs to implement server side pagination (recommended for large sets of data) and to get and display the results in a text field featuring Ajax functionality.
Read more…

2. Unobtrusive and persistant Scriptaculous effects
A simple tutorial which explains how to implement a collapsable box using Scriptaculous .
Read more…

3. Create your own Ajax effects with Scriptaculous
Why let script.aculo.us have all the fun? Start building your own Ajax-driven visual effects today.
Read more…

4. Calendar System – Easily using PHP & Script.aculo.us
This tutorial explains how to implement a calendar system using PHP and Script.aculo.us (it includes full code ready to use on your projects).
Read more…

5. Sortables with Scriptaculous, PHP, and MySQL
This tutorial illustrates how to implement sortables effect with Script.acuolo.us in 6 easy steps.
Read more…

6. 9 Slider examples with Scriptaculous
A list which includes 9 basic and advanced slider demos with Script.aculo.us.
Read more…

7. Reflector
Reflector is an useful script to reflect automatically images with a nice glass effect.
Read more…

8. Enhance your Web application with scriptaculous
In his previous Web Development Zone column, Tony Patton explained what scriptaculous is, described how to use it, and discussed why you should use it. Now he plays up some of the really cool features of this free JavaScript framework.
Read more…

9. 20 Top Scriptaculous Scripts you can’t live without
A nice collection of tutorials which include ModalBox, Sliding Menu, Sortable Lists, Collapsable elements, Cool Tips, Auto-Scrolling Page Navigation, DatePicker…
Read more…

10. SelectBox Class
This javascript class allows you to replace (X)HTML select control with a nice styled select boxes in your site.
Read more…

Useful resources and tutorials for developing stunning web sites

hellydhindsa — Sun, 09 Aug 2009 07:49:35 +0000

Are you looking for fresh and useful tutorials for developing stunning web designs? Take a look at this list of free resources ready to use in your web projects.

If you want to suggest others resources add a comment, thanks!

1. ModalBox
ModalBox is a JavaScript technique for creating modern (Web 2.0-style) modal dialogs or even wizards (sequences of dialogs) without using conventional popups and page reloads. It’s inspired by Mac OS X modal dialogs.
Read more…

2. jQuery Cycle Plugin
The jQuery Cycle Plugin is a lightweight slideshow plugin. Its implementation is based on the InnerFade Plugin by Torsten Baldes, the Slideshow Plugin by Matt Oakes, and the jqShuffle Plugin by Benjamin Sterling. It supports pause-on-hover, auto-stop, auto-fit, before/after callbacks, click triggers and many transition effects. It also supports, but does not require, the Metadata Plugin and the Easing Plugin.
Read more…

3. Today’s timetable
This script makes it easy to add a timetable to your webpage. I wrote it for a local radio station but didn’t use it yet. I think it could be useful for TV programmes too, students’ schedules, or many other applications… absolutely awesome!
Read more…

4. Embed QuickTime
Embed QuickTime is a jQuery plugin that helps you embed QuickTime movies to play directly on your webpage, instead of redirecting your video to a separate page or forcing you to embed a video using Flash. It changes regular image links to the embedded QuickTime video when they are clicked.
Read more…

5. FancyBox
FancyBox is fresh and Mac-like lightbox with these features: automatically scales large images to fit in window, adds a nice drop shadow under the zoomed item, groups related items and adds navigation through them (uses preloading), can display images, inline and iframed content, customizable through settings and CSS.
Read more…

6. View-source
View-source uses MochiKit.DOM and MochiKit.Async along with dp.SyntaxHighlighter to provide syntax highlighting for its own source code, and the sources for all of the other examples! The source file path is read in from location.hash, and loaded with doSimpleXMLHttpRequest, and then inserted into the DOM with replaceChildNodes.
Read more…

7. jQuert 3 State Switch
jQuery 3 State Switch Plugin(J3SSW) is a jQuery Plugin that expresses the selection and some states of list item using radio button and checkbox at the same time. The applications of J3SSW includes some interfaces for sort key or filter key of any search results.
Read more…

8. Flash Gallery
Flash Gallery is a free application that allows you to create a slideshow on your website easy and fast. You won’t need any programming skills to install or use it. Just embed it into your website and script will automatically form a slideshow from a specified folder or from Flickr photostream.
Read more…

9. jQuery Feed Menu
jQuery Feed Menu allows users to click your feed icon and be presented with a list of feeds to choose from. It’s simple and easy to implement.
Read more…

Fadein and Fadeout a Richfaces ModalPanel

Andreas Höhmann — Wed, 22 Jul 2009 15:59:13 +0000

Today i explain you a cool combination for rich:modalPanel and rich:effect.

In the richfaces forum i found a article about a modalpanel with scriptaculous-effects (“fade-in a modalpanel”). The answer was a link to the official richfaces demo-application (photoalbum). There we can find a login-dialog (svn source) with a “appear-effect”:


#{messages['login.login']}





...

...

The javascript method applyModalPanelEffect can be found in the photoalbum.js (svn source):

function applyModalPanelEffect(panelId, effectFunc, params) {
 if (panelId && effectFunc) {
 var modalPanel = $(panelId);
 if (modalPanel && modalPanel.component) {
 var component = modalPanel.component;
 var div = component.getSizedElement();
 Element.hide(div);
effectFunc.call(this, Object.extend({targetId: div.id}, params || {}));}}
}

With this the rich:modalPanel will not shown immediately … it appears This was the “fade-in part”.

I improved the code for the “fade-out part”, first the dialog:

and the javascript:

function applyModalPanelEffect(panelId, effectFunc, params, hide) {
 if (panelId && effectFunc) {
 var modalPanel = $(panelId);
 if (modalPanel && modalPanel.component) {
 var component = modalPanel.component;
 var div = component.getSizedElement();
 if (hide) {
 Element.hide(div);
 }
 effectFunc.call(this, Object.extend( {targetId : div.id}, params || {}));}}
}

function showModalPanelWithEffect(panelId, showEffect, params) {
 applyModalPanelEffect(panelId, showEffect, params, true);
}

function hideModalPanelWithEffect(panelId, hideEffect, params) {
 var _params = params;
_params['afterFinish'] = function(){Richfaces.hideModalPanel(panelId)};
 applyModalPanelEffect(panelId, hideEffect, params, false);
}

Now the dialog call showModalPanelWithEffect to fade-in and hideModalPanelWithEffect to fade-out.

Try it

Entwickeln von grafiklastigen interaktiven Webapplikationen

kenny1987 — Wed, 24 Jun 2009 20:21:47 +0000

Nach langer Zeit lasse ich an dieser Stelle mal wieder von mir hören. In letzter Zeit hat sich in meinem Geekleben viel getan. Ich habe mein Langzeitprojekt “Umstellung der Technik auf Apple-Produkte” mit dem Kauf des neuen MacBook Pro 13″ abgeschlossen und bin damit sehr glücklich.

Weiterhin habe ich mir einen V-Server bei 1,2 oder 3 geklickert. In den letzten Wochen war ich unter Anderem damit beschäftigt ein Projekt umzusetzen, welches ich schon lange geplant habe. Es handelt sich dabei um ein ganz einfaches Onlinenotepad, mit dem man kollaborativ Notizen schreiben und bearbeiten kann. Um sich davon ein Bild zu verschaffen, schaut man sich das ganze am Besten unter http://notepad.leuchtetgruen.de/ an.

In diesem Blogbeitrag möchte ich darauf eingehen wie diese Anwendung entwickelt wurde und welche Probleme dabei auftraten und noch auftreten.

Der Anfang

Ganz zu Beginn steht die Idee. Man bekommt eine Idee und beginnt sie sich im Kopf immer weiter auszumalen und auszugestalten. In diesem Fall war mir klar dass es sich um ein maximal einfach zu bedienendes und schön anzusehendes Notepad handeln sollte. Was sich bei mir dann immer unmittelbar anschließt ist die Konzeption der Benutzerschnitstelle.

Dazu benutze ich GIMP – wer mit Photoshop groß geworden ist, mag dafür wohl Photoshop nutzen. Darin entwickle ich das grundlegende Userinterface mit allen Elementen, die einmal zu sehen sein sollen. Ich kann verschiedene Möglichkeiten austesten und einfach über das Zu- und Abschalten ausprobieren, was am Besten aussieht.

Ist das User Interface einmal grafisch entwickelt folgt der Gedanke, wie dieses in die Webanwendung übernommen werden kann. Hier wurde festgelegt, dass das Korkboard als eigene Grafik den Hintergrund bilden soll und sich das Notepad stets in der Bildschirmmitte befinden soll. Es soll nicht skalieren um eine feste Größe des Textfeldes für die Texteingabe zu garantieren. Auch der Speichern-Button wurde als eigene Grafik abgespeichert um ihn gegebenenfalls ein- oder ausblenden zu können. All dies geschah in einer CSS-Datei – die hier für das Betrachten an einem normalen Computerbildschirm ausgelegt war.

Erst im Anschluss daran fand tatsächliche Programmierung statt. Hier wurde auf eine klare Client-Server-Architektur geachtet. Der Client besteht dabei ausschließlich aus XHTML, JavaScript und CSS. Es wird kein HTML durch PHP o.Ä. erzeugt. Die Kommunikation mit dem Server findet über asynchrone HTTP-Requests statt. Hier verwende ich meist Protoype.JS als Framework. Die Backendlogik ist in PHP entwickelt und stellt eine API dar, deren Funktionen vom Client aufgerufen werden können.

Wo wir schon bei Frameworks sind. Es ist klar dass eine interaktive Webanwendungen meist auch Animationen enthält, die eine besser User Experience gewährleisten sollen. Um dies zu realisieren bieten sich mittlerweile zwei Möglichkeiten an. Eine Möglichkeit bieten CSS-Animations an, die mit HTML 5 in CSS einzug gehalten haben. Da HTML 5 jedoch noch kein weit gelebter Standard ist, wurde jedoch der Weg gewählt Animationen mit Hilfe des JavaScript-Frameworks Scriptaculous zu erstellen.

So wurde eine einfache, interaktive und hoffentlich ansprechende Webanwendung konzipiert und implementiert. Wie man sich denken kann passiert das nicht ohne Probleme.

Probleme

Es ist erstaunlich in wieviele Probleme man bei solch einer einfachen Anwendung laufen kann. Erstaunlich ist auch die Vielschichtigkeit der Schwierigkeiten. So ist es beim User Interface schwierig alle Browser zu bedienen. Besonders der Internet Explorer vor Version 7 kann hier noch nicht vollständig genutzt werden, da er keine Transparenz in CSS oder in PNG-Grafiken unterstützt.

Aber auch im Backend traten Probleme auf. So ist beim Versand von schon wenigen Mails mithilfe der PHP-Funktion mail(); der Server sehr schnell abgeraucht. Daher musste hier eine SMTP-Verbindung zum Mailserver von 1&1 aufgebaut werden, der dann die Mails versendet.

Wie nicht anders zu erwarten traten auch im Client Probleme auf, die im Wesentlichen an meiner eigenen Dummheit lagen. So trat öfters das Problem auf, dass Notizen leer gespeichert wurden obwohl sie es nicht waren. Der Grund hierfür war, dass die Notiz per POST über AJAX an den Server übertragen wird. Nicht beachtet wurde hier, dass ein URL-Encoding nötig ist, da sonst jedes Fragezeichen oder kaufmännisches Und als Zeichen für einen neuen Parameter gewertet wird. Aber man lernt ja nie aus

Fazit

Wie man sieht ist schon beim Entwickeln einer einfachen Webanwendung viel zu beachten und es kann viel schiefgehen. Besonders Inkompatibilitäten der einzelnen Browser (Speziell des IE) können einem Dabei viel Kopfzerbechen bereiten.

Scriptaculous Image Hover Effect

israelwebdev — Tue, 16 Jun 2009 22:20:16 +0000

I’ll start with my editorializing; perhaps we (earlier Symfony/RoR users) chose poorly when integrating Prototype and Scriptaculous into the framework. It seems that jQuery is taking over, and a look at some of the Plugins being made for Symfony 1.2 are recognizing this, and moving some of the “Protaculous” functions out of the core and developing for jQuery. A search for specific Scriptaculous snippets provide fewer or no results relative to the same search for a jQuery snippet. Live and Learn.

Anyway, I was hoping to add some animation/effects to my otherwise very static website, and thought a simple hover-popup on the profile images could provide a small yet effective effect to give the site some modern motion. Here’s how I did it with the latest attempt for Scriptaculous Effects.

Based on these functions mentioned in the question here, I created these still simple functions:

var z1=0;
function popIn(ev) {
  item = Event.element(ev);
  if(!item.id)item.id='pop_'+(++z1);
  new Effect.Scale(item, 110, {scaleFromCenter:true,
    duration: .4, queue:{ position: 'end', scope: item.id }});
}

function popOut(ev) {
  item = Event.element(ev);
  new Effect.Scale(item, 91, {scaleFromCenter:true,
    duration: .4, queue:{ position: 'end', scope: item.id }});
}

For some brief explanation, these functions to be called on moveover/out events identify the item, if the item has no id, it creates one for it. The Scale effect “smoothly” zooms the element, and uses a scoped queue so that the zoom out will only be triggered after the zoom in completes, but multiple images can be zooming at once.

The effects can be attached with a call such as:

z=$$('.profile img');
z.each(function(n) {
  n.absolutize();
  n.observe('mouseover', popIn);
  n.observe('mouseout', popOut);
});

[Editor's note: it was brought to my attention that the above call might fail if the images (when attaching to images) were not yet loaded. As such, we should wrap the above call in a

Event.observe(window, 'load', function() {...});

if the images are loaded with the document, or if they're loaded later (e.g. AJAX), deal with both cases, when the images are and are not yet loaded:

z=$$('.profile img');
z.each(function(n) {
  if(n.complete){
    n.absolutize();
    n.observe('mouseover', popIn);
    n.observe('mouseout', popOut);
  }else{
    n.observe('load', function(ev) {
      n=Event.element(ev);n.absolutize();
      n.observe('mouseover', popIn);
      n.observe('mouseout', popOut);
    });
  }
});

]

Use the selector to find the elements to zoom, and attach the event observers to each.
Place this code after the elements are loaded, and BAM, you’re good to go. It’s nothing too fancy, but it works.

There’s a similar effect with jQuery found here which uses more CSS and seems prettier. I’m open to improvements to this snippet.

As an aside, the only decent site I’ve found with a few custom-made snippets is the Script.aculo.us Samplr (see the sidebar, not the main area). If only there were more of these, Scriptaculous might have a chance for survival.

Drag and Drop with Drop Zone markers

ajithmanmu — Sat, 30 May 2009 16:39:23 +0000

Using drag and drop functionality(for Sorting) in Prototype/Scriptaculous is rather simple. But in order have the drag and drop functionality with drop zone marker we need to use the patched Prototype/Scriptaculous JS libraries.

The code is simple and goes like this:-

Step 1:-

We need to have a conatiner div that holds the draggable child elements.

..Your Content….

</div>

..Your Content….

</div>

Step 2:-

Sortable.create(‘containerdiv’,{tag:’div’,overlap:’vertical’,scroll:window,

onUpdate:updateFunction,onChange:changeFunction});

</script>

The Sortable.Create function creates a drag and drop sortables. We need to specify the id of the parent div(here containerdiv ).The tag attribute specifies the type of child element (here we use div). The onUpdate function is called when the sort order changes and the dragging ends(i.e after we drag and drops). There is also a onChange function which is triggered when the sort order changes while dragging. The attribute scroll:window (this is important)is for enabling the scroll bar for the browser while we drag in a large page. We can use the updateFunction that is triggered while the onUpdate event to get the current sorted list of the child elements and can use it for updating the order in the database.

var orderedarray = Sortable.serialize(‘containerdiv’,{name:’orderlist’});

By this we get the order of the child elements after each drag and drop. See more on Sortable.serialize.

The value of orderedarray will be similar like this orderlist[]=1&orderlist[]=3&orderlist[]=4&orderlist[]=2

Strip off the orderlist[] value from the array elements by the following method:-

var neworderarray = orderedarray.match(/\d+/g);

Now the value of neworderarray will be 1,3,4,2. This order means that div with id childdiv_1 is at the first position,div with id childdiv_3 is at the second position and so on. Use this to update the order in the DB.

Now regarding the drop zone marker we need to include the patched JS libraries in our page. Also we need include the style for drop zone marker in our page. See below:-

.emptyPlaceMarker

{

z-index: 999;

border-right: #9D9D9D thin dashed;

border-top: #9D9D9D thin dashed;

border-left: #9D9D9D thin dashed;

border-bottom: #9D9D9D thin dashed;

background-color: Transparent;

border-width:2px;

}

.emptyPlaceMarker

{

z-index: 999;

border-right: #9D9D9D thin dashed;

border-top: #9D9D9D thin dashed;

border-left: #9D9D9D thin dashed;

border-bottom: #9D9D9D thin dashed;

background-color: Transparent;

border-width:2px;

}

Thanks Tankut Koray for the amazing drop zone marker and Prototype/Scriptaculous JS patches. You can get the patched Prototype/Scriptaculous JS libraries and how to use it from here.

Click here to see an example.

New Task: Drag and Drop

vensebido — Fri, 15 May 2009 03:58:39 +0000

After we finished the Progress Bar last week (Thursday morning) we were given a new task. On a blog site that we we’re working on, there’s a feature called blog roll that displays a list of website that you want to display on your blog. Editing the blog roll shows you the list of links that you have previously set and gives you the freedom to delete or add a new one. However, the links list is static, it appears in the order of which link you first added and if you want to rearrange the links list you have to delete some of them and add them again so you can attain your desired order. Our task is to make the links list draggable so that you won’t have to delete and add links again to obtain your desired order.

We were excited on this new task because it sounds fun. We were told told visit scriptaculous (script.aculo.us provides you with easy-to-use, cross-browser user interface JavaScript libraries to make your web sites and web applications fly) to find a javascript code for our task. In that site we found the drag and drop library, we used the Sortable for our task. A Sortable is a quick way to initialize many Draggable elements in a container element. When you create a new Sortable, it takes care of the creation of the corresponding draggable Droppables.

If you notice, we don’t make codes from scratch, our supervisors told us that we don’t have to do that because there are bunch of available and stable codes out there and we only have to reuse and tweak it. They’re right! But understanding and using other codes especially those that are made in cooperation with other programmers around the globe is a bit challenging because given that they provide documentation sometimes you have to trace how the code works especially if they are well modularized.

We finished this task last Monday and we were given another task which is blog posts management which i will discuss on my next post.

Best Open Source Resources for Web Developers

Maher — Thu, 16 Apr 2009 19:12:36 +0000

It’s all in the title, if you wanna stay connected check this website it’s full of excellent stuff and always updated.

Identify AJAX Frameworks with One Click

Maher — Fri, 10 Apr 2009 22:03:46 +0000

Identify the AJAX framework used by a website/webapp with one click using this special bookmarklet :

Forslag til undervisningsopplegg i IT2

Carl-Erik — Fri, 03 Apr 2009 18:34:22 +0000

Jeg håper å kunne undervise i IT2 i ikke alt for fjern framtid, men ser med skrekk fram til å bruke den programvaren som skolene bruker nå. Jeg ønsker at det elevene lærer er noe de kan ta med seg videre, gjøre på fritden, og at det skal være aktuell teknologi som er lett å finne dokumentasjon på. I ettermiddag har jeg laget en liten grovskisse av hva jeg ønsker at et slikt kurs skal inneholde. Med tiden vil jeg sikkert fylle inn mer og mer, men den er litt skissepreget nå. Om du er en it-lærer som (ønsker å) bruker fri eller gratis programvare i undervisningen er det sikkert noe å hente. Hovedsakelig har jeg bare skrevet om verktøysiden og lite om faktisk innhold. Har du tips til gjennomføring vil jeg også gjerne høre det

Skissen min ligger til åpent skue på Google Docs.
Dette kurset er veldig rettet mot webprogrammering, men jeg har også tanker om en annen variant der man bruker den åpne .NET-implementasjonen Mono. Mer om det senere.

Stikkord for innholdet er: Versjonshåndtering, Extreme Programming, prosjektstyringsverktøy, Unit Testing, Ajax, animasjon, Git, Linux/Mac OS X, Ruby, Ruby on Rails, Prototype, Script.aculo.us