I've made a container around the car pictures, and use overflow-y: scroll so I can scroll through them. How can I make it so I have two buttons I can click so I can scroll through them with buttons via javascript or jquery?
Current html is:
<div class="event_container">
<a href="/index.php?con=events&id=5">
<div style="display: inline-block; background-image: url('img/events/event5.jpg')" class="">
<p>Kør med de store!</p>
<p>18-01-2017</p>
<div style="display: inline-block" class="tile"></div>
</div>
</a>
<a href="/index.php?con=events&id=3">
<div style="display: inline-block; background-image: url('img/events/event3.jpg')" class="">
<p>Den nye FIAT 500!</p>
<p>24-01-2017</p>
<div style="display: inline-block" class="tile"></div>
</div>
</a>
<a href="/index.php?con=events&id=1">
<div style="display: inline-block; background-image: url('img/events/event1.jpg')" class="">
<p>Event 1</p>
<p>30-04-2017</p>
<div style="display: inline-block" class="tile"></div>
</div>
</a>
<a href="/index.php?con=events&id=2">
<div style="display: inline-block; background-image: url('img/events/event2.jpg')" class="">
<p>Test kør bughatti!</p>
<p>03-06-2017</p>
<div style="display: inline-block" class="tile"></div>
</div>
</a>
<a href="/index.php?con=events&id=4">
<div style="display: inline-block; background-image: url('img/events/event4.jpg')" class="">
<p>Skal du køre suziki?</p>
<p>30-06-2017</p>
<div style="display: inline-block" class="tile"></div>
</div>
</a>
You can make action animated with jQuery to be more comfortable with moved image. Try example below:
var outer = $('.container');
$('#right').click(function() {
outer.animate({scrollLeft: '+=30px'}, 500);
});
$('#left').click(function() {
outer.animate({scrollLeft: '-=30px'}, 500);
});
$('#top').click(function() {
outer.animate({scrollTop: '-=30px'}, 500);
});
$('#bottom').click(function() {
outer.animate({scrollTop: '+=30px'}, 500);
});
.container {
width: 100px;
height: 100px;
overflow: scroll;
}
.inner {
width: 300px;
background-color: red;
font-size: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="inner">
A B C D E F G 1 2 3 4 5 6 7 8 9
-------------------------------
9 8 7 6 5 4 3 2 1 A B C D E F G
</div>
</div>
<button id="left"> < </button><button id="right"> > </button>
<button id="top"> ^ </button><button id="bottom"> V </button>
I've made a container around the car pictures, and use overflow-y:
scroll so I can scroll through them. How can I make it so I have two
buttons I can click so I can scroll through them with buttons via
javascript or jquery?
Here are 3 approaches using:
jQuery
plain javascript
CSS and javascript
The last approach which uses CSS Transitions delivers the smoothest and best animation.
Approach 1 (of 3)
You can use jQuery's custom animate({scrollTop: [value]}) method to scroll the images up and down.
Working example in jQuery:
$(document).ready(function(){
$('button').eq(0).click(function(){
$('div').animate({scrollTop: $('div').scrollTop() -158 + 'px'});
});
$('button').eq(1).click(function(){
$('div').animate({scrollTop: $('div').scrollTop() +158 + 'px'});
});
});
div, img, button {
display: inline-block;
vertical-align: top;
}
div {
width: 596px;
height: 152px;
padding: 12px;
background-color: rgb(63,63,63);
overflow-y: auto;
}
img {
display: inline-block;
width: 100px;
height: 140px;
margin: 6px 6px 12px;
color: rgb(255,255,255);
background-color: rgb(255,127,0);
}
img:last-of-type {
margin-bottom: 24px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<img alt="image-1" />
<img alt="image-2" />
<img alt="image-3" />
<img alt="image-4" />
<img alt="image-5" />
<img alt="image-6" />
<img alt="image-7" />
<img alt="image-8" />
<img alt="image-9" />
<img alt="image-10" />
<img alt="image-11" />
<img alt="image-12" />
<img alt="image-13" />
<img alt="image-14" />
<img alt="image-15" />
</div>
<button type="button">Scroll Up</button>
<button type="button">Scroll Down</button>
Approach 2 (of 3)
If you want to skip jQuery, here is an alternative version using plain javascript.
Working example in plain javascript:
var buttons = document.getElementsByTagName('button');
var imageContainer = document.getElementsByTagName('div')[0];
var scrollValue;
var scrollDirection;
function scroll() {
scrollDirection = (this.textContent === 'Scroll Down' ? 1 : -1);
scrollValue = (this.textContent === 'Scroll Down' ? 158 : -158);
var startPoint = imageContainer.scrollTop;
var scrollDiv = setInterval(function() {
imageContainer.scrollTop += scrollDirection;
if (imageContainer.scrollTop === (startPoint + scrollValue)) {
scrollDirection = 0;
clearInterval(scrollDiv);
}
}, 1);
}
for (var i = 0; i < buttons.length; i++) {
buttons[i].addEventListener('click', scroll, false);
}
div, img, button {
display: inline-block;
vertical-align: top;
}
div {
width: 596px;
height: 152px;
padding: 12px;
background-color: rgb(63,63,63);
overflow-y: auto;
}
img {
display: inline-block;
width: 100px;
height: 140px;
margin: 6px 6px 12px;
color: rgb(255,255,255);
background-color: rgb(255,127,0);
}
img:last-of-type {
margin-bottom: 24px;
}
<div>
<img alt="image-1" />
<img alt="image-2" />
<img alt="image-3" />
<img alt="image-4" />
<img alt="image-5" />
<img alt="image-6" />
<img alt="image-7" />
<img alt="image-8" />
<img alt="image-9" />
<img alt="image-10" />
<img alt="image-11" />
<img alt="image-12" />
<img alt="image-13" />
<img alt="image-14" />
<img alt="image-15" />
</div>
<button type="button">Scroll Up</button>
<button type="button">Scroll Down</button>
Approach 3 (of 3)
As you will have noted, the plain javascript approach immediately above comes across as a bit slow and jerky. So in the end (as with all animations), the optimum approach is to deploy some CSS to handle the animation.
Working example in CSS and plain javascript:
var buttons = document.getElementsByTagName('button');
var images = document.getElementsByTagName('img');
var scrollValue;
function scroll() {
var imageTransformStyle = window.getComputedStyle(images[0]).transform;
var yStart = (imageTransformStyle.lastIndexOf(',') + 2);
var yEnd = imageTransformStyle.lastIndexOf(')');
var currentPosition = Number(imageTransformStyle.substring(yStart, yEnd));
scrollValue = (this.textContent === 'Scroll Down') ? -158 : 158;
var newPosition = currentPosition + scrollValue;
if (newPosition > 0) {newPosition = 0;}
if (newPosition < -316) {newPosition = -316;}
for (var i = 0; i < images.length; i++) {
images[i].style.transform = 'translateY(' + newPosition + 'px)';
}
}
for (var i = 0; i < buttons.length; i++) {
buttons[i].addEventListener('click', scroll, false);
}
div, img, button {
display: inline-block;
vertical-align: top;
}
div {
width: 578px;
height: 152px;
padding: 12px;
background-color: rgb(63,63,63);
overflow-y: hidden;
}
img {
display: inline-block;
width: 100px;
height: 140px;
margin: 6px 6px 12px;
color: rgb(255,255,255);
background-color: rgb(255,127,0);
transform: translateY(0);
transition: transform 0.5s ease-out;
}
img:last-of-type {
margin-bottom: 24px;
}
<div>
<img alt="image-1" />
<img alt="image-2" />
<img alt="image-3" />
<img alt="image-4" />
<img alt="image-5" />
<img alt="image-6" />
<img alt="image-7" />
<img alt="image-8" />
<img alt="image-9" />
<img alt="image-10" />
<img alt="image-11" />
<img alt="image-12" />
<img alt="image-13" />
<img alt="image-14" />
<img alt="image-15" />
</div>
<button type="button">Scroll Up</button>
<button type="button">Scroll Down</button>
Related
I have a problem with the slideshow when I use "z-index" in CSS. Instead of showing one on top of the other, the photos appear one under the other. Without "z-index" it works fine.
function pp() {
var t = document.getElementsByClassName("m");
for (var i = 0; i < t.length; i++) {
t[i].style.display = "none";
}
imageIndex++;
if (imageIndex > t.length) {
imageIndex = 1;
}
t[imageIndex - 1].style.display = "block";
setTimeout(pp, 2000);
}
#m {
width: 100px;
height: 100px;
position: relative;
}
#img1,
#img2 {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
#img2 {
z-index: 10;
margin: 20px;
}
<div id="m">
<div id="img1">
<img src="https://picsum.photos/seed/picsum/200/200" />
</div>
<div id="img2">
<img width="50px" height="50px" src="https://i.picsum.photos/id/933/200/200.jpg?hmac=OW5v0bUFqC97kOeYWLjXhU-5mkb6atERs7CrqdPlRfs"/>
</div>
</div>
<div id="m">
<div id="img1">
<img src="https://i.picsum.photos/id/933/200/200.jpg?hmac=OW5v0bUFqC97kOeYWLjXhU-5mkb6atERs7CrqdPlRfs" />
</div>
<div id="img2">
<img width="50px" height="50px" src="https://picsum.photos/seed/picsum/200/200"/>
</div>
</div>
I have attached the code above, something like this.
I don't know why the red border appears below the photo instead of on top of it.
enter image description here
I am replicating this webpage https://www.modsy.com/project/furniture but the images are not changing based on the range slider
My html code is:
<div class="image mt-3 mb-3">
<img src="../static/images/7.jpg" width="400" height="180">
<img src="../static/images/8.jpg" width="400" height="180">
<img src="../static/images/9.jpg" width="400" height="180">
</div>
<br>
<div class="rangeslider">
<input type="range" min="1" max="3" value="3" class="myslider" id="sliderRange">
<div class="row mt-3">
<div class="col-4">
<h6 class="display-6">Starting From Scratch</h6>
<p id="demo"> I'm designing the room </p>
</div>
<div class="col-4">
<h6 class="display-6">Somewhere in Between</h6>
<p class="demo">I'm designing around a few pieces I already own</p>
</div>
<div class="col-4">
<h6 class="display-6">Mostly Furnished</h6>
<p class="demo">I want to put the finishing touches on my room</p>
</div>
</div>
</div>
My JS code:
<script>
var rangeslider = document.getElementById("sliderRange");
var output = document.getElementById("demo");
output.innerHTML = rangeslider.value;
rangeslider.oninput = function() {
output.innerHTML = this.value;
}
</script>
My CSS code:
<style>
.rangeslider{
width: 50%;
}
.myslider {
-webkit-appearance: none;
background: #FCF3CF ;
width: 50%;
height: 20px;
opacity: 2;
}
.myslider::-webkit-slider-thumb {
-webkit-appearance: none;
cursor: pointer;
background: #34495E ;
width: 5%;
height: 20px;
}
.myslider:hover {
opacity: 1;
}
</style>
Error is : Uncaught TypeError: Cannot read property 'value' of null
Can you say what mistake I had done in my code
You should use the load event or move your script tag before the end of your body tag.
I'm changing the style attribute but the best approach is to use classes to make the code scale nicely.
window.addEventListener('load', function() {
var rangeslider = document.getElementById("sliderRange");
var images = document.getElementById("sliderImages");
rangeslider.addEventListener('input', function() {
for (var i = 0; i < images.children.length; i++) {
images.children[i].style.display = 'none';
}
i = Number(this.value) - 1;
images.children[i].style.display = 'block';
});
});
.rangeslider {
width: 400px;
margin: 0 auto;
}
.myslider {
-webkit-appearance: none;
background: #FCF3CF;
width: 100%;
height: 20px;
opacity: 0.8;
margin-top: 100px;
}
.myslider::-webkit-slider-thumb {
-webkit-appearance: none;
cursor: pointer;
background: #34495E;
width: 33%;
height: 20px;
}
.myslider:hover {
opacity: 1;
}
.image {
position: relative;
width: 400px;
margin: 0 auto;
}
.image>img {
position: absolute;
display: none;
}
.image>img.visible,
.image>img:first-child {
display: block;
}
.sliderOutput>div {
margin: 5px;
width: 120px;
display: inline-block;
vertical-align: top;
text-align: center;
}
.sliderOutput h6,
.sliderOutput p {
margin: 5px;
}
<div class="image mt-3 mb-3" id="sliderImages">
<img src="https://via.placeholder.com/400x100.png?text=Image1" width="400" height="100">
<img src="https://via.placeholder.com/400x100.png?text=Image2" width="400" height="100">
<img src="https://via.placeholder.com/400x100.png?text=Image3" width="400" height="100">
</div><br>
<div class="rangeslider">
<input type="range" min="1" max="3" value="1" class="myslider" id="sliderRange">
<div class="sliderOutput row mt-3">
<div class="col-4">
<h6 class="display-6">Starting From Scratch</h6>
<p class="demo"> I'm designing the room </p>
</div>
<div class="col-4">
<h6 class="display-6">Somewhere in Between</h6>
<p class="demo">I'm designing around a few pieces I already own</p>
</div>
<div class="col-4">
<h6 class="display-6">Mostly Furnished</h6>
<p class="demo">I want to put the finishing touches on my room</p>
</div>
</div>
</p>
</div>
Your JS code is running too early. The DOM is not ready.
Moving the script tag towards the end of the page will help (as #RyanSparks mentioned above).
window.addEventListener('load', function() {
var rangeslider = document.getElementById("sliderRange");
var images = document.getElementById("sliderImages");
rangeslider.addEventListener('input', function() {
for (var i = 0; i < images.children.length; i++) {
images.children[i].style.display = 'none';
}
i = Number(this.value) - 1;
images.children[i].style.display = 'block';
});
});
.rangeslider {
width: 400px;
margin: 0 auto;
}
.myslider {
-webkit-appearance: none;
background: #FCF3CF;
width: 100%;
height: 20px;
opacity: 0.8;
margin-top: 100px;
}
.myslider::-webkit-slider-thumb {
-webkit-appearance: none;
cursor: pointer;
background: #34495E;
width: 33%;
height: 20px;
}
.myslider:hover {
opacity: 1;
}
.image {
position: relative;
width: 400px;
margin: 0 auto;
}
.image>img {
position: absolute;
display: none;
}
.image>img.visible,
.image>img:first-child {
display: block;
}
.sliderOutput>div {
margin: 5px;
width: 120px;
display: inline-block;
vertical-align: top;
text-align: center;
}
.sliderOutput h6,
.sliderOutput p {
margin: 5px;
}
<div class="image mt-3 mb-3" id="sliderImages">
<img src="https://via.placeholder.com/400x100.png?text=Image1" width="400" height="100">
<img src="https://via.placeholder.com/400x100.png?text=Image2" width="400" height="100">
<img src="https://via.placeholder.com/400x100.png?text=Image3" width="400" height="100">
</div><br>
<div class="rangeslider">
<input type="range" min="1" max="3" value="1" class="myslider" id="sliderRange">
<div class="sliderOutput row mt-3">
<div class="col-4">
<h6 class="display-6">Starting From Scratch</h6>
<p class="demo"> I'm designing the room </p>
</div>
<div class="col-4">
<h6 class="display-6">Somewhere in Between</h6>
<p class="demo">I'm designing around a few pieces I already own</p>
</div>
<div class="col-4">
<h6 class="display-6">Mostly Furnished</h6>
<p class="demo">I want to put the finishing touches on my room</p>
</div>
</div>
</p>
</div>
I have tried to do zoom effect using html, css and Javascript but the image goes out of the parent div after zooming the content.
After clicking zoomin button the image will go out of the div and the first image will cut from the beginning.
var factor = 1;
function funZoomOut() {
if (factor > 0.5) {
factor = factor - 0.1;
var p = document.getElementById("divArea");
p.setAttribute("style", "transform: scale(" + factor + ");");
}
}
function funZoomIn() {
if (factor < 1.3) {
factor = factor + 0.1;
var p = document.getElementById("divArea");
p.setAttribute("style", "transform: scale(" + factor + ");");
}
}
.demoCss {
overflow: auto;
height: 470px;
text-align: center;
border: 5px solid red;
padding-top: 10px;
position: relative;
}
.test {
height: 100%;
}
<body>
<div>
<div>
<button id="btn1" value="submit" onclick="funZoomOut();" style="position:relative; z-index:1;">ZoomOut</button>
<button id="btn1" value="submit" onclick="funZoomIn();" style="position:relative;z-index:1;">ZoomIn</button>
</div>
<div class="demoCss">
<div id="divArea" class="test">
<div>
<img src="Images/2.jpg" alt="image" height="150px" width="150px" id="img1" />
</div>
<div>
<img src="Images/article-1.jpg" alt="image" height="150px" width="150px" />
</div>
<div>
<img src="Images/article-1.jpg" alt="image" height="150px" width="150px" />
</div>
</div>
</div>
</div>
It goes out of the containing div because the transform-origin (what transform(scale()) takes as the starting point for the transformation) is set at the center of the images by default.
If you change it to be in the top-middle, the images will be scaled from top to bottom:
.test {
transform-origin: 50% 0%;
}
var factor = 1;
function funZoomOut() {
if (factor > 0.5) {
factor = factor - 0.1;
var p = document.getElementById("divArea");
p.setAttribute("style", "transform: scale(" + factor + ");");
}
}
function funZoomIn() {
if (factor < 1.3) {
factor = factor + 0.1;
var p = document.getElementById("divArea");
p.setAttribute("style", "transform: scale(" + factor + ");");
}
}
.demoCss {
overflow: auto;
height: 470px;
text-align: center;
border: 5px solid red;
padding-top: 10px;
position: relative;
}
.test {
height: 100%;
transform-origin: 50% 0%;
}
<div>
<div>
<button id="btn1" value="submit" onclick="funZoomOut();" style="position:relative; z-index:1;">ZoomOut</button>
<button id="btn1" value="submit" onclick="funZoomIn();" style="position:relative;z-index:1;">ZoomIn</button>
</div>
<div class="demoCss">
<div id="divArea" class="test">
<div>
<img src="https://lorempixel.com/300/300/?1" alt="image" height="150px" width="150px" id="img1" />
</div>
<div>
<img src="https://lorempixel.com/300/300/?2" alt="image" height="150px" width="150px" />
</div>
<div>
<img src="https://lorempixel.com/300/300/?3" alt="image" height="150px" width="150px" />
</div>
</div>
</div>
.demoCss {
overflow: auto;
height: 470px;
text-align: center;
border: 5px solid red;
padding-top: 10px;
position: relative;
}
.test {
height: 100%;
transform-origin: 50% 0%;
transitions: all 0.5s ease 0s;
}
Your div area/container should have overflow hidden i.e.
.demoCss {
overflow: hidden;
}
I'm trying to get height of a parent div using React JS.
The html structure is as follows :
<div ref="sectionSlider">
<div class="detailsOutterDiv">
<div class="swiper" style="width: 100%;">
<div class="detailsInnerDiv">
<div class="slide">
<img src="someURl" style="background-color: black;">
</div>
<div class="slide">
<img src="someURl" style="background-color: black;">
</div>
<div class="slide">
<img src="someURl" style="background-color: black;">
</div>
</div>
</div>
</div>
<div class="slider-thumbnails">
<div class="thumb">
<img src="someURl">
</div>
</div>
</div>
And the css-scss structure is like this :
.detailsOutterDiv{
position: relative;
width: 100%;
overflow: hidden;
}
.detailsInnerDiv{
position: relative;
top: 0px;
left: 0px;
right: 0px;
width: 10000%;
transition: all 0.5s ease;
}
.slide{
display: inline-block;
margin-right: 15px;
}
.slide img{
width: 100%;
height: auto;
}
.slider-thumbnails{
width: 100%;
padding-top: $primary-margin-xs - 5;
text-align: center;
.thumb{
display: inline-block;
width: (100% / 12);
img{
width: 100%;
height: auto;
padding: 0 2px;
}
}
}
I'm trying to get the height of the div with ref="sectionSlider".
I tried to do this on a few ways in componentDidMount like this :
componentDidMount(){
//First way
let top = this.refs["sectionSlider"].offsetHeight;
//Second way
let top = this.refs["sectionSlider"].clientHeight;
//Third way
let top = this.refs["sectionSlider"].getBoundingClientRect().height;
//Fourth way
let node = this.refs["sectionSlider"];
let nodeStyle = window.getComputedStyle(node);
let top = parseInt(nodeStyle.getPropertyValue('height').replace(/\D/g,''));
}
And in every case top is 82 what is not true.
It looks like :
Thus, the div has height of 523.
Any idea how to solve it?
If the problem is (according to your guess) that the images aren't loaded you could do something like this:
const Example = React.createClass({
getInitialState () {
return {
imagesLoaded: 0,
};
},
printClientHeight() {
console.log(this.wrapper.clientHeight)
},
updateLoadedImages() {
this.setState({ imagesLoaded: this.state.imagesLoaded + 1 })
if (this.state.imagesLoaded = 4) {
printClientHeight();
}
},
setWrapperRef(el) {
this.wrapper = el;
},
render() {
return (
<div ref={this.setWrapperRef}>
<div className="detailsOutterDiv">
<div className="swiper" style="width: 100%;">
<div className="detailsInnerDiv">
<div className="slide">
<img src="someURl" style="background-color: black;" onLoad={updateLoadedImages}/ >
</div>
<div className="slide">
<img src="someURl" style="background-color: black;" onLoad={updateLoadedImages}/>
</div>
<div className="slide">
<img src="someURl" style="background-color: black;" onLoad={updateLoadedImages}/>
</div>
</div>
</div>
</div>
<div className="slider-thumbnails">
<div className="thumb">
<img src="someURl" onLoad={updateLoadedImages}/>
</div>
</div>
</div>
);
}
});
Obviously you could clean this up quite a bit by getting the image tag count dynamically but I think you get the point...
I've been playing around with my code, I have the Calendar set up to do what i want, now I am just trying to get the <p> and iframe lined up beside each other nicely, i have this code so far jsfiddle and here is an example of what the separation f the arrows and iframe looks like now
what i want to achieve:
200px----[ arrowLEFT ]---30px---[ Iframe ]---30px---[ arrowRIGHT
]
HTML:
<div id="miniFeed">
<p id="toggle">
<span> <a href="#" onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('LeftArrow','','WEBgraphics/arrowLeftROLL.png',1)">
<img src="WEBgraphics/arrowLeft.png" width="40" height="400" id="LeftArrow"></a></span>
<span> </span>
</p>
<div id="calender">
<div id="left"> <iframe src="calenderAPRIL.html" width="350px" height="400px"></iframe>
</div>
<div id="right"> <iframe src="calenderMAY.html" width="350px" height="400px"></iframe>
</div>
</div>
<p id="toggle">
<span> </span>
<span> <a href="#" onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('RightArrow','','WEBgraphics/arrowrightROLL.png',1)">
<img src="WEBgraphics/arrowright.png" width="40" height="400" id="RightArrow"></a></span>
</p>
</div>
JAVASCRIPT:
window.onload=function() {
$('#toggle > span').click(function() {
var ix = $(this).index();
$('#left').toggle( ix === 0 );
$('#right').toggle( ix === 1 );
});
};
CSS:
#miniFeed {
}
#right { display:none; }
#LeftArrow {
z-index: 100;
width: auto;
float: left;
margin-left: 200px;
display: block;
}
#calender {
float: left;
z-index: -1;
}
Try this
html:
<div id="miniFeed">
<div class="arrow leftArrow">
</div>
<div class="calendars">
<div class="carousel">
<div class="calendar-1">
</div>
<div class="calendar-2">
</div>
</div>
</div>
<div class="arrow rightArrow">
</div>
css:
#miniFeed {
width: 400px;
height: 250px;
}
#miniFeed > div {
float: left;
height: 100%;
}
.arrow {
width: 100px;
background: blue;
}
.calendars {
width: 200px;
overflow: hidden; /*the magic*/
}
.carousel {
width: 400px; /* the size is number of calendars * the width per calendar */
height: 100%;
}
.carousel > div {
width: 200px;
height: 100%;
float: left;
}
.calendar-1 {
background: red;
}
.calendar-2 {
background: green;
}
js:
$('.leftArrow').click(function() {
//we move the carousel negative
//the value 200 is the width of a calendar
$('.carousel').animate({marginLeft: -200}, 300);
});
$('.rightArrow').click(function() {
//we move the carousel negative
$('.carousel').animate({marginLeft: 0}, 300);
});
We create a wrapper with overflow hidden, so inside it we have our collections of calendars.
Result:
http://jsfiddle.net/renanvalentin/kzTRz/