Advertise here

jQuery Plugins Tagged ‘media query’

pushme.js – Push Elements Into Specific Containers

November 23, 2014     1315     Responsive
pushme.js – Push Elements Into Specific Containers

pushme.js is small but useful jQuery Plugin makes possible to push elements into specific containers depended on certain media queries.

Read More »

Responsive Full Width Tabs

March 22, 2014     9042     Responsive Tabs
Responsive Full Width Tabs

A full width tab component with some example media queries for adjusting the icons of the tabs and the content layout.

The main idea is to show only icons for the mobile view and allow the text to appear when there’s enough space. The content columns and the containing media boxes have three different layouts.

Read More »

Respify – Responsive Image Library

January 25, 2014     1820     Responsive
Respify – Responsive Image Library

Respify is a simple responsive images library, which parses a image from a set of child span nodes with data-media and data-src attributes. It uses media queries to select images.

Read More »

Responsive Lazy Loader Plugin

January 18, 2014     2673     Responsive
Responsive Lazy Loader Plugin

Responsive lazy loader allows you lo load the most appropriate image renditions according to the current breakpoint and to the current display into the CSS grid-system.

Read More »

Picturefill – Responsive Images Approach

January 14, 2014     1480     Responsive
Picturefill – Responsive Images Approach

picturefill is a responsive images approach that you can use today that mimics the proposed picture element using spans, for safety sake.  Picturefill works best in browsers that support CSS3 media queries

Read More »

RIMG – Responsive Image Solution with JavaScript

October 23, 2013     959     Responsive
RIMG – Responsive Image Solution with JavaScript

RIMG is a responsive image solution for browsers that support mediaqueries. It supports responsive websites to provide a way to optimize images in a simple and performant way. Pure javascript and no server-side code.

Read More »

On Scroll Effect Layout

July 22, 2013     10099     Scroll Effects
On Scroll Effect Layout

An on scroll effect template that animates the sides of sections once they are in the viewport. It works with adding a class for animating the two sides of a section.

There is an example effect defined and also some media queries for dealing with smaller screens.

Read More »

View Mode Switch with Grid and List Layout

July 03, 2013     17829     Responsive Grid & Layout
View Mode Switch with Grid and List Layout

A simple view mode switch that has two example layouts, a grid and a list. The layout is defined by a view class that gets applied to the main wrapper. Some example media queries show how to make things responsive.

Read More »

On-Scroll Animated Header

June 06, 2013     17252     Scroll Responsive
On-Scroll Animated Header

fixed header that will animate its size on scroll. The inner elements will also adjust their size with a transition.

An animated header that will change its size on scroll. Once a certain amount of the page gets scrolled, the header will decrease its size and the inner elements will adjust their font-size/line height. There are example media queries for dealing with different screen sizes.

Read More »

Tooltip Menu

May 23, 2013     10459     Menu Tooltip
Tooltip Menu

This is a simple tooltip menu that will show a tooltip submenu when hovering over an item. The submenu will either appear above or below the main menu, depending on where more space is available.

Using Modernizr’s touch detection, the menu will either react on hover or on click. Example media queries show how to adjust the style for smaller screens.

Read More »

Responsive Product Grid Layout

May 18, 2013     7875     Responsive Grid & Layout
Responsive Product Grid Layout

Responsive product grid layout that comes with some UI details for inspiration. The product will rotate showing the backside of the item when the rotate button is clicked. Some examples of how tooltips can appear on hover or click are also included.

Media queries can be used to resize the items in the grid or change the number of items in a row. Flexbox is used when supported.

Read More »

Horizontal Slide Out Menu

May 17, 2013     36389     Menu Mobile Responsive
Horizontal Slide Out Menu

A simple, horizontal slide out menu with a grid-like thumbnail layout for the submenu. The menu slides out from the top when a main menu item is clicked and the sub-items fade in. When clicking on another item, the height of the submenu will adjust and the content will fade in and out while switching.

Some media query examples show how to make the menu responsive and change the view to a touch-friendly vertically stacked navigation.

Read More »

AdvertisementAdvertise with us!
Angular, React and Javascript MV* Frameworks | MVish