I am trying to do the responsive carousel which should proportionally hide last item on screen re-size. In the code below everything works fine and does what I want, except one thing. When slide is moving item disappears and quickly appears back the next one in the row. I need to put one item on background and make it invisible somehow, but I could not find the way to do it not loosing centered position of all items.
HTML
<div id="slider-wrapper">
<div class="slider">
<div class="slide">
<div class="item">
slide1
</div>
</div>
<div class="slide">
<div class="item alt">
slide2
</div>
</div>
<div class="slide">
<div class="item">
slide3
</div>
</div>
<div class="slide">
<div class="item alt">
slide 4
</div>
</div>
</div>
</div>
<div id="controls">
<div id="prev">PREV</div>
<div id="next">NEXT</div>
</div>
CSS
#slider-wrapper {
position: relative;
margin: 50px auto;
overflow: hidden;
text-align: center;
width: 100%;
height:200px;
}
#slider-wrapper .slider {
position: relative;
width: 100%;
}
#slider-wrapper .slide {
position: relative;
display: inline-block;
width: 250px;
height:200px;
}
.item{
line-height: 200px;
background: pink;
}
.item.alt{
line-height: 200px;
background: red;
}
#controls{
position: relative;
height: 50px;
width: 220px;
margin: 0 auto;
}
#controls div{
position: absolute;
height: 50px;
width: 100px;
background: grey;
color: white;
text-align: center;
line-height: 50px;
}
#next{
margin-left: 120px;
}
JQuery
var slider = function(){
var slideWidth = $('.slide').width();
$('.slide:last-child').prependTo('.slider');
function moveLeft() {
$('.slider').animate({
left: + slideWidth
}, 200, function () {
$('.slide:last-child').prependTo('.slider');
$('.slider').css('left', '');
});
};
function moveRight() {
$('.slider').animate({
left: - slideWidth
}, 200, function () {
$('.slide:first-child').appendTo('.slider');
$('.slider').css('left', '');
});
};
$('#prev').on("click",function(){
moveRight();
});
$('#next').on("click",function(){
moveLeft();
});
}
$(document).ready(function(){
slider();
});
Here also a JSFiddle example https://jsfiddle.net/Lv64275r/2/
Related
I am trying to find element with smoothscroll effect when I click button, How I can scroll into target if target is inside div.
I'm trying this way, but didnt work. Is it possible scroll to target if its inside div
$(document).ready(function(){
$('button').click(function(){
$('.box').animate({
scrollTop: $("#find").offset().top
}, 2000);
});
});
.box{
clear: both;
}
.left{
float: left;
width: 20%;
height: 200px;
overflow-x: hidden;
background-color: red;
}
#find{
margin-top: 400px;
}
#find p{
background-color: green
}
.right{
float: left;
margin-left: 10px;
width: 50%;
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
<div class="left">
<div id="find">
<p>find me</p>
</div>
</div>
<div class="right">
<button>jump</button>
</div>
</div>
Your logic is correct, you're just scrolling the wrong element. You need to call animate() on the .left element as that is the one which is overflowed:
$(document).ready(function() {
$('button').click(function() {
$('.left').animate({
scrollTop: $("#find").offset().top
}, 2000);
});
});
.box {
clear: both;
}
.left {
float: left;
width: 20%;
height: 200px;
overflow-x: hidden;
background-color: red;
}
#find {
margin-top: 400px;
}
#find p {
background-color: green
}
.right {
float: left;
margin-left: 10px;
width: 50%;
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
<div class="left">
<div id="find">
<p>find me</p>
</div>
</div>
<div class="right">
<button>jump</button>
</div>
</div>
You need to add scrollTop on .left, as scrollbar appears there instead of .box i.e. overflow-y is visible and scroll-able on .left and not on .box.
$(document).ready(function(){
$('button').click(function(){
var bt = $("#find").offset().top;
$('.left').animate({
scrollTop: bt
}, 2000);
});
});
.box{
clear: both;
}
.left{
float: left;
width: 20%;
height: 200px;
overflow-x: hidden;
background-color: red;
}
#find{
margin-top: 400px;
}
#find p{
background-color: green
}
.right{
float: left;
margin-left: 10px;
width: 50%;
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
<div class="left">
<div id="find">
<p>find me</p>
</div>
</div>
<div class="right">
<button>jump</button>
</div>
</div>
I created this code for a slider. When I hover the thumbnail image it shows me image, but I need to create an automatic slider. How can i do this?
/******************************************************************************************************/
.sliderconteainer {
width: 100%;
position: relative;
border: 2px double silver;
border-radius: 5px;
}
.thmbnail {
width: 25%;
height: 100px;
float: left;
}
.slide {
width: 100%;
height: 300px;
position: absolute;
float: right;
left: 0;
top: 0;
opacity: 0;
}
.slide img {
height: 300px;
width: 100%;
}
.thmbnail img {
width: 100%;
height: 95%;
border: 2px solid #EEEEEE;
border-radius: 5px;
}
.content-placeholder {
width: 100%;
height: 300px;
}
.info {
background-color: black;
z-index: 99;
margin-top: -66px;
position: absolute;
width: 100%;
padding-right: 10px;
opacity: .75;
border-radius: 5px;
}
.info p {
color: #ABB3BD;
font-family: 'B Mitra';
}
.info h5 {
font-family: 'B Titr';
color: #ffffff;
}
.thmbnail:hover .slide {
opacity: 1;
}
.thmbnail:hover .thmbnail img {
border: 2px solid #56656E;
}
#main {
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="main">
<div class=" sliderconteainer col-md-5 col-sm-5">
<div class="content-placeholder"></div>
<div class="thmbnail">
<div class="slide">
<img src="~/Image/SiteDesign/profile.jpg" class="img-responsive"/>
<div class="info">
<h5>عنوان برای اسلید اول</h5>
<p>توضیحالت اسلاید دوم</p>
</div>
</div>
<img src="~/Image/SiteDesign/profile.jpg"/>
</div>
<div class="thmbnail">
<div class="slide">
<img src="~/Image/Slider/8.jpg"/>
<div class="info">
<h5>عنوان برای اسلید اول</h5>
<p>توضیحالت اسلاید دوم</p>
</div>
</div>
<img src="~/Image/Slider/8.jpg"/>
</div>
<div class="thmbnail">
<div class="slide">
<img src="~/Image/Slider/image-slider-2.jpg"/>
<div class="info">
<h5>عنوان برای اسلید اول</h5>
<p>توضیحالت اسلاید دوم</p>
</div>
</div>
<img src="~/Image/Slider/image-slider-2.jpg"/>
</div>
<div class="thmbnail ">
<div class="slide">
<img src="~/Image/Slider/Megumi-4565.jpg"/>
<div class="info">
<h5>عنوان برای اسلید اول</h5>
<p>توضیحالت اسلاید دوم</p>
</div>
</div>
<img src="~/Image/Slider/Megumi-4565.jpg"/>
</div>
</div>
</div>
If you want to change things automatically, you can use the build-in JavaScript function setInterval(xfunction, xInterval), which calls xFunction, every xInterval
setInterval(function() {
console.log("MOVE IT");
moveLeft();
}, 1000);
As #dennis-koch mentioned, I would also have a look at plugins you may use for a slider.
$("button.filters").click(function(){
$("div.second").slideToggle("slow");
});
.main {
position: relative;
display:block;
height: 320px;
color: #fff;
background-color: grey;
}
.first {
position: absolute;
bottom: 15%;
height: 70px;
background-color: white;
}
.second {
position: absolute;
bottom: 0%;
height: 30px;
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
<div class="first">
<p>some content</p>
<button class="filters">filters</button>
</div>
<div class="second">
<p>other content</p>
</div>
</div>
Please check this fiddle
https://jsfiddle.net/6d1t5jr8/
I need help to make .second div to .slideToggle from bottom border of .first div.
The problem:
Because of the bottom:0 in that way, the the height of the .second div start from the bottom.
The solution:
Try to wrap the .second with wrapper. So the slide animation will start from the top.
Like this:
jQuery(document).ready(function () {
$("button.filters").click(function(){
$("div.second").slideToggle("slow");
});
});
.main {
position: relative;
display:block;
height: 320px;
color: #fff;
background-color: grey;
}
.first {
position: absolute;
bottom: 15%;
height: 70px;
background-color: white;
}
.second-wrapper {
position: absolute;
bottom: 0%;
height: 30px;
}
.second {
display:none;
background-color: green;
}
.second p {
margin:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
<div class="first">
<p>some content</p>
<button class="filters">filters</button>
</div>
<div class="second-wrapper">
<div class="second">
<p>other content</p>
</div>
</div>
</div>
I'm looking on Cnet's homepage and they have a cool over-lapping setup right now. Click to see their homepage.
How exactly is this done?
I tried to figure it out, but I can't quite think of how to do it. Within my example the green would be the ad part on the Cnet homepage (with Zebras).
#blue, #green, #red {
height: 500px;
width: 100%;
}
#blue {
background: blue;
z-index: 1;
}
#green {
background: green;
position: fixed;
margin-top: 200px;
}
#red {
background: red;
z-index: 1;
}
<div id="blue"></div>
<div id="green"></div>
<div id="red"></div>
Heres a codepen
<div class="root">
<div class="content">
<div id="green">
<label>ADD GOES HERE</label>
</div>
<div class="scroll">
<div id="blue"></div>
<div id="red"></div>
<div id="yellow"></div>
</div>
</div>
</div
css:
.content {
position: relative;
.scroll {
height: 500px;
overflow-y: scroll;
}
#blue,
#green,
#red,
#yellow {
height: 500px;
width: 100%;
}
#blue {
background: blue;
}
#green {
position: absolute;
top: 0;
z-index: -1;
background: green;
}
#red {
background: red;
margin-top: 500px;
}
#yellow {
background: yellow;
margin-top: 500px;
}
}
theres room to improve but the gist is that the advertisement (green div) is positioned absolutely on the same level as a div that wraps your scrollable items.
I have built a div container with HTML and jQuery, where when you hover over it another panel slides over the top. But I am experiencing the sliding panel "yoyo" about. I think this is because when the panel slides over the div the hover state is triggered then lost and so the panel pops up and down again continuously.
What I want to happen is while you are hovering over anywhere in the square the panel shows and when you are not in the square it doesn't.
Here is a fiddle so you can see what the problem is, maybe it is easier explained this way.
https://jsfiddle.net/xa5gtd2u/3/
Also here is the code
HTML
<div class="container">
<div class="services-blocks">
<img class="alignnone size-full wp-image-1974" src="http://placehold.it/250x250" alt="Design" width="250" height="250" />
<h3>title here</h3>
</div>
<div class="services-slide-panel">
<h3>title here</h3>
Some text here
Some text here
Some text here
Some text here
</div>
</div>
CSS
.services-slide-panel {
background: #f3535e;
width: 100%;
position: absolute;
left: 0;
bottom: 0;
top: 0;
display: none;
color: #ffffff;
}
.services-slide-panel h3 {
color: #ffffff;
}
.services-blocks h3 {
text-align: center;
position: absolute;
bottom: 5%;
width: 100%;
color: #ffffff;
}
.container {
width: 250px;
height: 250px;
position: relative;
}
jQuery
$(document).ready(function() {
$(".services-blocks").hover(function() {
$(this).next(".services-slide-panel").slideToggle("slow");
});
});
CSS3 transition is always a better pick to do these kind of effects. Moreover you have to hover() on .container otherwise the slided in div will take the hover instead and the will invoke hoverout part of the hover() function.
$(document).ready(function() {
$(".container").hover(function() {
$(this).find(".services-slide-panel").addClass("slow");
}, function() {
$(this).find(".services-slide-panel").removeClass("slow");
});
});
.services-slide-panel {
background: #f3535e;
width: 100%;
position: absolute;
left: 0;
bottom: 0;
top: 110%;
color: #ffffff;
transition: all 0.3s ease;
}
.services-slide-panel.slow {
top: 0%;
}
.services-slide-panel h3 {
color: #ffffff;
}
.services-blocks h3 {
text-align: center;
position: absolute;
bottom: 5%;
width: 100%;
color: #ffffff;
}
.container {
width: 250px;
height: 250px;
position: relative;
overflow:hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="services-blocks">
<img class="alignnone size-full wp-image-1974" src="http://placehold.it/250x250" alt="Design" width="250" height="250" />
<h3>title here</h3>
</div>
<div class="services-slide-panel">
<h3>title here</h3> Some text here Some text here Some text here Some text here
</div>
</div>
Fiddle here