Find the end of horizontal scrollable div and remove scroll event - javascript

I have a horizontal scrollable div with different element inside. I have a js function for move inside the div with a mouse wheel; I need to remove the event when i arrive at the end of the div for continue scroll down.
This is my example fiddle code:
<div class="wrapper">
<div class="container">
<div class="element-1"></div>
<div class="element-2"></div>
<div class="element-3"></div>
<div class="element-4"></div>
</div>
</div>
<div class="element-5"></div>
.wrapper {
width:100vw;
overflow-x: scroll;
}
.container {
height: 100vh;
width: max-content;
overflow-x: scroll;
overflow-y: hidden;
}
.element-1,
.element-2,
.element-3,
.element-4{
width: 300px;
height: 90vh;
border: 1px solid green;
display: inline-block;
float: left;
}
.element-5{
width: 300px;
height: 100px;
background-color: red;
}
$('.wrapper').on("wheel", function(evt) {
evt.preventDefault();
$(this).scrollLeft( $(this).scrollLeft() + evt.originalEvent.deltaY);
});

I hope this is what you are looking for.
I just added a condition in your code to check if the container reached its right end.
$('.wrapper').on("wheel", function(evt) {
if($('.wrapper').width() + $('.wrapper').scrollLeft() < $('.container').width()) {
evt.preventDefault();
$(this).scrollLeft( $(this).scrollLeft() + evt.originalEvent.deltaY);
}
});
.wrapper {
width: 500px;
overflow-x: scroll;
}
.container {
height: 200px;
width: max-content;
overflow-x: scroll;
overflow-y: hidden;
}
.element-1,
.element-2,
.element-3,
.element-4{
width: 300px;
height: 150px;
border: 1px solid green;
display: inline-block;
float: left;
}
.element-5{
width: 300px;
height: 200px;
background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="container">
<div class="element-1"></div>
<div class="element-2"></div>
<div class="element-3"></div>
<div class="element-4"></div>
</div>
</div>
<div class="element-5"></div>

Related

How to automaticlly create an InputField, when a a position is clicked on a picture?

I am trying to display a highlighted circle when the user double clicks on a certain part of an image(which should be erasable if clicket wrong). If the wanted position is clicked i want to create an "ID" and next to it a simple Inputfield.
The Inputfields should be in a countainer/box which is scrollable.
How can I achieve this ?
here is a edited pic as example for what i hope to achieve:
till now i only did the ground work like bulding the header, footer and sidebar
#wrapper {
margin-left: auto;
margin-right: auto;
background-color: red;
width: 1000px;
height: 800px;
}
#header {
width: 100%;
height: 100px;
background-color: blue
}
#footer {
width: 100%;
height: 50px;
background-color: green;
clear: both;
}
#menue-right {
width: 300px;
height: 650px;
background-color: black;
float: right
}
#content {
width: 700px;
height: 650px;
background-color: yellow;
float: left;
}
#content-center {
width: 500px;
height: 400px;
background-color: darkorange;
margin: auto;
margin-top: 125px
}
#wundbild {
height: 400px
}
<div id="wrapper">
<div id="header">
<h1 style="color: white; text-align: center;padding-top: 25px;">Wundposition ermitteln</h1>
</div>
<div id="menue-right">
</div>
<div id="content">
<div id="content-center">
<img id="wundbild" src="https://i.stack.imgur.com/c3CDS.png">
</div>
</div>
<div id="footer">
</div>
</div>

Sortable divs from/to draggable divs

I have .rc divs inside a .rcs div. The .rcs divs are sortable. The .rcs divs are inside a .ra div. The .ra div are draggable.
When I move a .rc from the first .ra to the second one, during the transition, the .rc is hidden.
I don't get this behaviour when I make the .ras div sortable (.ras is the parent of .ra).
Thanks for help.
$(document).ready(function() {
$(".ra").draggable({
zIndex: 100
});
$(".rcs").sortable({
connectWith: ".rcs",
});
});
.ra {
background-color: white;
width: 28%;
height: 200px;
float: left;
border-style: solid;
margin-left: 1%;
overflow: auto;
position: relative;
}
.header {
background-color: white;
color: black;
height: 50px;
width: 26%;
position: absolute;
}
.rcs {
margin-top: 50px;
margin-bottom: : -50px;
height: 150px;
}
.box {
width: 60px;
height: 40px;
float: left;
background-color: black;
border-radius: 3px;
font-size: 80%;
color: white;
margin: 1px;
padding: 1px;
text-align: left;
text-overflow: ellipsis;
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<div class="ras">
<div class="ra">
<div class="header">
<div class="ra_name">Martini, Johnny </div>
</div>
<div class="rcs" id="ra1_rcs">
<div class="box">titre</div>
<div class="box">titre</div>
<div class="box">titre</div>
</div>
</div>
<div class="ra">
<div class="header">
<div class="ra_name">Martin, John</div>
</div>
<div class="rcs">
<div class="box">titre</div>
<div class="box">titre</div>
<div class="box">titre</div>
</div>
</div>
This issue comes from CSS. If you comment overflow: auto; from your CSS like below, it works properly.
.ra {
background-color: white;
width: 28%;
height: 200px;
float: left;
border-style: solid;
margin-left: 1%;
/* overflow: auto; */
position: relative;
}
Online demo (jsFiddle)

How to resize bottom fixed div when top div is collapsed?

I have two divs, one on top, the other on the bottom. I need to have the bottom div fixed, and to resize and occupy the space above when the div on top is collapsed. Links to the scenarios below. Is this possible to accomplish using only CSS? This is for an angularJS application.
UPDATE: Support for older versions of browsers, specifically IE, must also be considered.
Div1 expanded
Div1 collapsed
Yes, you can do this using flex. See snippet below.
$(document).ready(function() {
$("#div1").click(function() {
$(this).css("max-height", "50px")
});
});
body, html {
margin: 0;
height: 100%;
}
.container {
height: 100%;
display: flex;
flex-direction: column;
}
.box {
flex-grow: 1;
text-align: center;
}
#div1 {
background-color: #4472C4;
}
#div2 {
background-color: #ED7D31;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- begin snippet: js hide: false console: true babel: false -->
Update
Since you noted in the comments you wanna support older browsers, the same as above can be achieved using the old fasion table layout.
$(document).ready(function() {
$("#div1").click(function() {
$(this).css("height", "50px")
});
});
html, body {
height: 100%;
margin: 0;
}
.container {
display: table;
height: 100%;
width: 100%;
}
.row {
display: table-row;
width: 100%;
}
.box {
display: table-cell;
color: #fff;
vertical-align: middle;
text-align: center;
}
#div1 {
background-color: #4472C4;
}
#div2 {
background-color: #ED7D31;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="box" id="div1">
<strong>div1</strong>
</div>
</div>
<div class="row">
<div class="box" id="div2">
<strong>div1</strong>
</div>
</div>
</div>
You can try this.
html, body {
height: 100%;
margin: 0;
}
.wrapper {
display: table;
height: 100%;
width: 100%;
background: yellow;
}
.content {
display: table-row;
/* height is dynamic, and will expand... */
height: 100%;
/* ...as content is added (won't scroll) */
background: yellow;
}
.footer {
display: table-row;
background: grey;
}
<div class="wrapper">
<div class="content">
<h2>Content</h2>
</div>
<div class="footer">
<h3>Sticky footer</h3>
<p>Footer of variable height</p>
</div>
</div>
you can try this it works fine for me
<div class="wrapper">
<div class="container">
<div class="top-div">
topd div
</div>
<div class="bottom-div">
bottom div
</div>
</div>
</div>
CSS
.wrapper{
float:left;
height:100%;
}
.container {
position:absolute;
display: block;
float: left;
width: 100%;
height: 100%;
min-height:100%;
}
.top-div {
margin: 5px;
float: left;
position: fixed;
top: 0;
width: 90%;
height: 30%;
background-color: red;
}
.bottom-div {
margin: 5px;
position: absolute;
float: left;
bottom: 0;
width: 90%;
background-color: green;
}
use jQuery
$(function() {
var containerH = $(".container").height();
var topdivH = $(".top-div").height();
$(".bottom-div").height(containerH - topdivH);
});
check out jsfiddle

smoothscroll to target on certain div

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>

jQuery animate working in fiddle but not smooth online

I've made a sort of accordion with three expanding divs (#a, #b, #c) in fiddle, but when I save it locally and open it in a browser the transitions are no longer smooth. I noticed specifically after clicking #b with #a expanded. I've included the HTML that references the CSS and JavaScript code. What's the cause and what is the best way to solve it?
<head>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="wrapper">
<div class="outer">
<div class="middle">
<div class="inner" id="a">1</div>
<div class="inner" id="b">2</div>
<div class="inner" id="c">3</div>
</div>
</div>
</div>
<script src="accordion.js"></script>
</body>
Here is a link to the fiddle: http://jsfiddle.net/tJugd/3794/
It seems like it only happens when either #a is expanded and #b or #c are clicked or #b is expanded and #c is clicked.
Try using single click event handler for animations with .animate() easings property set to "linear", css transition for effects, set width of .middle div elements to 33%
$(".middle div").click(function() {
$(this).siblings().animate({
width: "10%",
opacity: 0.6
}, 0, "linear");
$(this).animate({
width: "80%",
opacity: 1
}, 0, "linear");
});
div.inner {
max-width: 0;
display: table-cell;
overflow: hidden;
}
div.outer {
display: table;
overflow: hidden;
width: 100%;
height: 100%;
}
div.middle {
display: table-row;
overflow: hidden;
}
#holder {
width: 100%;
height: 100%;
margin: 0px auto;
overflow: hidden;
position: fixed;
}
#a {
width: 33%;
height: 100%;
background-color: red;
}
#b {
width: 33%;
height: 100%;
background-color: blue;
}
#c {
width: 33%;
height: 100%;
background-color: green;
}
.wrapper {
height: 90vh;
overflow: hidden;
}
#a,
#b,
#c {
transition: width 500ms, opacity 500ms;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div class="wrapper">
<div class="outer">
<div class="middle">
<div class="inner" id="a">1</div>
<div class="inner" id="b">2</div>
<div class="inner" id="c">3</div>
</div>
</div>
</div>
jsfiddle http://jsfiddle.net/tJugd/3798/
Try this
window.onload = function() {
[].forEach.call(document.querySelectorAll('.inner'), function(el) {
el.addEventListener('click', function(e) {
this.parentElement.className = 'middle ' + this.id;
});
});
} //]]>
div.inner {
max-width: 0;
display: table-cell;
overflow: hidden;
}
div.outer {
display: table;
overflow: hidden;
width: 100%;
height: 100%;
}
div.middle {
display: table-row;
overflow: hidden;
}
#holder {
width: 100%;
height: 100%;
margin: 0px auto;
overflow: hidden;
position: fixed;
}
#a {
height: 100%;
background-color: red;
}
#b {
height: 100%;
background-color: blue;
}
#c {
height: 100%;
background-color: green;
}
#a,
#b,
#c {
width: 10%;
opacity: 0.6;
transition: all 3000ms;
}
.middle.a #a,
.middle.b #b,
.middle.c #c {
width: 80%;
opacity: 1;
}
.wrapper {
height: 90vh;
overflow: hidden;
}
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>- jsFiddle demo</title>
</head>
<body>
<div class="wrapper">
<div class="outer">
<div class="middle c">
<div class="inner" id="a">1</div>
<div class="inner" id="b">2</div>
<div class="inner" id="c">3</div>
</div>
</div>
<div class="wrapper">
</div>
</div>
</body>
</html>

Categories