Dhruv Chadha
Reputation: 1177
direction: rtl for scrollbar but text is being added to left?
I have tried to make a simple calculator. Right now it just shows the math expression on the screen. On clicking the numbers , the text is added how I want. But on pressing any of the operators, the operator gets added to left side of number and then the next number is added left of the operator.
I want that the expression should come from left to right just as in real world, and in case of overflow, the scrollbar should start from right.
var evt = document.querySelectorAll(".evt");
var screenText = document.getElementById("screentext");
var screenText2 = document.getElementById("screentext2");
var num = function(e) {
screenText.innerHTML += e.currentTarget.textContent;
screenText2.innerHTML += e.currentTarget.textContent;
}
var sign = function(e) {
screenText.innerHTML += " " + e.currentTarget.textContent + " ";
screenText2.innerHTML = "";
}
for(var i = 0 ; i < 10 ; i++) {
evt[i].addEventListener("click", num);
}
for(var i = 10 ; i < 14 ; i++) {
evt[i].addEventListener("click", sign);
}#calcbody {
width: 400px;
height: 600px;
border: 2px solid black;
}
#screen {
width: 90%;
height: 12%;
border: 1px groove black;
margin: 4% 5%;
text-align: right;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
direction: rtl;
}
#screen h1 {
margin-top: 24px;
margin-right: 5px;
line-height: 22px;
}
#screen2 {
width: 90%;
height: 5%;
border: 1px groove black;
margin: 4% 5%;
}
#screentext2 {
box-sizing: border-box;
display: inline-block;
height: 100%;
width: 230px;
float: right;
text-align: right;
margin: 0;
padding-left: 2px;
padding-top: 6px;
}
#current {
box-sizing: border-box;
float: left;
height: 100%;
display: inline-block;
width: 130px;
margin: 0;
padding-left: 2px;
padding-top: 5px;
font-weight: bold;
}
.flt {
float: left;
width: 20%;
height: 13%;
border: 1px solid black;
box-sizing: border-box;
margin-left: 4%;
margin-bottom: 2%;
position: relative;
}
.flt2 {
float: left;
border: 1px solid black;
box-sizing: border-box;
width: 44%;
height: 13%;
margin-left: 4%;
margin-bottom: 2%;
position: relative;
}
.flt3 {
float: left;
border: 1px solid black;
box-sizing: border-box;
width: 92%;
height: 13%;
margin-left: 4%;
position: relative;
}
.keys {
text-align: center;
}
.back {
background-color: red;
}
.evt:hover {
cursor: pointer;
background-color: lime;
}
.evt:active {
background-color: #00cc00;
}<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="calcbody">
<div id="screen"><h1 id="screentext"></h1></div>
<div id="screen2"><p id="current">Current Number :</p><p id="screentext2"></p></div>
<div id="num1" class="flt evt"><h1 class="keys">1</h1></div>
<div id="num2" class="flt evt"><h1 class="keys">2</h1></div>
<div id="num3" class="flt evt"><h1 class="keys">3</h1></div>
<div id="num4" class="flt evt"><h1 class="keys">4</h1></div>
<div id="num5" class="flt evt"><h1 class="keys">5</h1></div>
<div id="num6" class="flt evt"><h1 class="keys">6</h1></div>
<div id="num7" class="flt evt"><h1 class="keys">7</h1></div>
<div id="num8" class="flt evt"><h1 class="keys">8</h1></div>
<div id="num9" class="flt evt"><h1 class="keys">9</h1></div>
<div id="num0" class="flt evt"><h1 class="keys">0</h1></div>
<div id="plus" class="flt evt"><h1 class="keys">+</h1></div>
<div id="minus" class="flt evt"><h1 class="keys">-</h1></div>
<div id="multiply" class="flt2 evt"><h1 class="keys">*</h1></div>
<div id="divide" class="flt2 evt"><h1 class="keys">/</h1></div>
<div id="equal" class="flt3 evt"><h1 class="keys">=</h1></div>
</div>
</body>
<script src="script.js"></script>
</html>Upvotes: 0
Views: 3092
Answers (3)
Asons
Reputation: 87313
I removed the rtl and added screenText.parentElement.scrollLeft = screenText.parentElement.scrollWidth; to have the scroll start from right
var evt = document.querySelectorAll(".evt");
var screenText = document.getElementById("screentext");
var screenText2 = document.getElementById("screentext2");
for(var i = 0 ; i < 10 ; i++) {
evt[i].addEventListener("click", function(e) {
screenText.innerHTML += e.currentTarget.textContent;
screenText2.innerHTML += e.currentTarget.textContent;
screenText.parentElement.scrollLeft = screenText.parentElement.scrollWidth;
});
}
for(var i = 10 ; i < 14 ; i++) {
evt[i].addEventListener("click", function(e) {
screenText.innerHTML += " " + e.currentTarget.textContent + " ";
screenText2.innerHTML = "";
screenText.parentElement.scrollLeft = screenText.parentElement.scrollWidth;
});
}#calcbody {
width: 400px;
height: 600px;
border: 2px solid black;
}
#screen {
width: 90%;
height: 12%;
border: 1px groove black;
margin: 4% 5%;
text-align: right;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
}
#screen h1 {
margin-top: 24px;
margin-right: 5px;
line-height: 22px;
}
#screen2 {
width: 90%;
height: 5%;
border: 1px groove black;
margin: 4% 5%;
}
#screentext2 {
box-sizing: border-box;
display: inline-block;
height: 100%;
width: 230px;
float: right;
text-align: right;
margin: 0;
padding-left: 2px;
padding-top: 6px;
}
#current {
box-sizing: border-box;
float: left;
height: 100%;
display: inline-block;
width: 130px;
margin: 0;
padding-left: 2px;
padding-top: 5px;
font-weight: bold;
}
.flt {
float: left;
width: 20%;
height: 13%;
border: 1px solid black;
box-sizing: border-box;
margin-left: 4%;
margin-bottom: 2%;
position: relative;
}
.flt2 {
float: left;
border: 1px solid black;
box-sizing: border-box;
width: 44%;
height: 13%;
margin-left: 4%;
margin-bottom: 2%;
position: relative;
}
.flt3 {
float: left;
border: 1px solid black;
box-sizing: border-box;
width: 92%;
height: 13%;
margin-left: 4%;
position: relative;
}
.keys {
text-align: center;
}
.back {
background-color: red;
}
.evt:hover {
cursor: pointer;
background-color: lime;
}
.evt:active {
background-color: #00cc00;
}<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="calcbody">
<div id="screen"><h1 id="screentext"></h1></div>
<div id="screen2"><p id="current">Current Number :</p><p id="screentext2"></p></div>
<div id="num1" class="flt evt"><h1 class="keys">1</h1></div>
<div id="num2" class="flt evt"><h1 class="keys">2</h1></div>
<div id="num3" class="flt evt"><h1 class="keys">3</h1></div>
<div id="num4" class="flt evt"><h1 class="keys">4</h1></div>
<div id="num5" class="flt evt"><h1 class="keys">5</h1></div>
<div id="num6" class="flt evt"><h1 class="keys">6</h1></div>
<div id="num7" class="flt evt"><h1 class="keys">7</h1></div>
<div id="num8" class="flt evt"><h1 class="keys">8</h1></div>
<div id="num9" class="flt evt"><h1 class="keys">9</h1></div>
<div id="num0" class="flt evt"><h1 class="keys">0</h1></div>
<div id="plus" class="flt evt"><h1 class="keys">+</h1></div>
<div id="minus" class="flt evt"><h1 class="keys">-</h1></div>
<div id="multiply" class="flt2 evt"><h1 class="keys">*</h1></div>
<div id="divide" class="flt2 evt"><h1 class="keys">/</h1></div>
<div id="equal" class="flt3 evt"><h1 class="keys">=</h1></div>
</div>
</body>
<script src="script.js"></script>
</html>Upvotes: 1
frnt
Reputation: 8795
Remove that rtl and add ltr, as below.
#screen {
width: 90%;
height: 12%;
border: 1px groove black;
margin: 4% 5%;
text-align: right;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
direction: ltr;
}
Upvotes: 0
Gargamel
Reputation: 58
Try this:
#screentext {
direction: ltr;
}
Your ltr definition is on the #screen div, and not in the h1 (#scrrentext).
Upvotes: 0
Related Questions
- Hide scroll bar, but while still being able to scroll
- Permanent 2x3 CSS image gallery
- Two divs side by side - Fluid display
- CSS Scaling issue when screen is set to maximize. Top of Form Element scaling improper: Dropped a CodePen
- Do we include margin in css box model while determining width or height of a element
- Vertical alignment of elements overlapping in IE
- Span text is at the top instead of middle