I want to right-align text to each line in a textarea that a user is typing like this:
It should also support scrolling like this (see how the top is cut off when it's out of view?):
How might I go about doing that?
EDIT:
Also, any div on the right should animate on hover and when clicked, the contents should be copied to clipboard. Like so:
Just make two different text areas and put one at left and second to right. Then make them look visually like one: for left make border-right: 0; for right - border-left: 0;
For your task you could use texterea and div like that:
* {
margin: 0;
padding: 0;
}
.textarea-block {
box-sizing: border-box;
display: inline-block;
border: 1px solid #eee;
padding: 10px;
width: 400px; /* Here you could use % or wh to make it looks better in your app */
}
/* Don't forget to make a clearfix after floats */
.textarea-block:after {
content: '';
clear: both;
}
.left {
font-family: Arial;
font-size: 16px;
border: 0;
width: 50%;
}
.right {
font-family: Arial;
font-size: 16px;
display: inline-block;
text-align: right;
width: 50%;
float: right;
}
<div class="textarea-block">
<textarea name="" cols="30" rows="10" class="left">First line
Second line</textarea>
<div class="right">
First line <br>Second line
</div>
</div>
Just be sure to make the same font-size and font-family to textarea and div to make text looks same.
When I tried to scrape some websites, I found an issue I can’t find a solution. I need to use JavaScript to select some data from a web page running AJAX.
If I click on a button on the page, I can see from Chrome developer tools that there are many elements with dynamic IDs.
For example: if I run JavaScript like this:
var data = document.getElementsByClassName('title');
I can see there are a lot of DOM items, the following is one of the elements.
<!DOCTYPE html>
<html class="context-soccer yui3-js-enabled" lang="en-GB">
<head>
<title></title>
<style>
a {
text-decoration: none;
}
.com-bet-button {
display: inline-block;
text-align: center;
height: 25px;
line-height: 25px;
font-size: 12px;
font-weight: 700;
border-width: 0;
width: 42px;
color: #fff;
font-size: 13px;
padding: 0;
background-color: #2797e6;
}
a:active, a:hover {
outline: 0;
}
a:focus {
outline: thin dotted;
}
.com-bet-button:focus, .com-bet-button:hover {
background-color: #2180c4;
}
.mod-minimarketview .ui-bet-button, .mod-minimarketview .ui-runner-active {
height: 31px;
line-height: 31px;
}
.mod-minimarketview .minimarketview-content .ui-bet-button {
float: right;
}
menu, ol, ul {
padding: 0 0 0 40px;
}
body {
color: #1e1e1e;
font-size: 12px;
}
blockquote, body, code, dd, div, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, input, legend, li, ol, p, pre, td, textarea, th, ul {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.mod-minimarketview .minimarketview-content ul li {
float: left;
width: 212px;
}
.mod-minimarketview .minimarketview-content .runner-item {
border-bottom: 1px solid #e1e1e1;
}
.mod-minimarketview .minimarketview-content .runner-item:hover, .mod-minimarketview .minimarketview-content ul.sortedMarketList > li.sortedMarket:hover {
background-color: #e1e1e1;
transition: background-color .1s ease-in;
}
.mod-minimarketview .minimarketview-content .runner-list3 li.runner-item {
width: 212px;
}
dl, menu, ol, ul {
margin: 1em 0;
}
.mod-minimarketview .minimarketview-content {
position: relative;
float: left;
width: 100%;
transition: max-height 1s linear;
}
.mod-minimarketview {
transition: max-height 1s linear;
transition: margin-bottom .1s linear;
float: left;
width: 100%;
*zoom:1: ;
margin-bottom: 5px;
background-color: #fff;
}
.mod-marketgroups .list-minimarkets {
float: left;
width: 100%;
margin-top: 0px;
}
.mod-eventgroups .headtohead-container, .mod-eventgroups .redirect, .mod-eventgroups .update-container {
float: left;
width: 100%;
}
.module-placeholder {
margin: 0 1px 5px;
}
#zone-rightcolumn > .grid-1 > .module-placeholder {
width: 636px;
float: left;
}
#zone-rightcolumn > .grid-1 {
width: 100%;
float: left;
}
#zone-rightcolumn {
width: 638px;
float: left;
position: relative;
}
#zone-left-right-columns {
width: 1014px;
margin: 0 auto;
}
#zone-container .scroller, .zone-container .scroller {
padding: 20px 0 30px;
display: block;
*zoom:1: ;
}
.zone-container {
width: auto !important;
}
#zone-container, .zone-container {
position: relative;
width: 100%;
min-height: 600px;
}
body {
margin: 0;
}
body {
font-size: 1em;
line-height: 1.4;
}
html {
font-size: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
button, html, input, select, textarea {
color: #222;
}
html {
-webkit-font-smoothing: antialiased;
}
html, html.page-virtual-sports {
background-color: #e1e6ea !important;
}
button, html, input, select, textarea {
font-family: Arial,Tahoma,Verdana,Helvetica,sans-serif;
}
html {
color: #000;
background: #fff;
}
html {
background: #ecf0f3 !important;
}
</style>
</head>
<body class="lang-en jur-international" id="yui_3_5_0_1_1577049074725_23110" data-twttr-rendered="true"><div class="zone-container" id="zone-container"><div class="scroller context-event" id="yui_3_5_0_1_1577049074725_23109"><div class="zone grid-1-1" id="zone-left-right-columns"><div class="grid-1 last-grid" id="yui_3_5_0_1_1577049074725_23121"><div class="zone grid-1 page-area page-column" id="zone-rightcolumn" data-column="Middle" data-page-area="Main"><div class="grid-1 last-grid" id="yui_3_5_0_1_1577049074725_23120"><div class="module-placeholder" id="yui_3_5_0_1_1577049074725_23119"><div class="mod yui3-widget yui3-module yui3-eventgroups" id="mod-eventgroups-1015-container" data-mod-id="1015" data-mod-type="eventgroups"><div class="mod-eventgroups mod-eventgroups-eventgroups yui3-eventgroups-content" id="mod-eventgroups-1015"><div class="update-container" id="yui_3_5_0_1_1577049074725_23118"><div class="mod yui3-widget yui3-module yui3-marketgroups" id="mod-marketgroups-1055-container" data-mod-id="1055" data-mod-type="marketgroups"><div class="mod-marketgroups mod-marketgroups-marketgroups yui3-marketgroups-content" id="mod-marketgroups-1055"><div class="updated-minimarkets" id="yui_3_5_0_1_1577049074725_23117"><div class="list-minimarkets ui-event ui-29619519" id="yui_3_5_0_1_1577049074725_23116" data-eventid="29619519" data-rule="NO_RULE"><div class="mod yui3-widget yui3-module yui3-minimarketview yui3-minimarketview-focused" id="mod-minimarketview-1056-container" data-mod-id="1056" data-mod-type="minimarketview"><div class="mod-minimarketview mod-minimarketview-minimarketview yui3-minimarketview-content" id="mod-minimarketview-1056"><div class="minimarketview-content minimarket-MATCH_ODDS-217161878 ui-market ui-924_217161878 ui-market-open" id="yui_3_5_0_1_1577049074725_27044" data-marketid="924.217161878"><ul class="runner-list3 minimarketview-1056" id="yui_3_5_0_1_1577049074725_27043"><li class="runner-item " id="yui_3_5_0_1_1577049074725_27042"><a class="com-bet-button ui-bet-button ui-market-action bet-button-b6aa2daf38ef7fdfa20369ad99daf6d705818911 ui-runner ui-924_217161878-48350 ui-runner-active ui-betslip-action" id="yui_3_5_0_1_1577049074725_27041" href="/sport/football/english-championship/blackburn-v-wigan/29619519?gaZone=Main&gaTab=UG9wdWxhcg==&bssId=48350&bsmSt=1577130300000&bsmId=924.217161878&modules=betslip&gaMod=minimarketview&bseId=29619519&isSP=false&bsContext=REAL&action=addSelection&bsUUID=b6aa2daf38ef7fdfa20369ad99daf6d705818911&gaPageView=event&xsrftoken=821c3ad1-24ff-11ea-a6bc-fa163e7531ec&bsGroup=29619519" rel="nofollow" data-betslip-action="add-bet" data-loader=".multiples-bet-list" data-context="real" data-eventid="29619519" data-marketid="924.217161878" data-uuid="b6aa2daf38ef7fdfa20369ad99daf6d705818911" data-selectionid="48350" data-is-fctc="0"><span class="ui-runner-price ui-924_217161878-48350 ui-display-decimal-price" id="yui_3_5_0_1_1577049074725_27045">
1.8
</span></a></li></ul></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></body>
</html>
If I reload the page after a few minutes, then if I inspect the same DOM item again, the id changes, for example, it changes from id="yui_3_5_0_1_1577049074725_27043" to id="yui_3_5_0_1_1577049074725_45678", while the others are still the same.
I want to get the element ID and make a web form, then use HTTP Post to submit the form, but the element IDs keep changing, I can’t submit the form. I have to know the ID before I submit the form.
First I tried to step through the JavaScript of the page, but it seems not easy, as some JavaScript is obviously to add something irrelevant, like the Google Analytic and Tag Manager, which if debug step by step in Google Chrome Develop Tools, it will take weeks or months before I can hit the line which generate the dynamic ID, but the form will stay there only a few days, then it is gone. You don’t have enough time to debug it.
But I can see the web link for the same DOM item is something like this:
https://www.betfair.com/sport/football/english-championship/blackburn-v-wigan/29619519?gaZone=Main&gaTab=UG9wdWxhcg==&bssId=1&bsmSt=1577130300&bsmId=924.217317379&modules=betslip&gaMod=correct-score-markets&bseId=29619519&isSP=false&bsContext=REAL&action=addSelection&bsUUID=21f4d0d51ce1f65f2667b8141dbc46815f1ba965&gaPageView=event&xsrftoken=821c3ad1-24ff-11ea-a6bc-fa163e7531ec&bsGroup=29619519
For this web link, all the information remain the same except the UUID is different each time you visit it. Therefore, I think the different yui ID# has some relationship with this UUID, but since I don’t know how to get the UUID, then I can’t figure out how to get the DOM ID#. Debugging the JavaScript seems not a right solution.
For this page, there are 100+ such DOM items, but I don’t need them all, I need only 5 to 10 of them, and as long as I find the necessary information before the web page disappears, I will use HTTP Post data to the web server.
Please advice on which direction I should go to figure out it. Or at least to find out which JavaScript function is creating the DOM ID#, if any.
I am thinking about generating a UUID, then visit the web link by replacing the UUID part of the web link, but not sure, if it will work or not.
How I can find the id="yui_3_5_0_1_1577049074725_27043" the time I want to post the data to the server, actually, the only missing link is the last part of the id, which is 27043.
Thanks,
Maybe possible solution could be: If only id is changing and there is pattern in id, than possible solution is to get tags and iterate over them and break loop when tag is found with specific id pattern. Example below:
var elements = document.getElementsByTagName('div');
var wanted_element;
for (element in elements)
{
var id = elements[element].getAttribute('id');
if (id.includes("yui_3_5_0_1_1577049074725_"))
{console.log(id);
wanted_element = elements[element];
break;}
}
But some tweaking (checking more attributes and so on ...) could be needed for your case.
If you are using python and selenium this could looks like this:
from selenium import webdriver
driver = webdriver.Chrome()
driver.get('YourUrl')
divs = driver.find_elements_by_tag_name('div')
wanted_div = None
for div in divs:
ID = div.get_attribute('id')
if 'yui_3_5_0_1_1577049074725' in ID:
wanted_div = div
break
For pattern check in id attribute you can also use regex ...
I want some action to be performed when the child element .menuitems is hovered. Currently I've replaced the action with an alert to make it simple.
Now the problem is that when I use selector ("#result_row .menuitems"), nothing works. But if I use ("#result_row"), it works fine i.e., alert works.
Why is it so? It should work in both cases? I want the hover to work on child as well as grandchilds (.menu1).
Here's my code:
HTML
<div id="result_row"><div class="menuitems">
<div class="menu1">sfsdsf<span id="srno">4</span></div>
<div class="menu2">sfsdfs#saf</div>
<div class="menu3">sdfsdf<span id="cross">X</span></div>
<div class="clear"></div>
</div>
</div>
CSS
.menuitems{
margin-bottom: 5px;
background: #007fad;
}
.resultmenu > .menuitems{
background: #004068;
}
.menuitems div{
background: #00aeef;
color: white;
font-family: sans-serif;
text-align: center;
font-size: 14px;
padding-top: 3px;
padding-bottom: 3px;
position: relative;
}
.menu1{
float: left;
width: 25%;
margin-right: 2px;
}
.menu2{
float: left;
width: 40.4%;
}
.menu3{
float: right;
width: 34%;
}
.clear{
clear: both;
padding: 0 !important;
}
JavaScript
$(document).ready(function(){
$("#result_row .menuitems").hover(function(){
//var tarparent=$(event.target).parent().find("#cross");
//$(tarparent).toggle();
alert("Hello");
});
});
NOTE: This code won't render fine as it is missing many other styles, parent elements etc. So I've put a screenshot to describe the problem.
Red rectangle is .result_row. Green is child, .menuitems.
EDIT:
If you want to know something else, here it is: when I use .menuitems:hover in CSS (not jQuery), the hover works.
EDIT2:
One more thing that can be important to you while answering is: The window "EMAIL" you're seing in this image is no loaded when open the main page(site). It is loaded only when I click a button on the page, and the content you're seeing in 2nd and 3rd row are loaded ALONG WITH IT, i.e., they're not static!
I entered everything you had into jsfiddle and it worked (hit F12 to see console.log)
https://jsfiddle.net/bLjmocza/
I also replaced
$("#result_row .menuitems").hover(function(){
with
$(".menuitems").hover(function(){
as that seemed to be more what you were trying to achieve in the first place
use this code:
$(document).ready(function(){
$("#result_row .menuitems").mouseover(function(){
alert("Hello");
});
});
Your problem is float in your CSS. See: http://wtfhtmlcss.com/#floats-computed-height.
The quick and diry fix ist to float the parent. But you are better off applying a clearfix to the parent. The added bonus is you can then get rid of your clear div.
Below is clearfix option:
$(document).ready(function(){
$("#result_row .menuitems").hover(function(){
//var tarparent=$(event.target).parent().find("#cross");
//$(tarparent).toggle();
alert("Hello");
});
});
.menuitems{
margin-bottom: 5px;
background: #007fad;
}
.resultmenu > .menuitems{
background: #004068;
}
.menuitems div{
background: #00aeef;
color: white;
font-family: sans-serif;
text-align: center;
font-size: 14px;
padding-top: 3px;
padding-bottom: 3px;
position: relative;
}
.menu1{
float: left;
width: 25%;
margin-right: 2px;
}
.menu2{
float: left;
width: 40.4%;
}
.menu3{
float: right;
width: 34%;
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="result_row"><div class="menuitems clearfix">
<div class="menu1">sfsdsf<span id="srno">4</span></div>
<div class="menu2">sfsdfs#saf</div>
<div class="menu3">sdfsdf<span id="cross">X</span></div>
</div>
</div>
Updated: This won't work in jQuery 1.9 onwards!
http://api.jquery.com/on/#additional-notes. Use mouseenter/mouseleave instead
A second anser as this one addresses binding handlers to dynamic elements
As you are dynamically adding elements to the page you want to use jquery's on method
Change gour jquery to
$(document).ready(function(){
$("#result_row").on(".menuitems", "hover", function(){
//var tarparent=$(event.target).parent().find("#cross");
//$(tarparent).toggle();
alert("Hello");
});
});
The main difference is this will attatch the hover event handler any child of resultrow with a class of menuitems that exist now or that are added later.
A friend of mine is renting a webshop from a company. He is able to choose from different templates, and has the ability to override the predefined CSS and add javascript snippets. He asked me to help her making several changes, but there is something I cannot deal with: the add to cart button. In the below CSS there is a "content" property that holds a predefined value. I would like to change the value of this property dinamically, based on the HTML lang attribute. Do you have any idea how could I achieve this? (I know how to get the value of the lang attribute. My problem is changing the value of the "content" property)
#add_to_cart:before {
display: block;
font-family: 'sosa';
font-size: 35px;
content: "Ä";
padding-right: 5px;
font-weight: 400;
width: 71px;
height: 71px;
line-height: 65px;
text-align: center;
text-indent: 0;
text-shadow: none;
color: #fff;
}
Try this:
HTML:
<html lang="en">
...
<div id="add_to_cart" data-content="">example</div>
CSS:
#add_to_cart:before {
display: block;
font-size: 35px;
content: attr(data-content);
padding-right: 5px;
font-weight: 400;
width: 71px;
height: 71px;
line-height: 65px;
text-align: center;
text-indent: 0;
text-shadow: none;
color: red;
}
JS:
$('#add_to_cart').attr('data-content', (document.documentElement.lang == 'en' ? "x" : "y"));
You'll see that the character before 'example' changes when lang attr of <html> is changed.
Write a Javascript function that updates the CSS. Javascript can access the HTML attribute.
document.documentElement.lang
This is the situation
<div id="idDiv">
<span class="flaticon-edit23"></span>
</div>
to change the css of the span i have to do this
#idDiv > span::before{
position: relative;
font-size: 26px;
line-height: 60px;
margin-left: 13px;
color: white;
}
if i click on #idDiv, I have to change the icon of the span, and also change some parameters of the css span (in this case, the font-size)
this works , and change correctly the icon
$("#idDiv").find("span:first").removeClass().addClass("flaticon-floppy13");
but I should change the css of the ::before selector , and i try this (and other similar combinations)
$("#idDiv").find("span:first").removeClass().addClass("flaticon-floppy13").find("span:before").css({"font-size":"36px"});
but it does not work properly
how can I do this ? thanks
UPDATE
this don't work
$("#idDiv").find("span:first").removeClass().addClass("flaticon-floppy13");
$("#idDiv").find("span:before").css("font-size","36px");
this don't work
$("#idDiv").find("span:first").removeClass().addClass("flaticon-floppy13");
$("#idDiv").find("span:before").css({"font-size":"36px"});
this don't work
.new_class{font-size: 36px; }
$("#idDiv").find("span:first").removeClass().addClass("flaticon-floppy13");
$("#idDiv").find("span:first").addClass("new_class");
this don't work
.new_class > span::before{font-size: 36px; }
$("#idDiv").find("span:first").removeClass().addClass("flaticon-floppy13");
$("#idDiv").find("span:first").addClass("new_class");
I don't think pseudo elements can be selected and modified as you are trying to do here.
What you can instead do is to have two different pseudo elements defined and either of them would get applied based on the span's CSS class.
e.g.
#idDiv > span.flaticon-edit23::before{
position: relative;
font-size: 26px;
line-height: 60px;
margin-left: 13px;
color: white;
}
#idDiv > span.flaticon-floppy13::before{
position: relative;
font-size: 36px;
line-height: 60px;
margin-left: 13px;
color: white;
}
and then, only changing the CSS class of the span
$("#idDiv").find("span:first").removeClass().addClass("flaticon-floppy13");
should be sufficient..
$("#idDiv").find("span:first").removeClass().addClass("flaticon-floppy13");
$("#idDiv").find("span:before").css("font-size":"36px");
Also
if (!$('.your class').val()) {
$('#idDiv').val("flaticon-floppy13");
} else {
$('#idDiv').val("");
}
or just remove {} but its better to separate the functions. I don't think they work together.
Have you done the same like this?
.new_class{font-size: 36px !important; }
$("#idDiv").find("span:first").addClass("new_class");