A forma mais fácil de descomplicada para marcar posições de menu é utilizando Jquery. Veja o exemplo na url abaixo e entenda como é simples o funcionamento.
http://jaccon.com.br/wp-content/gallerys/2013/07/menu.html
Categoria: Jquery
Preview de imagens antes do upload usando Jquery
Esta função é interessante para aqueles projetos que você quer fazer uma pré-visualização do arquivo que está sendo uploadado para o servidor. O código é simples e pode ser baixado através do link abaixo:
JS
<script type=”text/javascript”>
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$(‘#blah’)
.attr(‘src’, e.target.result)
.width(150)
.height(200);
};
reader.readAsDataURL(input.files[0]);
}
}
</script>
HTML
<input type=’file’ onchange=”readURL(this);” />
<img id=”blah” src=”#” alt=”your image” />
Demo e download: http://jsbin.com/uboqu3/1/edit
Os melhores editores WYSWYG em HTML5 para seu projeto web
Separei uma lista com os melhores editores WYSWYG em HTML 5 para você utilizar em seu projeto web. Alguns deles você poderá perceber que a perfeição e intuitividade é tão boa que é de se pensar de dispensar os editores para desktop.
1. Redactor
It is the most fantastic yet beautiful and easy-to-use WYSIWYG editor on jQuery. It is lightning fast, small, scalable, and powerful.
2. wysihtml5
Is an open source rich text editor based on HTML5 technology and the progressive-enhancement approach. It uses a sophisticated security concept and aims to generate fully valid HTML5 markup by preventing unmaintainable tag soups and inline styles.
3. Mercury Editor
Mercury is a full featured HTML5 editor. It was built from the ground up to help your team get the most out of content editing in modern browsers.
4. TinyEditor
It is a simple JavaScript WYSIWYG editor that is both lightweight (8KB) and standalone. It can easily be customized to integrate with any website through CSS and the multitude of parameters.
5. elRTE
Is an open-source WYSIWYG HTML-editor written in JavaScript using jQuery UI. It features rich text editing, options for changing its appearance, style and many more. You can use it in any commercial or non-commercial projects.
6. Aloha Editor – HTML5 WYSIWYG Editor
Lets you experience a whole new way of editing. It’s faster than existing technologies and offers unprecedented WYSIWYG functionalities.
7. CLEditor
It is an open source jQuery plugin which provides a lightweight, full featured, cross browser, extensible, WYSIWYG HTML editor that can be easily added into any web site.
8. bootstrap-wysihtml5
Is a JavaScript plugin that makes it easy to create simple, beautiful wysiwyg editors with the help of wysihtml5 and Twitter Bootstrap.
9. jQrte
A wysiwyg editor. Distributed under the terms of the MIT license. Free of charge for both personal and commercial use.
10. Maqetta
Is an open source project that provides WYSIWYG visual authoring of HTML5 user interfaces. The Maqetta application itself is authored in HTML, and therefore runs in the browser without requiring additional plugins or downloads.
Atualizando div com timer usando Jquery
Digamos que você queira que uma div carregue o conteúdo de uma página externa de tempos em tempos e você pretende usar a biblioteca Jquery para este serviço. Enão siga o exemplo abaixo
Jquery: projeto supersize images
O projeto Supersize desenvolvido com a biblioteca Javascript Jquery é interessante pois possibilita o usuário utilizar imagens em full screen com redimencionamento automático dependendo da resolução de tela do usuário.
Veja no link abaixo a demo de utilização do plugin
http://buildinternet.com/project/supersized/slideshow/3.2/demo.html
Para fazer o download do plugin clique aqui