JUSH - JavaScript Syntax Highlighter Simpletip - A simple jQuery tooltip plugin Simple tooltips Here's some examples of simple tooltips using some of the default options provided by the simpletip library. Hover over me to see a bog standard tooltip using all default options. $(). simpletip Hover over me to see a fixed position tooltip. $(). Click to see a persistent tooltip that only closes when clicked! Here's a tooltip with some custom content. Positioning When using static tooltips (e.g. fixed: true; configuration) there are several options available to position the tooltip. Hover over me to see a tooltip positioned to the left of the parent element. $(). Hover over me to see a tooltip positioned to the right of the parent element. $(). Hover over me to see a tooltip positioned to the top of the parent element. $(). Hover over me to see a tooltip positioned to the bottom of the parent element. $(). This tooltip is absolutely positioned at coordinates [100, 730]. $(). This tooltip is relatively positioned to its parent element at coordinates ["0", "-100"]. $(). Effects css eq
Ajax Bestiary » AJAX Development, News, Techniques & More Flexigrid nanoScroller.js nanoScroller.js is a jQuery plugin that offers a simplistic way of implementing Mac OS X Lion-styled scrollbars for your website. It uses minimal HTML markup being .nano > .nano-content. The other scrollbar div elements .pane > .nano-slider are added during run time to prevent clutter in templating. The latest version utilizes native scrolling and works with the iPad, iPhone, and some Android Tablets. Downloads To start using, you need three basic things: 1. The following type of markup structure is needed to make the plugin work: <div id="about" class="nano"><div class="nano-content"> ... content here ... Copy the HTML markup. Link to the nanoscroller.css file inside your page's <head> section (...or copy the contents from it to your page's main stylesheet file). You should specify a width and a height to your container, and apply some custom styling for your scrollbar. 3. Running this script will apply the nanoScroller plugin to all DOM elements with a .nano className. Advanced methods
Smashing Labs - gMap, Google Maps jQuery plugin What is gMap? gMap is a jQuery plugin embedding Google Maps into your website. It allows you to: set center, zoom level and type of map add multiple markers with custom icons, popups and titles position marker by latitude/longitude as well as by its address set your customized map controls retrieve map object and use it for even most complex tasks Purpose of gMap is to help you keep your code clean and to create Google Map in very easy way, without learning its API. In future versions gMap will be improved with functions that are hard to achieve with Google Maps. Latest stable release: 3.3.0 Donate gMap is free and will stay that way as long as I'm in charge. Social Like Smashinglabs on Facebook to get gMap updates and other JS news. Example This tiny line of code is being used to embed the map below. What has happened to V2 version? It's still available here.
Simple Tooltip with jQuery It's always a joy to understand how things work. Well, at least I do. Alright, this time, I want to share with you all, how to create a simple jQuery tooltip. In this website, I'm using a script I grabed it online, and it uses onmouseover and onmouseout. By the way, if you are having problems looking for a good iPage Web Host, you can use this website to guide you: Web Hosting Review Getting the mouse X and Y axis First of all, I did a search with google, and I found this little script from this blog, very useful information. Detect the Anchor element I wrote a simple selector to select only Anchor tag with REL set to tooltip, I'm using the same approach in the Navigation List menu + jQuery Animate Effect tutorial. $('a[rel=tooltip]').mouseover(function() { ...... }); As a result, anchor tags that support this simple jQuery tooltip should look like this <a rel="tooltip" title="Testing of tooltip">sentences</a> Trick to hide the TITLE Attribute's Tooltip in browser Finally, the CSS.
Get down! How to keep footers at the bottom of the page by Matthew James Taylor on 10 November 2007 When an HTML page contains a small amount of content, the footer can sometimes sit halfway up the page leaving a blank space underneath. This can look bad, particularly on a large screen. Web designers are often asked to push footers down to the bottom of the viewport, but it's not immediately obvious how this can be done. When I first ditched tables for pure CSS layouts I tried to make the footer stay at the bottom but I just couldn't do it. Now, after a few years of practice I have finally figured out a neat way to do it. See it in action: View my demo with the footer at the bottom The main features Works in all modern, standards compliant browsersCompatible browsers: Firefox (Mac & PC), Safari (Mac & PC), Internet Explorer 7, 6 & 5.5, Opera and Netscape 8Fails gracefully on older browsersOlder non-standards compliant browsers position the footer under the content as per normal. There is only one limitation So how does it work? The CSS
SlidesJS codeforest As they promised, jQuery Team released a new version of jQuery today. It has come a long way from its initial version and has become one of the most used JavaScript frameworks in the world. I will try to tell you the exciting news in the new version. As the new version is released, the jQuery Team updated their jQuery 1.5 API Documentation which is very useful and handy. The biggest news is jQuery.sub() which allows a developer to override native jQuery methods without actually affecting the methods that other users would interact with – or even create encapsulated APIs for your plugins that avoid namespace collision. New jQuery AJAX The jQuery Team rewrote the whole jQuery AJAX module. Perhaps the largest change is that a call to jQuery.ajax (or jQuery.get, jQuery.post, etc.) now returns a jXHR object that provides consistency to the XMLHttpRequest object across platforms (and allows you to perform previously-impossible tasks like aborting JSONP requests). Prefilters Converters Transports
Simple Static Tooltip Widget using jQuery.UI I've seen different type of tooltips around. And actually jQuery tooltip plugin was one of the best I ever seen. And then I thought to build some tooltip similar to those tooltips available on asp.net learning items . Just simple one to be displayed on left or right of the tooltiped item (element). And I decide to build that using jQuery.ui widgets . Very simple and straight forward, all I needed is the following: A tooltip fully UI customizable to be displayed to the right or left of the desired element. I built a sample which you can download to demonstrate how this tooltip should work and you can view the demo here. Before go through the code, I recommend first to read the following posts: So, I'll start with init function, where I register for hover/out events or focus/blur events. As you noticed, there are 2 handler functions hoverHanlder and outHandler . It worth to mention that those function are of the widget context. This tooltip has 7 options. Yes that is it!
ASP.NET en Español Transit - CSS What about older browsers? Transit degrades older browsers by simply not doing the transformations (rotate, scale, etc) while still doing standard CSS (opacity, marginLeft, etc) without any animation. Delays and durations will be ignored. // Delegate .transition() calls to .animate()// if the browser can't do CSS transitions.if (! Fallback to frame-based animation If you would like to fallback to classic animation when transitions aren't supported, just manually redefine .transitition to .animate. (Note: if you're using custom easing, you may need to also use jQuery Easing, and restrict your use of easing options to the ones defined there.) $.fx.speeds. Default duration Transit honors jQuery's default speed, $.fx.speeds. Custom easing Define custom easing aliases in $.cssEase. Webkit: prevent flickers Having flickering problems in Webkit? Antialias problems in Webkit? Force hardware-acceleration in Webkits to prevent text flickering.
Faire un effet loupe sur des images avec un plugin Jquery : ImageLens Welcome to my portfolio. My name is William AGAY, I'm studying systems administration and network. I am passionate about development, self-taught for over 4 years. In my spare time, i'm active in podcast like PodMyDev, my program speaking of developement (in french), i'm the co-founder of We Love Podcast and co-host of Geekast.