Tooltip Plugins and Tutorials If you are looking to give your readers the option of a little bit more information or optional extra navigation, a great solution is to use Tooltips. Tooltips are a “common graphical user interface element, that are used in conjunction with a cursor, usually a mouse pointer. The user hovers the cursor over an item, without clicking it, and a small box appears with extra information regarding the item being hovered over” (via Wikipedia). To give your tooltip extra functionality and versatility the best and simplest solution is using Javascript, especially jQuery. In this post we have collected 25 of the best jQuery Tooltip Plugins and Tutorials to help with your next project. qTip – The jQuery Tooltip Plugin View DemoSource BeautyTips, a jQuery Tooltip Plugin View DemoSource jQuery Tooltip – Tooltips done right View DemoSource Prototip 2 – Create Beautiful Tooltips with Ease View DemoSource jGrowl View DemoSource Simpletip – A simple jQuery Tooltip Plugin View DemoSource jQuery plugin EZPZ Tooltip
Problema al centrar imagenes con jquery/javascript Veréis tengo un problema al intentar centrar imágenes verticalmente mediante jquery. Os copio el código tal y como lo tengo ahora: index.php: Código PHP: my_jquery_scripts.js: $(document).ready(function() { /* Centrar altura de cada imagen respecto a div padre */ // Altura de div "padre" var altura_div_padre = $(".img_div").css("height"); var altura_div_padre = altura_div_padre.slice(0, -2); $(".img_thumb").each(function() { // Altura de la imagen var altura_img = $(this).attr("height"); // Restamos altura del div "padre" y dividimos entre 2 redondeando a entero var resto_altura = Math.round((altura_div_padre - altura_img) / 2); // Centramos la imagen con el resultado $(this).css("position" , "relative").css("top" , resto_altura); }); El script funciona perfecto SOLO SI NO es la primera vez que visitas la página (o pulsas Ctrl+F5), es decir, si entras por primera vez no funciona, a partir de ahí ya puedes recargas tantas veces como quieras que funciona sin problemas.
One page website Once in a while, something new shows up that has the power to shake the world and stimulate all people to keep moving instead of stay still, this quote applies for practically every instance in life and business. A while ago, Nike released an astonishing website named “Nike Better World” to support all the athletes around the world; the design itself was brilliant and it generated a lot of positive reviews, but the real breakthrough came thanks to the navigation system that these guys made, a fantastic vertical Parallax system. On this tutorial we’re going to undress the structure of this website and then we’re going to create something inspired by Nike’s website using jQuery and CSS. View Demo Download Source This tutorial is a practical exercise, created with the only intention of explore the functionality behind the “Nike Better World” website, all the credits belong entirely to Nike. How does it work? Understanding the “Nike” effect Step 1: Insert the HTML Step 2: Working with jQuery
ACNPLWGL | CSS Winner ACTIVATION NODEPLUS Lab ACNPLWGL stands for ACTIVATION NODEPLUS Lab, a digital creative work that combines Canvas/WebGL experiments into a real-time graphic playground. Sliding Boxes and Captions with jQuery | Build Internet! Add an extra layer of information to your images with sliding boxes. This is now a plugin! Check out the announcement post for the Mosaic jQuery plugin. Check the project page for the latest release notes and features! The Basic Idea All of these sliding box animations work on the same basic idea. Confused? From this basic idea we can play around with animations of the sliding element to either show or cover up the viewing area, thus creating the sliding effect. Step 1 – CSS Foundation Work Given the basic structure outlined in the helpful image above, we will need to use a little bit of CSS to make it work as intended. The following defines the viewing window (.boxgrid) and sets the default position for images within it to the top left. If you aren’t using the semi-transparent captions you are done with CSS – move to Step 2. Opacity that plays nice in all browsers is a rough topic, educate yourself if you need to. Now we’ll need to set up the default starting point for the caption box.
Imágenes en HTML Vemos cómo colocar una imagen en una página web y algunos atributos básicos para asignarle estilos a las imágenes en HTML. Sin duda uno de los aspectos más vistosos y atractivos de las páginas web es el grafismo. La introducción en nuestro texto de imágenes puede ayudarnos a explicar más fácilmente nuestra información y darle un aire mucho más estético. El uso de imágenes también tiene que ser realizado con cuidado porque aumentan el tiempo de carga de la página, lo que puede ser de un efecto nefasto si nuestro visitante no tiene una buena conexión o si es un poco impaciente. En este capitulo no explicaremos como crear ni tratar las imágenes, únicamente diremos que para ello se utilizan aplicaciones como Paint Shop Pro, Photoshop o Gimp. Las imágenes son almacenadas en forma de archivos, principalmente GIF (para dibujos) o JPG (para fotos). Así pues, en estos primeros capítulos nos limitaremos a explicar como insertar y alinear debidamente en nuestra página una imagen ya creada.
How to Create a Contact Form using HTML5, CSS3 and PHP | Tangled in Design Personally, I feel it is important to be aware of the [positive] impact HTML5 will have on forms and the way they will function in years to come. Realistically, we can’t implement all of the new features today, but you don’t want to be lagging behind the rest of the industry when these features finally become widely supported. Having said that, this tutorial will be focusing on the new HTML5 features that are already supported by all the major browsers, or that at least employ graceful degradation for the browsers that are still trying to play catch up. 1. First of all, this is not a Photoshop tutorial. 2. Now we have a design to work towards, we’re going to form the structure of the contact form using HTML5. Doctype Okay, now we’ve got our blank PHP document, let’s start with the appropriate doctype, which is a lot simpler in HTML5 than previous versions to say the least! <! Yep, that’s right. Just to compare, here’s the doctype for XHTML; <! I get the feeling we have a clear winner here?
15 Excellent Free Fonts for Graphic Designer We selected for you 15 fresh free fonts, that will surely help you to improve your typography work. Amable Typeface – Download Here Coldi – Download Here Pico Super Bold – Download Here PincoyaBlack – Download Here Cow.Cow – Download Here Exus Pilot – Download Here Portal – Download Here File – Download Here Digitica – Download Here Layered – Download Here Nadia Serif – Download Here Sketchetica – Download Here Mamma Gamma – Download Here Ripe – Download Here Pac Font – Download Here How to Create a Simple News Ticker | Nettuts+ In this tutorial we’ll be looking at how we can transform some semantic and accessible underlying HTML into an attractive and functional news ticker that smoothly scrolls its contents. Some news tickers are horizontal and some are vertical; the one that we’re going to create today will be vertical. The context of the example is a news scroller so we’ll be working with plain text, but we should be able to put whatever we wanted into the underlying mark-up; images, or links, or whatever. We’ll be using jQuery as the underlying JS library, and a little HTML and CSS. Let’s make a start. The Underlying HTML In a new page in your text editor add the following code: Save this as simpleTicker.html in a directory containing jQuery 1.3.2. On the page is the content that we’ll progressively enhance into the news ticker; it’s made up of a simple definition-list element, which feels appropriate for our purposes. Providing Default Styling Progressively Enhancing the Ticker Starting and Stopping Fixing IE
Tag HTML dt Bypass main content Nota: Si no sabes lo que es un elemento/tag o cómo debes utilizarlo, te recomiendo que leas el tutorial "Tags y atributos en HTML", que puedes encontrar en la sección de tutoriales HTML. Descripción El elemento HTML dt contiene un término en una lista de definiciones (elemento HTML dl). En las listas de definiciones un sólo término puede tener una descripción, más de una o ninguga. Ejemplos A continuación, una lista de definiciones es representada con diferentes asociaciones entre términos y descripciones. Código Lenguaje de marcado hipertextual basado en SGML y no compatible con XML. Lenguaje de marcado hipertextual extensible basado en XML, un subconjunto de SGML. Lenguaje creado para reducir la orientación presentacional de sus predecesores. XML, un subconjunto de SGML. Vista Lenguaje de marcado hipertextual basado en SGML y no compatible con XML. Lenguaje de marcado hipertextual extensible basado en XML, un subconjunto de SGML. Charles Hola Estás ahí? Susan Hola!! Cómo estás!?
Don’t use ID selectors in CSS | screwlewse.com Posted on: July 28, 2010 / Lately I have been testing out performance among css styles and I found that some of my very smart friends, started asking,”why aren’t you testing using IDs for the unique sections of the page?”. This wasn’t a hard answer: The element is not re-usable on that page.This is the begining of a downward sprial into specificityUsually, IDs refer to something very specific, and abstracting would be toughAny performance gains picked up by using id, is negated by adding any other selector to the left fo that id Lets delve into each of these issues at more length The element is not re-usable on that page: IDs are programmer’s equivalent to singletons. This is the beginning of a downward spiral into specificty: There are two main ways of overriding in css. The cascade: (anything further down the css, can overwrite the previous css rules)Specificity: the idea of creating weight by using weighted selectors. Above is real code from one of my own work from 2005. On the other hand:
remy sharp's b:log