Fiverr style textarea with css and JS [duplicate] - javascript

This question already has answers here:
fixed text in text area using css and js
(2 answers)
Closed 7 years ago.
i wan't to make a textarea that looks like fiverr textarea to create a gig, the text "I wil" is fixed and disabled and i can write just next to it.
i managed to create something similar with css
but i'm stuck on the following issue when the text is written on many lines the first fixed text isn't moved to top with the other lines that the user wrote
i know javascript is the solution but i don't know exactly how , any ideas please ? i'm using angularJS if there is anything specific to angular it's also welcomed. here is my code :
<label class="item item-input" id="questionArea" style="margin-top: -30px;">
<textarea class="text-combien" style="height:100px;padding-right:15px;" ng-model="question.text" placeholder=""> </textarea>
<div class="before-text">Pour Combien,</div>
<div class="ask-text">?</div>
</label>

You can use the text-indent CSS property on the textarea, and then you just need to position a span to go where you've indented the text. Check out this jsFiddle. You will need to tweak the positioning/sizing based on what font you want.
<div id="container">
<textarea placeholder="do something I'm really good at"></textarea>
<span class="textbox-prefix">I will</span>
</div>
<style type="text/css">
.textbox-prefix{
position:absolute;
top:11px;
left:10px;
font-family: monospace;
}
textarea{
text-indent: 50px;
width:300px;
height;200px;
}
</style>

The answer I was looking for is here :
https://jsfiddle.net/ttwbxwon/66/
with the following javascript function binded to onscroll event of the textarea :
function heigthChange() {
var e = document.getElementById("text-combien");
var height = e.scrollTop;
document.getElementById("before-text").style.top = (0 - height) + "px" ;
}

Related

Remove whitespace around text in div

Is it possible to remove white space at the end of text with CSS (or optionally with JS)? I've tried all kinds of display property, but none of them seem to work. I would need to dynamically insert a blink-div at the end of multi line sentence. Currently it's is being added outside of phrase-div that contains sample text (which, as a div, is rectangular with white space I don't need). HTML structure looks like this:
<div id="writr-div">
<div id="phrase-div"></div>
<div id="blink-div"></div>
</div>
Please check out the both images:
Original:
Desired effect (border and background are for preview purpose):
EDIT:
Okay, I may haven't made myself clear enough. This is what I want (that's not an absolute position, I need it to be at the end of the sentce, no matter how long it is):
Thanks,
Luca
Simply use span:
#writr-div {
width:140px;
border:1px solid;
}
#blink-div {
border:1px solid red;
}
<div id="writr-div">
<span id="phrase-div">Some text here and there</span>
<span id="blink-div"> another text</span>
</div>

How to get color of div with javascript [duplicate]

This question already has answers here:
How to get the background color of an HTML element?
(7 answers)
Closed 7 years ago.
I have been working on getting the background color of a div and add padding to the div i want to do this WITHOUT JQUERY I have the html but no javascript yet. I have been trying the other code from google but it will not work. What i am trying do not work so I am looking for someone who can get me the code for this project.
THIS NEEDS TO BE
WITHOUT JQUERY
HTML CODE:
<div style="background: green">
HELLO WORLD
</div>
Thank You.
ELEMENT.style.backgroundColor will give you the CSS-Attribute of the Element. (You can also use it to set the color)
To set the padding use ELEMENT.style.padding = "10px"
alert(document.getElementById("myDiv").style.backgroundColor)
document.getElementById("myDiv").style.padding = "100px"
<div id="myDiv" style="background: green">
HELLO WORLD
</div>
For this particular example:
<div style="background: green">
HELLO WORLD
</div>
You can just pick it up from the style object:
document.querySelector('div').style.background;
If it's applied through a style tag or a stylesheet then you can use:
window.getComputedStyle(document.querySelector('div')).background
Try this.
document.getElementsByTagName('div')[0].style.backgroundColor

Div becomes child of previous div? - a quirk of CSS? Javascript? [duplicate]

This question already has answers here:
Are (non-void) self-closing tags valid in HTML5?
(8 answers)
Closed 7 years ago.
It's working this way on all the browsers I can see the page from. I swear to you that this is the exact code from the html:
<td class="bardisplay">
<div class="bar hot" />
<div class="bar cool" />
</td>
But yet in the debugger of every single browser I've brought this up in, the DOM inspector shows something like this: (Chrome, here)
There is no difference between Mozilla, IE, and Chrome. I about freaked out when I saw it in the Chrome debugger.
Here is all the pertinent CSS:
td.bardisplay {
height : 66px;
padding : 8px 0px;
margin-left : 5pt;
}
.bar { height : 50px; }
.hot {
float : left;
background-color : red;
}
.cool {
float : left;
background-color : green;
}
Now, the really weird thing: I did not have this problem, with the same html when I put all my bar displays into a main table (3 levels up).
I had a six-column table, one with a label, one with a display, and one with a ratio, and the next three repeating, but I did not like how the second set of columns would "wag" back and forth as the table was updated. So I set the master table to a single row of two tds with three-column tables inside them. The display is now rock-solid, except that the DOM wants to put one div inside the other.
I googled this about every way I could think before posting here.
<div>'s cannot self-close, so the browser assumes the second one is the child of the first one:
<td class="bardisplay">
<div class="bar hot"></div>
<div class="bar cool"></div>
</td>
In HTML 5, <foo /> means <foo>, the start tag. It is not a "self-closing tag". Instead, certain elements are designated as having no end tag, for example <br>. These are collectively called void elements. The slash is just syntactic sugar for people who are addicted to XML. Using the slash in a non-void element tag is invalid, but browsers parse it as the start tag anyway, leading to a mismatch in end tags.
Source
How about this?
<td class="bardisplay">
<div class="bar hot"> </div>
<div class="bar cool"> </div>
</td>

How can this effect (line breaks) be achieved with CSS and/or Javascript

Right now i am using multiple heading tags and a css class to achieve the effect shown in the image below, Is there any way to achieve this by using just a single heading/line and css?
Current Code :
<h2 class="heading">Hi guys, How can i achieve this effect using just a single</h2>
<div class="clearfix"></div>
<h2 class="heading">line of text and css. Right now i am using</h2>
<h2 class="heading">multiple <h2> tags and a css class to achieve this effect.</h2>
<h2 class="heading">Is it possible to achieve this only with css or do i have to use Javascript as well?</h2>
Expected Code
<h2 class="heading">Hi guys, How can i achieve this effect using just a single line of text and css. Right now i am using multiple <h2> tags and a css class to achieve this effect. Is it possible to achieve this only with css or do i have to use Javascript as well?</h2>
The main problem with this according to me is, I cannot make it responsive without decreasing font size, padding, etc which i don't want.
And even if i make it responsive i cannot add line breaks wherever i want without using other tags or javascript.
How did you guys get around this?
one, of the tons of solutions
<h2 class="heading">
<span>Hi guys, How can i achieve this effect using just a single</span>
<span>line of text and css. Right now i am using</span>
<span>multiple <h2> tags and a css class to achieve this effect.</span>
<span>Is it possible to achieve this only with css or do i have to use Javascript as well?</span>
<span class="clear"></span>
</h2>
with this styles in <head>
<style type="text/css">
h2.heading {
background:#0f0;
padding:2px;
float:left;
}
h2.heading span {
clear:left;
display:block;
float:left;
background:#fff;
padding:1px;
margin:1px;
}
h2.heading .clear {
clear:left;
margin:0px;
padding:0px;
float:none;
}
</style>
EDIT: second variant
<style type="text/css">
h2.heading {
background:#0f0;
padding:2px;
display:inline-block;
font-size:20px;
}
h2.heading span {
background:#fff;
padding:1px;
margin:1px;
line-height:30px;
}
</style>
with this markup
<div style="width:300px;">
<h2 class="heading">
<span>Hi guys, How can i achieve this effect using just a single line of text and css. Right now i am using multiple <h2> tags and a css class to achieve this effect. Is it possible to achieve this only with css or do i have to use Javascript as well?</span>
</h2>
</div>
No need of CSS or JavaScript, just use the <br> tag.
<h2 class="heading">
Hi guys, How can i achieve this effect using just a single
<br>
line of text and css. Right now i am using
<br>
multiple <h2> tags and a css class to achieve this effect.
<br>
Is it possible to achieve this only with css or do i have to use Javascript as well?
</h2>
Or did I misunderstand the question?
I kind of solved the problem. Take a look here http://jsfiddle.net/7nafE/ (remove the div to see the responsivness)
HTML:
<span class="heading">Hi guys, How can i achieve this effect using just a single line of text and css. Right now i am using multiple <h2> tags and a css class to achieve this effect. Is it possible to achieve this only with css or do i have to use Javascript as well?</h2>
Same as your HTML except that I used a span instead of h2
And css:
.heading {
background: white;
line-height:2em;
padding: 0.3em;;
}
body { /*not really neccessary to show, but anyway*/
background: limegreen;
font-family: verdana;
color: #999999}
Problem with that is that there are no paddings to the left and right of the text.
And also. you can't get your line breaks where you want. It is all up to which container you place it in. It is, if you asked me, just good because that makes it responsive in a way a <br /> or something like that wouldn't do.

Dynamically resize text to fill div [duplicate]

This question already has answers here:
Auto-size dynamic text to fill fixed size container
(21 answers)
Closed 8 years ago.
I have been searching for a solution to resize the text size in a div to make the text fill out the entire div height and width, with no avail.
I have made some images to help understand this problem:
So this is a simple div with a height and width set. This height and width does not change, the text in the box does! So what I want to do is to make that text fill the whole width and height of the div just like in the image below.
I have been working on the simple example below and I simply cannot find out how to do this. I have tried setting relative font-sizes with percentage, doing things with overflow,
text-aligning all not giving me the result I want.
<html>
<head>
<title>Test</title>
<style type="text/css">
#box1, #box2{
width: 400px;
height: 300px;
color: white;
margin: 10;
font-size:larger;
text-align:justify;
letter-spacing: 100%;
}
#box1 { background-color: green;}
#box2 { background-color: blue;}
</style>
</head>
<body>
<div id="box1">
Llorem ipsum foo bar baz
</div>
<div id="box2">
Foobar
</div>
</body>
</html>
Is this problem even solvable with simple CSS or will I have to do some javascript/jQuery?
As I said this may be a dupe of
Auto-size dynamic text to fill fixed size container.
The OP did a jQuery plugin for that means, you can download it here
It doesn't seem to up to date though!
Good luck!
You can use FitText.js (github page) to solve this problem. Is really small and efficient compared to TextFill. TextFill uses an expensive while loop and FitText don't.
Also FitText is more flexible (I use it in a proyect with very special requirements and works like a champ!).
HTML:
<div class="container">
<h1 id="responsive_headline">Your fancy title</h1>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="jquery.fittext.js"></script>
<script>
jQuery("#responsive_headline").fitText();
</script>
You also can set options to it:
<script>
jQuery("#responsive_headline").fitText(1, { minFontSize: '30px', maxFontSize: '90px'});
</script>
CSS:
#responsive_headline {
width: 100%;
display: block;
}
And if you need it, FitText also has a no-jQuery version.
My guess is, this is not the kind of thing you can do with CSS. There isn't any kind of notion of percentage in fonts (as far as I know). You'll probably need to use Javascript.

Categories