I am trying to scroll to right of each element, but could not calculate right of element and scroll to it.
var $scroller = $('.scroller');
$('button').on('click', function() {
var divIdx = $('input').val();
var scrollTo = $('#d' + divIdx)
.css('background', '#9f3')
.position().left;
console.log(scrollTo);
$scroller
.animate({
'scrollLeft': scrollTo
}, 500);
});
.scroller {
width: 300px;
height: 100px;
overflow-x: auto;
overflow-y: hidden;
direction: rtl;
}
.container {
position: relative;
/*important for the .position() method */
height: 100px;
width: 770px;
}
.container div {
height: 90px;
width: 60px;
float: right;
margin: 5px;
background: #39f;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="scroller">
<div class="container">
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<div id="d4"></div>
<div id="d5"></div>
<div id="d6"></div>
<div id="d7"></div>
<!-- ... -->
</div>
</div>
<button>Scroll to: </button> <input type="text" value="4" />
How to calculate right of element and scroll to right of element?
How to calculate right of element and scroll to right of element?
How to calculate right of element and scroll to right of element?
You can use this one.
var $scroller = $('.scroller');
$('button').on('click', function() {
var divIdx = $('input').val();
var div = $('#d' + divIdx);
div.css('background', '#9f3');
var divLeft = div.offset().left;
var divWidth = div.width();
var scrollerWidth = $('.scroller').width();
var scrollTo = divLeft - scrollerWidth + divWidth;
$scroller
.animate({
'scrollLeft': scrollTo
}, 500);
});
.scroller {
width: 300px;
height: 100px;
overflow-x: auto;
overflow-y: hidden;
}
.container {
position: relative;
/*important for the .position() method */
height: 100px;
width: 770px;
}
.container div {
height: 90px;
width: 60px;
float: left;
margin: 5px;
background: #39f;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="scroller">
<div class="container">
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<div id="d4"></div>
<div id="d5"></div>
<div id="d6"></div>
<div id="d7"></div>
<!-- ... -->
</div>
</div>
<button>Scroll to: </button> <input type="text" value="5" />
You just need to add some right margin and it's all done!
var $scroller = $('.scroller');
$('button').on('click', function() {
var divIdx = $('input').val();
var scrollTo = $('#d' + divIdx)
.css('background', '#9f3')
.position().left;
console.log(scrollTo);
$scroller
.animate({
'scrollLeft': scrollTo
}, 500);
});
.scroller {
width: 300px;
height: 100px;
overflow-x: auto;
overflow-y: hidden;
}
.container {
position: relative;
/*important for the .position() method */
height: 100px;
width: 600px;
}
.container div {
height: 90px;
width: 60px;
float: right;
margin: 5px;
background: #39f;
}
.container div:first-child {
margin-right: 240px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="scroller">
<div class="container">
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<div id="d4"></div>
<div id="d5"></div>
<div id="d6"></div>
<div id="d7"></div>
<!-- ... -->
</div>
</div>
<button>Scroll to: </button> <input type="text" value="4" />
There are two points to consider -
position().left gives you the value of the distance upto left edge of element only. So to get the value upto right edge, you can take left position of the element + the width of the element. $('#d' + divIdx).position().left + $('#d' + divIdx).width()
There should be additional one item's width white space after the last item which allow the scrollbar to move upto the end of the last item.
Related
Note: This question is an update to How to disable scroll left?.
I'd like to get an div-element that is just scrollable into ONE directions (in my case only "right"). Scrolling to the left direction should get canceled.
I've developed some jQuery code that should be able to prevent the scrolling in the unwanted direction, what kind of is working so far!
But I got some issues because scrolling to the prevented direction obviously looks super sticky & ugly.
let value = $("#parent").scrollLeft()
$("#parent").scroll(function(e) {
let direction = (this.scrollLeft > value) ? 'right' : ((this.scrollLeft === value) ? false : 'left');
console.log(direction)
if (direction == "left") {
this.scrollLeft = value;
e.preventDefault();
e.stopPropagation();
}
value = $("#parent").scrollLeft()
})
#container {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
}
#parent {
position: relative;
width: 90%;
height: 80%;
overflow-y: hidden;
overflow-x: scroll;
white-space: nowrap;
background: red;
}
.child {
display: inline-block;
position: relative;
margin-left: 3%;
width: 40px;
height: 40px;
background: gray;
}
.as-console-wrapper {
height: 20px!important;
}
.as-console-row {
background: green!important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div id="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="child">9</div>
<div class="child">10</div>
<div class="child">12</div>
<div class="child">13</div>
<div class="child">14</div>
<div class="child">15</div>
<div class="child">16</div>
<div class="child">17</div>
<div class="child">18</div>
<div class="child">19</div>
<div class="child">20</div>
</div>
</div>
Have a look: Scrolling back looks super ugly:
How to fix this?
Im trying to achieve this example for my layout.
https://youtu.be/itV7jvKpWXc
when i scroll content horizontally, my sidebar should change in width for the same amount of horizontal scroll till i reach min-width of sidebar ?
Any easy way to approach it ?
Add to your main-content onscroll
<div class="main-content" onscroll="resizeSidebar()"></div>
In your javascript add the function:
function resizeSidebar(){
document.getElementById("sidebar").style.width = "50px";
}
you can add to the sidebar css:
.sidebar {
transition: 0.5s;
}
It makes the animation for open with slide
this is plus minus what i was trying to achieve, tho it have smull ugly bug when i use horizontal scroll when sidebar reduces in size it makes scrollbar jump also :D
$('.content').scroll(function() {
var scrolling = $(".content").scrollLeft();
console.log(scrolling);
if (scrolling >= 50) {
if(!$(".sidebar").hasClass('SmallSidebar')){
$(".sidebar").addClass("smallSidebar");
}
}
else{
$(".sidebar").removeClass("smallSidebar");
}
if (scrolling >= 50) {
if(!$(".content").hasClass('smallContent')){
$(".content").addClass("smallContent");
}
}
else{
$(".content").removeClass("smallContent");
}
});
$(function(){
var curDown = false,
curYPos = 0,
curXPos = 0;
$('.content').mousemove(function(m){
if(curDown === true){
$('.content').scrollTop($('.content').scrollTop() + (curYPos - m.pageY));
$('.content').scrollLeft($('.content').scrollLeft() + (curXPos - m.pageX));
}
});
$('.content').mousedown(function(m){
curDown = true;
curYPos = m.pageY;
curXPos = m.pageX;
});
$('.content').mouseup(function(){
curDown = false;
});
})
var width = 0;
$('.inner-content').each(function() {
width += $(this).outerWidth( true );
});
$('.block').css('width', width);
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
div {
box-sizing: border-box;
}
.wrapper {
width: 100%;
height: 100vh;
}
.sidebar {
width: 33.33333%;
float: left;
background: blue;
height: 100vh;
transition: width 0.2s;
}
.sidebar.smallSidebar {
width: 80px;
}
.content {
width: 66.66666%;
float: left;
background: #171717;
height:100%;
overflow-y:hidden;
height: 100vh;
transition: width 0.2s;
position: relative;
}
.content.smallContent {
width: calc(100% - 80px);
}
.inner-content {
height: 100%;
padding: 50px 0px;
box-sizing: border-box;
display: flex;
align-items: center;
transition: width 0.2s;
position: absolute;
}
.block {
background: yellow;
max-width: 320px;
height: 400px;
float: left;
width: 100%;
margin: 0 20px;
box-sizing: border-box;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="sidebar"></div>
<div class="content">
<div class="inner-content">
<div style="background: #c39eb2;" class="block"></div>
<div style="background: #a4af93" class="block"></div>
<div style="background: #0fe7ad;" class="block"></div>
<div style="background: #f75f31;" class="block"></div>
<div style="background: #9473c0;" class="block"></div>
<div style="background: #46087f;" class="block"></div>
<div style="background: #f59000;" class="block"></div>
<div style="background: #22e318;" class="block"></div>
<div style="background: #71454e;" class="block"></div>
<div style="background: #7eb544;" class="block"></div>
<div style="background: #2fe218;" class="block"></div>
<div style="clear: both;"></div>
</div>
</div>
<div style="clear: both;"></div>
</div>
I just want the ability to be able to pause the animation on mouse hover. I trying to looking good way to do that, but there was some issues. I tested some hover/stop functions, but I can't get these working correctly.
jQuery(document).ready(function() {
setInterval(function() {
jQuery('#testimonials .slide').filter(':visible').fadeOut(1000, function() {
if (jQuery(this).next('.slide').size()) {
jQuery(this).next().fadeIn(1000);
} else {
jQuery('#testimonials .slide').eq(0).fadeIn(1000);
}
});
}, 5000);
});
#quote {
width: 100%;
height: 130px;
background-position: center bottom;
background-repeat: no-repeat;
margin-bottom: 65px;
overflow: hidden;
}
#testimonials .slide {
color: #555555;
}
#testimonials .testimonial-quote {
display: inline;
width: 600px;
height: 170px;
margin: 0;
padding: 0;
float: left;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="quote">
<div id="testimonials">
<div class="slide">
<div class="testimonial-quote">
<p>Text 1</p>
<h4 class="title">Title 1</h4>
</div>
</div>
</div>
</div>
You can achieve this by calling clearInterval() when the slide is hovered, then re-creating the interval again when the mouse leaves the slide, something like this:
jQuery(document).ready(function($) {
var $slides = $('#testimonials .slide');
function beginSlideInterval() {
return setInterval(function() {
$slides.filter(':visible').fadeOut(1000, function() {
var $next = $(this).next().length ? $(this).next() : $slides.first();
$next.fadeIn(1000);
});
}, 3000);
}
var slideInterval = beginSlideInterval();
$slides.on('mouseenter', function() {
clearInterval(slideInterval);
}).on('mouseleave', function() {
slideInterval = beginSlideInterval();
});
});
#quote {
width: 100%;
height: 130px;
background-position: center bottom;
background-repeat: no-repeat;
margin-bottom: 65px;
overflow: hidden;
}
#testimonials .slide {
color: #555555;
}
#testimonials .testimonial-quote {
display: inline;
width: 600px;
height: 170px;
margin: 0;
padding: 0;
float: left;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="quote">
<div id="testimonials">
<div class="slide">
<div class="testimonial-quote">
<p>Text 1</p>
<h4 class="title">Title 1</h4>
</div>
</div>
</div>
</div>
Note that I shortened the interval to make the effect more obvious.
I want the overlay div to take full container width (col-md-12). Now of course, it's only taking up col-md-4 width which is it's parent.
$(document).ready(function() {
$('button').click(function() {
$('#overlay').toggleClass('active');
// calcs bottom of button
var bottom = $(this).position().top + $(this).outerHeight(true);
$('#overlay').css({
'top': bottom + 'px',
});
});
$('#close').click(function() {
$('#overlay').removeClass('active');
});
});
#overlay {
z-index: 10;
margin-left: 15px;
position: absolute;
width: 100%;
background: #E5E5E5;
text-align: center;
min-height: 500px;
display: none;
left: 0;
}
#overlay.active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-md-4">
<button type="button" class="btn btn-link">ADD GAME</button>
<div id="overlay">
X
<h2>This is an overlay</h2>
</div>
</div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</div>
Set position: static; to .col-md-4 and position: relative; to .container
$(document).ready(function() {
$('button').click(function() {
$('#overlay').toggleClass('active');
// calcs bottom of button
var bottom = $(this).position().top + $(this).outerHeight(true);
$('#overlay').css({
'top': bottom + 'px',
});
});
$('#close').click(function() {
$('#overlay').removeClass('active');
});
});
#overlay {
z-index: 10;
margin-left: 15px;
position: absolute;
width: 100%;
background: #E5E5E5;
text-align: center;
min-height: 500px;
display: none;
left: 0;
}
#overlay.active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<style>
.container {
position: relative;
}
.col-md-4 {
position: static;
}
</style>
<div class=container>
<div class="row">
<div class="col-md-4">
<button type="button" class="btn btn-link">ADD GAME</button>
<div id="overlay">
X
<h2>This is an overlay</h2>
</div>
</div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</div>
</div>
Try this I think this may work for you. Am not sure because your Q is not that much clear.I have removed margin-left: 15px as you have put left:0; at the bottom.
#overlay {
z-index: 10;
position: absolute;
background: #E5E5E5;
text-align: center;
min-height: 500px;
display: none;
left: 0;
right:0;/*Added right attribut to make width 100%*/
top: 0;/*Added top attribut to make your div attach to the top of the parent div*/
}
#overlay.active {
display: inline-block;
}
This will only work if the parent of the #overlay is positioned as relative(position: relative;) because the absolute position div always depend on its relative parent if there is none then it will align according to the HTML Page.
How about adding overlay as sibling to row
<div class="row">
<div class="col-md-4">
<button type="button" class="btn btn-link">ADD GAME</button>
</div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</div>
<div id="overlay">
X
<h2>This is an overlay</h2>
</div>
<div id="home">
<div id="logo"> </div>
<div id="foot"> <div class="button"> CLICK ME</div>
<div class="button two"> CLICK ME</div> </div>
</div>
<div id="show">
TEST TEST TEST TEST
</div>
$('.button').click(function(){
$('#show').show();
})
#home {
width: 400px;
height: 400px;
background-color: #ccffff;
}
#logo {
width: 100%;
height: 300px;
background-color: #0099ff;
}
#foot {
width: 100%;
height: 100px;
background-color: #009999;
}
.button {
width: 90px;
height: 30px;
background-color: red;
margin-left: 50px;
}
i would like if i click RED .button then GREEN .show show me over the red button and if i click outside GREEN .show then this hide.
LIVE: http://jsfiddle.net/YeE4p/1/
Is this somewhat close to what you are looking for?
http://jsfiddle.net/neilheinrich/YeE4p/6/
I had to change the #show div to be absolutely positioned and use this javascript:
$('.button').click(function(){
var $show = $('#show');
var position = $(this).offset()
$show.css({
"left": position.left + "px",
"top":position.top + "px"
}).show();
$(window).bind("mousedown", function(e){
if (!($(e.target).attr("id") === "show")) {
$("#show").hide();
$(window).unbind("mousedown");
}
});
})
Try this out
http://jsfiddle.net/Quincy/YeE4p/4/
$('.button').click(function(event){
$('#show').show();
event.stopPropagation();
})
$('body').click(
function(){
$('#show').hide();
}
)