javascript - direction: rtl for scrollbar but text is being added to left? -

-

i have tried make simple calculator. right shows math expression on screen. on clicking numbers , text added how want. on pressing of operators, operator gets added left side of number , next number added left of operator.

i want expression should come left right in real world, , in case of overflow, scrollbar should start 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 = 0 ; < 10 ; i++) {  	evt[i].addeventlistener("click", num);  }  for(var = 10 ; < 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>

i removed rtl , added screentext.parentelement.scrollleft = screentext.parentelement.scrollwidth; have scroll start right

var evt = document.queryselectorall(".evt");  var screentext = document.getelementbyid("screentext");  var screentext2 = document.getelementbyid("screentext2");    for(var = 0 ; < 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 = 10 ; < 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>


Comments

Post a Comment

Popular posts from this blog

wordpress - (T_ENDFOREACH) php error -

-
creating wordpress website , i'm getting following php error: parse error: syntax error, unexpected 'endforeach' (t_endforeach) in /home/soralmedia/public_html/wp-content/themes/soral media/woocommerce/myaccount/my-orders.php on line 98 here's code file: <?php /** * orders * * shows recent orders on account page. * * template can overridden copying yourtheme/woocommerce/myaccount/my-orders.php. * * however, on occasion woocommerce need update template files , (the theme developer). * need copy new files theme maintain compatibility. try this. * little possible, happen. when occurs version of template file will. * bumped , readme list important changes. * * @see http://docs.woothemes.com/document/template-structure/ * @author woothemes * @package woocommerce/templates * @version 2.5.0 */ if ( ! defined( 'abspath' ) ) { exit; } $my_orders_columns = apply_filters( 'woocommerce_my_account_my_orders_columns', array( ...
Read more

Export Excel workseet into txt file using vba - (text and numbers with formulas) -

-
i new vba have developed code use in excel move text/numbers txt file. issue have 3 functions need go same txt file. when run first function has set fs = createobject("scripting.filesystemobject") set = fs.createtextfile(module1.nys45uploadfilename, true) a.writeline (str) a.close. the other 2 functions had save. set fs = createobject("scripting.filesystemobject") set = fs.savetextfile(module1.nys45uploadfilename, true) a.writeline (str) a.close. the first function go txt file, other 2 error object doesn't support property or method. when changed 3 create last function goes txt file. can not figure out word use in order make other 2 functions follow txt file in order keyed. the entire code follows private sub addrecord_click() on error goto errhandler module1.nys45uploadfilename = application.getsaveasfilename(filefilter:="textfiles (*.txt), *.txt") if module1.nys45uploadfilename = "false" exit sub ...
Read more

Using django-mptt to get only the categories that have items -

-
sample structure: all uppercase: category mixed case: item root ├── books │   ├── fiction │   │   └── classics │   └── non-fiction ├── clothing └── electronics ├── laptops ├── phones │   ├── apple │   │   ├── iphone 6 │   │   ├── iphone 6 plus │   │   ├── iphone 6s │   │   └── iphone 6s plus │   ├── motorola │   │   ├── moto g4 │   │   ├── moto g4 play │   │   ├── moto g4 plus │   │   └── moto x │   └── samsung └── tablets └── apple i'm trying have index page show "electronics" category. "clothing" category shouldn't show since it's empty , "books" category shouldn't show either since, although has child categories, child categories don't have items. similarly, "electronics" page should show "phones" category. "laptops" category shouldn't show since it's empty , "tablets" category shouldn't show either since...
Read more