How can I position an element at the end of some text? - javascript

I have an element that I would like to keep constantly positioned at the end of a string of text, as if it's a blinking I-shaped cursor you see when typing.
However, it will currently only sit directly below the text.
I have tried display: flex, float: left and display: block but none of those worked.
Here is my code:
function myFunction()
{
result.innerHTML += "I will not make any more boring art ";
}
body
{
background-color:white;
font-family: Lucida Console Regular;
font-size:15px;
color:black;
border-width:0px;
border: 0;
}
input {
font-size:15px;
border-top-style: hidden;
border-right-style: hidden;
border-left-style: hidden;
border-bottom-style: hidden;
background-color: white;
font-family: Lucida Console Regular;
color: transparent;
display: inline-block;
}
result{
display: flex;
}
.no-outline:focus {
outline: none;
}
textarea:focus, input:focus{
outline: none;
}
.cursor {
position: relative;
float:left;
flex:1;
}
.cursor i {
flex:1;
position: absolute;
width: 1px;
height: 100%;
background-color: black;
animation-name: blink;
animation-duration: 800ms;
animation-iteration-count: infinite;
opacity: 1;
}
#keyframes blink {
from { opacity: 1; }
to { opacity: 0; }
}
<input class="class" type="text" onkeydown="myFunction()" placeholder="type something" autofocus spellcheck="false" >
<div id="result"></div>
<div class="cursor">
<input type="text" class="rq-form-element" /><i></i></div>

You could just make use of the ::after selector to create the blinking cursor. That way it will always sit after the last character, like so:
function myFunction() {
result.innerHTML += "I will not make any more boring art ";
}
#import url('https://fonts.googleapis.com/css2?family=Inconsolata&family=Orbitron:wght#400;500&family=Play&display=swap');
body {
font-family: 'Inconsolata', monospace;
font-size:15px;
}
input {
border: hidden;
background-color: white;
color: transparent;
}
#result::after {
content: '';
border-right: 1px solid black;
height: 100%;
animation-name: blink;
animation-duration: 800ms;
animation-iteration-count: infinite;
}
textarea:focus, input:focus {
outline: none;
}
#keyframes blink {
from { opacity: 1; }
to { opacity: 0; }
}
<input class="class" type="text" onkeydown="myFunction()" placeholder="type something" autofocus spellcheck="false" >
<div id="result"></div>
<div class="cursor">
<input type="text" class="rq-form-element" /><i></i>
</div>

Related

Turn a mouseover event into an autoscroll

As part of the creation of an overlay, I got a code that is close to what I want to do, on codepen.
This one displays a parallax of text on a background.
But on the CodePen project, the motion animation is done on a mouseover event.
I would like to make this animation happen automatically, over a period of ten seconds, without having to call a mouseover.
Here is the code in question
const position = document.documentElement;
position.addEventListener("mousemove", (e) => {
position.style.setProperty("--x", e.clientX + "px");
});
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "poppins";
font-weight: 900;
}
a {
text-decoration: none;
}
section {
position: relative;
width: 100vw;
height: 100vh;
overflow: hidden;
background: #111;
}
.text {
position: relative;
transform: skewY(350deg) translateY(-200px);
animation: animatecolor 5s linear infinite;
}
#keyframes animatecolor {
0% {
filter: hue-rotate(0deg);
}
100% {
filter: hue-rotate(360deg);
}
}
.text h2 {
position: relative;
width: 100%;
font-size: 8em;
color: #fff;
pointer-events: none;
line-height: 1em;
white-space: nowrap;
text-shadow: calc(var(--x)) 100px 0 rgba(255, 255, 255, 0.1);
transform: translateX(calc(0% - var(--x) * var(--i)));
}
.text h2 span {
color: #0f0;
margin: 0 10px;
}
.text h2 span:nth-child(even) {
color: transparent;
-webkit-text-stroke: 2px #fff;
}
<section>
<div class="text">
<a href="https://wgraphiste.com" target="blank">
<h2 style="--i:0.5"><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span></h2>
<h2 style="--i:1.5"><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span></h2>
<h2 style="--i:2.5"><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span></h2>
<h2 style="--i:2.25"><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span></h2>
<h2 style="--i:1.25"><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span></h2>
<h2 style="--i:0.25"><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span></h2>
<h2 style="--i:3"><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span></h2>
<h2 style="--i:1.25"><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span></h2>
<h2 style="--i:1.75"><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span></h2>
</a>
</div>
</section>
Thank you in advance for your ideas! :)
It can be changed to run automatically with the requestAnimationFrame like this:
const position = document.documentElement;
let time = Date.now(), x = 0;
const move = () => {
if (Date.now() - time > 10000)
return;
position.style.setProperty("--x", (x++) + "px");
requestAnimationFrame(move);
};
move();
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "poppins";
font-weight: 900;
}
a {
text-decoration: none;
}
section {
position: relative;
width: 100vw;
height: 100vh;
overflow: hidden;
background: #111;
}
.text {
position: relative;
transform: skewY(350deg) translateY(-200px);
animation: animatecolor 5s linear infinite;
}
#keyframes animatecolor {
0% {
filter: hue-rotate(0deg);
}
100% {
filter: hue-rotate(360deg);
}
}
.text h2 {
position: relative;
width: 100%;
font-size: 8em;
color: #fff;
pointer-events: none;
line-height: 1em;
white-space: nowrap;
text-shadow: calc(var(--x)) 100px 0 rgba(255, 255, 255, 0.1);
transform: translateX(calc(0% - var(--x) * var(--i)));
}
.text h2 span {
color: #0f0;
margin: 0 10px;
}
.text h2 span:nth-child(even) {
color: transparent;
-webkit-text-stroke: 2px #fff;
}
<section>
<div class="text">
<a href="https://wgraphiste.com" target="blank">
<h2 style="--i:0.5"><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span></h2>
<h2 style="--i:1.5"><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span></h2>
<h2 style="--i:2.5"><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span></h2>
<h2 style="--i:2.25"><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span></h2>
<h2 style="--i:1.25"><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span></h2>
<h2 style="--i:0.25"><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span></h2>
<h2 style="--i:3"><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span></h2>
<h2 style="--i:1.25"><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span></h2>
<h2 style="--i:1.75"><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span></h2>
</a>
</div>
</section>

How to add an element after validating a form?

I want to add some text as well as a picture if possible after a user does not type in a string with the "#" symbol, then separate text telling the user that they did not type in an email.
I have not tried anything yet. I just want to receive a some information that will point me in the right direction.
This is the html and js code:
<!DOCTYPE html>
<html>
<head>
<title>
Sign Up Page
</title>
<link rel="stylesheet" href="style.css" media="screen"/>
</head>
<body>
<script>
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("something must be filled out");
return false;
}
else if (!(x.includes("#")))
{
alert("you must have to filled value with #");
document.getElementById("nameT").style.color="red";
document.getElementById("fname").classList.add('error');
return false;
}
}
</script>
<div class="ocean">
<div class="wave"/>
<div class="wave"/>
</div>
<h1>
<center>
Whale
</center>
</h1>
<div class="loginbox">
<h2>
Login
</h2>
<form name="myForm" onsubmit="return validateForm()"
method="post">
<p id="nameT"> email </p>
<input type="text" id="fname" name="fname"
placeholder="enter email" onblur="validateForm()" />
<p name="passT"> password </p>
<input type="text" name="name" placeholder="enter
password" />
<br />
<input type="submit" value="Submit" />
<br />
<a href="#">
Lost your password?
</a>
<br />
<a href="#">
Create an account
</a>
</form>
</div>
</body>
</html>
This is the css code:
html, body { height: 100%; }
body {
background:radial-gradient(ellipse at center, rgba(255,254,234,1)
0%, rgba(255,254,234,1) 35%, #ffffff 100%);
overflow: hidden;
}
.ocean {
height: 5%;
width:100%;
position:absolute;
bottom:0;
left:0;
background: #ffffff;
}
.wave {
background: url(https://s3-us-west-
2.amazonaws.com/s.cdpn.io/85486/wave.svg) repeat-x;
position: absolute;
top: -198px;
width: 6400px;
height: 198px;
animation: wave 7s cubic-bezier( 0.36, 0.45, 0.63, 0.53)
infinite;
transform: translate3d(0, 0, 0);
}
.wave:nth-of-type(2) {
top: -175px;
animation: wave 7s cubic-bezier( 0.36, 0.45, 0.63, 0.53) -.125s
infinite, swell 7s ease -1.25s infinite;
opacity: 1;
}
#keyframes wave {
0% {
margin-left: 0;
}
100% {
margin-left: -1600px;
}
}
#keyframes swell {
0%, 100% {
transform: translate3d(0,-25px,0);
}
50% {
transform: translate3d(0,5px,0);
}
}
.loginbox
{
width: 340px;
height: 360px;
background: #000;
color: #fff;
top: 50%;
left:50%;
position: absolute;
transform: translate(-50%, -50%);
box-sizing: border-box;
}
h2
{
margin: 0;
padding: 0 0 20px;
text-align: center;
font-size: 22px;
}
.loginbox input
{
width: 100%;
margin-bottom: 20px;
}
.loginbox input[type="text"], input[type="password"]
{
border: none;
border-bottom: 1px solid #fff;
background: transparent;
outline: none;
height: 40px;
color: #fff;
font-size: 16px;
}
.loginbox input[type="submit"]
{
border: none;
outline: none;
height: 48px;
background: #fb2525;
color: #fff;
font-size: 18px;
border-radius: 20px;
}
.loginbox input[type="submit"]:hover
{
cursor: pointer;
background: #ffc107;
color: #000;
}
.loginbox a
{
text-decoration: none;
font-size: 12px;
line-height: 20px;
color: darkgrey;
}
.loginbox p
{
margin: 0;
padding: 10px;
font-weight: bold;
}
.loginbox a:hover
{
color: #ffc107;
}
.error{
border-bottom:2px solid red !important;
}
The expected output is that when a user clicks off the email textbox and the email they filled out does not have "#", a text should all of a sudden appear bellow the textbox stating that the user did not enter an email. I have not tried to implement any code for this to happen, I just want someone to help me by pointing me in the right direction (I have tried to research this but I could not find anything).
You can use input type = 'email' and use pattern and title attribute to get perfect validation
<p id="nameT"> email </p>
<input type="email" id="fname" name="fname" placeholder="enter email" pattern="^[^\s#]+#[^\s#]+\.[^\s#]+$" title="enter valid email address" onkeyup="myFunction(event)">
<script>
function myFunction(e) {
if (e.target.validity.valid) {
console.log('input type email is valid');
// rest of your javascript code
}
</script>
in this way you get perfact validation for email field
You may try below code:
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("something must be filled out");
return false;
}
else if (!(x.includes("#")))
{
alert("you must have to filled value with #");
document.getElementById("nameT").style.color="red";
document.getElementById("email_error").style.display="inline-block";
document.getElementById("fname").classList.add('error');
return false;
}
}
html, body { height: 100%; }
body {
background:radial-gradient(ellipse at center, rgba(255,254,234,1)
0%, rgba(255,254,234,1) 35%, #ffffff 100%);
overflow: hidden;
}
.ocean {
height: 5%;
width:100%;
position:absolute;
bottom:0;
left:0;
background: #ffffff;
}
.wave {
background: url(https://s3-us-west-
2.amazonaws.com/s.cdpn.io/85486/wave.svg) repeat-x;
position: absolute;
top: -198px;
width: 6400px;
height: 198px;
animation: wave 7s cubic-bezier( 0.36, 0.45, 0.63, 0.53)
infinite;
transform: translate3d(0, 0, 0);
}
.wave:nth-of-type(2) {
top: -175px;
animation: wave 7s cubic-bezier( 0.36, 0.45, 0.63, 0.53) -.125s
infinite, swell 7s ease -1.25s infinite;
opacity: 1;
}
#keyframes wave {
0% {
margin-left: 0;
}
100% {
margin-left: -1600px;
}
}
#keyframes swell {
0%, 100% {
transform: translate3d(0,-25px,0);
}
50% {
transform: translate3d(0,5px,0);
}
}
.loginbox
{
width: 340px;
height: 360px;
background: #000;
color: #fff;
top: 50%;
left:50%;
position: absolute;
transform: translate(-50%, -50%);
box-sizing: border-box;
}
h2
{
margin: 0;
padding: 0 0 20px;
text-align: center;
font-size: 22px;
}
.loginbox input
{
width: 100%;
margin-bottom: 20px;
}
.loginbox input[type="text"], input[type="password"]
{
border: none;
border-bottom: 1px solid #fff;
background: transparent;
outline: none;
height: 40px;
color: #fff;
font-size: 16px;
}
.loginbox input[type="submit"]
{
border: none;
outline: none;
height: 48px;
background: #fb2525;
color: #fff;
font-size: 18px;
border-radius: 20px;
}
.loginbox input[type="submit"]:hover
{
cursor: pointer;
background: #ffc107;
color: #000;
}
.loginbox a
{
text-decoration: none;
font-size: 12px;
line-height: 20px;
color: darkgrey;
}
.loginbox p
{
margin: 0;
padding: 10px;
font-weight: bold;
}
.loginbox a:hover
{
color: #ffc107;
}
.error{
border-bottom:2px solid red !important;
}
<!DOCTYPE html>
<html>
<head>
<title>
Sign Up Page
</title>
<link rel="stylesheet" href="style.css" media="screen"/>
</head>
<body>
<div class="ocean">
<div class="wave"></div>
<div class="wave"></div>
</div>
<h1>
<center>
Whale
</center>
</h1>
<div class="loginbox">
<h2>
Login
</h2>
<form name="myForm" onsubmit="return validateForm()"
method="post">
<p id="nameT"> email </p>
<input type="text" id="fname" name="fname"
placeholder="enter email" onblur="validateForm()">
<span id="email_error" style="display:none">user did not enter an email</span>
<p name="passT"> password </p>
<input type="text" name="name" placeholder="enter
password">
<br>
<input type="submit" value="Submit">
<br>
<a href="#">
Lost your password?
</a>
<br>
<a href="#">
Create an account
</a>
</form>
</div>
</body>
</html>
Simply You can use to validate email # using <input type="email" id="fname" name="fname"
placeholder="enter email" required>
If you want a simple email validation
<input type="email" name="email" required>
It's a browser default validation
Working code
<form>
<input type="email" name="email" required>
<input type="submit" value="Submit">
</form>

object Object issue using append

My goal is to create a to-do list and having the possibility to add more items to the list.
I'm using the .append() method to add content. However, I also need to add a checkbox for every new item added.
Here's what I have so far
(Run the code snippet and add a new item, you'll see the error I'm having)
$(document).ready(function() {
$("#button").click(function() {
var check = $("<input>", { type: "checkbox" });
var toAdd = $("input[name=ListItem]").val();
$("ul").append($("<li>" + check + "<label>" + toAdd + "</label>" + "</li>"));
});
});
#import url('https://fonts.googleapis.com/css?family=Josefin+Sans');
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
margin: 50px 0;
font-family: 'Josefin Sans', sans-serif;
font-size: 20px;
font-weight: bolder;
}
input {
cursor: pointer;
position: relative;
visibility: hidden;
}
input:after {
border: 3px solid lightblue;
border-radius: 50%;;
content: "";
display: block;
height: 46px;
width: 46px;
text-align: center;
visibility: visible;
transition: all 100ms ease-in-out;
}
input:checked:after {
border: 3px solid lightblue;
color: white;
font-size: 30px;
border-radius: 50%;
content: "✘";
line-height: 43px;
background-color: lightblue;
animation: bounce 300ms ease-in-out forwards;
}
#keyframes bounce {
0% {transform: scale(1, 1);}
70% {transform: scale(1.1, 1.1);}
100% {transform: scale(1, 1);}
}
label {
position: relative;
left: 50px;
top: 18px;!important
}
input[type=text] {
border: 3px solid lightblue;
width: 100px;
height: 50px;
visibility: visible;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list">
<h1>To do list</h1>
<form name="toDoList">
<input type="text" name="ListItem" />
</form>
<div id="button">Add</div>
<ul>
<li>
<input type="checkbox">
<label for="checkbox">Item1</label>
</li>
<li>
<input type="checkbox">
<label for="checkbox">Item2</label>
</li>
<li>
<input type="checkbox">
<label for="checkbox">Item3</label>
</li>
</ul>
</div>
You were appending Object to a string, and hence the error. Below is the updated working version of your code:
$(document).ready(function() {
$("#button").click(function() {
var toAdd = $("input[name=ListItem]").val();
$("ul").append($("<li><input type='checkbox'><label>" + toAdd + "</label>" + "</li>"));
});
});
#import url('https://fonts.googleapis.com/css?family=Josefin+Sans');
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
margin: 50px 0;
font-family: 'Josefin Sans', sans-serif;
font-size: 20px;
font-weight: bolder;
}
input {
cursor: pointer;
position: relative;
visibility: hidden;
}
input:after {
border: 3px solid lightblue;
border-radius: 50%;
;
content: "";
display: block;
height: 46px;
width: 46px;
text-align: center;
visibility: visible;
transition: all 100ms ease-in-out;
}
input:checked:after {
border: 3px solid lightblue;
color: white;
font-size: 30px;
border-radius: 50%;
content: "✘";
line-height: 43px;
background-color: lightblue;
animation: bounce 300ms ease-in-out forwards;
}
#keyframes bounce {
0% {
transform: scale(1, 1);
}
70% {
transform: scale(1.1, 1.1);
}
100% {
transform: scale(1, 1);
}
}
label {
position: relative;
left: 50px;
top: 18px;
!important
}
input[type=text] {
border: 3px solid lightblue;
width: 100px;
height: 50px;
visibility: visible;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list">
<h1>To do list</h1>
<form name="toDoList">
<input type="text" name="ListItem" />
</form>
<div id="button">Add</div>
<ul>
<li>
<input type="checkbox">
<label for="checkbox">Item1</label>
</li>
<li>
<input type="checkbox">
<label for="checkbox">Item2</label>
</li>
<li>
<input type="checkbox">
<label for="checkbox">Item3</label>
</li>
</ul>
</div>
Keeping most of your code as it was, it is enough to fix the .append command, using the functions get(0).outerHTML() as follows:
$("ul").append($("<li>" + check.get(0).outerHTML() + "<label>" + toAdd + "</label>" + "</li>"));
The function get(0) selects the first (and only) element in the object and .outerHTML() generates HTML from the jQuery object.
Here is the working snippet:
$(document).ready(function() {
$("#button").click(function() {
var check = $("<input>", { type: "checkbox" });
var toAdd = $("input[name=ListItem]").val();
alert(check.get(0).outerHTML);
$("ul").append($("<li>" + check.get(0).outerHTML + "<label>" + toAdd + "</label>" + "</li>"));
});
});
#import url('https://fonts.googleapis.com/css?family=Josefin+Sans');
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
margin: 50px 0;
font-family: 'Josefin Sans', sans-serif;
font-size: 20px;
font-weight: bolder;
}
input {
cursor: pointer;
position: relative;
visibility: hidden;
}
input:after {
border: 3px solid lightblue;
border-radius: 50%;;
content: "";
display: block;
height: 46px;
width: 46px;
text-align: center;
visibility: visible;
transition: all 100ms ease-in-out;
}
input:checked:after {
border: 3px solid lightblue;
color: white;
font-size: 30px;
border-radius: 50%;
content: "✘";
line-height: 43px;
background-color: lightblue;
animation: bounce 300ms ease-in-out forwards;
}
#keyframes bounce {
0% {transform: scale(1, 1);}
70% {transform: scale(1.1, 1.1);}
100% {transform: scale(1, 1);}
}
label {
position: relative;
left: 50px;
top: 18px;!important
}
input[type=text] {
border: 3px solid lightblue;
width: 100px;
height: 50px;
visibility: visible;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list">
<h1>To do list</h1>
<form name="toDoList">
<input type="text" name="ListItem" />
</form>
<div id="button">Add</div>
<ul>
<li>
<input type="checkbox">
<label for="checkbox">Item1</label>
</li>
<li>
<input type="checkbox">
<label for="checkbox">Item2</label>
</li>
<li>
<input type="checkbox">
<label for="checkbox">Item3</label>
</li>
</ul>
</div>

style of a web page in a disordered way

I have been trying with this html page formating for quiete a long time .I want to see these in the centre of the screen with a nice beautiful way.Any help is appreciated.
http://jsfiddle.net/bce9LfLL/
My code is
css
* {
margin:0;
padding:0;
font-family: tahoma;
}
body {
padding: 30px;
}
#fileid{
width:10%;
height:15%;
}
div {
width: 400px;
height: 25px;
background-color: white;
box-shadow: 1px 2px 3px #ededed;
position:relative;
border: 1px solid #d8d8d8;
}
input[type='file'] {
width:400px;
height:25px;
opacity:0
}
#val {
width: 400px;
height:25px;
position: absolute;
top: 0;
left: 0;
font-size:13px;
line-height: 25px;
text-indent: 10px;
pointer-events: none;
}
#button {
cursor: pointer;
display: block;
width: 90px;
background-color: purple;
height:25px;
color: white;
position: absolute;
right:0;
top: 0;
font-size: 11px;
line-height:25px;
text-align: center;
-webkit-transition: 500ms all;
-moz-transition: 500ms all;
transition: 500ms all;
}
#button:hover {
background-color: blue;
}
body {
background-color: linen;
}
div{
color: maroon;
margin-left: 40px;
font-size:100%;
}
#sid{
color: maroon;
margin-left: 40px;
font-size:100%;
}
html
<div align="center">
<b>Model</b><select id="sid">
<option >Average</option>
<option>Sum</option>
<option>Highest</option>
</select><br>
<div id="fileip">
<input type='file'> <span id='val'></span>
<span id='button'>Select File</span>
</input>
</div>
<input type="submit" value="run"><br><br>
<input type="submit" value="Display"><br>
</div>
and
javascript
$('#button').click(function () {
$("input[type='file']").trigger('click');
})
$("input[type='file']").change(function () {
$('#val').text(this.value.replace(/C:\\fakepath\\/i, ''))
})
the page should looks like
There are two options to center off the top of my head. First, fix the width and set the margin:0 auto; On the element you wish to center. The second is to put position:relative; left: calc(50% - YOURELEMENTWIDTH);
Use the <label> tag.
<body>
<label for="model">Model</label>
<select id="model">
<option>Average</option>
<option>Sum</option>
<option>Highest</option>
</select>
</body>

readmore button or show/hide for php

I want to show only e.g. 200 words from post with show/hide button to show whole post and hide post to 200 words.
Text is on variable I don't know how to do this.
I tried with javascript but I can't hide content of post.
here's the:
<div id="test">content</div>
<script>
var str = "<?=$row[3]?>";
var test = str.substr(0, 700);
document.getElementById('test').innerHTML = test;
</script>
<p id="demo"></p>
<script>
function myFunction() {
var str = "<?=$row[3]?>";
var test = str.substr(700);
document.getElementById("demo").innerHTML = test;
}
</script>
<button onclick="myFunction()">Click me</button>
You can do that in simple css
Don't need any other
hide your overflow text
modify code in css according to your need
/* css only show/hide
*/
html { background: white }
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
figure {
margin: 0 0 1.3rem 0;
-webkit-transition: .125s linear;
-moz-transition: .125s linear;
-ms-transition: .125s linear;
-o-transition: .125s linear;
transition: .125s linear;
}
figure img {
max-width: 100%;
height: auto;
}
body {
max-width: 480px;
width: 90%;
margin: 3em auto;
font-size: 75%;
line-height: 1.3rem;
font-family: sans-serif;
position: relative;
*zoom: 1;
}
body:before, body:after {
content: "";
display: table;
}
body:after { clear: both }
p { margin-bottom: 1.3rem }
article {
margin-bottom: 3rem;
position: relative;
*zoom: 1;
}
article:before, article:after {
content: "";
display: table;
}
article:after { clear: both }
article figure {
float: left;
width: 32.5%;
}
article section:first-of-type {
float: right;
width: 62.5%;
}
article section:last-of-type {
display: none;
visibility: hidden;
}
section {
-webkit-transition: .125s linear;
-moz-transition: .125s linear;
-ms-transition: .125s linear;
-o-transition: .125s linear;
transition: .125s linear;
}
input[type=checkbox] {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
width: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
}
[for="read_more"] {
position: absolute;
bottom: -3rem;
left: 0;
width: 100%;
text-align: center;
padding: .65rem;
box-shadow: inset 1px 1px rgba(0, 0, 0, 0.1), inset -1px -1px rgba(0, 0, 0, 0.1);
}
[for="read_more"]:hover {
background: rgba(0,0,0,.5);
color: rgb(255,255,255);
}
[for="read_more"] span:last-of-type {
display: none;
visibility: hidden;
}
input[type=checkbox]:checked ~ section {
display: block;
visibility: visible;
width: 100%;
}
input[type=checkbox]:checked ~ figure { width: 100% }
input[type=checkbox]:checked ~ [for="read_more"] span:first-of-type {
display: none;
visibility: hidden;
}
input[type=checkbox]:checked ~ [for="read_more"] span:last-of-type {
display: block;
visibility: visible;
}
<article>
<input type="checkbox" id="read_more" role="button">
<label for="read_more" onclick=""><span>Read More</span><span>Hide This Shit!</span></label>
<figure>
<img src="http://www.surprisegiftz.com/images/media/ceramicphototiles.jpg" alt="Example text" />
</figure>
<section>
<p>The function of a paragraph is to mark a pause, setting the paragraph apart from what precedes it. If a paragraph is preceded by a title or subhead, the indent is superfluous and can therefore be omitted</p>
</section>
<section>
<p>The function of a paragraph is to mark a pause, setting the paragraph apart from what precedes it. If a paragraph is preceded by a title or subhead, the indent is superfluous and can therefore be omitted</p>
<p>The function of a paragraph is to mark a pause, setting the paragraph apart from what precedes it. If a paragraph is preceded by a title or subhead, the indent is superfluous and can therefore be omitted</p>
</section>
</article>
You dont need to add two seperate elements for short and full content. Just make a hyperlink which will call a script to show hide full and short content.
use below html
<div id="test">content</div>
<div >
<a href="#" id="showmore" onClick="return showMore(this);" >more</a>
</div>
and below script for it
var str = "<?=$row[3]?>";
var test = str.substr(0, 200);
document.getElementById('test').innerHTML = test;
function showMore(obj){
if(obj.text == 'more'){
document.getElementById('test').innerHTML = str;
obj.text = "less";
}else{
document.getElementById('test').innerHTML = test;
obj.text = "more";
}
}
hope it will help

Categories