Skip to content

Posts from the ‘JavaScript’ Category

9
Abr

CSS — Truques dicas exemplos

Abaixo apre­sento alguns truques para se usar no css que por vezes são muito úteis e evi­tam prob­le­mas futuros

http://webdeveloperplus.com/css/25-incredibly-useful-css-tricks-you-should-know/

css téc­ni­cas

http://www.smashingmagazine.com/2007/01/19/53-css-techniques-you-couldnt-live-without/

Fer­ra­men­tas para opti­mizar o css

http://www.smashingmagazine.com/2006/09/02/list-of-css-tools/

http://www.smashingmagazine.com/2008/12/09/50-really-useful-css-tools/

Javascript téc­ni­cas

http://www.smashingmagazine.com/2008/09/11/75-really-useful-javascript-techniques/

Redesen­har os botões padrão (sub­mit) com css :

http://particletree.com/features/rediscovering-the-button-element/

23
Mar

Animações sem flash jquery

Agora é fácil criar apli­cações sem pre­cisar do adobe flash insta­l­ado, basta só usar HTML e JavaScript

http://www.spritely.net/

19
Out

tooltip

como agora os balões andam muito na moda, deixo aqui umas dicas :=)


qTip http://craigsworks.com/projects/qtip/demos/

JQuery

14
Out

Firefox accelerometer

Paul Rouget shows off some cool new demos that are bak­ing on the trunk of Fire­fox currently.

First are some nifty new events that get fired if your com­puter has an accelerometer:

JAVASCRIPT:

  1. win­dow.addE­ventLis­tener(“MozOri­en­ta­tion”, func­tion(e) {
  2. /* 3 val­ues: e.x, e.y, e.y */
  3. }, true)

It works with Mac­Books and on Win­dows and Linux with Thinkpads.

Check out this cool screen­cast of the ori­en­ta­tion event in action:

orientation_demo

They also have WebGL and CSS Tran­si­tions going in Fire­fox trunk now as well! There are some demos in the orig­i­nal blog post of WebGL + CSS3 + SVG as well as CSS Tran­si­tions + the HTML5 Video tag that are very cool (require Fire­fox Nightly).

Here’s an exam­ple code snip­pet show­ing how you can use CSS Tran­si­tions to change the back­ground color of a DIV over time as well as chang­ing the width and height of an HTML5 Video at the same time:

CSS:

  1. div {
  2. –moz-transition-property: background-color, height, width, font-size;
  3. –moz-transition-duration: 2s, 1s, 2s, 1s;
  4. –webkit-transition-property: background-color, height, width, font-size;
  5. –webkit-transition-duration: 2s, 1s, 2s, 1s;
  6. }
  8. div video {
  9. –moz-transition-property: width, height;
  10. –moz-transition-duration: 2s, 2s;
  11. –webkit-transition-property: width, height;
  12. –webkit-transition-duration: 2s, 2s;
  13. }

Someone’s also put together a cool demo that puts the new accelerom­e­ter sup­port with some SVG to cre­ate a Super Mario Kart clone:

mario_orientation

Fonte:Ajax­ian

7
Out

Preload Page

The clas­sic ani­mated gif, or the “load­ing…” text, could be now eas­ily replaced thanks to this new jQuery plug-in.

Spe­cially suited for a page loads of images, the final result showed in this demo looks really nice and flashy.

Fea­tures:

  • Pre­load a whole web page.
  • Pre­load a part of the page.
  • Gets all images, <img> tags and background-image of your CSS
  • Easy to implement.
  • Adjustable load­ing bar.
  • Tested in Fire­fox, Safari, Opera, Chrome, IE7, IE8 and IE6 (script will be ignored in IE6 though).

Full post, demo, and source code, are in Gaya Design blog.

To be hon­est, I instantly had a thought about this tech­nique:  wasn’t the DOM­Con­tent­Loaded event pur­pose the one to avoid peo­ple wait­ing a full page down­load before they’re allowed to inter­act with it? … never mind, we can­not do much in any case in front of images ded­i­cated layouts.

Fonte:GayaDe­sign

3
Jul

Manual AJax e PHP

AJAX & PHP

Man­ual de PHP

  1. http://battisti.wordpress.com/2007/03/10/apostila-de-php/

Man­ual de AJAX

  1. http://battisti.wordpress.com/2007/08/17/apostila-de-ajax-epac-conged/
  2. http://battisti.wordpress.com/2007/05/09/apostila-de-ajax/


29
Jun

Ajax lightbox and modal dialog solutions

1. Lightbox2

lightbox2.jpg

A pop­u­lar light­box solu­tions that writ­ten by Lokesh Dhakar, it is built on pro­to­type and scrip­tac­u­lous frame­work. It only sup­ports images and slideshow.

 

2. Light­box Gone Wild

lightbox-gone-wild.jpg

Inspired by light­box and include the sup­port for form and html. It is based on pro­to­type and scriptaculous.

3. Col­or­box

colorbox.jpg

Light­weight and cus­tomiz­able light­box plu­gin through CSS and jQuery. The plu­gin sup­port images, image group, ajax, inline con­tent and iframe content.

4. Fan­cy­box

fancylightbox.jpg

Dis­play images, html and mul­ti­me­dia con­tent. It is a jQuery based lightbox.

5. jQuery Light­box Plugin

jquerylightbox.jpg

Sim­i­lar to Lokesh Dhakar light­box solu­tions, except it is jQuery based.

6. pret­ty­Photo

prettyphoto.jpg

Jquery light­box clone and sup­port more mul­ti­me­dia format.

7. Lite­box

litebox.jpg

Light­weight light­box which built on moo.fx and prototype.lite.

8. Thick­box

thickbox.jpg

Sim­i­lar solu­tions to lightbox2, but it has more fea­tures like dis­play inline con­tent, iframed con­tent or con­tent served through ajax in a hybrid modal. It is build on jQuery.

9. Slightly Thickerbox

slightlythickerbox.jpg

A mod from thick­box which add on next and pre­vi­ous but­ton to form a images gallery.

10. Slim­box

slimbox2.jpg

The ulti­mate light­weight Light­box clone for jQuery. As stated, slim and slim­mer solu­tions for lightbox.

11. LightView

lightview.jpg

Built with pro­to­type and scrip­tac­u­lous. Sup­ports plenty of media format.

12. jQuery Dialog

jquerydialog.jpg

jQuery UI also con­tains dia­log com­po­nent, although its nature is more like a dia­log and form. But, you can cus­tomize to cre­ate your own fla­vor of image pre­view or gallery.

13. Pro­to­type Window

prototype.jpg

A pro­to­type based win­dow dialog.

14. MochaUI

mochaui.jpg

MochaUI is an UI frame­work for mootools. It includes dia­log win­dows for dis­play­ing rich content.

15. Face­box

fambox.jpg

Face­book light­box aliked, jQuery based modal dia­log. It sup­port images, div or entire remote pages.

16. Boxy

boxy.jpg

Face­box aliked, but it sup­port more fea­tures like drag­ging and size tweening.

17. Modal­Box

modalbox.png

A modal dia­log that allow you to include html within. Build with pro­to­type and scriptaculous.

18. Shad­ow­box

shadowbox.jpg

Sup­port most of the media for­mat and it is cus­tomiz­able through css. On top of that, it is a stand­alone javascript solu­tions. It is free for non-commercial usage.

19. LightWin­dows

lightwindow.jpg

A com­pre­hen­sive light­box solu­tions which enable you to embed images, video,iFrame, flash and more.

20. Sim­ple­Modal

simplemodal.jpg

Yet another jQuery based modal dialog.

21. jqModal

jqmodal.jpg

22. Multi­box

multibox.jpg

Sup­port images,flash, video, mp3 and html and it is build with mootools.

23. Grey­box

greybox.jpg

Can be used to dis­play web­sites, images and other con­tent, doesn’t rely on any ajax framework.

24. High­slide

highslide.jpg

A really quick and smooth free image viewer. It sup­ports plenty of for­mats like html,ajax,iframe and flash.

25. Sexy­box

sexybox.jpg

Another stand­alone light­box which dis­play con­tent directly from html.

Light­box Generator

Visu­al­Light­box

Web­GalleryCre­ator

Light­box Plu­g­ins for WordPress

Lightbox2

jQuery Light­box

Shad­ow­box

Flex­i­ble Lightbox

If you need more light­box plu­gin for word­press, you can visit the link here.

Alter­na­tive Solutions

Cre­at­ing Light­box with CSS

Fire­fox hack – Greased Lightbox

Via: http://www.dottony.com/30-useful-ajax-lightbox-and-modal-dialog-solutions/

24
Abr

jCarousel

Rid­ing carousels with jQuery

Author: Jan Sor­galla
Ver­sion: 0.2.3 (Changelog)
Down­load: jcarousel.tar.gz or jcarousel.zip
Licence: MIT and GPL
Doc­u­men­ta­tion: http://sorgalla.com/projects/jcarousel/

jCarousel is a jQuery plu­gin for con­trol­ling a list of items in hor­i­zon­tal or ver­ti­cal order. The items, which can be sta­tic HTML con­tent or loaded with (or with­out) AJAX, can be scrolled back and forth (with or with­out animation).

Exam­ples

The fol­low­ing exam­ples illus­trate the pos­si­bil­i­ties of jCarousel:

17
Abr

JavaScript : Prototype e LibSAPO.js

Apre­sen­tação Pro­to­type e LibSAPO.js, real­izada pelo Cláu­dio Gam­boa na segunda SAPO Session.

27
Fev

Ajax — Acentuação

como resolver o prob­lema de acen­tu­ação do  ajax ape­nas com uma linha de código.

Basta acres­cen­tar esta linha ao conteúdo.

<?php header(“Content-Type: text/html; charset=ISO-8859–1″,true) ?>

« Older Entries
Newer Entries »

Bad Behavior has blocked 38 access attempts in the last 7 days.