Horizontal scrolling of div not working with scrollLeft - javascript

I tried to make horizontal scrolling with scrollLeft. I'm able to align div horizontally but it looks like the scrollLeft function is not working.
Here is my code:
function myFunction() {
var elmnt = document.getElementById("myDIV");
elmnt.scrollLeft += 50;
}
#myDIV {
height: 250px;
width: auto;
display:inline-flex;
gap:10px;
overflow: auto;
}
#content {
height: 800px;
width: 200px;
background-color: coral;
}
<button onclick="myFunction()">Scroll div</button><br><br>
<div id="myDIV">
<div id="content">
Some text inside a div element.<br><br>
Some text inside a div element.
</div>
<div id="content">
Some text inside a div element.<br><br>
Some text inside a div element.
</div>
<div id="content">
Some text inside a div element.<br><br>
Some text inside a div element.
</div>
<div id="content">
Some text inside a div element.<br><br>
Some text inside a div element.
</div>
<div id="content">
Some text inside a div element.<br><br>
Some text inside a div element.
</div>
</div>

I applied the white-space and overflow style inside the #myDiv style; I set the width property to 220px to follow the scrollLeft[1].
function myFunction() {
var element = document.getElementById("myDIV");
element.scrollLeft += 50;
}
#myDIV {
white-space: nowrap;
overflow: scroll;
width: 220px;
height: 250px;
display: inline-flex;
gap: 10px;
}
#content {
height: 800px;
width: 200px;
background-color: coral;
}
<button onclick="myFunction()">Scroll div</button><br><br>
<div id="myDIV">
<div id="content">
Some text inside a div element.<br><br>
Some text inside a div element.
</div>
<div id="content">
Some text inside a div element.<br><br>
Some text inside a div element.
</div>
<div id="content">
Some text inside a div element.<br><br>
Some text inside a div element.
</div>
<div id="content">
Some text inside a div element.<br><br>
Some text inside a div element.
</div>
<div id="content">
Some text inside a div element.<br><br>
Some text inside a div element.
</div>
</div>
1 - JavaScript element.scrollLeft not working

Related

How to impose CSS changes to related sibling element?

Basically I have multiple parent div with pairs of button and div child elements.
What I want to do is impose changes to the "related" div when a button is clicked. So if Button 2 is clicked, the changes should be imposed on toast 2.
My issue is that no matter the button clicked it's only the first occurrence that is changed.
In my example I set the click to change the display value of the relevant element as an example, but in reality any CSS change should be possible.
Here is a link to a complete and functional codepen as well.
function hide() {
var element = document.querySelector('.toast');
element.style.display = (element.style.display == 'none') ? 'block' : 'none';
}
.parent {
position : relative;
display : inline-block;
height : 55px;
}
button#button {
width : 100px;
height : 35px;
}
.toast {
display : block;
position : absolute;
top : 40px;
background-color : black;
}
<div class="parent">
<button id="button" onclick="hide()">Button 1</button>
<div class="toast">A box with text</div>
</div>
<div class="parent">
<button id="button" onclick="hide()">Button 2</button>
<div class="toast">A box with text</div>
</div>
<div class="parent">
<button id="button" onclick="hide()">Etc...</button>
<div class="toast">A box with text</div>
</div>
Don't duplicate IDs
Avoid using onclick attributes. They have a number of drawbacks and addEventListener makes this easier.
Pay attention to the event object that is passed to your listener. It will tell you where the click was.
Navigate up (using closest) and down (using querySelector) the DOM from that element
function hide(event) {
// We're using event delegation so if the click isn't from a button we stop immediately
if (!event.target.matches(".parent button")) {
return false;
}
// Seach from the button up until we find the parent
const parent = event.target.closest(".parent");
// Search down from the parent until we find the toast
const toast = parent.querySelector('.toast');
toast.style.display = (toast.style.display == 'none') ? 'block' : 'none';
}
addEventListener('click', hide);
.parent {
position: relative;
display: inline-block;
height: 55px;
}
.parent button {
width: 100px;
height: 35px;
}
.toast {
display: block;
position: absolute;
top: 40px;
background-color: black;
}
<div class="parent">
<button>Button 1</button>
<div class="toast">A box with text</div>
</div>
<div class="parent">
<button>Button 2</button>
<div class="toast">A box with text</div>
</div>
<div class="parent">
<button>Etc...</button>
<div class="toast">A box with text</div>
</div>

.child element with class selected should be on top of other .child elements, each .child is inside .parent element with absolute position

Given the html and css below, is it possible to have a .child with class selected appear on top of other .child elements? I'd like if you can give an answer that would not change html structure and css position property of .child and .parent.
Also would be great to not toggle anything on parent, it is better to toggle child classes or styles, for parent it is better to set it once.
.parent {
position: absolute;
}
.child {
position: relative;
}
<div>
<div>
<div class="parent">
<div class="child selected"></div>
</div>
<div class="parent">
<div class="child"></div>
</div>
</div>
</div>
Greatly appreciate any input, thank you.
If you really want to stick to this HTML structure you could as example hide all elements (children) and show them only when they are selected.
A better solution would be having the selected class on the parent so then you could just simply give the selected parent a higher z-index.
Here you can find a snippet of how you can toggle the display without touching the HTML
// for demo purpuses
var toggleLayer = function() {
var next = $('.child.selected').removeClass('selected').closest('.parent').next();
var element = next.length ? next : $('.parent:first-child');
element.find('.child').addClass('selected')
}
.parent {
position: absolute;
}
.child {
position: relative;
display: none;
}
.selected {
display: block;
}
/* for demo purpuses */
.child {
height: 100px;
width: 100px;
line-height: 100px;
text-align: center;
background: red;
}
button {
position: fixed;
top: 120px;
left: 10px;
}
<div>
<div>
<div class="parent">
<div class="child selected">1</div>
</div>
<div class="parent">
<div class="child">2</div>
</div>
<div class="parent">
<div class="child">3</div>
</div>
<div class="parent">
<div class="child">4</div>
</div>
</div>
</div>
<!--- FOR DEMO PURPUSES --->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onClick="toggleLayer()">Toggle layer</button>

Outer DIV to wrap and expand upwards along with the inner DIV

Need a little bit help here. Thanks :)
I am struggling with how to make the outer div wrap the inner div and expand upwards along with the inner content editable div.
The inner div should expand from bottom to top and the outer div should wrap it (green color should wrap the red) and expand along with it.
Note: press SHIFT+ENTER in the red div to make it expand upwards.
I have an example in the following codepen
<div style="background-color:green;">
Test Test
<div id="example" contenteditable style="background-color:red; position: absolute; bottom: 0px">
Test Test
</div>
</div>
You can use flexbox:
.outer {
background: green;
display: flex;
flex-direction: column;
/* Some minimal width */
min-height: 50vh;
}
.inner {
background: red;
margin-top: auto;
}
<div class="outer">
Test Test
<div id="example" class="inner" contenteditable>
Test Test
</div>
</div>
Both of them must be absolute and wrappers height must be 100%.
<div style="background-color:green; height: 100%; position: absolute;">
wrapper
<div id="example" style="border: 1px solid red; position: absolute; bottom: 0;">
inner
</div>
</div>

How to make a div scrollable when it overflows by adding children

I have the following div:
<div class="container-fluid">
<div class="row-fluid">
<div class="col-md-4 ticker">
</div>
</div>
</div>
<button onclick="lol()">sdas</button>
I append children to that by jQuery.
<script>
function lol() {
$( ".ticker" ).append( "<p>dsadsa</p>" );
}
</script>
I want when the are more children than can fit on the div max-height the div to become scrollable, any help how can I achieve that?
http://jsfiddle.net/#&togetherjs=RuintOf6bR
.ticker{
height: 700px;
max-height: 700px;
background-color: red;
overflow-y: scroll;
}

How to align divs horizontally?

I am trying to create a series of divs that is horizontal align and only show 1 div that cover the whole screen.
Something like
div1 div2 div3 div4 div5…
Only show 1 div in the screen unless user click next.
My html
<section id='contents-wrapper' class='container'>
<article class='row'>
<div>
</div>
</article>
<article class='row'>
<div>
</div>
</article>
<article class='row'>
<div>
</div>
</article>
<article class='row'>
<div>
</div>
</article>
</section>
CSS
.row{
float: left;
min-width: 600px;
min-height: 800px;
width: 100%
}
.container{
width: 10000px;
}
How do I only show 1 div at a time on all device and screen resolution?
remove
width:100%
from class ".row",
this makes every article width = 10000px
Have you tried,
.row {
display: inline-block; // as mentioned by bjb568
}
Also, remove all those article tags and add just one article tag and add all the div tags as its child elements.
.theContainer {overflow: auto; white-space: nowrap;}
.theDivs {display: inline-block; width: 100%;}
JS:
document.getElementById('p').onclick = function() { //Back
document.getElementById('container').scrollLeft = Math.round(document.getElementById('container').scrollLeft/document.getElementById('container').offsetWidth-1)*document.getElementById('container').offsetWidth;
}
document.getElementById('n').onclick = function() { //Forward
document.getElementById('container').scrollLeft = Math.round(document.getElementById('container').scrollLeft/document.getElementById('container').offsetWidth+1)*document.getElementById('container').offsetWidth;
}
http://jsfiddle.net/KWwZP/

Categories