Overlay Effect Menu with jQuery In this tutorial we are going to create a simple menu that will stand out once we hover over it by covering everything except the menu with a dark overlay. The menu will stay white and a submenu area will expand. We will create this effect using jQuery. View demoDownload source In this tutorial we are going to create a simple menu that will stand out once we hover over it by covering everything except the menu with a dark overlay. So, let’s start! The Markup The HTML structure will consist of a main wrapper div for the menu which will contain the overlay and the unordered list for the menu. <div class="oe_wrapper"><div id="oe_overlay" class="oe_overlay"></div><ul id="oe_menu" class="oe_menu"><li><a href="">Collections</a><div><ul><li class="oe_heading"> Summer 2011 </li><li><a href="#">Milano</a></li> ... The submenu divs will each have an inline style for the left position. Let’s look at the style. The CSS The style for the links inside of the submenu lists: And that’s all the style!
Testing Your JavaScript with Jasmine We all know we should be testing our code, but we don’t actually do it. I guess it’s fair to say that most of us put it off because, nine times out of ten, it means learning yet another concept. In this tutorial, I’ll introduce you to a great little framework for testing your JavaScript code with ease. By the way, did you know that you can have your JavaScript errors fixed quickly and easily by an expert on Envato Studio? ThemeManiac, for example, will fix JavaScript errors or browser compatibility issues on your website or web application. The fixes can be completed very fast, based on the complexity and available information. Today, we’re going to be learning about the Jasmine BDD testing framework. BDD and TDD … stand for Behaviour-Driven Development and Test-Driven Development. TDD in its simplest form is just this: Write your testsWatch them failMake them passRefactorRepeat That’s pretty easy to understand, eh? Jasmine takes a lot of cues from Rspec. But I’m getting ahead of ourselves.
Magnet letters tentative with JQuery and CSS3 | Jérôme Sénaillat Who doesn’t love magnetic letters on a fridge? I saw something like that a while ago, and tried to replicate the same effects in my own, messy way. It was a good occasion to test the . The demo It’s here: It has been tested with Firefox, Safari and Chrome on Mac OSX . The CSS I used some extra rules for the layout, but the actually involved CSS part is quite short. @font-face { font-family : LeagueGothic ; src : url ( ’.. #whiteboard { background : url ( .. margin-top : 40px ; padding-top : 120px ; height : 365px ; } .magnet { font-family : ‘LeagueGothic’ , arial , serif ; margin : 0 ; margin-left : 10px ; margin-right : 10px ; text-transform : uppercase ; font-size : 80px ; display : block ; text-align : center ; min-height : 100px ; position : relative ; margin : 0 auto ; /* letters colors */ .col0 { –moz– text-shadow : 0 1px 0 #165981 ; –webkit– text-shadow : 0 1px 0 #165981 ; –o– text-shadow : 0 1px 0 #165981 ; .col1 { The Javascript
[brothercake] Docking boxes (dbx) Version 3.0 — 26th March 2009 Docking boxes (dbx) adds animated drag 'n' drop, snap-to-grid, and show/hide-contents functionality to any group of elements. And how could I resist re-creating one of the most iconic interfaces of modern times to show it off! The script can work with rows, columns, or two-dimensional grids of objects, of any size and shape. First released in March 2006, dbx2 was the first implementation of keyboard-accessible drag 'n' drop ever developed, and remains one of the most robust and elegant solutions on the web. Version 3 has been more than two years in development, and includes a whole raft of new features, improvements to existing features, and bugfixes from the previous version (2.05). More demos Here's a clutch of demos to highlight the major features, and suggest some ideas for possible applications. The navigation boxes demo is the one that's included in the default download zipfile. Get the script dbx manual Latest update New features in v3.0: How it works
IxEdit jQuery Masonry Expanding Image Menu with jQuery In today’s tutorial we will create an expanding image menu with jQuery. The idea is to have some columns with black and white image slices that will make a content area slide out when we click on them. We will also slide in the colored version of the image, creating a neat […] View demoDownload source In today’s tutorial we will create an expanding image menu with jQuery. The photography is by talented Robert Bejil, check out his awesome photos on his Flickr photostream. So, let’s get started! The Markup The HTML structure consists of a main container and an unordered list where each item is one of the columns. Let’s take a look at the style. The CSS We are going to stretch the container for the list over the page and hide the overflow. We will give enough width to the ul so that the li elements which will be floating, don’t wrap to the next “line” when they expand: The overflow of the li elements is going to be hidden as well because our content inside is actually much bigger. The JavaScript
Effet de transition de couleur sur les liens avec jQuery L'idée est similaire à celle que j'ai déjà utilisée pour d'autres scripts. J'ai écrit une fonction qui sélectionne les liens (balises <a>), place leur contenu dans un <span> avec le nom de classe ".one" et ajoute un élément <span> avec le nom de classe ".two". <span> ".two" contient le même texte que <a> et est placé juste au-dessus à droite du texte du lien. Au départ, le deuxième <span> est caché. Lorsque le lien est survolé, le <span> ".two" transite en utilisant l'effet fadeTo de jQuery, pendant que <span> ".one" disparaît. Cela crée un effet de fondu en douceur vers une autre couleur. Bien sûr, IE est à l'origine de problèmes et nous avons eu à appliquer une solution de contournement. II-1. Téléchargez le fichier zip contenant mon script et la bibliothèque jQuery et placez-les sur votre site. II-2. Ajoutez ces lignes à votre fichier CSS. II-3. Assurez-vous que les sélecteurs CSS sont correctement écrits de sorte que vous pouvez appliquer ce script sur des éléments précis.
Create a Slick and Accessible Slideshow Using jQuery By Jacob Gube In this in-depth web development tutorial, you’ll learn how to create a usable and web accessible slideshow widget for your site using HTML, CSS, and JavaScript (jQuery). In the process, you’ll see the concept of Progressive Enhancement in action. Final Result Clicking on the image below will take out to a live demonstration of the slideshow widget in action. Download source files You can download the source files for this tutorial to study. slick_accessible_slideshow.zip (ZIP, 2.8 MB) Setting the foundations The most important part of any good web component is a solid HTML structure. Our content’s structure involves a div called #slideshow that serves as the container for our slideshow. Block 1: HTML markup In example 1 below, you’ll see how text-based browsers, and browsers incapable of rendering CSS and JavaScript, will see our slideshow. There is also no markup for the left and right arrow controls, which we will insert into the DOM later on using JavaScript. The theory
CoffeeScript Better Check Boxes with jQuery and CSS Martin Angelov In this short tutorial, we will be creating a replacement for the default browser checkboxes in the form of a simple jQuery plugin. It will progressively enhance your forms but at the same time fall back to the default controls if JavaScript is unavailable. The first step is to lay down the structure of the underlying HTML document. We will need a form with checkboxes which we will later be replacing with their enhanced jQuery versions. index.html <! The main container element – the #page div, holds our form. Notice the HTML5 data attributes, specified on some of the labels. And here is the markup of our replacement checkboxes: <span class="tzCheckBox checked"><span class="tzCBContent">ON</span><span class="tzCBPart"></span></span> When our plugin is called, it will loop through the checkboxes, and insert the HTML code you can see above after each one, while at the same time hiding the original. Checkbox Replacements Explained Now lets move on to the styling. jQuery Conclusion
10 jQuery Plugins for Easier Google Map Installation At first glance the Google Map API may seem scary, I mean, were do you possibly start? You probably only want to display a simple map that displays directions to your clients address, you don’t really want an all singing and dancing interactive map with more options than necessary. There has to be a simpler way. The plugins below offer not only an easier method to install a map, they also offer the option to add extra functionality, should you choose to need them. I have also listed a couple of beginner jQuery and Google Map tutorials at the the bottom of the post. Before you install any of these plugins you may want to firstly download the latest version of jQuery, and secondly you had better grab your Google Map API Key here: Sign Up for the Google Maps API. gMap – Google Maps Plugin gMap is a very flexible, highly customizable and lightweight (only 2KB) jQuery plugin that helps you embed Google Maps into your website. gMap Demos »Download gMap »gMap Documentation » jQuery GPS jQmaps
Moving Boxes Content with jQuery Today we will create a website template with some really sweet animations using jQuery. The idea is to have little boxes scattered around at the top of the site and when a menu item is clicked, the boxes animate to form the main content area. We will use some different animation effects […] View demoDownload source Today we will create a website template with some really sweet animations using jQuery. The idea is to have little boxes scattered around at the top of the site and when a menu item is clicked, the boxes animate to form the main content area. We will use some different animation effects that we will add as options to the menu item. The content area will custom scroll for which we will be using the really awesome jScrollPane Plugin by Kevin Luck. The beautiful photos are by Jin. So, let’s start! The Markup First, we want to place the background image with the grid overlay: The next div element will be used to add the little boxes with their random position and rotation degree