Category Archives: Javascript

Create responsive slides

The info is from http://responsiveslides.com/

ResponsiveSlides.js v1.54
Simple & lightweight responsive slider plugin (in 1kb)

ResponsiveSlides.js is a tiny jQuery plugin that creates a responsive slider using elements inside a container. It has been used on sites like Microsoft’s Build 2012 and Gridset App. ResponsiveSLides.js works with wide range of browsers including all IE versions from IE6 and up. It also adds css max-width support for IE6 and other browsers that don’t natively support it. Only dependency is jQuery (1.6 and up supported) and that all the images are same size.

Biggest difference to other responsive slider plugins is the file size (1.4kb minified and gzipped) + that this one doesn’t try to do everything. Responsive Slides has basically only two different modes: Either it just automatically fades the images, or operates as a responsive image container with pagination and/or navigation to fade between slides.
Features

Fully responsive
1kb minified and gzipped
CSS3 transitions with JavaScript fallback
Simple markup using unordered list
Settings for transition and timeout durations
Multiple slideshows supported
Automatic and manual fade
Works in all major desktop and mobile browsers
Captions and other html-elements supported inside slides
Separate pagination and next/prev controls
Possibility to choose where the controls append to
Possibility to randomize the order of the slides
Possibility to use custom markup for pagination
Can be paused while hovering slideshow and/or controls
Images can be wrapped inside links
Optional ‘before’ and ‘after’ callbacks

Usage:
1. Link files

http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
http://responsiveslides.min.js

2. Add Markup

3. Add CSS

.rslides {
position: relative;
list-style: none;
overflow: hidden;
width: 100%;
padding: 0;
margin: 0;
}

.rslides li {
-webkit-backface-visibility: hidden;
position: absolute;
display: none;
width: 100%;
left: 0;
top: 0;
}

.rslides li:first-child {
position: relative;
display: block;
float: left;
}

.rslides img {
display: block;
height: auto;
float: left;
width: 100%;
border: 0;
}

4. Hook up the slideshow

$(function() {
$(“.rslides”).responsiveSlides();
});

5. Options you can customize

$(“.rslides”).responsiveSlides({
auto: true, // Boolean: Animate automatically, true or false
speed: 500, // Integer: Speed of the transition, in milliseconds
timeout: 4000, // Integer: Time between slide transitions, in milliseconds
pager: false, // Boolean: Show pager, true or false
nav: false, // Boolean: Show navigation, true or false
random: false, // Boolean: Randomize the order of the slides, true or false
pause: false, // Boolean: Pause on hover, true or false
pauseControls: true, // Boolean: Pause when hovering controls, true or false
prevText: “Previous”, // String: Text for the “previous” button
nextText: “Next”, // String: Text for the “next” button
maxwidth: “”, // Integer: Max-width of the slideshow, in pixels
navContainer: “”, // Selector: Where controls should be appended to, default is after the ‘ul’
manualControls: “”, // Selector: Declare custom pager navigation
namespace: “rslides”, // String: Change the default namespace used
before: function(){}, // Function: Before callback
after: function(){} // Function: After callback
});

That’s all! Download the latest version, this demo and changelog from Github. For more examples about the usage go here or view a demo with captions.

Example with options “auto:false” and “pager: true”

123

ResponsiveSlides.js is tested with the following browser

Internet Explorer 6,7,8,9
Firefox 3,6,8,11
Safari 5,5.1
Chrome 15,20
Opera 11,11.6
iOS Safari
Symbian 3 Webkit
Opera Mobile 10.1
Opera Mini for iOS
IE7, IE9 Mobile
Firefox Mobile
Android 2.3+
Kindle browser

Support

Please post your bug reports to GitHub issues. For support requests, use Stackoverflow.
Download the latest version from GitHub

ResponsiveSlides.js is created by @viljamis. Special thanks to Bastian Gutschke.
Fork me on GitHub

Sticky header jQuery

In order to have a sticky header you need these elements:

[html]

nav here

[/html]

and …

[css]

#header_nav {
width:100%;
height:100px;
background-color:#666;
position:fixed;
top:0;
left:0;
}

[/css]

… and …

[js]

$(function(){
$(‘#header_nav’).data(‘size’,’big’);
});

$(window).scroll(function(){
if($(document).scrollTop() > 0)
{
if($(‘#header_nav’).data(‘size’) == ‘big’)
{
$(‘#header_nav’).data(‘size’,’small’);
$(‘#header_nav’).stop().animate({
height:’40px’
},600);
}
}
else
{
if($(‘#header_nav’).data(‘size’) == ‘small’)
{
$(‘#header_nav’).data(‘size’,’big’);
$(‘#header_nav’).stop().animate({
height:’100px’
},600);
}
}
});

[/js]

 

Guess what!? It works!

Scroll/Following sidebar

Use this code

[js]

$(function() {

var $sidebar   = $("#secondary"),
$window    = $(window),
offset     = $sidebar.offset(),
topPadding = 15;

$window.scroll(function() {
if ($window.scrollTop() > offset.top) {
$sidebar.stop().animate({
marginTop: $window.scrollTop() – offset.top + topPadding
});
} else {
$sidebar.stop().animate({
marginTop: 0
});
}
});

});

[/js]

to keep your sidebar visible while scrolling.

Downside: if the sidebar is too high, you won’t be able to see it’s lower part. LOL

JS Show Window & Document sizes

This can easily be accomplished by this jQuery piece of code:

[js]

$j(‘#content_left’).html(‘Window height: ‘ + $j(window).height() + ‘<br />’ +
‘Window width: ‘ + $j(window).width() + ‘<br />’ +
‘Document height: ‘ + $j(document).height() + ‘<br />’ +
‘Document width: ‘ + $j(document).width() + ‘<br />’
//+ ‘window.devicePixelRatio: ‘ + window.devicePixelRatio + ‘<br />’
//+ ‘Screen Width:’ + window.screen.width + ‘<br />’
//+ ‘Screen Height:’ + window.screen.height + ‘<br />’
);

[/js]

You can console.log it