I have a set of seven div's with the following properties:
height: 100px;
width: 100px;
display: inline-block;
I have a wrapper div containing these seven blocks with only enough room to fit four and change.
The overflow is hidden.
How can I make this function so that when you clicked and dragged horizontally, or swiped with your finger on mobile, the entire row of div blocks would slide to show the previously hidden ones?
Please refer to this jsFiddle for the example.
We can use css or jQuery here.
*Bonus, show fractions of otherwise entirely hidden div's at the edges of the container.
Based on jfriend00's answer I modified this so it will work on touch/click and move with the mouse.
var last_x = null;
var holding = false;
//Mark the wrapper as clicked/touched
$('.wrapper').mousedown(function(){
holding=true;
});
//We do this on document so that even if movement goes outside of the container the event will fire
$(document).mouseup(function(){
holding=false;
});
$('.wrapper').mousemove(function(e){
if(last_x === null || !holding) //If this is the first movement
{
last_x = e.pageX;
return;
}
var ammount = e.pageX - last_x;
$('.slider',this).css('margin-left', '+=' + ammount);
last_x = e.pageX;
});
The gist of how this works is that when the mousedown event is detected on the container the script starts tracking all mouse movement and moves the content with the mouse. When the mouse is released it stop tracking movement.
Fiddle: http://jsfiddle.net/NvJam/2/
Since no one has mentioned jQuery.Kinetic I'll add this:
<div class="carousel">
<div class="wrapper">
<div class="first">First</div>
<div class="second">Second</div>
<div class="third">Third</div>
<div class="fourth">Fourth</div>
<div class="fifth">Fifth</div>
<div class="sixth">Sixth</div>
<div class="seventh">Seventh</div>
</div>
</div>
$('.carousel').kinetic();
Demo: http://jsfiddle.net/louisbros/2pRBg/6/
see here
.wrapper {
width: 900px;
height: 100px;
overflow: hidden;
}
You can put an additional container div and use absolute positioning on that div to move the items left/right. Here's a demo:
http://jsfiddle.net/jfriend00/7edc9/
HTML looks like this:
<div class="wrapper">
<div class="slider">
<div class="first">First</div>
<div class="second">Second</div>
<div class="third">Third</div>
<div class="fourth">Fourth</div>
<div class="fifth">Fifth</div>
<div class="sixth">Sixth</div>
<div class="seventh">Seventh</div>
</div>
</div>
You weren't entirely clear how you wanted to move them on non-touch screens, but here's some event handlers that work on buttons:
$("#left").click(function() {
$(".slider").stop(true, true).animate({left: "-=125px"}, 500);
});
$("#right").click(function() {
$(".slider").stop(true, true).animate({left: "+=125px"}, 500);
});
Something similar could be hooked up for touch events.
Even better solution: use the JQuery UI draggable:
$('.slider').draggable({
axis: 'x',
});
http://jsfiddle.net/DCuGV/2/
Related
I have a horizontal slider for a web app which will be run in mobile browsers. I want to apply some styling right at the moment the scroll ends caused by a swipe gesture. This is the my html and css
.container {
display: flex;
overflow: scroll;
}
.box {
flex-shrink: 0;
width: 25%;
height: 50px;
background: yellow;
}
.box+.box {
margin-left: 15px;
}
<body>
<div class="container">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
</body>
Please note that I am not interested in finding when a user has fully scrolled the element, I am specifically interested in when a scroll ends caused by a swipe gesture. There is no scrollStart or scrollEnd event for browsers, there is only scroll event, but scroll event contains no such info allowing me to find that there are no scroll events afterwards.
There are touchstart and touchend events that could help you do what you want to do.
Check this out:https://developer.mozilla.org/en-US/docs/Web/API/Touch_events
The question is quite old, but I couldn't find the answer, and I have just had to solve the problem myself, so I thought I can share this.
On a mobile device, after the swipe is done, and after touchEnd event, scrolling still takes some time. This makes it hard to manipulate scrollLeft and scrollTop properties in touchEnd callback.
I solved this with window.requestAnimationFrame (please note a polyfill is here: https://www.paulirish.com/2011/requestanimationframe-for-smart-animating/)
How it works:
On touchEnd you start recording current scroll of the container - this is currentScroll variable.
You call animation frame, and in the callback compare current scroll of the element (container.scrollLeft) with the recorded currentScroll. If they are the same, that means scrolling has ended. You can log it in the console or do anything else in here.
If they are not the same, update currentScroll to reflect current scroll position and then call animation frame with the same callback, and it will check if container is still scrolling.
Please note that in this case I used only scrollLeft property, since we are only swiping horizontally. The same can be used to test scrollTop.
var container = document.getElementById('container')
var detectScrollEnded = function(ev) {
var currentScroll = container.scrollLeft
function testIfScrolling() {
if (container.scrollLeft !== currentScroll) {
currentScroll = container.scrollLeft
console.log('still scrolling...')
window.requestAnimationFrame(testIfScrolling)
} else {
console.log('scrolling stopped!')
}
}
window.requestAnimationFrame(testIfScrolling)
}
container.addEventListener('touchend', detectScrollEnded)
.container {
display: flex;
overflow: scroll;
}
.box {
flex-shrink: 0;
width: 25%;
height: 50px;
background: yellow;
}
.box+.box {
margin-left: 15px;
}
<body>
<div class="container" id="container">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
</body>
Have a look at the code below, there is a jsbin for it too here: http://output.jsbin.com/qosevogeka/
var container = document.querySelector('.container')
var firstEventHandled = false
container.addEventListener('scroll', function(e) {
if (firstEventHandled) return
console.log(e.target.scrollLeft)
firstEventHandled = true
})
.container {
display: flex;
overflow: scroll;
}
.box {
flex-shrink: 0;
width: 40%;
height: 50px;
background: yellow;
}
.box+.box {
margin-left: 15px;
}
<body>
<div class="container">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
</body>
If you scroll the resulting view, you will see that 0 is never logged to the scroll which I expect since the scrollLeft was 0 before I started scrolling. Where does this inaccuracy with the scroll events come from? Thanks
Where does this inaccuracy with the scroll events come from? Thanks
As per documentation
The scroll event is fired when the document view or an element has
been scrolled.
So this line
console.log(e.target.scrollLeft)
is logging the e.target.scrollLeft after the scroll has happened, since this function is an event-handler which is executed after the event has happened already. And by definition, once the scroll has happened you cannot be at the starting point.
If you scroll the resulting view, you will see that 0 is never logged
to the scroll which I expect since the scrollLeft was 0 before I
started scrolling
Unfortunately, there is no event called scrollstart like dragstart or mousedown or keydown, so there is no way to know when the scroll had started and we only know once the scroll has happened.
I have one wrapper div (the grey background) and 5 squares inside it. After the press of a button, the blue one moves and has to stop at the end of the wrapper div, but it goes behind it. How do I make it go to the end of the div, and not behind it?
There is what I've tried so far:
<button id = "start">
Start
</button>
<div style="background-color:rgb(201, 201, 201);width:80%;height:250px" id="horsewrapper">
<div style="height: 50px; width: 100px; text-align: center; background-color: blue;" id="horse1">1</div>
<div style="background-color:red;text-align:center;height:50px;width:100px" id="horse2">1</div>
<div style="background-color:green;text-align:center;height:50px;width:100px" id="horse3">1</div>
<div style="background-color:yellow;text-align:center;height:50px;width:100px" id="horse4">1</div>
<div style="background-color:orange;text-align:center;height:50px;width:100px" id="horse5">1</div>
</div>
Demo can be found here:
https://jsfiddle.net/wqrun6ny/2/
Thanks
https://jsfiddle.net/wqrun6ny/3/
Margin 100% adds margin to widh of element. To avoid this you should add to your animate function left property which is equal to width of element:
$('#horse1').animate({"margin-left":"100%", 'left': -100} ....
but it will works only if element has position:relative
You can make a calculation before start the animation. It takes the width of the wrapper and substract it the width of the "horse":
https://jsfiddle.net/wqrun6ny/4/
$('#start').click(function(){
var margin = $('#horsewrapper').width() - $('#horse1').width();
$('#horse1').animate({"margin-left": margin},{"duration":1000,"easing":"linear"});
});
Edit
According with the request in comments, you can use stop()method and then reinitialise the animation, it works perfectly:
https://jsfiddle.net/wqrun6ny/15/
$('#start').click(function(){
animate($('#horse1'));
});
$(window).on('resize', function() {
$('#horse1').stop();
animate($('#horse1'));
});
var animate = function(element) {
var margin = $('#horsewrapper').width() - element.width();
element.animate({"margin-left": margin},{"duration":5000,"easing":"linear"});
};
You will notice a problem, if you don't push the button but you resize the window, it will start the animation. To avoid this you can add a flag or check if the div is in the initial position.
You have to calculate margin first, then animate according to margin.
Try like this:
$('#start').click(function(){
var mar = $('#horsewrapper').width() - $('#horse1').width();
$('#horse1').animate({"margin-left": mar}, {"duration":1000,"easing":"linear"});
});
https://jsfiddle.net/wqrun6ny/14/
You could calculate the width of the container, and subtract the width of the boxes your moving. Pushing it 100% will result in what your demo is displaying.
If its a static box width the same width, you can just use a static pixel value as well.
var horsewrapperWidth = $('#horsewrapper').width() -100;
100 is the width of your "horses".
$('#horse1').animate({"margin-left": horsewrapperWidth + 'px'},{"duration":5000,"easing":"linear"});
Simplest way !
$('#start').click(function() {
// added this variable to get width of box
var box = $('#horsewrapper').width();
$('#horse1').finish().css("margin-left", "initial");
$('#horse1').animate({
"margin-left": box - 100 // box - width of horse (100%-100px)
}, {
"duration": 5000,
"easing": "linear"
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="start">
Start
</button>
<div style="background-color:rgb(201, 201, 201);width:80%;height:250px" id="horsewrapper">
<div style="height: 50px; width: 100px; text-align: center; background-color: blue;" id="horse1">1</div>
<div style="background-color:red;text-align:center;height:50px;width:100px" id="horse2">1</div>
<div style="background-color:green;text-align:center;height:50px;width:100px" id="horse3">1</div>
<div style="background-color:yellow;text-align:center;height:50px;width:100px" id="horse4">1</div>
<div style="background-color:orange;text-align:center;height:50px;width:100px" id="horse5">1</div>
</div>
I am building a website that expands horizontally as user takes action like http://portal.azure.com style. When they click a button(from a list) in one div, the details of the selected items appear in another div beside it. this can get really long and over flow the mother div.
I am looking for a way i can automatically scroll the page to the right most edge when a new div overflows.
layout
<div style="overflow-x: auto">
<div layout="row">
<div class="col" style="width: 400px">
</div>
//SHOWN DYNAMICALLY
<div class="col" style="width: 400px">
</div>
//SHOWN DYNAMICALLY
<div class="col" style="width: 400px">
</div>
//SHOWN DYNAMICALLY
<div class="col" style="width: 400px">
</div>
//SHOWN DYNAMICALLY
<div class="col" style="width: 400px">
</div>
</div>
</div>
As you can see above, the first div shows by default but the other divs appear based on user interaction.
By the time the 3 div appears, it overflows.
How can i scroll to the right edge anytime it over flows? (you should really check out http://portal.azure.com to see what im talking about)
PS: i am using AngularJS. I am not using jquery. But i dont mind including it if its the only option
You can use plain Javascript for keeping the scroll to right.
Something like this:
var myDiv = document.getElementById("row");
myDiv.scrollLeft = myDiv.scrollWidth;
You need to fire the above function every time you add a new div. That way it will always automatically be scrolled when divs are dynamically added.
You will need to hook up the DOMNodeInserted event on your container. The function will be called whenever a div is added to your row container. This way you will not have to change anything in your existing code.
Here is a very simple example with dynamically added divs:
var num = 1,
btn = document.getElementById('btn'),
row = document.getElementById("row");
scroller(); // fire teh scroller right away for initial scroll
// function to keep it scrolled towards right
// function scroller() { row.scrollLeft = row.scrollWidth; }
// edited to add simple animation
function scroller() {
var maxScroll = row.scrollWidth - row.clientWidth; // required to stop
row.scrollLeft += 2;
if (row.scrollLeft < maxScroll) {
timer = window.setTimeout(scroller, 1000 / 60);
}
}
// hook up event to call scroller whenever an element is dynamically added
row.addEventListener("DOMNodeInserted", scroller);
// for demo to simluate dynamically adding divs
btn.addEventListener("click", function() {
var newDiv = document.createElement("div");
newDiv.setAttribute("class", "col");
num += 1; newDiv.innerText = num;
row.appendChild(newDiv);
});
div[layout] {
width: 500px; height: 140px; white-space: nowrap;
overflow: hidden; overflow-x: auto;
}
div.col { height: 140px; width: 400px; display: inline-block; text-align:center; }
div { border: 1px solid red; }
<div id="row" layout="row"><div class="col">1</div></div>
<button id="btn">Add</button>
Edit: Added simple animation using setTimeout (in order to keep jQuery away). Ideally you should be using requestAnimationFrame or a suitable library if you are already using one.
I am making a web app. I have created 25 divs.
I have Used jquery fadeIn() by which divs are gradually made and displayed one after another on screen.
But problem is that when 25 divs have been created, scroll is created due to which first 4 divs can be seen but the remaining can't be seen until user scroll the page.
I want that as one by one div is created, the page should automatically scroll to the div recently created and so on this process should be continued until the last div is created.
You can use
$('html,body').scrollTop($(".answer.visible:last").offset().top);
$(function() {
$(".answer").hide();
$('#demo').click(function(e) {
var _div = $('.answer[style*="display: none"]:first');
if (_div.length) {
_div.fadeIn();
$('html,body').animate({
scrollTop: _div.offset().top
},
'slow');
} else {
$(this).text('Done..!');
}
});
});
#demo {
position: fixed;
bottom: 0px;
left: 0px;
}
.answer {
width: 100%;
height: 200px;
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="demo">Click here</button>
<div class="answer">1</div>
<div class="answer">2</div>
<div class="answer">3</div>
<div class="answer">4</div>
<div class="answer">5</div>
<div class="answer">6</div>
<div class="answer">7</div>
<div class="answer">8</div>
<div class="answer">9</div>
<div class="answer">10</div>
<div class="answer">11</div>
<div class="answer">12</div>
<div class="answer">13</div>
<div class="answer">14</div>
<div class="answer">15</div>
<div class="answer">16</div>
<div class="answer">17</div>
<div class="answer">18</div>
<div class="answer">19</div>
<div class="answer">20</div>
<div class="answer">21</div>
<div class="answer">22</div>
<div class="answer">23</div>
<div class="answer">24</div>
<div class="answer">25</div>
I think this looks pretty cool when we use slideDown+scrollTop. Check fiddle
Documentations
To get the coordinates
http://api.jquery.com/offset/
Set vertical position of the scroll bar
https://api.jquery.com/scrollTop/
Set horizontal position of the scroll bar
https://api.jquery.com/scrollleft/
I found this link here
smooth auto scroll by using javascript
Using this you could create something like this here:
http://jsfiddle.net/mrc0sp5j/
The main point is, that you create a scrolling-function using
window.scrollBy or window.scrollTo
http://www.w3schools.com/jsref/met_win_scrollto.asp
With jQuery .last or .eq you can specify which element you want to scroll to
$(".mydivobjects").eq(x).position().top
Hope this helps
cheers