background preloader

JavaScript

Facebook Twitter

Le langage XML - Afficher du XML dans Html. Les Data Islands [les îles de données] Derrière ce nom pour le moins bizarre, se cache une possibilité assez intéressante.

Le langage XML - Afficher du XML dans Html

Dans un fichier Html, vous pouvez créér un" îlot" de données se trouvant dans un fichier XML distinct et en extraite des données que vous pouvez alors afficher dans le document Html. Ici, dans le fichier Html, on va désigner le fichier xml extérieur avec un identifiant id : Astuce. Problématique Il peut parfois être utile d'insérer des données dynamiques dans une page statique (HTML) sans pour autant générer dynamiquement toute la page.

Astuce

Solution Si la mise en page est aisée, inutile de réaliser dynamiquement toute la page avec du shell, du PHP, du perl, du java... Rotation d’un menu en CSS3 - Créer ce menu rotatif avec les Animations CSS. Etape 1 : Gérer les transformations.

Rotation d’un menu en CSS3 - Créer ce menu rotatif avec les Animations CSS

A spin box widget in JavaScript. Spin box or spinner is a user interface widget consisting of a numeric entry field combined with buttons to increment and decrement the displayed value.

A spin box widget in JavaScript

SpinBox is a JavaScript object that converts text input fields into spin boxes. The value can be changed using the spinner buttons or by typing, using the up and down arrow keys, or using the mouse wheel when the field has the focus. Download SpinBox Download one of the files below and either incorporate it into your code or serve it as a separate file. SpinBox does not apply any styling to the spin boxes. Creating spin boxes The spin box is created within an HTML element. By putting a text input field within the containing element the user will be able to enter a value even if JavaScript is not available.

Combo box en HTML 5 et équivalent HTML 4. HTML 5 parmi les nouveaux objets de formulaire, inclut la combobox qui permet de remplir un champ de texte selon les options présentées dans une liste déroulante.

Combo box en HTML 5 et équivalent HTML 4

On peut réaliser l'équivalent en HTML 4 avec deux fonctions JavaScript. Combobox en HTML 5 Syntaxe: <input type=text list=browsers ><datalist id=browsers ><option> Google <option> IE9 </datalist> Graph3d documentation. Contents Overview Graph3d is an interactive visualization chart to draw data in a three dimensional graph.

Graph3d documentation

You can freely move and zoom in the graph by dragging and scrolling in the window. Graph3d also supports animation of a graph. The graph works smooth on any modern browser for data up to 10.000 points. The Graph is developed as a Google Visualization Chart in javascript. To get started with Graph3d, download graph3d.zip, and unzip the contents in a subfolder graph3d on your site. Graph3d documentation. Contents Overview Graph3d is an interactive visualization chart to draw data in a three dimensional graph.

Graph3d documentation

You can freely move and zoom in the graph by dragging and scrolling in the window. Graph3d also supports animation of a graph. The graph works smooth on any modern browser for data up to 10.000 points. Javascript-surface-plot - 3D Surface Plotting in JavaScript! The first and original, freely available, JavaScript surface plot.

javascript-surface-plot - 3D Surface Plotting in JavaScript!

This library allows one to plot 3D surfaces. Download the code and take a look at test.html to see how. Tested in Chrome, Firefox, Opera, Safari and Internet Explorer 6. Librairies Javascript pour gérer les graphiques. Spline with symbols. Demo Studio. Pop up - Cours Javascript. Image Power Zoomer. Updated June 18th, 10: Adds ability to specify a different, higher resolution version of the original image as the image used inside the magnifying glass.

Image Power Zoomer

Description: Some images are worth a closer look, which is why there's Image Power Zoomer. It gives any image on your page the ability to be magnified when the mouse rolls over it. A "magnifying glass" that appears over the image lets the user zoom in on any portion of it as it follows the cursor around. Furthermore, the magnification power can be adjusted on the fly by turning the mouse wheel back or forth, just like in many graphics programs. Lets take a closer look at this script's features: Applies the zoom effect to any image on the page without adding any additional markup to it. It's time to shine the spotlight on deserving images on your site with this script! Demos (scroll your mouse wheel while over the image to further zoom in or out). Processing.js. Untitled. Simple Javascript Image Viewer.

September 4, 2010 Quick Demo Here's a simple (but useful) example of the image viewer using HTML and javascript.

Simple Javascript Image Viewer

In case javascript is disabled, this particular example would fallback to a normal HTML image. How to use the image viewer? Use mouse wheel to zoom in or out of the image. Before we look at another example... If this is not the kind of image viewer you are looking for, then check out the other image viewers which I found in the internet. jQuery Image Zoom Viewer, jQuery Zoom, Javascript 360 Spin & Zoom Rotate Fullscreen PHP / ASP.NET iPhone/iPad spin360. Utilisation d'images - Tutoriel canvas. Une des fonctionnalités les plus amusantes de canvas est la possibilité d'utiliser des images. Celles-ci peuvent être utilisées pour de la composition dynamique de photos ou comme fond pour des graphiques, etc. Il s'agit également de la seule manière d'y ajouter du texte (la spécification ne prévoit aucune fonction pour dessiner du texte).

Les images externes peuvent être utilisées dans tout format géré par Gecko (c'est-à-dire au format PNG, GIF ou JPEG).