Animate a Curtain Opening with jQuery
This is just the demo page! Head back to the tutorial for the full explanation.
Web Design, Development, and Business - Build Internet!
Making an Expanding Code Box
On blogs that like to share snippets of code like this one, it is common to use the <pre> tag to wrap the code so that the spacing/indenting is maintained and long lines do not wrap. While this is desirable behavior, it can be undesirable to have those un-wrapped lines break out of their containers awkwardly and overlap other content. On Digging Into WordPress, we use JavaScript (jQuery) to solve this problem. One solution could potentially be to use only CSS and expand the width with something like pre:hover , but JavaScript is more elegant: Expands only when needed Expands only to as wide as needed Expands with animation The CSS The <pre> tag is naturally block-level, so this is what we’ll use to style our code blocks and hide the overflow. The jQuery The real trick here is that the code blocks are wrapped not only in <pre> tags but also in <code> tags. When a pre block is hovered… Measure the internal code blocks width If that width is wider than the pre block… Couple of things of note here.
(composite) webdev.stephband.info
Download git clone github.com/stephband/jparallax Instantiation jQuery( '.parallax-layer' ).parallax( options ); What does jquery.parallax do? jParallax turns nodes into absolutely positioned layers that move in response to the mouse. With a bit of CSS you can either set up windows to see these layers through, or leave them free to roam about. The diagram on the right illustrates what jParallax does to the html: and here's a demonstration with some images: More demos demos/index.html demos/stalkbuttons.html - multiple parallax. demos/remotecontrol.html - parallax by remote control. demos/thumbnails.html - beautiful interactive thumbnails. demos/target.html - demonstrates how smoothly jParallax handles window resizing. Using jParallax The default behaviour of jParallax is to show the whole width of a layer in response to the mouse travelling the whole width of the mouseport. There are various ways to style jParallax effectively. Options Layer Options Events
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. 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. The code is minimal and highly accessible; browsers, mobile devices and screen-readers should all have no difficulty interpreting and rendering it. Providing Default Styling Fixing IE Summary
Animate your message boxes with jQuery
A few months ago I posted an article on creating message boxes. No question, you should really take care about it. But this time I want to make fun with it and add some animations using (you guess) jQuery. The idea is more than simple. Let’s animate message box that is being shown, and blow it away after we read it. So this would be the HTML markup: <div id="info"> This is an animated info message. And nothing more. Cool. Blink effect Ok, this one is pretty simple. View the demo Nuge effect Do you use MSN Messanger? View the demo Those were my two samples.
Make image buttons a part of input fields
If you ever saw how products like Microsoft CRM look like you probably noticed there are input fields that have “embedded” image buttons inside them. If your clients saw that, there is a probability that they will want to have it in their applications. Whether you agree or not, here is how you can do it easily. So easily that you will have to add just a few lines of code and enable this feature in entire application. Download source code View live demo If you want to add some functionality to some input field (like adding a calendar icon that will popup some calendar), you would probably do it like on the image below. The code could look like this: <fieldset id="sampleForm"> <label for="txtName">Full name</label> <input id="txtName" type="text" /> <label for ="txtDOB">Date of birth</label> <input id="txtDOB" type="text" class="inputWithImge" /> <img src="calendar.png" alt="Click to popup the clendar!" And we could have CSS classes like these: So what could you do? Pretty simple, eh?
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). 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 View DemoSource Coda Popup Bubbles View DemoSource jQuery Input Floating Hint Box View DemoSource vTip View DemoSource View DemoSource
clearfix ultimate
Muchas han sido las veces que he nombrado y recontra-aplicado el método de aquí en . Lo suelo nombrar a menudo en clases, ya que es el método más fácil de entender y sobrellevar el colapso de cajas contenedoras de ventanas flotantes. Fácil porque basta con aplicar una y nuestra caja vuelve a comportarse como debería. Ya lo mencioné de rebote en un artículo . Se trata de utilizar la propiedad en la caja que está colapsando. Y la caja volverá a comportarse como debiera: envolviendo a los elementos flotantes dentro de ella. El ejemplo más clásico a continuación. <p>Floto hacia la izquierda</p> <p>Floto hacia la derecha</p> Y el : #contenedor { overflow: auto; height: 1%; .flotando_izquierda { float: left; .flotando_derecha { float: right; Ver ejemplo Para que reconociera este método, hubo que aplicar a la caja contenedora (en este caso ) , haciendo que todos los modernos desplieguen de igual manera este método. Ver ejemplo con absolute Links: Simple Clearing of Floats Clearing floats
