jquery.horizonScroll.js – Horizontal Scrolling Websites

Download   Demo
This is a jQuery plugin which allows for websites to page (scroll by set width) left and right horizontally. Horizontal scroll sites offer a new and unique way to develope sites!

Uglipop.js – Ultra Lightweight Javascript Modal/Lightbox

Download Demo

(Pure Javascript)

An ultra lightweight,unstyled 2kb Minimal Javascript. Is Lightweight Non-fancy Modal Written is JS , Uglipop is highly customizable

Let’s see it in action.

Check Out Demo

In Raw form Uglipop does not contain modal like this it is actually unstyled , in order to full fill its aim of being fully customizable , minimal and lightweight. That’s the reason behind calling it Ugly Things That can be used with Uglipop

• You Can Use Div.
• You Can use Plain HTML
• You Can use AJAX Response
• You Can use Iframe
• You Can use Images

You Can always use Uglipop with minimal code like this

uglipop({class:'put', //styling class for Modal
        source:'html',
        content:'<div> All HTML goes here </div>'});}

How does it look when it’s Ugly & raw?

Well UgliPop at its worst looks really bad but the good part is that you can style it way the way you want it

uglipop({class:'put2', //styling class for Modal
        source:'html',
        content:'<h1>This is some Raw Content</h1>'});}

.put2{
      background-color:#fff;
    }

How do I style my Uglipop Modal ?

Well Styling an Uglipop Modal is pretty simple and easy while calling uglipop(); watchout for argumentclass:”Your Styling Class Name Goes Here” so your code becomes something like this.

uglipop({class:'my-styling-class', //styling class for Modal
        source:'html',
        content:'<h1>This is some Raw Content</h1>'});}

.my-styling-class{
      background-color:#fff;
      color:black;
      /*all CSS goes here*/
    }

How Do I use Other Div inside Uglipop Modal ?

Using Other Div inside Uglipop Modal is Pretty Simple , minimum possible code can go like this

uglipop({class:'my-styling-class', //styling class for Modal
        source:'div', //'div' instead of 'html'
        content:'your div id goes here'});}

<div id='some-div-id' style='display:none;'>
        other html goes here .....
        </div>

Can We Use Images inside Uglipop Modal?

Sure you can always use the images inside the uglipop by using it in HTML mode

uglipop({source:'html',
        content:'<img src="url-goes-here"></img>'});}

How Do I Create Custome Themes for Uglipop?

uglipop({class:'put', //styling class for Modal
        source:'html',
        content:'<div> All HTML goes here </div>'});}

.put{
      border-radius: 10px;
      background-color:white;
      width:300px;
      height:300px;
      padding:10px;
     -webkit-box-shadow: 0px 0px 39px 12px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 39px 12px rgba(0,0,0,0.75);
box-shadow: 0px 0px 39px 12px rgba(0,0,0,0.75);
    }

Youmax – Complete Youtube Channel on your Website

Download Demo

Youmax is a jQuery plugin used to display any YouTube channel on your website.

Basically the plugin displays the below items:

• Channel header
• Uploads of the channel in a tab
• Any playlist that you specify will be displayed as a tab
• A page that displays all PlayLists of a Channel

Download Demo

iFrame Resizer

This library enables the automatic resizing of the height and width of both same and cross domain iFrames to fit the contained content. It provides a range of features to address the most common issues with using iFrames, these include:

• Height and width resizing of the iFrame to content size.
• Works with multiple and nested iFrames.
• Automatic domain authentication for cross domain iFrames.
• Provides a range of page size calculation methods to support complex CSS layouts.
• Detects changes to the DOM that can cause the page to resize usingMutationObserver.
• Detects events that can cause the page to resize (Window Resize, CSS Animation and Transition, Device Orientation and Mouse events).
• Simplified messaging from iFrame to host page via postMessage.
• Fixes in page links in iFrame and supports links from the iFrame to the parent page.
• Provides custom sizing and scrolling methods.
• Works with ViewerJS to support PDF and ODF documents.
• Fallback support down to IE8.

rmodal.js – Simple Modal Dialog

Download Demo

rmodal.js is a simple and lightweight modal dialog with no external dependencies.

Features:

• Plain JavaScript only – no dependencies
• IE9+ supported
• Less than 1KB when gzipped and minified
• Fully unit tested

Select3 – Modular and Lightweight Selection Library for jQuery

Download Demo

Select3

Modular and light-weight selection library for jQuery and Zepto.js.

Motivation

I’ve used Select2 for a long time because I reckon it is the best and most feature-rich selection library out there.

However, time and again I’ve ran into its limitations. It is difficult to customize the styling, and introducing subtle tweaks to its behavior typically meant maintaining a private fork. More specifically, I wanted to make the following changes:

• Use custom templates, instead of the ones that are hard-coded in Select2. This would also open up the possibility of not loading the image sprite included with Select2, but instead useFontAwesome icons that I already use in my projects.
• Use custom loading indicators, instead of the spinner GIF included by Select2.
• I wanted to make it easier to support a use case where Select2 is used without any selection dropdown, but with the proper tokenization.
• Make Select2 work with jQuery builds without Sizzle for better performance. Patches for this have been accepted in Select2, but unfortunately it’s a moving target causing repeated breakage. Also, once Sizzle is no longer required, it becomes much easier to support Zepto.js.
• Personally, I preferred a more modern codebase to work with, rather than the huge monolithic library that is Select2. This also includes proper documentation of the code as well as good test coverage. At this point also support for any IE version older than 10 can be dropped.

Having said that, if you’re a user of Select2 and don’t recognize yourself in any of these issues, I advise you to keep using Select2. It’s feature-rich and actively supported, so don’t fix what ain’t broken 

Setup

Select3 only relies on jQuery or Zepto.js being loaded on the page to work.

In addition, the default templates assume that you have included FontAwesome in your page to display the icons.

Manual

Copy select3-full.js and select3-full.css from the dist/ directory into your project. Then put the following in your HTML head:

<head>
    ...
    <link href="font-awesome.css" rel="stylesheet">
    <link href="select3-full.css" rel="stylesheet">
    ...
    <script src="jquery.js"></script>
    <script src="select3-full.js"></script>
    ...
</head>

Verify the paths are correct for your particular project. The important thing is that jQuery (or Zepto.js) should be loaded before including Select3.

Using Bower

Make sure Bower is installed, then run:

$ bower install select3

Using Component

Include as a component(1) dependency.

In your component.json:

{
    "dependencies": {
        ...
        "arendjr/select3": "^1.0.0"
        ...
    }
}

And in your code:

var $ = require('jquery');
require('select3');

Browser Support

• Chrome
• Firefox
• Internet Explorer 10+
• Safari 6+

Note that while Internet Explorer versions older than 10 are not supported, you might be able to get them to work, possibly with the use of some polyfills. Reports of success or patches to create a “legacy” build would be welcomed

Contact Form – Simple and Easy to Customize

Download Demo

Contact Form is a simple and easy to customize contact form. A minimal and customizable snippet to throw a semantic form into your web projects on the fly.

Sapo.js – Interactive Procedural Texture Generator

Download Demo

Init

Make sure you have Bower and Gulp installed:

$ npm install -g bower
$ npm install -g gulp

Install dependencies:

$ npm install
$ bower install

Develop

Build static files and run dev server:

$ gulp

Copy build to GH-Pages folder. The setup should be master branch in /projects/sapo.jsand gh-pages branch in /projects/sapo.js-pages. This command will copy masterbranch’s build folder togh-pages branch folder:

$ gulp deploy

ggtooltip.js – A jQuery Tooltip Plugin

Download Demo

ggtooltip.js is a simple jQuery tooltip plugin extended from Twitter Bootstrap’s tooltip plugin that support 4 positions, background color, font color and border color without using images.

FEATURES

• 4 Positions: top, right, bottom and left.
• Unlimited background colors.
• Unlimited font colors.
• Different border color combinations based on background colors.
• Supports different types of tooltip triggers such as click, hover, focus and manual.
• Powered by HTML5, CSS3 and jQuery.

jQuery.imgx – jQuery Plugin for Serving Hi-Res Images on Desktop/Mobile

Download Demo

jQuery.imgx

Lightweight jQuery extension for serving high-resolution images on desktop and mobile devices. Compatible with @2x, @3x, and @4x image varients, using Apple’s recommendednaming conventionfor high-resolution graphics.

Installation

Include the latest version of jQuery and jQuery.imgx.js in the <head> of your HTML document:

<script src="jQuery.min.js"></script>  
<script src="jQuery.imgx.js"></script>

How to Use

Reference the imgx() method and include @2x, @3x, or @4x image varients in the same directory as the original source. The script will automatically load the appropriate image(s) based on the display’s detected pixel density. See the live demo: code.bynathan.com/imgx

jQuery

$(function() {  

    // All Images
    $('img').imgx();

    // Class Only
    $('.retina').imgx(); 

});

CSS

img {
    display: block;
    height: auto;
    max-width: 100%;
}

Slideout.js – A touch slideout navigation menu

Download Demo

Slideout.js is a touch slideout navigation menu for your mobile web apps.

Features:

• Dependecy-free.
• Simple markup.
• Native scrolling.
• Easy customization.
• CSS transforms & transitions.
• Just 4 Kb!

Drag and Drop Newsletter Builder using jQuery

Download Demo

A tutorial about how to create a drag and drop interface for a newsletter builder using jQuery.

jquery.modal – A simple jquery Modal boxes

Download Demo

jquery.modal is a simple jquery Modal boxes, alert, prompt, confirm, themes, buttons, animations, responsive and many other options included.

• type is type of Modal Box, can be : alert | confirm | prompt | success | warning | error | info | primary | inverted.
• title is title of modal, if is null – title div will disappear
• text is modal inner HTML content
• buttons is an array with buttons. Each button is in an object array and contais: text, val, addClass: Class for button(btn-large | btn-small | btn-green | btn-light-green | btn-purple | btn-orange | btn-pink | btn-turquoise | btn-blue | btn-light-blue | btn-light-red | btn-red | btn-yellow | btn-white | btn-black | btn-rounded | btn-circle | btn-square | btn-disabled), onClick(return){} callback(‘return’ contains is an object with keys: bObj – button clicked, bOpts – info abou clicked button from options, val – button value; methods: getContet, getTitle, getModal, setClosable, setContent, setTitle; if function returns false – modal will not disappear)
• center Center align?, can be true or false
• autoclose Autoclose Modal?, can be true or false,
• callback Callback function after modal close, it has a parameter with value and if function returns false, modal will not disappear
• onShow After modal appearing, it has a parameter with modal object
• closeClick On click near the modal box, close it
• closable Enable Modal closing
• animate Enable slide Animation
• theme Custom class for your modal (xenon | atlant | reseted)
• background Background Color of modal overlay
• zIndex Modal z-index
• buttonText Custom text for alert, confirm and prompt modals
• template Custom modal template
• _classes An object with each class name from modal box

Bootstrap Offcanvas Menu

Download Demo

Super simple, easy to use off-canvas navigation menu for Bootstrap.

It uses Bootstrap classes and markup to create an off-canvas menu that not only looks good. But works perfectly

animatedModal.js

Download Demo

animatedModal.js is a jQuery plugin to create a fullscreen modal with CSS3 transitions. you can use the transitions byanimate.css or create yourself their transitions.