How use Overflow Hidden and Position Absolute?

How use Overflow Hidden and Position Absolute? - javascript

I wanted descriptionClass is show over itemClass when I make .slider-imgClass is Hover .......................
how use Jquery OR javascritp OR CSS ..............
html
<div id="carousel-example-generic">
<div data-ride="carousel" class="carousel slide carousel-fade" id="carousel-example-captions">
<div class="carousel-inner">
<div class="item active">
<div class="slider-img">
<img src="http://img.tjskl.org.cn/pic/z2577d9d-200x200-1/pinarello_lungavita_2010_single_speed_bike.jpg" alt="item" />
<div class="descriptoion">texttexfdlkfjddjkdldl<br/>djtdkdldldldldldld ldldldldlddldldldlddlld</div>
</div>
<div class="slider-img">
<img src="http://img.tjskl.org.cn/pic/z2577d9d-200x200-1/pinarello_lungavita_2010_single_speed_bike.jpg" alt="item" />
<div class="descriptoion">texttexfdlkfjddjkdldl<br/>djtdkdldldldldldld ldldldldlddldldldlddlld</div>
</div>
<div class="slider-img">
<img src="http://img.tjskl.org.cn/pic/z2577d9d-200x200-1/pinarello_lungavita_2010_single_speed_bike.jpg" alt="item" />
<div class="descriptoion">texttexfdlkfjddjkdldl<br/>djtdkdldldldldldld ldldldldlddldldldlddlld</div>
</div>
<div class="slider-img">
<img src="http://img.tjskl.org.cn/pic/z2577d9d-200x200-1/pinarello_lungavita_2010_single_speed_bike.jpg" alt="item" />
<div class="descriptoion">texttexfdlkfjddjkdldl<br/>djtdkdldldldldldld ldldldldlddldldldlddlld</div>
</div>
</div>
<div class="item ">
<div class="slider-img">
<img src="http://img.tjskl.org.cn/pic/z2577d9d-200x200-1/pinarello_lungavita_2010_single_speed_bike.jpg" alt="item" />
<div class="descriptoion">texttexfdlkfjddjkdldl<br/>djtdkdldldldldldld ldldldldlddldldldlddlld</div>
</div>
<div class="slider-img">
<img src="http://img.tjskl.org.cn/pic/z2577d9d-200x200-1/pinarello_lungavita_2010_single_speed_bike.jpg" alt="item" />
<div class="descriptoion">texttexfdlkfjddjkdldl<br/>djtdkdldldldldldld ldldldldlddldldldlddlld</div>
</div>
<div class="slider-img">
<img src="http://img.tjskl.org.cn/pic/z2577d9d-200x200-1/pinarello_lungavita_2010_single_speed_bike.jpg" alt="item" />
<div class="descriptoion">texttexfdlkfjddjkdldl<br/>djtdkdldldldldldld ldldldldlddldldldlddlld</div>
</div>
<div class="slider-img">
<img src="http://img.tjskl.org.cn/pic/z2577d9d-200x200-1/pinarello_lungavita_2010_single_speed_bike.jpg" alt="item" />
<div class="descriptoion">texttexfdlkfjddjkdldl<br/>djtdkdldldldldldld ldldldldlddldldldlddlld</div>
</div>
</div>
<div class="item ">
<div class="slider-img">
<img src="http://img.tjskl.org.cn/pic/z2577d9d-200x200-1/pinarello_lungavita_2010_single_speed_bike.jpg" alt="item" />
<div class="descriptoion">texttexfdlkfjddjkdldl<br/>djtdkdldldldldldld ldldldldlddldldldlddlld</div>
</div>
<div class="slider-img">
<img src="http://img.tjskl.org.cn/pic/z2577d9d-200x200-1/pinarello_lungavita_2010_single_speed_bike.jpg" alt="item" />
<div class="descriptoion">texttexfdlkfjddjkdldl<br/>djtdkdldldldldldld ldldldldlddldldldlddlld</div>
</div>
<div class="slider-img">
<img src="http://img.tjskl.org.cn/pic/z2577d9d-200x200-1/pinarello_lungavita_2010_single_speed_bike.jpg" alt="item" />
<div class="descriptoion">texttexfdlkfjddjkdldl<br/>djtdkdldldldldldld ldldldldlddldldldlddlld</div>
</div>
<div class="slider-img">
<img src="http://img.tjskl.org.cn/pic/z2577d9d-200x200-1/pinarello_lungavita_2010_single_speed_bike.jpg" alt="item" />
</div>
</div>
</div>
<a data-slide="prev" href="#carousel-example-captions" class="left carousel-control">
left
</a>
<a data-slide="next" href="#carousel-example-captions" class="right carousel-control">
right
</a>
</div>
css
.descriptoion{
border: 1px solid red;
bottom: 0;
color: red;
height: 250px;
line-height: 40px;
position: absolute;
right: -222px;
width: 200px;
word-wrap: break-word;
z-index: 1000;
background-color:#f0f0f0;
display:none;
font-size:20pt;
text-align:center;
}
.descriptoion:before{
position:absolute;
content:"";
border:20px solid transparent;
border-right:20px solid #f0f0f0;
top:50%;
left:-42px;
z-index:1000;
}
.descriptoion:after{
border:22px solid transparent;
border-right:22px solid red;
z-index:10001;
content: "";
left: -46px;
position: absolute;
top: 49%;
z-index: 1;
}
.slider-img:hover .descriptoion{
display:block;
}
jquery
$(".slider-img").hover(function(){
$(this).parent().parent().addClass('not-overflow');
});
$(".carousel > a").click(function(){
$(".carousel-inner").removeClass("not-overflow");
});
i have this problem
i wanted this style
UPDATEDEMO

Basically you have to remove the overflow:hidden property from .item-active and also from .carousel-inner.
If you see the cycle image breaking out of the div, limit the size of that image.
Also you seem to be having repetitive classes in your css file.
DEMO FIDDLE

Related

CSS image is not in row. How to resolve?

page {
background: #fff;
display: block;
margin: 0 auto;
margin-bottom: 0.5cm;
box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
position: relative;
}
page[size="A4"] {
width:21cm;
min-height: 29.7cm;
}
page[size="A4"][layout="portrait"] {
width: 29.7cm;
min-height: 21cm;
}
#media print {
body {
visibility:hidden;
}
page[size="A4"] > * {
visibility:visible;
}
}
<page size="A4">
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png"> </div>
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png"> </div>
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png"> </div>
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png"> </div>
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png"> </div>
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png"> </div>
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png"> </div>
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png"> </div>
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png"> </div>
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png"> </div>
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png"> </div>
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png"> </div>
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png"> </div>
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png"> </div>
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png"> </div>
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png"> </div>
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png"> </div>
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png"> </div>
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png"> </div>
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png"> </div>
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png"> </div>
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png"> </div>
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png"> </div>
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png"> </div>
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png"> </div>
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png"> </div>
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/13_english.png"> </div>
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/13_gujarati.png"> </div>
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/13_english.png"> </div>
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/13_gujarati.png"> </div>
</page>
As you can see in the second row there is right side image and left part is empty. I want all images in the row. But the following condition is applied.
Height and width of the images are dynamic.
How much image will contain in the single row is also dynamic.
The width of the page is static.
How can I remove empty white space and resolve this issue?

Use flex box. And Set the display to flex with flex-wrap:wrap.
page {
background: #fff;
display: flex; // updated this
margin: 0 auto;
margin-bottom: 0.5cm;
box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
position: relative;
flex-wrap: wrap;
}
page[size="A4"] {
width:21cm;
min-height: 29.7cm;
}
page[size="A4"][layout="portrait"] {
width: 29.7cm;
min-height: 21cm;
}
#media print {
body {
visibility:hidden;
}
page[size="A4"] > * {
visibility:visible;
}
}
<page size="A4">
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png"> </div>
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png"> </div>
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png"> </div>
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png"> </div>
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png"> </div>
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png"> </div>
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png"> </div>
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png"> </div>
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png"> </div>
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png"> </div>
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png"> </div>
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png"> </div>
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png"> </div>
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png"> </div>
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png"> </div>
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png"> </div>
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png"> </div>
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png"> </div>
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png"> </div>
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png"> </div>
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png"> </div>
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png"> </div>
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png"> </div>
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png"> </div>
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png"> </div>
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png"> </div>
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/13_english.png"> </div>
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/13_gujarati.png"> </div>
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/13_english.png"> </div>
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/13_gujarati.png"> </div>
</page>

You can use Flexbox here. Apply display: flex to page[size="A4"] element.
And also remove float: left inline style. No need here.
page {
background: #fff;
display: block;
margin: 0 auto;
margin-bottom: 0.5cm;
box-shadow: 0 0 0.5cm rgba(0, 0, 0, 0.5);
position: relative;
}
page[size="A4"] {
width: 21cm;
min-height: 29.7cm;
display: flex;
flex-wrap: wrap;
}
page[size="A4"][layout="portrait"] {
width: 29.7cm;
min-height: 21cm;
}
#media print {
body {
visibility: hidden;
}
page[size="A4"]>* {
visibility: visible;
}
}
<page size="A4">
<div> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png"> </div>
<div> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png"> </div>
<div> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png"> </div>
<div> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png"> </div>
<div> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png"> </div>
<div> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png"> </div>
<div> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png"> </div>
<div> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png"> </div>
<div> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png"> </div>
<div> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png"> </div>
<div> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png"> </div>
<div> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png"> </div>
<div> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png"> </div>
<div> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png"> </div>
<div> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png"> </div>
<div> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png"> </div>
<div> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png"> </div>
<div> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png"> </div>
<div> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png"> </div>
<div> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png"> </div>
<div> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png"> </div>
<div> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png"> </div>
<div> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png"> </div>
<div> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png"> </div>
<div> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png"> </div>
<div> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png"> </div>
<div> <img src="https://www.vsss.co.in/Admin/uploads/710451/13_english.png"> </div>
<div> <img src="https://www.vsss.co.in/Admin/uploads/710451/13_gujarati.png"> </div>
<div> <img src="https://www.vsss.co.in/Admin/uploads/710451/13_english.png"> </div>
<div> <img src="https://www.vsss.co.in/Admin/uploads/710451/13_gujarati.png"> </div>
</page>

I reworked your example to work with Bootstrap v4.
I used row class to create a row and col-md-3 class to allow 4 images per row.
Bootstrap only supports up to 12 columns in a row. E.g 4 images = 12
/ 4 which gives you col-*-3
Then I gave .col-md-3 img properties: width: 100%, height: 100%
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<page size="A4">
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png">
</div>
<div class="col-md-3">
<img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png">
</div>
<div class="col-md-3">
<img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png">
</div>
<div class="col-md-3">
<img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png">
</div>
</div>
<div class="row">
<div class="col-md-3">
<img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png">
</div>
<div class="col-md-3">
<img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png">
</div>
<div class="col-md-3">
<img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png">
</div>
<div class="col-md-3">
<img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png">
</div>
</div>
<div class="row">
<div class="col-md-3">
<img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png">
</div>
<div class="col-md-3">
<img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png">
</div>
<div class="col-md-3">
<img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png">
</div>
<div class="col-md-3">
<img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png">
</div>
</div>
<div class="row">
<div class="col-md-3">
<img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png">
</div>
<div class="col-md-3">
<img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png">
</div>
<div class="col-md-3">
<img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png">
</div>
<div class="col-md-3">
<img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png">
</div>
</div>
<div class="row">
<div class="col-md-3">
<img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png">
</div>
<div class="col-md-3">
<img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png">
</div>
<div class="col-md-3">
<img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png">
</div>
<div class="col-md-3">
<img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png">
</div>
</div>
<div class="row">
<div class="col-md-3">
<img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png">
</div>
<div class="col-md-3">
<img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png">
</div>
<div class="col-md-3">
<img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png">
</div>
<div class="col-md-3">
<img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png">
</div>
</div>
<div class="row">
<div class="col-md-3">
<img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png">
</div>
<div class="col-md-3">
<img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png">
</div>
<div class="col-md-3">
<img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png">
</div>
<div class="col-md-3">
<img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png">
</div>
</div>
<div class="row">
<div class="col-md-3">
<img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png">
</div>
<div class="col-md-3">
<img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png">
</div>
<div class="col-md-3">
<img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png">
</div>
<div class="col-md-3">
<img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png">
</div>
</div>
</div>
</page>
CSS
page {
background: #fff;
display: block;
margin: 0 auto;
margin-bottom: 0.5cm;
box-shadow: 0 0 0.5cm rgba(0, 0, 0, 0.5);
position: relative;
}
page[size="A4"] {
width: 21cm;
min-height: 29.7cm;
}
page[size="A4"][layout="portrait"] {
width: 29.7cm;
min-height: 21cm;
}
#media print {
body {
visibility: hidden;
}
page[size="A4"]>* {
visibility: visible;
}
}
.col-md-3 img {
height: 100%;
width: 100%;
}
Here's JSFiddle: https://jsfiddle.net/ezcrtn22/2/

Giving all your divs a fixed height, solves the problem (this height should be the maximum of all the images). Even better would be a resizing of the images towards a fixed height, this prevents the images from being cut of.
Actually I don't see any need for divs around the images you could simply omit them.
page {
background: #fff;
display: block;
margin: 0 auto;
margin-bottom: 0.5cm;
box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
position: relative;
}
page[size="A4"] {
width:21cm;
min-height: 29.7cm;
}
page[size="A4"][layout="portrait"] {
width: 29.7cm;
min-height: 21cm;
}
#media print {
body {
visibility:hidden;
}
page[size="A4"] > * {
visibility:visible;
}
}
page img {
height: 170px;
float: left;
}
<page size="A4">
<img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png">
<img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png">
<img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png">
<img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png">
<img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png">
<img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png">
<img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png">
<img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png">
<img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png">
<img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png">
<img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png">
<img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png">
<img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png">
<img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png">
<img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png">
<img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png">
<img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png">
<img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png">
<img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png">
<img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png">
<img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png">
<img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png">
<img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png">
<img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png">
<img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png">
<img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png">
<img src="https://www.vsss.co.in/Admin/uploads/710451/13_english.png">
<img src="https://www.vsss.co.in/Admin/uploads/710451/13_gujarati.png">
<img src="https://www.vsss.co.in/Admin/uploads/710451/13_english.png">
<img src="https://www.vsss.co.in/Admin/uploads/710451/13_gujarati.png">
</page>

Bootstrap carousel jQuery error

I'm trying to make a multiple items bootstrap carousel but it gives me this error: "#Carousel".carousel is not a function TypeError: "#Carousel".carousel is not a function, how can fix it?
here is my code:
$(document).ready(function () {
('#Carousel').carousel({
interval: 8000
})
});
.carousel-control {
left: -12px;
height: 40px;
width: 40px;
background: none repeat scroll 0 0 #222222;
border: 4px solid #FFFFFF;
border-radius: 23px 23px 23px 23px;
margin-top: 90px;
}
.carousel-control.right {
right: -12px;
}
.carousel-indicators {
right: 50%;
top: auto;
bottom: -10px;
margin-right: -19px;
}
.carousel-indicators li {
background: #cecece;
}
.carousel-indicators .active {
background: #428bca;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-12">
<div id="Carousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#Carousel" data-slide-to="0" class="active"></li>
<li data-target="#Carousel" data-slide-to="1"></li>
<li data-target="#Carousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
</div>
</div>
</div> <a data-slide="prev" href="#Carousel" class="left carousel-control">‹</a> <a data-slide="next" href="#Carousel" class="right carousel-control">›</a> </div>
</div>
</div>

From the code you pasted, I cannot see that you are loading Bootstrap library (css and js code). You can see Bootstrap loading information here http://getbootstrap.com/getting-started/

A full description of Carousel component is reported in boostrap 4.
In this page, instead, you will find the required libraries.
Working code:
$(document).ready(function () {
$('#Carousel').carousel({
interval: 8000
})
});
.carousel-control {
left: -12px;
height: 40px;
width: 40px;
background: none repeat scroll 0 0 #222222;
border: 4px solid #FFFFFF;
border-radius: 23px 23px 23px 23px;
margin-top: 90px;
}
.carousel-control.right {
right: -12px;
}
.carousel-indicators {
right: 50%;
top: auto;
bottom: -10px;
margin-right: -19px;
}
.carousel-indicators li {
background: #cecece;
}
.carousel-indicators .active {
background: #428bca;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-md-12">
<div id="Carousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#Carousel" data-slide-to="0" class="active"></li>
<li data-target="#Carousel" data-slide-to="1"></li>
<li data-target="#Carousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item item active">
<div class="row">
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
</div>
</div>
<div class="carousel-item item">
<div class="row">
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
</div>
</div>
<div class="carousel-item item">
<div class="row">
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
</div>
</div>
</div>
<a data-slide="prev" href="#Carousel" class="left carousel-control">‹</a> <a data-slide="next" href="#Carousel" class="right carousel-control">›</a> </div>
</div>
</div>

photos slider by html and javascript

I want to make html photo slider which have10 images appears and right & left button I want to make the button show the next and previous images I have the code below:
<div class="col-sm-1"></div>
<div class="col-sm-10">
<div id="show" style="height: 500px"></div>
</div>
<div class="col-sm-1"></div>
<div style="min-height: 100px;"></div>
<div style="min-height: 300px;"></div>
<div class="col-sm-12" style="width: 100%; display: inline-block">
<div class="col-sm-1" style="padding:6px;height: 60px;">
<span style="margin-top:20px" class="glyphicon glyphicon-chevron-left btn btn-default"></span>
</div>
<div class="col-sm-1" style="padding:1px;height: 90px; ">
<img id="image_1" src="img/002.jpg" width="90" height="90"/>
</div>
<div class="col-sm-1" style="padding:1px;height: 90px;">
<img id="image_2" src="img/003.jpg" width="90" height="90"/>
</div>
<div class="col-sm-1" style="padding:1px;height: 90px;">
<img id="image_3" src="img/004.jpg" width="90" height="90"/>
</div>
<div class="col-sm-1" style="padding:1px;height: 90px;">
<img id="image_4" src="img/005.jpg" width="90" height="90"/>
</div>
<div class="col-sm-1" style="padding:1px;height: 90px;">
<img id="image_5" src="img/006.jpg" width="90" height="90"/>
</div>
<div class="col-sm-1" style="padding:1px;height: 90px;">
<img id="image_6" src="img/007.jpg" width="90" height="90"/>
</div>
<div class="col-sm-1" style="padding:1px;height: 90px;">
<img id="image_7" src="img/008.jpg" width="90" height="90"/>
</div>
<div class="col-sm-1" style="padding:1px;height: 90px;">
<img id="image_8" src="img/009.jpg" width="90" height="90"/>
</div>
<div class="col-sm-1" style="padding:1px;height: 90px;">
<img id="image_9" src="img/010.jpg" width="90" height="90"/>
</div>
<div class="col-sm-1" style="padding:1px;height: 90px;">
<img id="image_10" src="img/011.jpg" width="90" height="90"/>
</div>
<div class="col-sm-1" style="padding:1px;height: 60px;">
<span style="margin-top:25px;margin-right: 43px"
class="glyphicon glyphicon-chevron-right btn btn-default"></span>
</div>
<script type="text/javascript">
$(function () {
$('#image_1').click(function () {
$('#show').css('background-image', 'url(img/002.jpg)');
});
$('#image_2').click(function () {
$('#show').css('background-image', 'url(img/003.jpg)');
});
$('#image_3').click(function () {
$('#show').css('background-image', 'url(img/004.jpg)');
});
$('#image_4').click(function () {
$('#show').css('background-image', 'url(img/005.jpg)');
});
$('#image_5').click(function () {
$('#show').css('background-image', 'url(img/006.jpg)');
});
$('#image_6').click(function () {
$('#show').css('background-image', 'url(img/007.jpg)');
});
$('#image_7').click(function () {
$('#show').css('background-image', 'url(img/008.jpg)');
});
$('#image_8').click(function () {
$('#show').css('background-image', 'url(img/009.jpg)');
});
$('#image_9').click(function () {
$('#show').css('background-image', 'url(img/010.jpg)');
});
$('#image_10').click(function () {
$('#show').css('background-image', 'url(img/011.jpg)');
});
});
</script>

As I seee you use bootstrap classes. So you can try to use boostrap standard carousel
You will need to put your images in this block like this
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img id="image_6" src="img/007.jpg" width="90" height="90"/>
<div class="carousel-caption"><!--probably you will need to remove caption if you dont need it -->
</div>
</div>
<div class="item">
<img src="..." alt="...">
<div class="carousel-caption">
</div>
</div>
...
</div>

How to display video duration on onmouseover over video thumbs?

I got a page with video thumbs. I wonder how i can display video duration onmouseover (display the duration in a blackbox in lower left corner of image)the thumb image and hide it again onmouseout? currently as you see in demo the video duration is visiable at all time but i want to make it visiable only when user puts the mouse over the thumb image . I be happy if you guys help me do this task.Thanks in advance.
demo on fiddle :http://jsfiddle.net/shodaburp/k6yAQ/1/
<div class="ListSlideDown">
<div class="ListFadeIn">
<div class="CurrentPage">1</div>
<div class="IsLastPage">0</div>
<div class="SortColumn">latest</div>
<div class="Item ItemLeft">
<div class="Clipping">
<a class="ImageLink" href="/videos/vid1" title="video1">
<img class="ItemImage" src="http://img.youtube.com/vi/bQVoAWSP7k4/0.jpg" alt="video 1" />
<img class="OverlayIcon" src="http://shodaburp.com/jsfiddle/playbutton.png" alt="" />
</a>
<a class="DurationInfo" onmouseover="showDuration2(this);" onmouseout="hideDuration2(this);" href="/videos/vid1"><span class="Text">51:57</span>
</a>
</div>
<div class="Title">
video 1
</div>
<div class="VideoAge">1 day before</div>
<div class="PlaysInfo">broadcast: 604</div>
</div>
<div class="Item ItemMiddle">
<div class="Clipping">
<a class="ImageLink" href="/videos/vid2" title="video2">
<img class="ItemImage" src="http://img.youtube.com/vi/bQVoAWSP7k4/0.jpg" alt="video 2" />
<img class="OverlayIcon" src="http://shodaburp.com/jsfiddle/playbutton.png" alt="" />
</a>
<a class="DurationInfo" onmouseover="showDuration2(this);" onmouseout="hideDuration2(this);" href="/videos/vid2"><span class="Text">12:23</span>
</a>
</div>
<div class="Title">
video 2
</div>
<div class="VideoAge">1 day before</div>
<div class="PlaysInfo">broadcast: 7531</div>
</div>
<div class="Item ItemRight">
<div class="Clipping">
<a class="ImageLink" href="/videos/vid3" title="video3‌">
<img class="ItemImage" src="http://img.youtube.com/vi/bQVoAWSP7k4/0.jpg" alt="video3‌" />
<img class="OverlayIcon" src="http://shodaburp.com/jsfiddle/playbutton.png" alt="" />
</a>
<a class="DurationInfo" onmouseover="showDuration2(this);" onmouseout="hideDuration2(this);" href="/videos/vid3"><span class="Text">17:36</span>
</a>
</div>
<div class="Title">
video 3‌
</div>
<div class="VideoAge">1 day before</div>
<div class="PlaysInfo">broadcast: 996</div>
</div>
<div class="LineSpacer3"></div>
<div class="Item ItemLeft">
<div class="Clipping">
<a class="ImageLink" href="/videos/vid4" title="video4">
<img class="ItemImage" src="http://img.youtube.com/vi/bQVoAWSP7k4/0.jpg" alt="video 4" />
<img class="OverlayIcon" src="http://shodaburp.com/jsfiddle/playbutton.png" alt="" />
</a>
<a class="DurationInfo" onmouseover="showDuration2(this);" onmouseout="hideDuration2(this);" href="/videos/vid4"><span class="Text">31:57</span>
</a>
</div>
<div class="Title">
video 4
</div>
<div class="VideoAge">1 day before</div>
<div class="PlaysInfo">broadcast: 604</div>
</div>
<div class="Item ItemMiddle">
<div class="Clipping">
<a class="ImageLink" href="/video/video5" title="video5">
<img class="ItemImage" src="http://img.youtube.com/vi/bQVoAWSP7k4/0.jpg" alt="video 5" />
<img class="OverlayIcon" src="http://shodaburp.com/jsfiddle/playbutton.png" alt="" />
</a>
<a class="DurationInfo" onmouseover="showDuration2(this);" onmouseout="hideDuration2(this);" href="/videos/vid5"><span class="Text">2:23</span>
</a>
</div>
<div class="Title">
video 5
</div>
<div class="VideoAge">1 day before</div>
<div class="PlaysInfo">broadcast: 2531</div>
</div>
<div class="Item ItemRight">
<div class="Clipping">
<a class="ImageLink" href="/videos/vid6" title="video6‌">
<img class="ItemImage" src="http://img.youtube.com/vi/bQVoAWSP7k4/0.jpg" alt="video6‌" />
<img class="OverlayIcon" src="http://shodaburp.com/jsfiddle/playbutton.png" alt="" />
</a>
<a class="DurationInfo" onmouseover="showDuration2(this);" onmouseout="hideDuration2(this);" href="/videos/vid6"><span class="Text">12:36</span>
</a>
</div>
<div class="Title">
video 6‌
</div>
<div class="VideoAge">1 day before</div>
<div class="PlaysInfo">broadcast: 196</div>
</div>
<div class="LineSpacer3"></div>
<div class="BottomFix"></div>
</div>
</div>

I don't see why would you need JavaScript in this case:
http://jsfiddle.net/DerekL/habb9/
Just use CSS:
.Clipping{ /*<--Change to .Clipping*/
position: relative;
}
.DurationInfo{
position: absolute;
bottom: 5px;
right: 5px;
display: none;
}
.Item:hover .DurationInfo{
display: block;
}
And you can even add a nice transition:
http://jsfiddle.net/DerekL/habb9/2/
.DurationInfo{
opacity: 0;
right: -5px;
transition: opacity .2s ease-in-out, /*Prefix not included*/
right .2s ease-in-out;
}
.Item:hover .DurationInfo{
right: -5px;
opacity: 1;
}

just in case you want to do with jquery you can use hover and mouseleave methods.
http://jsfiddle.net/btevfik/k6yAQ/4/

fadeIn and fadeOut stops after adding animation to width

I have a menu made of div elements when you mouseenter the menu-item it rotates and fades the next div.container nested elements but when i add an animation to the width of the div.container the fadeIn and fadeOut stops it's just rotates them what going with that can somebody change my code so it will work properly i can't figure it out. http://jsfiddle.net/EcgTa/
here is my code
function rotateZIndex(currentMenuItem) {
var $currentContent = $('#' + $(currentMenuItem).attr('class').split(' ')[1]),
$contentContainer = $currentContent.closest('.container'),
$contentItems = $('> div', $contentContainer);
$contentItems.not($currentContent)
.css('z-index', function (i, val) { return val - 1 })
.fadeOut();
$currentContent.css('z-index', $contentItems.length).fadeIn();
}
$('.menu-item').mouseenter(function () {
$(this).closest('.container').next('.container').animate({ width: 200 });
}).mouseleave(function () {
$(this).closest('.container').next('.container').stop(false, true);
}).mouseover(function() {
rotateZIndex(this);
});
<div id="container1" class="container"
style="width:220px; position:relative; float:left">
<div class="menu-item menu-1-1">
<div class="menu-item-middle">
<a href="#"><span class="header"
style="font-family:Verdana; font-size:.95em; font-weight:bold">Technology</span>
<span class="description"
style="font-family:Arial; font-size:.7em; color:#0b83bb">Computers & Office
Supplies</span> </a>
</div>
<div class="menu-item-left">
<div class="item-corner">
</div>
<div class="item-icon">
<img alt="" height="36" src="images/spacer.gif" width="36" />
</div>
</div>
<div class="menu-item-right">
<img alt="" height="44" src="images/spacer.gif" width="26" />
</div>
</div>
<div class="menu-item menu-1-2">
<div class="menu-item-middle">
<a href="#"><span class="header"
style="font-family:Verdana; font-size:.95em; font-weight:bold">Interests</span>
<span class="description"
style="font-family:Arial; font-size:.7em; color:#0b83bb">Movies Books &
Music</span> </a>
</div>
<div class="menu-item-left">
<div class="item-corner">
</div>
<div class="item-icon">
<img alt="" height="36" src="images/spacer.gif" width="36" />
</div>
</div>
<div class="menu-item-right">
<img alt="" height="44" src="images/spacer.gif" width="26" />
</div>
</div>
<div class="menu-item menu-1-3">
<div class="menu-item-middle">
<a href="#"><span class="header"
style="font-family:Verdana; font-size:.95em; font-weight:bold">Entertainment</span>
<span class="description"
style="font-family:Arial; font-size:.7em; color:#0b83bb">Sofware & Games</span>
</a>
</div>
<div class="menu-item-left">
<div class="item-corner">
</div>
<div class="item-icon">
<img alt="" height="36" src="images/spacer.gif" width="36" />
</div>
</div>
<div class="menu-item-right">
<img alt="" height="44" src="images/spacer.gif" width="26" />
</div>
</div>
<div class="menu-item menu-1-4">
<div class="menu-item-middle">
<a href="#"><span class="header"
style="font-family:Verdana; font-size:.95em; font-weight:bold">Kids</span>
<span class="description"
style="font-family:Arial; font-size:.7em; color:#0b83bb">Toys & Games</span>
</a>
</div>
<div class="menu-item-left">
<div class="item-corner">
</div>
<div class="item-icon">
<img alt="" height="36" src="images/spacer.gif" width="36" />
</div>
</div>
<div class="menu-item-right">
<img alt="" height="44" src="images/spacer.gif" width="26" />
</div>
</div>
<div class="menu-item menu-1-5">
<div class="menu-item-middle">
<a href="#"><span class="header"
style="font-family:Verdana; font-size:.95em; font-weight:bold">Clothing</span>
<span class="description"
style="font-family:Arial; font-size:.7em; color:#0b83bb">Shoes Jewelry &
Apparel</span> </a>
</div>
<div class="menu-item-left">
<div class="item-corner">
</div>
<div class="item-icon">
<img alt="" height="36" src="images/spacer.gif" width="36" />
</div>
</div>
<div class="menu-item-right">
<img alt="" height="44" src="images/spacer.gif" width="26" />
</div>
</div>
<div class="menu-item menu-1-6">
<div class="menu-item-middle">
<a href="#"><span class="header"
style="font-family:Verdana; font-size:.95em; font-weight:bold">Pharmacy</span>
<span class="description"
style="font-family:Arial; font-size:.7em; color:#0b83bb">Health & Beauty</span>
</a>
</div>
<div class="menu-item-left">
<div class="item-corner">
</div>
<div class="item-icon">
<img alt="" height="36" src="images/spacer.gif" width="36" />
</div>
</div>
<div class="menu-item-right">
<img alt="" height="44" src="images/spacer.gif" width="26" />
</div>
</div>
<div class="menu-item menu-1-7">
<div class="menu-item-middle">
<a href="#"><span class="header"
style="font-family:Verdana; font-size:.95em; font-weight:bold">Home</span>
<span class="description"
style="font-family:Arial; font-size:.7em; color:#0b83bb">Furniture Outdoors
& Garden</span> </a>
</div>
<div class="menu-item-left">
<div class="item-corner">
</div>
<div class="item-icon">
<img alt="" height="36" src="images/spacer.gif" width="36" />
</div>
</div>
<div class="menu-item-right">
<img alt="" height="44" src="images/spacer.gif" width="26" />
</div>
</div>
</div>
<div id="container2" class="container" style="position:relative; float:left">
<div id="menu-1-1"
style="height:300px; margin-left:2px; position:absolute; background-color:Aqua; z-index:0">
Some Text</div>
<div id="menu-1-2"
style="height:280px; margin-left:2px; position:absolute; background-color:Blue; z-index:1">
Some Text</div>
<div id="menu-1-3"
style="height:260px; margin-left:2px; position:absolute; background-color:Fuchsia; z-index:2">
Some Text</div>
<div id="menu-1-4"
style="height:240px; margin-left:2px; position:absolute; background-color:Gray; z-index:3">
Some Text</div>
<div id="menu-1-5"
style="height:220px; margin-left:2px; position:absolute; background-color:Green; z-index:4">
Some Text</div>
<div id="menu-1-6"
style="height:200px; margin-left:2px; position:absolute; background-color:Lime; z-index:5">
Some Text</div>
<div id="menu-1-7"
style="height:180px; margin-left:2px; position:absolute; background-color:Maroon; z-index:6">
Some Text</div>
</div>
div.menu-item
{
padding-left:41px; padding-right: 25px; cursor:hand
}
div.menu-item-left
{
width:41px; height:44px; float:left; position:relative;right:41px; margin-left:-100%
}
div.menu-item-left .item-corner
{
width:3px; height:44px; float:left;
}
div.menu-item-left .item-corner.selected
{
background:url('images/Menu_Item_Corner.jpg') no-repeat;
}
div.menu-item-left .item-icon
{
float:right;
}
div.menu-item-left .item-icon.selected
{
background:url('images/Menu_Item_Middle.jpg') repeat-x;
}
div.menu-item-left .item-icon img
{
margin-top:3px; margin-bottom:3px; border:1px solid #969ba0
}
div.menu-item-middle
{
width:100%; height:44px; position:relative; float:left
}
div.menu-item-middle.selected
{
background:url(images/Menu_Item_Middle.jpg) repeat-x;
}
div.menu-item-middle a
{
display:block; text-decoration:none; color:#0b83bb
}
div.menu-item-middle span.header
{
display:block; margin-top:6px; margin-left:3px
}
div.menu-item-middle span.description
{
display:block; margin-left:3px
}
div.menu-item-right
{
width:26px; height:44px; float:left; position:relative; margin-right:-26px; background:url(images/Menu_Item_Arrow.jpg) no-repeat;
}
div.menu-item-right.selected
{
background:url('images/Menu_Item_Arrow_Over.jpg') no-repeat;
}

This should fix it:
.container{
overflow: visible !important
}
EDIT: a bit more research turned up this explanation:
Apparently when you animate the width, jquery sets the overlow of the item to hidden. This forces it to stay visible.
Similar to this: JQuery: Children Disappear on Parent Size Animation

We Keep Coding

JavaScript is the programming language of the Web.

How use Overflow Hidden and Position Absolute? - javascript

Basically you have to remove the overflow:hidden property from .item-active and also from .carousel-inner. If you see the cycle image breaking out of the div, limit the size of that image. Also you seem to be having repetitive classes in your css file. DEMO FIDDLE

Related

CSS image is not in row. How to resolve?

Bootstrap carousel jQuery error

photos slider by html and javascript

How to display video duration on onmouseover over video thumbs?

fadeIn and fadeOut stops after adding animation to width

Categories

Resources