Side Content Example Side Content Summary The jQuery Side Content project is a plugin that docks content to the side of the browser window with "pull out" handles to open and close the panels. You can add multiple side-content tabs to the side of your page and the plugin will automatically toggle them when the visitor clicks on the "pull out". Side Content This is the side content that you want to de-clutter from your page. You can apply whatever CSS rules you like to this element, only the position and behaviour will be changed by the plugin. There are plenty of configurable settings if you want to change the default behaviour! More Content This is a different panel Another One Options classmodifier Used to apply class names to the elements created by the plugin. attachto You can opt to dock the side content panels on the "leftside" or "rightside" of the browser. width The width of the panel when it is activated, for example "300px" or "33%". opacity pulloutpadding textdirection clickawayclose
Create an apple style menu and improve it via jQuery | Kriesi.at - new media design Since I wrote my last tutorial on how to create a CSS only multilevel dropdown menu I got a lot of visitors who wanted to know how I created the main navigation of kriesi.at. (a so called kwicks menu) The interest in extraordinary menus seems to be high nowadays, so today I will teach you how this is done. Since the Apple-flavored Leopard-text-indent style is currently one of my favorite menu styles, we will start from scratch and build such a menu in Photoshop, then create the needed HTML and CSS and last but not least improve it via jQuery. This is what we are going to build (don’t forget to hover over the menu) Since the Tutorial is rather long and comprehensive here is a short overview of the upcoming tasks: Part 1: Conceptional work First of all you should do some conceptional work since you need to know the height of your menu itemsyou need to know the width of your menu items, both in normal and hover state.you need to know how many items you want Part 2: Photoshop Part 3: HTML and CSS
tabSlideOut jQuery plugin example page See that little tab over there that says 'Contact'? If you click that it will slide out. This plugin allows you to easily add one of those to your page. The most important part of getting this plugin to work is to have your image path and image dimensions set correctly in the options. In this version, using the code below, I am linking directly to google code for the jquery library as well as the plugin which I am hosting at code.google.com. In your <head> tag you need the javascript (with the options customized for your image): Below that add your css: Anywhere in your page, (I put mine right above my </body>) put in the html for your hidden content. <div class="slide-out-div"><a class="handle" href=" me</h3><p>Thanks for checking out my jQuery plugin, I hope you find this useful.
25 Useful WYSIWYG Editors Reviewed (2008) - Smashing Magazine When it comes to coding editors, it’s damn hard to a get a clear overview of all the benefits and functionalities different editors have to offer. However, in the end everybody needs one, so it’s important to know which editor is best tailored to your personal needs. WYSIWYG-editors are often criticized by real coding ninjas for bloated, dirty and not standards-complaint source code they’ve been producing over the last years. However, WYSIWYG-editors have become much better recently. Sometimes you need to provide your clients with some simple tools to edit or update their web-sites. We believe that it would be wrong to recommend you some “best” editors, because the choice always depends on your requirements, primary goals, skills and experience. Hopefully, you’ll find some editors you’ve never heard about before. What does WYSIWYG mean? The somehow cryptic abbreviation WYSIWYG stands for “What You See Is What You Get”. Adobe Dreamweaver Link Some of Dreamweaver’s endless features:
UI.Layout Plug-in - Downloads UI Layout Download Sample Pages These simple demos are self-contained - right-click to download: SEE MORE demos & samples on our demos page. Layout 1.3.x Custom Callbacks I have compiled some commonly requested custom layout-callback functions into plugin-style add-ons for Layout. $.layout.callbacks.pseudoClose NOTE: Also see the slideOffscreen plug-in below. The pseudoClose callback prevents the normal 'close' functionality of a pane and replaces it with a 'resize' command that makes the pane just 1px in size. The new pseudoClose 1.1 feature requires Layout RC30.4 or higher. $.layout.callbacks.slideOffscreen – Animation (replaces pseudoClose) I created a custom open/close animation that works just like the default 'slide' animation, except that instead of 'hiding' the pane after closing, it is just moved off-screen. This is actually not a "callback" - it is a "Layout plug-in". $.layout.callbacks.resizeTabLayout $.layout.callbacks.resizePaneAccordions $.layout.callbacks.resizeDataTable Change-Log
The SeaMonkey® Project Using jsTree to get a Treeview with checkboxes in ASP.NET MVC « Matt's work blog UPDATE 17 December 2011! After one year this is still the most popular post on my blog. However, this uses jsTree v0.9.9a2 and jsTree is now in version v1.0 which has changed completely. This post does not work with jsTree v1.0!!! I have written a post using the latest version of jsTree here jsTree is a jQuery plugin for creating a treeviews, and jsTree’s checkbox plugin allows you to create a treeview with tri-state checkboxes, like so: Notice how “Origination” appears half-checked because only some of its children are checked. Getting started For this demo I am using ASP.NET MVC 2 and jsTree v0.9.9a2. In the View, create a div which you want to become a treeview. Views/Home/Index.aspx Next, create index.js, add a reference to it in Index.aspx, and add the following code: Scripts/index.js This should create a basic treeview with checkboxes, with static data. Populating the tree with an AJAX request Models/JsTreeModel.cs In Controllers/HomeController.cs add the following function: and the View
BubbleUp jQuery Plugin to Spice Up Your Menu | AEXT.NET Hey friend, in the previous jQuery Learning tutorial, I wrote an article that helps you to create your own jQuery plugin with the fun zooming effect. This plugin has received a lot of attention for a while and there are some suggestion from you guys to help this plugin to be better. I collected some interesting recommendations and bug fixes from my readers to write it again and release it. What’s this plugin? BubbleUp is a jQuery plugin released from a jQuery tutorial Learning jQuery: Your First jQuery Plugin, “BubbleUP†which helps you to create your first jQuery plugin. Features: Your menu will be scaled in any size via the option.You decide to enable the tooltip or not.The tooltip would be customizable by font, size and color.The speed of the transition (in/out) can be controlled. Demonstration This is how this plugin is in action. Requirements Images for menu items.The jQuery libraryDownload this pluginNo more requirement Options Download Usage Another example with option enable: