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