I'm doing a webpage for a school work and I'm trying to do a button that, when you click it, pops out and then when you click it again it pops in. The button that holds the login button should hide the whole form until I hover over it and then click login ("logga" in Swedish)...
But the form shows the whole time...
Some of the code is in Swedish, but it should not matter anyway..
HTML5:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="loggaIn.css">
<link rel="stylesheet" type="text/css" href="Stylesheet_spelnord.css">
<link rel="stylesheet" type="text/css" href="knapp.css">
<script src="loggain.js"></script>
<meta charset="utf-8"/>
<title>Spelnörd</title>
</head>
<body>
<header id="top_bg">
<h1 id="titel"> Spelnörd</h1>
</header>
<div class='hexagon'>
<ul>
<li class='polygon_top' id="toggle-login">
<a href="#">Logga in
<div id="login">
<div id="triangle"></div>
<h1>Log in</h1>
<form>
<input type="email" placeholder="Email" />
<input type="password" placeholder="Password" />
<input type="submit" value="Log in" />
</form>
</div></a>
</li>
<li class='polygon_top'></li>
<li class='polygon_top'>
Dribbble
</li>
<li class='polygon_bottom'>
Forrst
</li>
<li class='polygon_bottom'></li>
<li class='polygon_bottom'>
Twitter
</li>
</ul>
</div>
</body>
</html>
CSS for the button:
a {
text-decoration: none;
}
ul {
margin: 0;
padding: 0;
width: 100%;
}
li {
list-style-type: none;
}
/*=================================== container
*/
.hexagon {
position: absolute;
top: 24.5%;
left: 15%;
margin-top: -30px;
margin-left: -30px;
width: 60px;
transform-origin: center;
transform: scale(1.00005);
}
/*=================================== top and bottom triangle
*/
.polygon_top,
.polygon_bottom {
border-left: 18px solid transparent;
border-right: 18px solid transparent;
position: absolute;
width: 0;
height: 0;
transition: width 0.3s ease-in-out, border 0.1s linear, border-radius 0.5s ease-in-out;
}
.polygon_top a,
.polygon_bottom a {
color: rgba(55, 55, 55, 0);
display: block;
font-size: 0em;
text-transform: uppercase;
width: 100%;
transition: color, font-size 0.3s;
}
.polygon_top:nth-child(1),
.polygon_top:nth-child(3),
.polygon_bottom:nth-child(4),
.polygon_bottom:nth-child(6) {
cursor: pointer;
}
.polygon_top:nth-child(1):hover > a,
.polygon_top:nth-child(3):hover > a,
.polygon_bottom:nth-child(4):hover > a,
.polygon_bottom:nth-child(6):hover > a {
color: #373737;
font-size: 1em;
}
.polygon_top:nth-child(1) {
border-bottom: 30px solid #E56717;
right: 0;
transform: translateX(-30px) translateY(-15px);
}
.polygon_top:nth-child(1):hover {
border-radius: 4px 0 0 4px;
border-left: 18px solid #E56717;
width: 120px;
z-index: 100;
}
.polygon_top:nth-child(1) > a {
line-height: 30px;
}
.polygon_top:nth-child(2) {
border-bottom: 30px solid #E56717;
transform: translateX(12px) translateY(15px);
}
.polygon_top:nth-child(3) {
border-bottom: 30px solid #E56717;
left: 0;
transform: translateX(30px) translateY(-15px);
}
.polygon_top:nth-child(3):hover {
border-radius: 0 4px 4px 0;
border-right: 18px solid #E56717;
width: 120px;
z-index: 100;
}
.polygon_top:nth-child(3) > a {
text-align: right;
line-height: 30px;
}
.polygon_bottom:nth-child(4) {
border-top: 30px solid #565051;
right: 0;
transform: translateX(-30px) translateY(15px);
}
.polygon_bottom:nth-child(4):hover {
border-radius: 4px 0 0 4px;
border-left: 18px solid #565051;
width: 120px;
z-index: 100;
}
.polygon_bottom:nth-child(4) > a {
text-align: left;
line-height: 30px;
margin-top: -30px;
}
.polygon_bottom:nth-child(5) {
border-top: 30px solid #565051;
transform: translateX(12px) translateY(-15px);
}
.polygon_bottom:nth-child(6) {
border-top: 30px solid #565051;
transform: translateX(30px) translateY(15px);
}
.polygon_bottom:nth-child(6):hover {
border-radius: 0 4px 4px 0;
border-right: 18px solid #565051;
width: 120px;
z-index: 100;
}
.polygon_bottom:nth-child(6) > a {
text-align: right;
line-height: 30px;
margin-top: -30px;
}
CSS for the form:
#import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400,700);
#login{
width:400px;
margin:0 auto;
margin-top:8px;
margin-bottom:2%;
transition:opacity 1s;
-webkit-transition:opacity 1s;
}
#triangle{
width:0;
border-top:12x solid transparent;
border-right:12px solid transparent;
border-bottom:12px solid #3399cc;
border-left:12px solid transparent;
margin:0 auto;
}
#login h1{
background:#3399cc;
padding:20px 0;
font-size:140%;
font-weight:300;
text-align:center;
color:#fff;
}
form{
background:#f0f0f0;
padding:6% 4%;
}
input[type="email"],input[type="password"]{
width:92%;
background:#fff;
margin-bottom:4%;
border:1px solid #ccc;
padding:4%;
font-family:'Open Sans',sans-serif;
font-size:95%;
color:#555;
}
input[type="submit"]{
width:100%;
background:#3399cc;
border:0;
padding:4%;
font-family:'Open Sans',sans-serif;
font-size:100%;
color:#fff;
cursor:pointer;
transition:background .3s;
-webkit-transition:background .3s;
}
input[type="submit"]:hover{
background:#2288bb;
}
Javascript for the klick function:
$('#toggle-login').click(function(){
$('#login').toggle();
});
Try include jquery and then your javascript code, and do it to the end of your body tag...
<body>
....
some html here ....
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#toggle-login').click(function(){
$('#login').toggle();
});
});
</script>
</body>
Related
How to style my progress bar so it looks like the design? I tried to moved the text but they keep staying in the circle. Also not sure how to create the circle within another circle dot with css. It should be non clcikable. Here is the css and html files. Also not sure how to let active/finished steps be in a tick icon.
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>XXXXXX</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div id="progress">
<div id="progress-bar"></div>
<ul id="progress-text">
<li class="step active">1</li>
<li class="step">2</li>
<li class="step">3</li>
<li class="step">4</li>
<li class="step">5</li>
</ul>
</div>
<button id="progress-prev" class="btn" disabled>Prev</button>
<button id="progress-next" class="btn">Next</button>
<script src="./bar script.js"></script>
</body>
</html>
--------------------- css file
#progress {
position: relative;
margin-bottom: 30px;
}
#progress-bar {
position: absolute;
background: #4584ff;
height: 5px;
width: 0%;
top: 50%;
left: 0;
}
#progress-text {
margin: 0;
padding: 0;
list-style: none;
display: flex;
justify-content: space-between;
}
#progress-text::before {
content: "";
background-color: lightgray;
position: absolute;
top: 50%;
left: 0;
height: 5px;
width: 100%;
z-index: -1;
}
#progress-text .step {
border: 3px solid lightgray;
border-radius: 100%;
width: 25px;
height: 25px;
line-height: 25px;
text-align: center;
background-color: #fff;
font-family: sans-serif;
font-size: 14px;
position: relative;
z-index: 1;
}
#progress-text .step.active {
border-color: #4584ff;
background-color: #4584ff;
color: #fff;
}
.btn {
background: lightgray;
border: none;
border-radius: 3px;
padding: 6px 12px;
}
Here is the reference picture
I hope that's what you meant
#progress {
position: relative;
margin-bottom: 30px;
}
#progress-bar {
position: absolute;
background: #4584ff;
height: 5px;
width: 0%;
top: 50%;
left: 0;
}
#progress-text {
margin: 0;
padding: 0;
list-style: none;
display: flex;
justify-content: space-between;
}
#progress-text::before {
content: "";
background-color: lightgray;
position: absolute;
top: 50%;
left: 0;
height: 5px;
width: 100%;
z-index: -1;
}
#progress-text .step {
border: 3px solid lightgray;
border-radius: 100%;
width: 25px;
height: 25px;
line-height: 25px;
text-align: center;
background-color: #fff;
font-family: sans-serif;
font-size: 14px;
position: relative;
z-index: 1;
}
#progress-text .step.active {
border-color: #4584ff;
background-color: #4584ff;
color: #4584ff;
}
.btn {
background: lightgray;
border: none;
border-radius: 3px;
padding: 6px 12px;
}
/* added css */
#progress-text .step {
display:flex;
justify-content:center;
}
#progress-text .step label{
margin-top:120%;
font-size:.7rem;
font-weight:bold;
font-color:inherit;
}
#progress-text .step.active::after {
content:"✓";
color:#fff;
z-index:2;
position:absolute;
top:2px;
left:8px;
font-size:12px;
font-weight:bold;
}
#progress-text .step.progress{
border-color:#4584ff;
}
#progress-text .step.progress::after{
content:"•";
transform:scale(3);
position:absolute;
left:10px;
top:1.5px;
color:#4584ff;
}
#progress-text .step.progress label{
color:#4584ff;
}
<div id="progress">
<div id="progress-bar"></div>
<ul id="progress-text">
<li class="step active">
<label>Review</label>
</li>
<li class="step active">
<label>Assignment</label>
</li>
<li class="step progress">
<label>Investigation</label>
</li>
<li class="step">
<label>Handling</label>
</li>
<li class="step">
<label>Resolution</label>
</li>
</ul>
</div>
<button id="progress-prev" class="btn" disabled>Prev</button>
<button id="progress-next" class="btn">Next</button>
I have an HTML page with a sidebar. The sidebar is shown when i click 'Upload Data' button. When I resize the window, the sidebar's header (random portion from top) goes beyond the screen and the only way to retrieve is to refresh the page to start fresh. I need a solution for keeping the sidebar inside the window.
Initial body image
After resizing
HTML CODE
HEAD
<title>Index</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="https://www.pngkit.com/png/full/327-3270091_demographic-icon-sign.png">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="{{ url_for('static', filename='css/sidebar_style_final.css') }}">
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script>
<style>
.fa {
margin-left: -8px;
margin-right: 8px;
}
.bs-example {
margin: 20px;
}
html{
margin:0;
height:100%;
}
</style>
sidebar_style_final.css
#import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";
body {
font-family: 'Poppins', sans-serif;
}
p {
font-family: 'Poppins', sans-serif;
font-size: 1.1em;
font-weight: 300;
line-height: 1.7em;
color: #999;
}
a,
a:hover,
a:focus {
color: inherit;
text-decoration: none;
transition: all 0.3s;
}
.navbar {
padding: 15px 10px;
background: #fff;
border: none;
border-radius: 0;
margin-bottom: 40px;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}
.navbar-btn {
box-shadow: none;
outline: none !important;
border: none;
}
.line {
width: 100%;
height: 1px;
border-bottom: 1px dashed #ddd;
margin: 40px 0;
}
/* ---------------------------------------------------
SIDEBAR STYLE
----------------------------------------------------- */
#sidebar {
width: 450px;
position: fixed;
top: 0;
right: -450px;
height: 100%;
z-index: 999;
background: #ffffff;
color: #r45;
transition: all 0.3s;
overflow: auto;
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
}
#sidebar.active {
right: 0;
}
#dismiss {
width: 35px;
height: 35px;
line-height: 35px;
text-align: center;
background: #7386D5;
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
-webkit-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
#dismiss:hover {
background: #fff;
color: #7386D5;
}
.overlay {
display: none;
position: fixed;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.7);
z-index: 998;
opacity: 0;
transition: all 0.5s ease-in-out;
}
.overlay.active {
display: block;
opacity: 1;
}
#sidebar .sidebar-header {
padding: 20px;
background: #6d7fcc;
}
#sidebar ul.components {
padding: 20px 0;
border-bottom: 1px solid #47748b;
}
#sidebar ul p {
color: #fff;
padding: 10px;
}
#sidebar ul li a {
padding: 10px;
font-size: 1.1em;
display: block;
}
#sidebar ul li a:hover {
color: #7386D5;
background: #fff;
}
#sidebar ul li.active>a,
a[aria-expanded="true"] {
color: #fff;
background: #6d7fcc;
}
a[data-toggle="collapse"] {
position: relative;
}
.dropdown-toggle::after {
display: block;
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
}
ul ul a {
font-size: 0.9em !important;
padding-left: 30px !important;
background: #6d7fcc;
}
ul.CTAs {
padding: 20px;
}
ul.CTAs a {
text-align: center;
font-size: 0.9em !important;
display: block;
border-radius: 5px;
margin-bottom: 5px;
}
a.download {
background: #fff;
color: #7386D5;
}
a.article,
a.article:hover {
background: #6d7fcc !important;
color: #fff !important;
}
/* ---------------------------------------------------
CONTENT STYLE
----------------------------------------------------- */
#content {
width: 100%;
padding: 20px;
min-height: 100vh;
transition: all 0.3s;
position: absolute;
top: 0;
right: 0;
}
BODY
<body onload="start_nav()" onresize="change_sidebar()">
<div class="grey_bound" id="grey_bound"></div>
<div class="wrapper">
<!-- Sidebar -->
<div id="sidebar">
<div id="dismiss" style="left: 30px; top: 20px;" onclick="hide_grey_bound()">
<i class="fas fa-arrow-right" onclick="hide_grey_bound()"></i>
</div>
<div class="sidebar-header" align="right">
<h3>Upload new data</h3>
</div>
<br/>
<div class="bs-example" style="width:400px;position:relative;left:10px;">
<ul class="nav nav-tabs" id="myTab">
<li class="nav-item">
<a href="#shp_files" class="nav-link" data-toggle="tab" id='new_tab'>Shape Files</a>
</li>
<li class="nav-item">
Category Files
</li>
</ul>
<div class="tab-content" id="tab_content" style="height: 600px; overflow-y: auto; overflow-x: hidden;">
SIDEBAR CONTENT
</div>
</div>
</div>
<!-- Page Content -->
<div id="content">
<button type="button" id="sidebarCollapse" class="btn btn-info" style="position: relative;float: right;right: 10px;" onclick="function show_grey_bound() { document.getElementById('grey_bound').style.display = 'block'; }
show_grey_bound()">
<i class="fas fa-caret-square-up"></i>
<span>Upload Data</span>
</button>
</div>
</div>
</body>
SCRIPT
$(document).ready(function () {
$("#sidebar").mCustomScrollbar({
theme: "minimal"
});
$('#dismiss, .overlay').on('click', function () {
$('#sidebar').removeClass('active');
$('.overlay').removeClass('active');
});
$('#sidebarCollapse').on('click', function () {
$('#sidebar').addClass('active');
$('.overlay').addClass('active');
$('.collapse.in').toggleClass('in');
$('a[aria-expanded=true]').attr('aria-expanded', 'false');
});
});
I have already tried
setting document.getELementById('sidebar').scrollTop = 0 onresize of
body.
changing the top of the sidebar onresize.
to give margin-top to 0.
Can anyone help me with this. Like I said, I need the side bar to stay inside.
You can remove the height in your Sidebar content div
<div class="tab-content" id="tab_content" style="overflow-y: auto; overflow-x: hidden;">
SIDEBAR CONTENT
</div>
I'm trying to remove a div when you login (I know it's not secure!). I need it in javascript! I tried everything but it doesn't want to remove. the code is here ---------------------------------------------------------------------------------------> I KNOW IT'S NOT SECURE! For some reason the script doesn't work! tried everything I know in javascript.
var box = document.getElementById("loginbox");
function pasuser(form) {
if (form.email.value=="GG#gmail.com") {
console.log(form.email.value)
if (form.password.value=="123") {
//window.location.assign('/index2.html');
var next = document.createElement("IFRAME");
next.src='https://codepen.io';
next.classList.add("codepen");
document.body.appendChild(next);
//box.classList.remove("box");
//box.style.display = "none";
box.parentNode.removeChild(box);
//box.outerHTML = "";
} else {
alert("Invalid Password");
}
} else { alert("Invalid UserID");
}
}
body{
margin: 0;
padding: 0;
font-family: sans-serif;
background: url(https://i.ytimg.com/vi/WLs_DST6dTA/maxresdefault.jpg);
background-size: cover;
}
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 400px;
padding: 40px;
background: rgba(0,0,0,.8);
box-sizing: border-box;
box-shadow: 0 15px 25px rgba(0,0,0,.5);
border-radius: 10px;
}
.box h2 {
margin: 0 0 30px;
padding: 0;
color: #fff;
text-align: center;
-webkit-transition: all 0.7s ease-out;
transition: all 0.7s ease-out;
}
.box h2:hover{
letter-spacing: 5px;
}
.box .inputBox {
position: relative;
}
.box .inputBox input {
width: 100%;
padding: 10px 0;
font-size: 16px;
color: #fff;
letter-spacing: 1px;
margin-bottom: 30px;
border: none;
border-bottom: 1px solid #fff;
outline: none;
background: transparent;
}
.box .inputBox label {
position: absolute;
top: 0;
left: 0;
letter-spacing: 1px;
padding: 10px 0;
font-size: 16px;
color: #fff;
pointer-events: none;
transition: .5s;
}
.box .inputBox input:focus ~ label,
.box .inputBox input:valid ~ label {
top: -24px;
left: 0;
color: #03a9f4;
font-size: 12px;
}
.box .inputBox input:focus,
.box .inputBox input:valid {
top: -26px;
left: 0;
color: #fff;
border: 1px solid #fff;
border-radius: 5px;
}
.box .inputBox input:active + .placeholder {
color: #fff;
}
.box .inputBox input:focus{
border: solid 1px #03a9f4;
border-radius: 5px;
}
.box input[type="button"] {
background: transparent;
border: 2px solid #03a9f4;
outline: none;
color: #03a9f4;
text-align: center;
font-size: 15px;
padding: 10px 20px;
cursor: pointer;
box-sizing: border-box;
border-radius: 5px;
-webkit-transition: all .2s ease-out;
transition: all .2s ease;
}
.box input[type="button"]:hover{
border: 2px solid #03a9f4;
background: #03a9f4;
color: #fff;
text-align: center;
outline: none;
font-size: 15px;
padding: 10px 20px;
}
.codepen {
width: 100%;
border: none;
height: 620px;
}
.hide {
display:none !important;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="/style.css">
<script src="/server.js"></script>
<script src="/next.js"></script>
<title></title>
</head>
<body>
<div id="loginbox" class="box">
<h2>Login</h2>
<form autocomplete="on" method="post" action="./index2.html">
<div class="inputBox">
<input id="email" type="email" name="email" required="" placeholder="Username" autocomplete="email" dir="ltr" autocapitalize="none">
<label>Username</label>
</div>
<div class="inputBox">
<input id="password" type="password" name="pass" required="" placeholder="Password" autocomplete="new-password" dir="ltr" autocapitalize="off" autocorrect="off">
<label>Password</label>
</div>
<input id="submitBtn" type="button" value="Submit" onclick="pasuser(form)">
</form>
</div>
</body>
</html>
Try with:
document.getElementById("loginbox").remove();
to fit in your code:
box.remove();
I am creating a t-shirt designing website for my college project.I want to display the text written by the user in 'input type text' in the iframe where i have set a t-shirt as the background image.I searched the internet but couldn't get any viable solution..
I want the text to appear on top of the t-shirt on the chest area.
Any help is appreciated..
body{
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding: 0px;
overflow-x: hidden;
font-family: sans-serif;
}
header{
padding: 8px;
height:155px;
color: white;
background-color:#6495ED;
clear: left;
width:100%;
}
footer
{ padding: 4px;
color: white;
background-color:#6495ED;
width:100%;
text-align:center;
font-size:20px;
font-family:Arial;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
width:100%;
}
li {
float: left;
}
li a,.dropbtn {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-family: Arial;
font-size: 20px;
}
li a:hover:not(.active), .dropdown:hover .dropbtn {
background-color: #111;
}
li a.active {
background-color: royalblue;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: royalblue;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
h2.tagline
{
text-align:center;
font-size:35px;
font-style:italic;
font-family: "Florence", cursive;
margin-top:-100px;
margin-left:-80px;
}
iframe {
width: 700px;
height: 700px;
margin: -590px 90px 20px 650px;
display: inline-block;
position: relative;
border:none;
}
.designcontainer {
display: inline-block;
}
.colorbutton {
background-color: #4CAF50; /* Green */
border: none;
color: black;
padding: 15px 30px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 20px;
margin: 4px 2px;
cursor: pointer;
border-radius: 14px;
transition-duration: 0.4s;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
.colorbutton:active {
background-color: #3e8e41;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
.buttonw {background-color: white; color:black;} /* White */
.buttonb {background-color: blue; color:white;} /* Blue */
.buttonr {background-color: #f44336; color:white;} /* Red */
.buttony {background-color: yellow; } /* Yellow */
#keyframes click-wave {
0% {
height: 40px;
width: 40px;
opacity: 0.35;
position: relative;
}
100% {
height: 200px;
width: 200px;
margin-left: -80px;
margin-top: -80px;
opacity: 0;
}
}
.option-input {
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
position: relative;
top: 5.33333px;
right: 0;
bottom:0;
left: 0;
height: 25px;
width: 25px;
transition: all 0.15s ease-out 0s;
background: #cbd1d8;
border: none;
color: #fff;
cursor: pointer;
display: inline-block;
margin-right: 0.5rem;
outline: none;
position: relative;
z-index: 1000;
line-height: 50px;
}
.option-input:hover {
background: #9faab7;
}
.option-input:checked {
background: royalblue;
}
.option-input:checked::before {
height: 15px;
width: 15px;
position: absolute;
content: '\2714';
display: inline-block;
font-size: 26.66667px;
text-align: center;
line-height: 28px;
}
.option-input:checked::after {
-webkit-animation: click-wave 0.65s;
-moz-animation: click-wave 0.65s;
animation: click-wave 0.65s;
background: royalblue;
content: '';
display: block;
position: relative;
z-index: 100;
}
.option-input.radio {
border-radius: 50%;
}
.option-input.radio::after {
border-radius: 50%;
}
.labelname
{
font-size: 20px;
}
span {
position: relative;
display: inline-block;
margin: 30px 10px;
}
.gate {
display: inline-block;
width: 500px;
height: 100px;
padding: 10px 0 10px 15px;
font-family: "Open Sans", sans;
font-weight: 400;
color: royalblue;
background: #c6c6c6;
border: 0;
border-radius: 10px;
outline: 0;
text-indent: 65px;
transition: all .3s ease-in-out;
}
.gate::-webkit-input-placeholder {
color: #c6c6c6;
text-indent: 0;
font-weight: 300;
font-size:18px;
}
.gate + label {
display: inline-block;
position: absolute;
top: 0;
left: 0;
padding: 10px 15px;
text-shadow: 0 1px 0 rgba(19, 74, 70, 0.4);
background: royalblue;
transition: all .4s ease-in-out;
border-radius:5px;
transform-origin: left bottom;
z-index: 99;
color:white;
size:18px;
}
.gate + label:before, .gate + label:after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border-radius: 10px;
background: royalblue;
transform-origin: left bottom;
transition: all .4s ease-in-out;
pointer-events: none;
z-index: -1;
font-size:18px;
}
.gate + label:before {
background: rgba(3, 36, 41, 0.2);
z-index: -2;
right: 20%;
font-size:18px;
}
span:nth-child(2) .gate {
text-indent: 85px;
}
span:nth-child(2) .gate:focus,
span:nth-child(2) .gate:active {
text-indent: 0;
}
.gate:focus,
.gate:active {
color: ;
text-indent: 0;
background:#c6c6c6;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.gate:focus::-webkit-input-placeholder,
.gate:active::-webkit-input-placeholder {
color: floralwhite;
}
.gate:focus + label,
.gate:active + label {
transform: rotate(-66deg);
border-radius: 3px;
}
.gate:focus + label:before,
.gate:active + label:before {
transform: rotate(10deg);
}
<!DOCTYPE html>
<html>
<head>
<title>
T-shirtinator-PERSONALIZE
</title>
<LINK REL="icon" HREF="image/favicon.ico">
<link rel="stylesheet" type="text/css" href="css/pshirts.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<header>
<br>
<img src="image/logo.png" >
<h2 class=tagline>"The T-shirt you design <br>
at your doorstep"</h2>
</header>
<ul>
<li>Home</li>
<li><a class="active" href="#ptshirts">Personalized T-shirts</a></li>
<li class="dropdown">
Buy From Us
<div class="dropdown-content">
Quotes printed T-shirts
Graphic printed T-shirts
Memes printed T-shirts
</div>
</li>
<li>Help</li>
<li>Contact Us</li>
<li onclick="document.getElementById('id02').style.display='block'"style="float:right">Sign Up</li>
<li onclick="document.getElementById('id01').style.display='block'" style="float:right">Login</li>
</ul>
<div class="designcontainer">
<h1>Select Colour</h1>
<button class="colorbutton buttonw">White</button>
<button class="colorbutton buttonr">Red</button>
<button class="colorbutton buttonb">Blue</button>
<button class="colorbutton buttony">Yellow</button>
<h1>Select Size</h1>
<form action="include/storeinfo.inc.php" method="post">
<div>
<label class="labelname">
<input type="radio" class="option-input radio" name="size" value="small" checked />
Small(S)
</label>
<label class="labelname">
<input type="radio" class="option-input radio" name="size" value="medium" />
Medium(M)
</label>
<label class="labelname">
<input type="radio" class="option-input radio" name="size" value="large"/>
Large(L)
</label>
</div>
<h1>Enter the Text you want on your T-shirt</h1>
<span>
<input type="text" name="text" class="gate" id="enter" placeholder="Max 10 letters.." maxlength="10" />
<label for="enter">Enter</label>
</span>
<br>
<input type="submit" class="colorbutton" value="Proceed" name="submit" style="margin-top:20px; margin-left:100px;">
<input type="submit" class="colorbutton" value="Preview" name="submit1" style="margin-top:20px; margin-left:50px;">
</form>
<iframe name="myiframe" src="iframetshirtwhite.html"></iframe>
</div>
<footer >
Copyright © 2017 www.DAJ.com
</footer>
</body>
</html>
html file of iframe:
<html>
<head>
<style>
body
{
overflow-y: hidden;
overflow-x: hidden;
background: url(image/white.jpg);
background-size: 690px 690px;
background-repeat: no-repeat;
}
</style>
</head>
<body>
</body>
</html>
Unless you have a very good reason for doing so, don't use and . Seems unnecessary and convoluted.
It's quite simple to grab the value from an <input> or <textarea> with JavaScript and place it in another element, like a <div>. Here's an uber basic example that would produce a live example (pretend that the green DIV is a photo of a t-shirt).
var $text = $( '.tshirt-text' );
var $demoText = $( '.demo-tshirt-text' );
$text.on( 'keyup', function ( e ) {
$demoText.text( $text.val() );
} );
.demo-tshirt {
position: relative;
width: 300px;
height: 400px;
background-color: seagreen;
}
.demo-tshirt-text {
position: absolute;
top: 30%;
left: 50%;
width: 50%;
transform: translateX( -50%);
color: white;
font-family: Arial, sans-serif;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="tshirt-text">
Text: <input type="text" id="tshirt-text" class="tshirt-text" name="tshirt-text">
</label>
<div class="demo-tshirt">
<div class="demo-tshirt-text"></div>
</div>
If the entire content of your iframe is just the background definition, you could write the HTML to the iframe document directly.
from Write elements into a child iframe using Javascript or jQuery ...
var ifrm = document.getElementById('myIframe');
ifrm = ifrm.contentWindow
|| ifrm.contentDocument.document
|| ifrm.contentDocument;
ifrm.document.open();
ifrm.document.write('Hello World!');
ifrm.document.close();
I have a scenario,that I used css for extending search box on focus,when I focussed on search box then the search box must decrease and the cancel button must be placed beside of search box.
Css:
.clrble .frmcntr {
background:url("images/search.png") no-repeat 110px center;
text-align: center;
border-radius: 4px;
border: medium none;
cursor: pointer;
font-size: 20px;
font-family:SFUIDisplay;
padding: 6px 10px 6px 10px;
transition: all 0.5s ease 0s;
width: 95%;
background-color:rgba(247, 247, 247, 1);
}
: content-box;
font-size: 100%;
.clrble .frmcntr:focus {
width: 70%;
text-align: left;
background-color: #fff;
border-color: #66CC75;
-webkit-box-shadow: 0 0 5px rgba(109,207,246,.5);
-moz-box-shadow: 0 0 5px rgba(109,207,246,.5);
box-shadow: 0 0 5px rgba(109,207,246,.5);
background-color:rgba(247, 247, 247, 1);
background:url("images/search.png") no-repeat 10px center;
padding-left:40px;
}
.clrble .frmcntr {
-webkit-appearance: textfield;
-webkit-box-sizing
}
Here is my plunker link:
https://plnkr.co/edit/Z7mfglWEoDyjbDfFDbLM?p=preview
And the expected output will be like this:
Is it possible with Angularjs or JavaScript?
Possible solution would be to position the div you want absolutely. Then on focus of the input, make the div visible or slide it into view;
Using your plunk, add the following CSS:
.clrble{
position: relative;
}
.frmcntr:focus + .btn{
display: block;
}
.btn{display: none; position: absolute; right: 0;}
and here's the HTML:
<div class="clrble">
<input type="text" placeholder="Search" class="frmcntr">
<div class="btn">button here</div>
</div>
It's not perfect, but i think it will point you in the right direction.
with float property you can mange the side by side positions.
use float:left; css property for you textbox class and that will work for your requirement and the placement of button also can be handle by css also.
css for textbox
.clrble .frmcntr {
background:url("images/search.png") no-repeat 110px center;
text-align: center;
border-radius: 4px;
border: medium none;
cursor: pointer;
font-size: 20px;
font-family:SFUIDisplay;
padding: 6px 10px 6px 10px;
transition: all 0.5s ease 0s;
width: 95%;
background-color:rgba(247, 247, 247, 1);
float:left;
}
You can just hide and show a span with 'cancel' in it.
/* Styles go here */
.clrble .frmcntr {
background: url("images/search.png") no-repeat 110px center;
text-align: center;
border-radius: 4px;
border: medium none;
cursor: pointer;
font-size: 20px;
font-family: SFUIDisplay;
padding: 6px 10px 6px 10px;
transition: all 0.5s ease 0s;
width: 95%;
background-color: rgba(247, 247, 247, 1);
}
.clrble .frmcntr:focus {
width: 70%;
text-align: left;
background-color: #fff;
border-color: #66CC75;
-webkit-box-shadow: 0 0 5px rgba(109, 207, 246, .5);
-moz-box-shadow: 0 0 5px rgba(109, 207, 246, .5);
box-shadow: 0 0 5px rgba(109, 207, 246, .5);
background-color: rgba(247, 247, 247, 1);
background: url("images/search.png") no-repeat 10px center;
padding-left: 40px;
}
.clrble .frmcntr {
-webkit-appearance: textfield;
-webkit-box-sizing: content-box;
font-size: 100%;
}
.clrble {
position: relative;
}
.frmcntr:focus+.btn {
display: block;
}
.btn {
display: none;
position: absolute;
right: 0;
}
.cancel {
visibility: hidden;
color: blue;
font-family: sans-serif;
font-size: 20px;
}
.frmcntr:focus + .cancel {
visibility: visible;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="clrble">
<input type="text" placeholder="Search" class="frmcntr">
<span class="cancel">Cancel</span>
<span class="btn">button here</span>
</div>
</body>
</html>
You can use the blur event for the input and the mousedown event as mousedown event fires before the blur event.
var mouseDown = false;
$('input').blur(function() {
if(mouseDown) // cancel the blur event
{
$('input').focus();
mouseDown = false;
}
});
$('#cancelBtn').mousedown(function(){
mouseDown = true;
console.log('Button Clicked');
});
$('input').focus(function(){
$('#cancelBtn').css('display', 'block');
});
$('input').focusout(function(){
$('#cancelBtn').css('display', 'none');
});
/* Styles go here */
.clrble .frmcntr {
background:url("images/search.png") no-repeat 110px center;
text-align: center;
border-radius: 4px;
border: medium none;
cursor: pointer;
font-size: 20px;
font-family:SFUIDisplay;
padding: 6px 10px 6px 10px;
transition: all 0.5s ease 0s;
width: 95%;
background-color:rgba(247, 247, 247, 1);
float:left;
}
.clrble .frmcntr:focus {
width: 70%;
text-align: left;
background-color: green;
border-color: #66CC75;
-webkit-box-shadow: 0 0 5px rgba(109,207,246,.5);
-moz-box-shadow: 0 0 5px rgba(109,207,246,.5);
box-shadow: 0 0 5px rgba(109,207,246,.5);
background-color:rgba(247, 247, 247, 1);
background:url("images/search.png") no-repeat 10px center;
padding-left:40px;
}
.clrble .frmcntr {
-webkit-appearance: textfield;
-webkit-box-sizing: content-box;
font-size: 100%;
}
#cancelBtn {
color:blue;
float:left;
font-weight:bold;
display:none;
padding:5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="clrble">
<input type="text" placeholder="Search" class="frmcntr">
<div id="cancelBtn">Cancel</div>
</div>
</body>
</html>