I'm trying to make a background change dynamically using Javascript using event listeners that are listening to "input" on input type="color" fields.
When I click on the color input fields after I choose a color from the pallet, the background color changes properly. But, I'd like the background to change dynamically as the user scrolls the pallet, and not only when he chooses the final color. Hope I was clear, and thanks in advance!
/* Variables Caching */
var h3 = document.querySelector("h3");
var input_left = document.querySelector("#color_selector_1");
var input_right = document.querySelector("#color_selector_2");
/* Function Declerations */
function colorChange()
{
// edit body style accordingally
var newStyle = changeBodyStyle();
// edit h3
editH3(newStyle);
}
function editH3(new_body_style)
{
h3.textContent = "";
h3.textContent = new_body_style;
}
function changeBodyStyle()
{
var new_background = "linear-gradient(to right, " + input_left.value.toString() + ", " + input_right.value.toString() + ")";
document.body.style.background = new_background;
return new_background;
}
/* Adding Event Listeners */
input_left.addEventListener("input", colorChange);
input_right.addEventListener("input", colorChange);
body{
font: 'Raleway', sans-serif;
color: rgba(0,0,0,.5);
text-align: center;
text-transform: uppercase;
letter-spacing: .5em;
top: 15%;
background: linear-gradient(to right, red, yellow);
}
h1{
font: 600 3.5em 'Raleway' , sans-serif;
color: rgba(0,0,0,.5);
text-align: center;
text-transform: uppercase;
letter-spacing: .5em;
width: 100%;
}
h3 {
font: 900 1em 'Raleway' , sans-serif;
color: rgba(0,0,0,0.5);
text-align: center;
text-transform: none;
letter-spacing: 0.01em;
}
<!DOCTYPE html>
<html>
<head>
<title>Gradient Background</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Background Generator</h1>
<h2>Current CSS Background</h2>
<h3>
<h4>this is a test</h4>
</h3>
<input type="color" id="color_selector_1" value="#00ff00">
<input type="color" id="color_selector_2" value="#ff0000">
<!-- JavaScript -->
<script type="text/javascript" src="script.js">
</script>
</body>
</html>
You'll need to build your own color picker, or use a third-party one, rather than relying on the one built in to the browser. The one built in to the browser doesn't communicate the user's choice back to the page until the user clicks OK, so it's impossible to do what you want with it.
Related
TLDR: How to prevent img from being repositioned when another element above is manipulated by JS.
I am in an introduction to coding course, and this week we were creating a calculator which would allow the user to input a number and receive a total cost based on this quantity (using shirts for an example). I wanted to add a .gif below this calculator, although the .gif is being shifted down when the total amount is displayed on the screen after the user submits their number.
There is already space between the input/button and the .gif below, but the text being added to the screen will move the .gif further down. I tried using a <br clear="top"> thinking that it may wrap the text from the top to stop interference, but that did not seem to work. I also tried position: absolute but that did not work either. Upon inputting an answer with the button, I have it written so var message = "Your total for "+v+" shirts is $"+total; document.querySelector("#paragraph-1").innerHTML = message; and this message is what is impacting the .gif. The image has automatic margins set on CSS img{ width: 50%; display: block; margin-left: auto; margin-right: auto;.
Here is a link for live editing: https://jsfiddle.net/6fom3syt/
Thank you for your time and I appreciate any feedback!
One easy way to solve it:
<p id="paragraph-1"> </p>
don't leave the p element empty.
There are several ways to do what you want, but the easiest is to use the position: absolute on the paragraph. By setting the position: relative to the paragraph container, when you use position: relative on the paragraph, the latter will refer directly to the container, adding bottom: -3rem to position it below the input and left and translate to center it, the result should be what you want.
var cost = 9.99;
var subtotal;
document.querySelector("#button-1").onclick = click
//console.log(document);
function click(){
var i = document.querySelector("#input-1");
var v = i.value;
console.log(typeof(v));
var subtotal = cost*v; //coercion
var total = addTax(subtotal);
total = total.toFixed(2);
var message = "Your total for "+v+" shirts is $"+total;
document.querySelector("#paragraph-1").innerHTML = message;
//console.log("button has been clicked", v, subtotal, total);
if(v==1){
var message2 = "Your total for "+v+" shirt is $"+total;
console.log(message2);
document.querySelector("#paragraph-1").innerHTML = message2
}
else{
console.log(message);
}
}
function addTax(num){
//var taxRate = 0.13;
//var taxAmount = num*taxRate;
//var total = num+taxAmount;
var tax = 1.13;
var total = num*tax;
//console.log(total);
return total
}
h1{
color: antiquewhite;
text-align: center;
font-family: 'Georgia', Times New Roman, Times, serif;
}
#container{
width: 70%;
margin: auto;
text-align: center;
position: relative;
}
#paragraph-1 {
position: absolute;
bottom: -2.5rem;
left: 50%;
transform: translateX(-50%);
}
body{
background-color: rgb(95, 147, 119);
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
color: antiquewhite;
}
button{
background-color:rgb(95, 147, 119);
color: antiquewhite;
border-color: antiquewhite;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
cursor:pointer;
}
input{
background-color: rgb(95, 147, 119);
color:antiquewhite;
border-color:antiquewhite;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
img{
width: 50%;
display: block;
margin-left: auto;
margin-right: auto;
}
<!DOCTYPE html>
<html>
<head>
<link rel = "stylesheet" type = "text/css" href = "m3.css">
</head>
<body>
<div id = "container">
<h1 id= "mainHeading">module 3: functions</h1>
<h2>How many shirts would you like to buy?</h2>
<button id="button-1">submit</button>
<input id="input-1" type="number">
<p id="paragraph-1"></p>
</div>
<br clear="top">
<p><img src = https://media3.giphy.com/media/3o6Mb7jQurR1B7mM5G/giphy.gif>
</p>
<script src="m3.js"></script>
</body>
</html>
(You should still make it responsive or make the text not wrap, otherwise the space you used between the input and the image is not enough.)
One of the easies way is to handle by css. like has some minimum height so UI looks more good.
https://jsfiddle.net/6fom3syt/
#paragraph-1{
min-height:30px;
}
this is my first time using StackOverflow, so I still don't know how to use the code snippets properly.
I am still a beginner into programming and chose to start with the front-end side, i've done an orange background with "this is the red heading" written in red, it worked.
however, I'm trying to make a button that when it's clicked, only the background color changes from orange to yellow, but the button doesn't do anything at all.
here's the code("estilo" is the name of the CSS file and "responsividade" is the name of the JS file):
function changeColor() {
document.getElementById("redhead").style.backgroundColor = "yellowbg";
}
#redhead {
background-color: orange;
color: red;
padding: 40px;
text-align: center;
}
#yellowbg {
background-color: yellow;
padding: 40px;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<body>
<link rel="stylesheet" href="estilo.css">
<script src="responsividade.js"></script>
<h1 id="redhead">this is the red heading</h1>
<button type="button" onclick="changeColor()">Click Here</button>
</body>
</head>
</html>
Here: document.getElementById("redhead").style.backgroundColor = "yellow"; you are trying to assign a css class name to the backgroun color property.
function changeColor() {
document.getElementById("redhead").style.backgroundColor = "yellow";
}
#redhead {
background-color: orange;
color: red;
padding: 40px;
text-align: center;
}
#yellowbg {
background-color: yellow;
padding: 40px;
text-align: center;
}
<!DOCTYPE html>
<html>
<head> </head>
<body>
<link rel="stylesheet" href="estilo.css">
<script src="responsividade.js"></script>
<h1 id="redhead">this is the red heading</h1>
<button type="button" onclick="changeColor()">Click Here</button>
</body>
</html>
if you want to change color try document.getElementById("redhead").style.backgroundColor = "yellow";
or if you want to set another id try
document.getElementById("redhead").setAttribute('id', 'yellowbg');
You have written your code in the head tag.
In background-color value given as yellowbg.
function changeColor() {
document.getElementById("redhead").style.backgroundColor = "yellow";
}
#redhead {
background-color: orange;
color: red;
padding: 40px;
text-align: center;
}
#yellowbg {
background-color: yellow;
padding: 40px;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<link rel="stylesheet" href="estilo.css">
<script src="responsividade.js"></script>
<h1 id="redhead">this is the red heading</h1>
<button type="button" onclick="changeColor()">Click Here</button>
</body>
</html>
#yellowbg ruleset all properties are there in #readhead ruleset except background-color so in js, you can just update background color only.
const colorChanger = {
'eq' : 0,
'change' : function(targetID, colorCircles) {
document.getElementById(targetID).style.backgroundColor = colorCircles[this.eq];
this.eq = (this.eq === colorCircles.length-1) ? 0:this.eq += 1;
}
}
#test{
border :1px solid #000;
width :100px;
height :100px;
}
<div id="test"></div>
<button onclick="colorChanger.change('test', ['red','yellow', 'green', 'blue', 'purple'])">Change Color</button>
<!--
colorChanger.change('test', ['red','yellow', 'green', 'blue', 'purple']
------------------------------------------------------
>target is something with id 'test'
>and background color of target ID will be change using this circles ['red','yellow', 'green', 'blue', 'purple']
-->
In your Js function you need to a background color as you trying to do.
document.getElementById("redhead").style.backgroundColor = "yellowbg";
"yellowbg" is not a color but an Id.
So you need to change that to
document.getElementById("redhead").style.backgroundColor = "yellow";
You can add css property to a class of an element and with js change the class name to add different property to that element.
document.getElementById("redhead").className = "newClass";
Ubuntu 18.04
i am customizing the panel, this is the content in .css file
i have added ::first-line part to cusomize first line as shown in the below image. but it is not applied after reboot.
Content of .css file:
#panel .clock-display {
color: blue; }
#panel .clock-display::first-line {
color: green; }
Content of .js file:
var DateMenuButton = new Lang.Class({
Name: 'DateMenuButton',
Extends: PanelMenu.Button,
_init() {
let item;
let hbox;
let vbox;
let menuAlignment = 0.5;
if (Clutter.get_default_text_direction() == Clutter.TextDirection.RTL)
menuAlignment = 1.0 - menuAlignment;
this.parent(menuAlignment);
this._clockDisplay = new St.Label({ y_align: Clutter.ActorAlign.CENTER });
this._indicator = new MessagesIndicator();
let box = new St.BoxLayout();
box.add_actor(new IndicatorPad(this._indicator.actor));
box.add_actor(this._clockDisplay);
box.add_actor(this._indicator.actor);
this.actor.label_actor = this._clockDisplay;
this.actor.add_actor(box);
this.actor.add_style_class_name ('clock-display');
in this last line this.actor.add_style_calss_name ('clock-display'); i guess i have to specify its pseudo_calss or something but i dont have any idea.
in the below image if you see the day with time stamp, it is the default behavior when Ubuntu is freshly installed.
by using Clock Override Extension, it is possible to make our own text..
like in this image..
here is a clue, this Clock Override Extension have special feature to make a next line by adding %n in its settings https://developer.gnome.org/glib/stable/glib-GDateTime.html#g-date-time-format
Clock Override Extension Details: https://extensions.gnome.org/extension/1206/clock-override/
Question:
i am looking to configure both lines independently in .css file to choose the colors, heights, weights, shadows, borders etc.
is it achievable?
all related files here:
https://wetransfer.com/downloads/dd97a53972b17f746225efdfa345a03220181231063516/111ced
Can you try to add a style class to a specific object?
For example: #line 475
this._clockDisplay = new St.Label({ y_align: Clutter.ActorAlign.CENTER, style_class: 'clock-label' });
CSS:
.clock-label { color: #101010; font-weight: bold; background: #fff; }
Try it.
It is working unless your text is considered as one line.
#panel .clock-display {
color: blue;
margin-left: 40px;
margin-right: 40px;
}
#panel .clock-display::first-line {
height: 40px;
width: device-width;
background: blue;}
.barfont {
height: 30px;
width: device-width;
color: blue;
font-size:15px;
font-weight: bold;
line-height:0px;
}
.barbackground {
margin: 0;
padding: 0;
height: 30px;
width: device-width;
background-color: green;
border-top-style: solid;
border-top-color: green;
line-height:0px;
}
<html>
<body background="https://i.stack.imgur.com/80hPG.png" >
<div class="barbackground">
<p class="barfont">data                       day first link </p></div>
</body>
</html>
Changing the first line.
.clock-display {
color: blue;
margin-left: 40px;
text-indent: 40px;
}
::first-line {
color: green;
/* WARNING: DO NOT USE THESE */
/* Many properties are invalid in ::first-line pseudo-elements */
margin-left: 20px;
text-indent: 20px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body >
<pre class="clock-display">
121
data and time</pre>
</body>
</html>
How can I save contenteditable element with javascript(no PHP) into actual HTML code? So I can edit content whenever even in offline mode.
Like when you click "save button" it replace old file with new one(text with changes).
If there is a way to make this work in offline mode with any other programming lang please suggest.
I found a few examples but they were all made with PHP.
Also, I will post code. In this code, you are able to edit the file with javascript and save it. But problem is that it does not save into actual HTML code.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>
<style type="text/css">
body{
font-family: "Dosis";
font-size: 1.3em;
line-height: 1.6em;
}
.headline{
font-size: 2em;
text-align: center;
}
#wrapper {
width: 600px;
background: #FFF;
padding: 1em;
margin: 1em auto;
box-shadow: 0 2px 5px rgba(0,0,0,0.3);
border-radius: 3px;
}
button {
border: none;
padding: 0.8em;
background: #F96;
border-radius: 3px;
color: white;
font-weight: bold;
margin: 0 0 1em;
}
button:hover, button:focus {
cursor: pointer;
outline: none;
}
#editor {
padding: 1em;
background: #E6E6E6;
border-radius: 3px;
}
</style>
<body>
<div id="wrapper">
<section>
<h1 class="headline">contentEditable Demonstration</h1>
<button id="editBtn" type="button">Edit Document</button>
<div id="editDocument">
<h1 id="title">A Nice Heading.</h1>
<p>Last Edited by <span id="author">Monty Shokeen</span>
</p>
<p id="content">You can change the heading, author name and this content itself. Click on Edit Document to start editing. At this point, you can edit this document and the changes will be saved in localStorage. However, once you reload the page your changes will be gone. To fix it we will have to retrieve the contents from localSotrage when the page reloads.</p>
</div>
</section>
</div>
<script>
var editBtn = document.getElementById('editBtn');
var editables = document.querySelectorAll('#title, #author, #content');
if (typeof(Storage) !== "undefined") {
if (localStorage.getItem('title') !== null) {
editables[0].innerHTML = localStorage.getItem('title');
}
if (localStorage.getItem('author') !== null) {
editables[1].innerHTML = localStorage.getItem('author');
}
if (localStorage.getItem('content') !== null) {
editables[2].innerHTML = localStorage.getItem('content');
}
}
editBtn.addEventListener('click', function(e) {
if (!editables[0].isContentEditable) {
editables[0].contentEditable = 'true';
editables[1].contentEditable = 'true';
editables[2].contentEditable = 'true';
editBtn.innerHTML = 'Save Changes';
editBtn.style.backgroundColor = '#6F9';
} else {
// Disable Editing
editables[0].contentEditable = 'false';
editables[1].contentEditable = 'false';
editables[2].contentEditable = 'false';
// Change Button Text and Color
editBtn.innerHTML = 'Enable Editing';
editBtn.style.backgroundColor = '#F96';
// Save the data in localStorage
for (var i = 0; i < editables.length; i++) {
localStorage.setItem(editables[i].getAttribute('id'), editables[i].innerHTML);
}
}
});
</script>
</body>
</html>
You'll want to use something like the downloadInnerHtml function as described here. Ideally you'll probably also want to strip out the script tag and content editable attribute before exporting because you won't want the final html page to be editable
Great day, I would like to ask for some advise please, im really new to html and css as well as java and putting all of them together is a bit hard for me so, i'm hoping for some advise.
I recently created a form, though i couldn't figure out how to reset all the function, like resetting the contain to its original form after im done copying it.
please the my codes and let me know what i can do. your help is greatly appreciated.
<html>
<head>
<style type="text/css">
/* Some Generic styles */
body {
text-align: center;
font-family: "Open Sans", Helvetica, Arial, sans-serif;
color: #023378;
line-height: 0.5;
background-color:#1E334F;
}
h1 {
margin: 0.5em auto 0.5em;
color: #71A4EB;
}
textarea,
button {
font-size: 1em;
font-family: "Open Sans", Helvetica, Arial, sans-serif;
}
textarea {
display: block;
margin: 0.5em auto 0.5em;
background: #CAD6E6;
resize: vertical;
}
[id="cleared"] {
margin-top: 4em;
}
textarea:focus {
border-color: #8fa423;
}
button {
position: relative;
padding: 8px 20px;
border: 0;
font-size: 0.835em;
text-transform: uppercase;
letter-spacing: 0.125em;
font-weight: bold;
color: #3F71B6;
background: #7DA9E6;
transition: background .275s;
}
button:hover,
button:focus {
background: #5275A5;
}
p {
margin-top: 3.25em;
font-size: .825em;
color: #777;
font-weight: bold;
letter-spacing: .01em
}
</style>
<h1>SH!N</h1>
<body>
<textarea id="to-copy" cols="80" rows="25" spellcheck="false">
SESA
Caller's Name:
Call back number:
Email Address:
Related case #s (case history):
Location, remote/hotel/office:
Application Name:
Number of Users Affected: Number of Users Affected: (Single User / Less than 5 users / 5 or more users)
What is the issue/problem:
When did the issue/problem begin:
Login id:
Error message (if any):
When was the last time it worked properly:
Have there been any changes to your PC since the last time it worked properly:
Have you changed your password recently:
Troubleshooting steps (detailed):
Additional Detail (links, screen shots etc.. :
</textarea><br>
<button id="copy" type="button">Copy<span class="copiedtext"aria-hidden="true"></span></button>
<textarea id="text" cols="80" rows="8" >
Resolution:
A - problem:
B - cause:
C - actions:
D - resolution:
</textarea><br>
<button onclick="copy()">Copy</button><br>
<SCRIPT TYPE="text/javascript">
var toCopy = document.getElementById( 'to-copy' ),
btnCopy = document.getElementById( 'copy' );
btnCopy.addEventListener( 'click', function(){
toCopy.select();
if ( document.execCommand( 'copy' ) ) {
btnCopy.classList.add( 'copied' );
var temp = setInterval( function(){
btnCopy.classList.remove( 'copied' );
clearInterval(temp);
}, 600 );
} else {
console.info( 'document.execCommand went wrong…' )
}
return false;
} );
function copy () {
var text = document.getElementById('text');
var range = document.createRange();
range.selectNode(text);
window.getSelection().addRange(range);
document.execCommand('copy');
}
</SCRIPT>
</body>
</html>
In order to make a form, you should not use textarea (or using it only as a part of a form, for instance to make a comment in a blog)
If you want to make a form, you must use form tag
<form id="myForm">Caller's name <input type="text" name="callerName"> ... </form>
https://www.w3schools.com/html/html_forms.asp
And then if you want to reset it, inside javascript :
document.getElementById("myForm").reset();
Your form does have id "myForm", you select this element and use reset() function on it which work on form.
PS: You should put your style in a CSS file and your script in a JS file.
EDIT :
If you want to copy it :
var myForm = document.getElementById('myForm');
var targetForm = document.getElementById('targetForm');
targetForm.innerHTML = myForm.innerHTML;
Offcourse you need to have a form tag with id set to targetForm.