Editable CSS by editing text on textarea? - javascript

How can I make a textarea which has the stylesheet of the web page inside it?
I want to make a web page which a user can customize its <style> settings by editing text inside a textarea.
Here's what I have done so far; inside the <textarea> of this code snippet is the editable text which I intend to make it function as the web page's stylesheet, but I'm not sure how to make it work.
I did many web search looking for solutions, but could not find useful help regarding this particular function. Any help will be appreciated.
function myFunction() {
document.getElementsByTagName("style")[0].innerHTML = "document.getElementById('input').value;";
}
<p>sample text</p>
<textarea id="input" oninput="myFunction()" rows="5">p {
font-family: monospace;
font-size: 15px;
}
</textarea>

You're very close, but your code has 2 problems.
document.getElementsByTagName returns an array, so you need to select the first element of the array using [0].
You are not actually getting the input element, you're just using a string of the code you want to run (i.e. you want to run the code document.getElementById('input').value but you've put quotes around it, which turns it into a string).
This updated version should work:
function myFunction() {
document.getElementsByTagName("style")[0].innerHTML = document.getElementById('input').value;
}
<p>sample text</p>
<textarea id="input" oninput="myFunction()" rows="5">html {
font-family: monospace;
font-size: 15px;
}
</textarea>

Another possibility is to use inline styles with the display style set to "block" and the contenteditable attribute set to "true".
Example:
<div>
<style style="
display: block;
padding: 0 0.5rem;
border: 1px solid black;
border-radius: 4px;
white-space: pre;
font-family: 'Courier New', Courier, monospace;
font-size: small;
"
contenteditable="true">
#myDiv {
height: 100%;
--l1: repeating-linear-gradient(-60deg,
transparent 0,
transparent 5px,
rgba(210, 180, 140, 0.5) 0,
rgba(210, 180, 140, 0.5) 35px);
--l0: repeating-linear-gradient(60deg,
transparent 0,
transparent 5px,
rgba(210, 180, 140, 0.5) 0,
rgba(210, 180, 140, 0.5) 35px);
background: var(--l1), var(--l0);
}
</style>
<div id="myDiv"></div>
</div>
This will directly allow to edit and alter the contents of the style definitions by the user, without the direct possibility to save the modifications.

Related

Replacing Color in element.style with JavaScript, Jquery or CSS

I know there are a few examples in the community where folks have been able to accomplish this, but I'm struggling with my particular example.
I have a script that's adding a widget on my site, and it's setting the color in element.style with the HTML to color: rgb(0, 0, 0);, I'd like it to be white.
element.style {
background-color: rgb(123, 104, 238);
height: 44px;
color: rgb(0, 0, 0);
}
And here's where it's set in the HTML
<button
type="button"
id="ada-chat-button"
class="button--text button-v2 button--appear"
aria-label="Chat with bot"
title="Chat with bot"
style="
background-color: rgb(123, 104, 238);
height: 44px;
color: rgb(0, 0, 0);
"
>
</button>
Thank you so much in advance for any direction!!
The style attribute always takes precedence over css rules because it is applied directly to the element.
If you want to modify one of the values of a style attribute, you can do it with javascript.
Below is an example with jQuery.
$('#ada-chat-button').css({ "color": 'rgb(255, 255, 255)'});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button
type="button"
id="ada-chat-button"
class="button--text button-v2 button--appear"
aria-label="Chat with bot"
title="Chat with bot"
style="
background-color: rgb(123, 104, 238);
height: 44px;
color: rgb(0, 0, 0);
"
>Test
</button>
You seem to be confused about how style settings are made. For a simple case you can do it all in the .html file
<body style="background-color: gray;">
<button
type="button"
id="ada-chat-button"
class="button--text button-v2 button--appear"
aria-label="Chat with bot"
title="Chat with bot"
style="
background-color: rgb(123, 104, 238);
height: 44px;
color: rgb(0, 0, 0);
"
>The Button
</button>
</body>
Try running the code snippet above and you will see, I set background-color style property of body to gray, background-color of button to rgb(123, 104, 238) and color to rgb(0,0,0) (which is black). Now if you change color of button to white or rgb(255,255,255) which are the same thing, it will make the font color white. Try playing around with the above code snippet.
Now if you have a larger project where you want to specify styles separately, you create a separate .css file, and it would look like this...
body {
background-color: gray;
}
button#ada-chat-button {
background-color: rgb(123, 104, 238);
height: 44px;
color: rgb(0, 0, 0);
}
<body>
<button
type="button"
id="ada-chat-button"
class="button--text button-v2 button--appear"
aria-label="Chat with bot"
title="Chat with bot"
>The Button
</button>
</body>
The above snippet does the same thing but the styles are set separately in a CSS file. The "button#ada-chat-button" specifies that the style we are setting only applies to the button component with id=ada-chat-button. (# specifies id see https://www.w3schools.com/cssref/css_selectors.asp). Alternatively we could have specified by class. button.button-v2 {...} would mean the style applies to every button with class button-v2. In your case, you have set the button to have classes button-v2, button--text, and button--appear, which I presume have some meaning in whatever css framework you are using.

is it possible to change to HTML root element style with js

Hi im trying to change to font-size of the whole HTML page currently i have in my css :
html {
font-size : 65.5%
}
and im looking to mutate the value with JS for ex :
document.getElementsByTagName('html').style.fontSize = '35%'
if that however is not possible please explain to me why and maybe provide a solution for this thanks
getElementsByTagName is grabbing an HTMLCollection vs. a single element. [0] index it to grab the html tag and proceed with what you had:
document.getElementsByTagName('html')[0].style.fontSize = '35%';
Alternatively, you could use querySelector, which would just select the first matching element:
document.querySelector('html').style.fontSize = '35%';
Another way, slightly more concise:
document.documentElement.style.fontSize = '35%'
As Carl said, your code runs into an issue by expecting a single <html> element from document.getElementsByTagName('html'), but is instead getting a collection of elements. Carl's answer will help you resolve that problem.
There is still another problem you may encounter though: if you are trying to reduce all font sizes by applying a smaller font size to the root <html> element you will only succeed in effecting font-sizes relative to the <html> element! Setting font-size: 20px; will cause that element to always have 20px font, no matter the font sizes of its ancestor elements.
We can see that some font sizes fail to change in the following example:
/* We attempt to shrink all font sizes: */
html { font-size: 66%; }
/* These styles just make it easier to see what's happening */
div {
box-shadow: 0 0 0 1px black;
padding: 4px;
margin-bottom: 10px;
line-height: 30px;
background-color: #ffffff;
}
body > div { background-color: rgba(0, 0, 0, 0.05); }
**Html font-size: 66%**<br/><br/>
<div style="font-size: 100%">
font-size: 100%;
</div>
<div style="font-size: 100%">
font-size: 100%;
<div style="font-size: 100%">
font-size: 100%;
</div>
</div>
<div style="font-size: 16px">
font-size: 16px; (not effected by html font-size!)
</div>
<div style="font-size: 16px">
font-size: 16px; (not effected by html font-size!)
<div style="font-size: 100%">
font-size: 100%; (not effected by html font-size!)
</div>
</div>
Following Carl's advice, and making sure all font-sizes in your page are relative, will give you the results you want!

Can you turn a CSS background-image into a submit button using JavaScript? [duplicate]

This question already has answers here:
How do I add a "search" button in a text input field?
(7 answers)
Closed 5 years ago.
Here is the HTML form:
<form method="post" action="search.php">
<input type="text" id="inputSearch"/>
</form>
And some CSS:
#inputSearch {
padding:18px 15px 18px 52px;
font-size:1rem;
color:#1f5350;
border:none;
/*defining background image as a search symbol*/
background: #7accc8 url(search.png) 8px 14px no-repeat;
background-size:25px 26px;
}
The search icon is just a static image. Using JavaScript, how can I grab the CSS background-image and use it to create a clickable submit button without adding further HTML code?
You can wrap your search icon in <a></a> tags, that way your image will be clickable and can take the user to the page you want once he clicks on it: Here's an example:
<div class="maindiv">
<form id="myform" name="myform" method="post" action="schitems.php">
<input type="search" id="itemcd" name="itemcd" class="inputfields" placeholder="Type an Ingredient..." />
<img src="search_icon.jpg" alt="search">
</form>
</div>
What you're trying to achieve can't actually be accomplished with raw CSS; you need to use JavaScript and attach a click event handler to the element.
Unfortunately, considering you're making use of background-image, your image is essentially 'part of' the whole <input> element itself, and as far as I'm aware, you can't separate out the click functionality (without making use of a separate element for the image).
Having said that, you can make it so that the form submits when any part of the <input> is clicked on with the following. This can be improved by double-checking that there is actually content entered into the input before allowing the form submission to fire:
var form = document.getElementById('myform');
var input = document.getElementById('itemcd');
input.onclick = function() {
if (this.value.length > 0) {
form.submit();
}
}
#myform {
width: 260px;
margin: 0 auto;
}
input[type="search"] {
padding: 18px 15px 18px 52px;
font-size: 1rem;
color: #1f5350;
/*removing boder from search box*/
border: none;
/*defining background image as a search symbol*/
background-image: url(http://placehold.it/100);
background-repeat: no-repeat;
/*background-size*/
-webkit-background-size: 25px 26px;
-moz-background-size: 25px 26px;
-o-background-size: 25px 26px;
background-size: 25px 26px;
/*positioning background image*/
background-position: 8px 14px;
/*changing background color form white*/
background-color: #7accc8;
outline: 0;
}
/*now using placeholder property to change color of placholder text and making it consitent accross the browser by use of prefix*/
input[type="search"]::-webkit-input-placeholder {
color: #b1e0de;
}
input[type="search"]:-moz-placeholder {
/* Firefox 18- */
color: #b1e0de;
}
input[type="search"]::-moz-placeholder {
/* Firefox 19+ */
color: #b1e0de;
}
input[type="search"]:-ms-input-placeholder {
/* interner explorer*/
color: #b1e0de;
}
<div class="maindiv">
<form id="myform" name="myform" method="post" action="schitems.php">
<input type="search" id="itemcd" name="itemcd" class="inputfields" placeholder="Type an Ingredient..." />
</form>
</div>
Hope this helps! :)

HTML: Div Click function not working (amateaur)

I am facing a problem in the script:
$('.box').click(function () {$("input[type='image']").click(); });
I wish to click the <p> elements to upload an image file from the user pc.
When I use "brackets" to write my code, it also shows the errors:
$ was used before it was defined.
missing use strict statement.
Here is my code.
Am I coding wrong in javascript?
Thanks in advance :)
If i understand you correctly following will help you
The <input type="image">is a graphical submit button.not the file upload button
For uploading file you need to use <input type="file">.
$('div.box').on('click',function() {
$("input[type='file']").trigger('click');
});
.pic {
height: 638px;
width: 938px;
background-image: url('https://lh3.googleusercontent.com/sYpfIOEWajHnFESqdf0D4u1Kym0ErKpQ4gDn_Rwkxh3VxOrXw1cKgj-DZaNvVrAHpkhklQHNmBVHLhLbr57Le1699Hiibqm96oC-czexuHcn-LBkx5lKz_y9CQwvh_haCjDis7MDjhCOnIr2NU3eApw4ldE6riAo_PaqCH-oqDB2ZAIsFjiJTOqIEdAFBxSEWXNtVn4UOzqyk3y1ViAAS7XJ6gmxnh4zmVvIcUdzlhEOBKPIWnerm7OMBQ5N6zQK7pvgmHZ-SHEQWTpRN-B9ohdHsy8eHknlw7fYcUtI6JqOAZ0G93TJEuay-CU9WB8_3zf6OJsPpO-bWNa3AxEqeHRfUAHLiarTW_vBviDo6y8cvEIvGxe6OXGojbjSstRWq-Re-oYiZMkDnPuvloXETA7A84U9hGSkKU_eQoIpPhqOUH3diz1u8vVocWts6u7lOiHde7nqgrOEFQt1Cgu3jJaJ7oAzVEHeNWg7EhLQL33RQJEhL8p1R8X70QMttUkLEZjSVFNdSRKxEC7YZIj9gJel04Qz2Q8jwd3qcHZNaANwKI8TdAS0hWzDoPgWp1nATDM-Vx775-4Mpo7hR2Dr3hBR1ougQRm5p0-Rlqdft1gtqaM1JWfMr-TCfJE09ceJfUzGqR3Wfmr519NDpK_x317gh0_Z8kB8MwvYBKZS-g=w958-h638-no');
background-repeat: no-repeat;
}
.box {
float: left;
width: 100px;
height: 100px;
background-color: #FFF;
-webkit-filter: blur(0);
transform: matrix3d(3.356071, -0.24874, 0, 0.002092, 0.702007, 2.436204, 0, -0.000061, 0, 0, 1, 0, 61, 147, 0, 1);
transform-origin: 0px 0px 0px;
cursor: pointer;
border:2px solid red;
}
.box>p {
font-family: georgia;
line-height: o.45em;
font-size: 12px;
text-align: center;
}
#upload {
display: none;
}
<body>
<h1>Sample page</h1>
<div class="pic">
<input type="file" id="upload" />
<div class="box">
<p>...........</p>
<p>Add Screenshot</p>
<p>within this</p>
<p>red border</p>
<p>...........</p>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src='java.js'></script>
</body>
# update based on comment:-
When you change $("p") to $(".box") it will create recursive calls.
inorder to avoid this you need to place <input type="file" id="upload" /> outside the div with class box.
Moreover you can place scripts and link tag anywhere in the document if you place it before body browser will load script before loading the body element and if you place it after body tag
Recomented way is loading the script after the body since it will load all the elements to DOM before the scripts is loaded it will improve the web page performance and also it will reduce the conflicts that cause the referring the DOM elements before loading

Making a single line of text into separate boxes using CSS

Is it possible to run a single line of text wrapped in a single tag, and then output it with a background colour, breaks into multiple lines encased in a box, and these boxes are translucent that overlapped each other?
I have a demo in JSFiddle >here<.
<div class="wrap">
<p><b>Live a good life. If there are gods and they are just,</b>
</p>
<p><b>then they will not care how devout you have been,</b>
</p>
<p><b>but will welcome you based on the virtues you have lived by.</b>
</p>
<p><b>~Marcus Aurelius</b>
</p>
</div>
That up there is what I wanted to accomplish in terms of looks, but it is not what I wanted to accomplish in terms of markup.
I needed partcularly this line to break into seperate boxes that overlap:
<blockquote class="blue-tape">Live a good life. If there are gods and they are just,
then they will not care how devout you have been,
but will welcome you based on the virtues you have lived by.
Now how do I split these into boxed lines? ~Marcus Aurelius</blockquote>
Is this still a CSS3 job, or do we need to use JQuery now?
(CSS for all of it)
.wrap {
width:100%;
text-align:center;
}
p {
display:block;
}
b {
display:inline-block;
background-color: rgba(78, 145, 220, 0.5);
color: #55349E;
font-weight:100;
padding:10px 1% 18px;
margin:-10px auto;
white-space:pre-wrap;
text-align:center;
}
.blue-tape {
text-align: center;
font-weight: 100;
font-size: 14px;
color: #fff;
display: block;
background-color: rgba(78, 145, 220, 0.5);
line-height: 1.6677547em;
width:80%;
margin: 0 auto;
white-space: pre-wrap;
}
You can use a span with a background color and extra line-height, to achieve the desired effect: (Fiddle)
CSS
span {
background-color: rgba(78, 145, 220, 0.5);
line-height:180%;
padding:.5em 0em;
}
HTML
<span>Live a good life. If there are gods and they are just, then they will not care how devout you have been, but will welcome you based on the virtues you have lived by. Now how do I split these into boxed lines?</span>
Becomes:

Categories

Resources