Binpress components

JSignature - JavaScript | User Interface

2013-05-09T08:58:49-07:00

JSignature is a JavaScript library for adding a signature pad field into HTML form.JSignature extends HTML form with a new input "signature" type. Running an HTML form with the JSignature library will add automatically signature pad inside your HTML forms. JSignature is very simple to use, put it in your HTML header part and that's all !. Then use anywhere in your HTML form an input with a type "signature". JSignature is very compact and doesn't need another library. No JQuery need. Control the signature pad size, color, pen style and width. Add various buttons for controlling the signature pad like cleaning, changing color and pen width... Send your signature field result as any HTML fields to your server for processing. JSignature has been tested on IE 10,Chrome 26, FireFox 20, Safari 5, Opera 12, IOS 6, Android 4.

Select-a-licious - JavaScript | jQuery | User Interface

2013-02-22T16:48:35-08:00

Select-a-licious allows site owners and developers easily create searchable, styled dropdowns for their websites.Select boxes are notoriously difficult to style using css alone, select-a-licious aims to solve this problem by allowing site owners and developers to create styled dropdowns for their website. Create Stylish dropdowns Make searchable dropdowns Ability to use effects and checkboxes for multiple selections 11 different event handlers to allow developers to extend without the need to modify core code Customize using CSS Themeable with 4 different themes included Works with existing forms, no need to rewrite form code and falls back to a select box when jQuery or Javascript aren't available. (Demo page is just an example and doesn't contain all the features)

SwinxyZoom - JavaScript | jQuery | User Interface

2013-01-07T05:34:01-08:00

SwinxyZoom is a jQuery 1.7+ Image Zoom plugin with variable zoom levels, smooth animations and excellent browser, touch and mobile device compatibility.SwinxyZoom takes the ImageZoom paradigm to the highest level, not content with a single level zoom and jerky movements we've packaged together everything you need for a myriad of effects whilst taking care performance and compatibility to ensure a consistent look and feel. Designed to work across a large range of designs, screens (mobile, tablets, laptops) and devices from the latest UltraBooks to memory constrained mobile devices SwinxyZoom you can be sure the largest number of people will be able to see your imagery the way it was intended. Features Mousewheel zoom support Single touch drag moves the image just like your cursor Touch drag slider handle for single touch zooming Multi touch support for the pinch zoom gesture Super smooth animations Excellent performance even on low specification devices Compatability Works in all major browsers including IE6 Tested in mobile browsers on multiple mobile devices to ensure performance and smooth touch control. Files Supplied Combined and minified source for quick installation and minimal download. Seperate directory with unminified modular files for modification or custom effects. Almost all styling is customisable via CSS and not hard coded into the JS. Full example HTML as a quick reference. Don't forget to check out our demo!

Noty - jQuery Notifications - JavaScript | jQuery | User Interface

2012-05-26T03:40:00-07:00

jQuery Notification Pluginnoty - jQuery Notification Plugin noty is a jQuery plugin that makes it easy to create alert, success, error, information and confirmation messages as an alternative the standard alert dialog. Each notification is added to a queue. The notifications can be positioned at the top, topCenter (like GMail), bottom, centre, top left, top right, bottom left or top right. There are lots of other options in the API to customise the text, animation, speed, buttons and much more. It also has various callbacks for the buttons, opening closing the notifications and queue control. new: Theme support (default, mitgux, twitter bootstrap) More information at http://needim.github.com/noty/.

Inline TinyMCE - JavaScript | jQuery | TinyMCE | User Interface

2012-04-21T12:13:23-07:00

The powerful TinyMCE wrapper allows you convert every element to TinyMCE editable content. See the changes the moment you typeThe powerful TinyMCE wrapper allows you convert every element to TinyMCE editable content. See the changes the moment you type. Check out the preview to see it in action. Features Cross Browser Support, even IE7 Works with older versions if jQuery (1.4.3+) Very simple to implement in any of your projects Super lightweight, only 3kb Fully customizable. Add your TinyMCE initialize settings, set custom events and triggers Supports TinyMCE 3.4.X (not Beta) and 3.5.X

jQuery Product and News Slider - JavaScript | jQuery | User Interface

2011-10-25T06:24:21-07:00

A Jquery news slider that shows news/products in a fancy and highly customizable way.Present your news/posts or products in a cool way! You can fully customize this component, including: Thumbnails position (top/bottom/left/right) and size based on position. Captions visibility and positioning (top/middle/bottom). Links beaviour. Size (make it fit your column width/height). Auto sizing setup (let the component decide the better size for you). Timing/Intervals. Full CSS editable. Fully tested on: IE8+ FF4+ Chrome 10+ Safari 5+ Usage The HCNS plugin is extremely simple to use. 1 Create a new HTML file. 2 Copy the 'css' and 'js' folders into the same directory where your HTML file is. 3 Create an 'img' folder and news.xml file in the same folder where your HTML file is and place some images in it. Modifiy news.xml as you need. In this example we will assume that the large images are named pic1.jpg, pic2.jpg, pic3.jpg and so on. And that their corresponding thumbnails are named pic1_small.jpg, pic2_small.jpg, pic3_small.jpg, etc. 4 Import the default and HCNS style sheets: <link type="text/css" rel="stylesheet" href="css/style.css"></link> <link type="text/css" rel="stylesheet" href="css/hcns.css"></link> 5 Import the latest version of jQuery and the HCNS plugin files: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script defer src="js/plugins.js"></script> <script defer src="js/script.js"></script> 6 Add the following markup to the body of the HTML file: <div id="hcns_main"> </div> 7 Modify /js/script.js to setup your options: $('#hcns_main').HCNewsSlider({ 'xml': 'news.xml', //your XML file 'showCaptionsInThumbs': 'true', //define if show captions over thumbnails 'captionsVerticalAlign': 'top', //if captions on, define their position (top/middle/bottom). 'openMainLinkInBlank': 'true', //determine if main link opens in new window or not. 'thumbsPosition': 'top', //define thumbnails section position (top/bottom/left/right). 'width': '600px', 'height': '300px', 'autoSizeHeight': 'true', //auto adjusts height based on thumbnails count. 'autoSizeWidth': 'true', //auto adjusts width based on thumbnails count. 'timing': '5000' //define interval between main item changes. }); You can now test the HTML file in a browser to see your slider working.

Mosaic - JavaScript | Titanium Appcelerator | User Interface

2011-08-16T12:00:29-07:00

Appcelerator Titanium Gallery with Rich Customizable ItemsMosaic is a gallery component that will allow you to represent any visual element in an easy, fast way, thus being able to incorporate advanced sorting & display capabilities which will add to your application much better sharpness and quality than those provided by a simple image viewer. Due to the highly customizable nature of this component, in being able to introduce any type of item renderer, you will be able to use it both in the display of multimedia resource apps as well as in professional management applications and professional utilities whose functionality needs a higher interaction with the user, either on iOS devices (iPod Touch, iPhone and iPad) or Android devices. Many of the most successful professional applications that we know about today make use of this kind of components to represent documents, notes, images, videos, voice notes or even 3D elements.

JSPopupBox - JavaScript | User Interface

2011-07-02T11:32:51-07:00

The BEST Lightbox alternative around. Quick & easy to use, moveable (draggable), resizable & closeable windows, pop-ups & frames in pure HTML/JavaScript.Quick Usage Just add the JSPopupBox.js file somewhere accessible by the web pages & include it from the HTML like this: <script type="text/javascript" src="wherever_JSPopupBox.js_is_placed"></script> No initialization, registration or other kind of preparation is needed. You can start using the component right away. What are you waiting for? Go get it now, or keep reading for more advanced usage. More options There are three methods to use JSPopupBox: via static convenience functions, via helper methods and by populating the popup directly. Examples for each one are shown below. Detailed documentation can be found in the docs.html file that comes with JSPopupBox. Static convenience functions This is the simplest way to use JSPopupBox: by using the static functions defined in the JSPopupBox class. Here is an example that shows some simple HTML in a popup: JSPopupBox.showHTMLPopup('A Popup', 'Hello, <i>world</i>'); This will display a popup at the center of the page with the title A Popup and the message Hello, world in its content area. Another example, for showing an external page in the popup: JSPopupBox.showIFrame('Binpress', 'http://binpress.com', 900, 600); This will display a popup at the center of the page with the title Binpress and an iframe inside it showing the page at http://binpress.com. The popup will be 900 pixels wide and 600 pixels tall. Since 1.1, you can also show images directly: JSPopupBox.showImage('Hello', 'hello.png'); This will display a popup at the center of the page with the title Hello and the image hello.png inside it. The popup will be automatically resized to fit the image and if the user clicks on the image, the popup will be closed. Helper methods This requires creating a new JSPopupBox instance, like var popup = new JSPopupBox(); The helper methods do the same job as the static functions above but allow for more customization of the popup before it is shown. The methods are setHTMLContent and setIFrameContent. Both methods register an event handler in the popup to set the content for the popup's content DIV to the supplied HTML code (for setHTMLContent) and add an iframe with the supplied address that covers the entire popup (for setIFrameContent). Since these methods do not show the popup nor change the default caption or size from their default values, you need to call the show or showExclusive, setCaption and setSize methods directly. More information about these methods can be found in the docs.html documentation file in the package. Some examples of the helper methods: var popup = new JSPopupBox(); popup.setCaption('New message'); popup.setPosition(20, 20); popup.setSize(200, 100); popup.setHTMLContent('<div style="padding: 5px">You have a new private message, <a href="pm.php">click here to read your messages</a>.</div>'); popup.show(); This will show a small popup at the top left corner of the page with the supplied HTML code for the new message notification. var popup = new JSPopupBox(); popup.setCaption('Warning'); popup.setSize(500, 400); popup.setIFrameContent('warningmsg.php?id=329323'); popup.showExclusive(true); This will show a large popup at the center of the page with the contents of the page at warningmsg.php?id=329323 and put a dimmed/smoked layer behind the popup so that no further interaction with the page will be possible until the user closes the popup. Populating the popup directly To populate the popup directly, a handler for the JSPopupBox.POPULATE_EVENT event must be registered with the popup, like function populateEventHandler(popup, contentDiv) { var button = document.createElement('BUTTON'); button.innerHTML = 'Close this popup'; button.onclick = function() { popup.closeRequest(); } contentDiv.appendChild(button); } var popup = new JSPopupBox(); popup.addEventHandler(JSPopupBox.POPULATE_EVENT, populateEventHandler); popup.show(); This creates a new JSPopupBox instance and uses addEventHandler to register a handler for the JSPopupBox.POPULATE_EVENT event. The handler, once called, creates a new BUTTON HTML element and adds it in the supplied contentDiv (which is the popup's content div). It also sets the onclick attribute to a function that closes the popup by calling the closeRequest method. Events are described in detail in the Popup events section of the docs.html file that comes with JSPopupBox. The component supports event notifications for close attempts (by the user or via calls to the closeRequest method like above), for closing the popup, for showing it, for moving the popup around, for resizing it, etc. More information This only describes the most common use of JSPopupBox. More details and a full reference of the JSPopupBox API can be found in the docs.html file that comes with the JSPopupBox component. JSPopupBox is a JavaScript component that can be used to create moveable, resizeable framed windows inside HTML pages. This makes JSPopupBox ideal for many situations where the functionality of a popup window or dialog is desired, such as login prompts, message posting, an "advanced search" option in a database, an image browser, etc. JSPopupBox popups simply create a "frame" around a div which you can populate with whatever interface element or content you want to stand out. The JSPopupBox component takes care for the movement, resizing, etc and provides event registration methods for more advanced users.

moCombo.replace - JavaScript | MooTools | User Interface

2011-06-27T19:27:31-07:00

Style a select element by turning it into an unordered listWhat's moCombo.replace? moCombo.replace converts any