JS Function Not Defined Chrome Extension Popup.js

JS Function Not Defined Chrome Extension Popup.js - javascript

I am trying to add this button On Codepen to my chrome extension, my HTML and CSS work perfectly fine. The JS is popup.js and is on the same level as the rest of the code, but it doesn't seem to be linked to the popup.html. Manifest is in the image . I did convert the SCSS to CSS using an online converter. I need help linking the js to popup.html so the button works as it does in Codepen.
Html, CSS & JS:
$('button.cooldown').click(function(){
var btn = $(this);
btn.prop('disabled', true);
setTimeout(function(){
btn.prop('disabled', false);
},15000);
});
body {
background-image: linear-gradient( 72.5deg, rgba(0,175,255,1) 27.9%, rgba(0,224,254,1) 84.2% );
width: 250px;
height: 400px;
}
#header {
padding-top: 2px;
padding-bottom: 2px;
text-align: center;
background-color: #393e46;
color: white;
font-size: 15px;
border-radius: 10px;
}
.button {
background-color: rgb(80, 220, 100);
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
border-radius: 50px;
margin: 5px;
}
.button:hover {
background-color: #393e46;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
border-radius: 50px;
margin: 5px;
}
.button_cancel {
background-color: #f44444;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
border-radius: 50px;
margin: 5px;
}
.button_cancel:hover {
background-color: #393e46;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
border-radius: 50px;
margin: 5px;
}
/* The container */
.container {
display: block;
position: relative;
padding-left: 10px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide the browser's default checkbox */
.container input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
font-size: 18px;
}
/* Create a custom checkbox */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
}
/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
background-color: #ccc;
}
/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
background-color: #2196F3;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
display: block;
}
/* Style the checkmark/indicator */
.container .checkmark:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
input[type=text], select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=file], select {
padding-left: 15%;
}
.form-item {
padding-top: 2px;
padding-bottom: 2px;
text-align: center;
}
.wallpaper-title {
display: block;
padding-bottom: 3px;
font-size: 11px;
}
button.cooldown {
background: #336699;
min-height: 48px;
min-width: 144px;
position: relative;
margin: 5px;
border-radius: 5px;
border: 0;
color: #fff;
padding: 0 15px;
font-size: 16px;
outline: none;
overflow: hidden;
cursor: pointer;
}
button.cooldown:active, button.cooldown:focus {
outline: none;
}
button.cooldown:disabled {
background: #264d73;
color: #d9d9d9;
cursor: default;
box-shadow: inset 3px 3px 10px 0px rgba(0, 0, 0, 0.2);
}
button.cooldown:disabled:after {
content: '';
position: absolute;
bottom: 0;
width: 100%;
left: 0;
height: 5px;
background: #1a334d;
animation: cooldown 15s linear;
}
#keyframes cooldown {
0% {
width: 100%;
}
100% {
width: 0;
}
}
/* layout stuff */
section {
text-align: center;
margin-top: 100px;
color: #333;
}
p {
font-size: 12px;
}
<!doctype html>
<html>
<head>
<title>Home+</title>
<link rel="stylesheet" type="text/css" href="popup.css">
<script src="popup.js"></script>
<div id="header">
<h2>Home+</h2>
<h6>Settings</h6>
</div>
</head>
<body>
<!-- The settings pane, expand at will -->
<div class="tab-pane" id="settings">
<form class="settings">
<div class="form-item">
<label for="zip">Zip Code: </label>
<div class="form-item">
<input id="zip" name="zip" type="text" pattern="[0-9]*">
</div>
</div>
<div class="form-item">
<label class="container">Show Weather
<input type="checkbox" checked="checked">
<span class="checkmark"></span>
</label>
</div>
<div class="form-item">
<button class="cooldown">Refresh Weather</button>
</div>
<div class="form-item">
<label for="hompagebg" class="wallpaper-title">Upload Wallpaper</label>
<center>
<input type="file" id="hompage-background" name="hompagebg" accept="image/png, image/jpeg" size="20">
</center>
</div>
<div class="form-item">
<button type="button" class="button">Save</button>
<button type="button" class="button_cancel">Cancel</button>
</div>
</form>
</div>
</div>
</body>
</html>

I needed to download jquery and link it to popup.html using and my JS code needed to be placed inside
$(document).ready(function () {
//code goes here
});

Related

Hovering on animated navbar goes wrong

I have a problem.
I have an animated navigation bar on my html website, so that if you scroll it'll change. But I want that if I'm hovering on the changed navbar, it'll change back to his normal state. But that doesn't work at all. I hope you guys can help me.
Code here:
window.addEventListener("scroll", function(){
var header = document.querySelector(".navbar");
header.classList.toggle("sticky", window.scrollY > 0);
});
let navbar = document.querySelector(".sticky");
navbar.addEventListener("mouseover", function( event ){
navbar.classList.toggle("navbar", navbar.onmouseover);}
, false);
body{
margin: 0 0 0 0;
padding: 0;
}
.head {
display: inline-block;
position: absolute;
margin: 0;
background-image: url('pictures/head.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
padding: 0;
text-align: center;
height: 500px;
width: 100%;
}
.head h1 {
color: white;
text-align: center;
padding: 100px 100px 25px;
font-family: Copperplate, Monaco, "Lucida Console", monospace;
font-size: 50px;
}
.head h2 {
font-family: Copperplate, Monaco, "Lucida Console", monospace;
font-size: 30px;
color: white;
}
.navbar .dropbtn {
background-color: white;
color: black;
padding: 16px 16px 14px 16px;
font-size: 20px;
border: none;
cursor: pointer;
border-left: none;
border-right: 1px solid grey;
color: black;
transition: 0.6s;
}
.sticky .dropbtn {
background: none;
color: black;
padding: 16px 16px 14px 16px;
font-size: 16px;
border: none;
cursor: pointer;
border-left: none;
border-right: 1px solid grey;
color: white;
transition: 0.6s;
}
.navbar {
z-index: 1;
overflow: visible;
background-color: white;
position: fixed;
top: 0;
width: 100%;
float: left;
transition: 0.6s;
.navbar .dropdownlinks {
float: left;
}
}
.dropdown {
position: relative;
display: inline-block;
margin: -2px;
}
.dropdown-content {
display: none;
position: absolute;
min-width: 160px;
background-color: white;
z-index: 1;
box-shadow: 0px 8px 16px 0px black;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
border-bottom: 1px solid black;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: red;
color: white;
}
.navbar img {
width: 50px;
height: 50px;
border-right: 1px solid grey;
padding-right: 4px;
top: 0;
float: left;
}
.dropdown-content a:hover {
color: white;
background-color: red;
}
.sticky {
background: none;
transition: 0.6s;
}
<header>
<div class="navbar">
<img src="pictures/gear_icon.png" alt="icon">
<div class="dropdownlinks">
<div class="dropdown">
<button class="dropbtn">F1 history</button>
<div class="dropdown-content">
All the teams
All world champions
</div>
</div>
<div class="dropdown">
<button class="dropbtn">News and times</button>
<div class="dropdown-content">
Driver and team news
Liveblog
Calender
Archives
</div>
</div>
<div class="dropdown">
<button class="dropbtn">This season</button>
<div class="dropdown-content">
Driver's standings
Constructor's standings
All current drivers
All current teams
</div>
</div>
</div>
</div>
</header>
It's a formula 1 website btw, so if you love formula 1 please help me:)

3 popup div click outside to close

I have 3 popup divs that open onclick. At first it you clicked inside the div it closed, i fixed that. Then i found a code to click outside the div and it would close the div. So I edited that code and it works fine, if you click outside the div it closed. So I added that code to all 3 and now none of the click outside the divs to close work. I do not understand why this is happening as I am extremely new to java script coding. If someone could help me I would be extremely grateful.Thanks
function myFunction() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}
// Prevents menu from closing when clicked inside
document.getElementById("myPopup").addEventListener('click', function (event) {
event.stopPropagation();
});
// Closes the menu in the event of outside click
window.onclick = function(event) {
if (!event.target.matches('.amount')) {
var dropdowns =
document.getElementsByClassName("tooltiptext");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openmyPopup = dropdowns[i];
if (openmyPopup.classList.contains('show')) {
openmyPopup.classList.remove('show');
}
}
}
}
function myFunctions() {
var popup = document.getElementById("mypopup");
popup.classList.toggle("shows");
}
// Prevents menu from closing when clicked inside
document.getElementById("mypopup").addEventListener('click', function (event) {
event.stopPropagation();
});
// Closes the menu in the event of outside click
window.onclick = function(event) {
if (!event.target.matches('.furbm')) {
var dropdowns =
document.getElementsByClassName("tooltipstext");
var i;
for (i = 0; i < dropdownss.length; i++) {
var openmypopup = dropdowns[i];
if (openmypopup.classList.contains('shows')) {
openmypopup.classList.remove('shows');
}
}
}
}
function myFunctionss() {
var popup = document.getElementById("mYpopup");
popup.classList.toggle("showS");
}
// Prevents menu from closing when clicked inside
document.getElementById("mYpopup").addEventListener('click', function (event) {
event.stopPropagation();
});
// Closes the menu in the event of outside click
window.onclick = function(event) {
if (!event.target.matches('.furbc')) {
var dropdowns =
document.getElementsByClassName("toolstiptext");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openmYpopup = dropdowns[i];
if (openmypopup.classList.contains('showS')) {
openmypopup.classList.remove('showS');
}
}
}
}
/******************************************************************************************************************************************************Header*/
.s-header {
background-color: red;
bottom: 0;
height: 65px;
left: 0;
position: absolute;
right: 0;
top: 0;
width: 100%;
}
.s-header-inner {
background-color: red;
border: 1px solid red;
height: 63px;
margin: auto;
width: 95%;
}
.s-header-links-left {
float: left;
margin-top: 12px;
}
/********************************************************************************************************************************************************Logo*/
.s-logo {
height: 65px;
position: absolute;
width: 150px;
}
.s-logo img {
position: absolute;
width: 185px;
}
/***********************************************************************************************************************************************Amount Raised*/
.s-header-links-right {
float: right;
margin-top: 20px;
}
.amount {
color: red;
cursor: pointer;
font-family: Netflix Sans,Helvetica,Arial,sans-serif;
font-size: 18px;
font-weight: 600;
}
.amount:hover {
color: red;
cursor: pointer;
font-family: Netflix Sans,Helvetica,Arial,sans-serif;
font-size: 18px;
font-weight: 600;
}
.tooltip {
display: inline-block;
-moz-user-select: none;
-ms-user-select: none;
position: relative;
-webkit-user-select: none;
user-select: none;
}
.tooltip .tooltiptext {
background-color: rgba(0, 0, 0, 0.36);
border-radius: 5px;
border-top: 4px solid #da291c;
color: #ffffff;
font-family: Netflix Sans,Helvetica,Arial,sans-serif;
font-size: 15px;
font-weight: 400;
left: 50%;
margin-left: -190px;
margin-top: 1px;
opacity: 1;
padding: 10px ;
position: absolute;
text-align: left;
visibility: hidden;
width: 205px;
z-index: 1;
}
/* Toggle this class - hide and show the popup */
.tooltip .show {
animation: fadeIn 1s;
visibility: visible;
-webkit-animation: fadeIn 1s;
}
/***************************************************************************************************************************************Fur Baby Of The Month*/
.furbm {
cursor: pointer;
margin-left: 25px;
margin-right: 25px;
}
.furbm .fa-trophy {
color: red!important;
font-size: 18px!important;
}
.furbm .fa-trophy:hover {
color: red!important;
font-size: 18px!important;
}
.tooltips {
display: inline-block;
-moz-user-select: none;
-ms-user-select: none;
position: relative;
-webkit-user-select: none;
user-select: none;
}
.tooltips .tooltipstext {
background-color: rgba(0, 0, 0, 0.36);
border-radius: 5px;
border-top: 4px solid #da291c;
color: #ffffff;
font-family: Netflix Sans,Helvetica,Arial,sans-serif;
font-size: 15px;
font-weight: 400;
left: 50%;
margin-left: -215px;
margin-top: 1px;
opacity: 1;
padding: 10px ;
position: absolute;
text-align: center;
visibility: hidden;
width: 205px;
z-index: 1;
}
.tooltips .shows {
animation: fadeIn 1s;
visibility: visible;
-webkit-animation: fadeIn 1s;
}
.tooltipstext img {
height: 150px;
margin-top: 20px;
width: 150px
}
/***************************************************************************************************************************************Fur Baby Contest*/
.furbc {
cursor: pointer;
}
.furbc .fa-comments {
color: red!important;
font-size: 20px!important;
}
.furbc .fa-comments:hover {
color: #ffffff!important;
font-size: 20px!important;
}
.toolstip {
display: inline-block;
-moz-user-select: none;
-ms-user-select: none;
position: relative;
-webkit-user-select: none;
user-select: none;
}
.toolstip .toolstiptext {
background-color: rgba(0, 0, 0, 0.36);
border-radius: 5px;
border-top: 4px solid #da291c;
color: #ffffff;
font-family: Netflix Sans,Helvetica,Arial,sans-serif;
font-size: 15px;
font-weight: 400;
left: 50%;
margin-left: -281px;
margin-top: 1px;
opacity: 1;
padding: 10px ;
position: absolute;
text-align: left;
visibility: hidden;
width: 275px;
z-index: 1;
}
.toolstip .showS {
animation: fadeIn 1s;
visibility: visible;
-webkit-animation: fadeIn 1s;
}
.furbcf form {
display: flex;
position: relative;
width: 100%;
}
.furbcf input[type=text] {
border: 1px solid #C2C2C2;
border-radius: 5px;
box-sizing: border-box;
color: #242527;
font-family: Netflix Sans,Helvetica,Arial,sans-serif;
font-size: 15px;
font-weight: 300;
margin: 0px 0px;
padding: 5px 5px;
width: 175px;
}
.furbcf input:focus {
border: 1px solid #da291c;
border-radius: 5px;
outline: none;
}
.furbcf textarea {
border: 1px solid #C2C2C2;
border-radius: 5px;
box-sizing: border-box;
color: #242527;
font-family: Netflix Sans,Helvetica,Arial,sans-serif;
font-size: 15px;
font-weight: 300;
margin: 0px 0;
padding: 5px 5px;
width: 175px;
}
.furbcf textarea:focus {
border: 1px solid #da291c;
border-radius: 5px;
outline: none;
}
.furbcf input[type="submit"] {
background-color: #ffffff;
border: 2px solid #da291c;
border-radius: 5px;
box-sizing: border-box;
color: #da291c;
cursor: pointer;
font-family: Netflix Sans,Helvetica,Arial,sans-serif;
font-size: 15px;
font-weight: 300;
outline: none;
padding: 5px;
width: 100px;
}
.furbcf input[type="submit"]:hover {
background-color: #da291c;
border: 2px solid #da291c;
border-radius: 5px;
box-sizing: border-box;
color: #ffffff;
cursor: pointer;
font-family: Netflix Sans,Helvetica,Arial,sans-serif;
font-size: 15px;
font-weight: 300;
padding: 5px;
width: 100px;
}
/********************************************************************************************************************************************************Menu*/
i.fa-bars {
color: rgba(255, 255, 255, 0.8);
font-size: 20px;
margin-left: 25px;
}
i.fa-bars:hover {
color: #ffffff;
font-size: 20px;
margin-left: 25px;
}
.sidenav {
border-left: 1px solid #ccd1d4;
background-color: #ffffff;
height: 100%;
overflow-x: hidden;
padding-top: 50px;
position: fixed;
right: -1px;
top: 0;
transition: 0.5s;
width: 0;
z-index: 1;
}
.sidenav p {
color: #242527;
display: block;
font-family: Netflix Sans,Helvetica,Arial,sans-serif;
font-size: 13px;
font-weight: 400;
padding: 12px 8px 0px 32px;
text-decoration: none;
text-transform: uppercase;
transition: 0.3s;
}
.sidenav a {
color: #242527!important;
display: block!important;
font-family: Netflix Sans,Helvetica,Arial,sans-serif!important;
font-size: 13px!important;
font-weight: 400!important;
padding: 3px 8px 3px 32px!important;
text-decoration: none!important;
transition: 0.3s!important;
}
.sidenav a:hover {
color: #242527!important;
display: block!important;
font-family: Netflix Sans,Helvetica,Arial,sans-serif!important;
font-size: 13px!important;
font-weight: 400!important;
padding: 3px 8px 3px 32px!important;
text-decoration: underline!important;
transition: 0.3s!important;
}
.sidenav a img {
height: 12px;
margin-left: -0px;
margin-right: 10px;
}
.sidenav .closebtn {
color: #aaaaaa!important;
font-size: 34px!important;
margin-left: 50px!important;
position: absolute!important;
right: 23px!important;
top: 5px!important;
}
.sidenav .closebtn:hover {
color: #353748!important;
font-size: 34px!important;
margin-left: 50px!important;
position: absolute!important;
right: 23px!important;
text-decoration: none!important;
top: 5px!important;
}
<!---------------------------------------------------------------------------------------------------------------------------------------------------- Logo -->
<div class="s-header-links-left">
<div class="s-logo">
<a href="https://www.capebretoncares.com/Start/" target="_top">
<img src="https://www.capebretoncares.com/Start/images/cape-breton-cares-logo-1.png"></a>
</div>
</div>
<!-------------------------------------------------------------------------------------------------------------------------------------- Header Links Right -->
<div class="s-header-links-right">
<!------------------------------------------------------------------------------------------------------------------------------------------- Amount Raised -->
<span class="tooltip" onclick="myFunction()">
<div class="amount">$234.41</div>
<span class="tooltiptext" id="myPopup">This is how much money our community has raised to help provide meals and support to animal charities in our local communities.</span>
</span>
<!----------------------------------------------------------------------------------------------------------------------------------- Fur Baby Of The Month -->
<span class="tooltips" onclick="myFunctions()" title="Contest Winner">
<div class="furbm">
<i class="fa fa-trophy"></i>
</br>
</div>
<span class="tooltipstext" id="mypopup">Fur Baby Of The Month
</br>
<img src="https://www.capebretoncares.com/images/search-icons/duck.png">
</br>
congratulations "Fluffy"
</span>
</span>
<!--------------------------------------------------------------------------------------------------------------------------- Fur Baby Of The Month Contest -->
<span class="toolstip" onclick="myFunctionss()">
<div class="furbc">
<i class='fas fa-comments'></i>
</div>
<span class="toolstiptext" id="mYpopup">
Enter Octobers cutest Fur Baby contest and win a bag of your Fur Babies food of choice.
</br>
</br>
<form class="furbcf" method="post" action="send_contact.php" enctype="multipart/form-data">
<label for="first_name">First Name: <font color="red">*</font></label>
</br>
<input type="text" id="first_name" name="first_name" autocomplete="off" required>
</br>
</br>
<label for="last_name">Fur Babies Name: <font color="red">*</font></label>
</br>
<input type="text" id="last_name" name="last_name" autocomplete="off" required>
</br>
</br>
<label for="email">Email: <font color="red">*</font></label>
</br>
<input type="text" id="email" name="email" autocomplete="off" required>
</br>
</br>
<input type="file" name="uploaded_file"autocomplete="off" required>
</br>
</br>
<input type="submit" name="Submit" value="Submit">
</form>
</span>
</span>
<!---------------------------------------------------------------------------------------------------------------------------------------------------- Menu -->
<span style="cursor:pointer" onclick="openNav()" title="Menu">
<i class="fa fa-bars"></i>
</span>
<div id="mySidenav" class="sidenav">
×
<p>WHO WE ARE:</p>
Home
About Us
Privacy Policy
Terms of Use
<p>RESOURCES:</p>
Contact Us
FAQ
Our Donations
Spread The Word
<p>KEEP IN TOUCH:</p>
<a href="https://www.facebook.com/CapeBretonCares/" target="_top">
<img src="https://www.capebretoncares.com/images/icons/facebook.png">Facebook</a>
<a href="https://twitter.com/WeCapersCare/" target="_top">
<img src="https://www.capebretoncares.com/images/icons/twitter.png">Twitter</a>
<p>AVAILABLE ON:</p>
<a href="https://chrome.google.com/webstore/detail/cape-breton-start-page/gcjbmfbjnmkfnjgdpkamohobejbpdinb/" target="_top">
<img src="https://www.capebretoncares.com/images/available-on/brave.png">Brave</a>
<a href="https://chrome.google.com/webstore/detail/cape-breton-start-page/gcjbmfbjnmkfnjgdpkamohobejbpdinb/" target="_top">
<img src="https://www.capebretoncares.com/images/available-on/chrome.png">Google Chrome</a>
<a href="https://chrome.google.com/webstore/detail/cape-breton-start-page/gcjbmfbjnmkfnjgdpkamohobejbpdinb/" target="_top">
<img src="https://www.capebretoncares.com/images/available-on/edge.png">Microsoft Edge</a>
<a href="https://addons.mozilla.org/en-CA/firefox/addon/cape-breton-start-page/" target="_top">
<img src="https://www.capebretoncares.com/images/available-on/firefox.png">Mozilla Firefox</a>
</div>
</div>
</div>
</div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src='https://kit.fontawesome.com/a076d05399.js'></script>

How to reset a placeholder whenever you exit a search box event?

I've got an overlay search box (check code). The search box got a placeholder "Sök", let's say the user writes something in the textbox but then exits (presses the x in the right upper corner). Then I want the text that the user wrote to be removed and the placeholder reset, so whenever the user enters the search box again the text is removed and the placeholder is back. How do I create this event?
Code:
body{
background: white;
font-family: 'Montserrat', sans-serif;
padding-bottom: -1px;
}
span{
display: inline-block;
}
.backgroundlogo{
margin-top:-1400px;
z-index: -1;
position: relative;
width: 100%;
}
.container{
width: 80%;
margin: 0 auto;
}
header{
background: none;
}
* {
margin:0;
padding:0;
}
header ::after {
content: "";
display: table;
clear: both;
}
nav{
float: right;
padding-right: 230px;
}
nav li{
display: inline-block;
padding-left: 45px;
padding-top: 20px;
padding-bottom: 20px;
}
nav ul{
list-style: none;
display: inline-block;
padding-top: 25px;
}
nav a {
font-size: 12px;
color: black;
font-weight: 600;
text-decoration: none;
text-align: center;
text-transform: uppercase;
}
nav a:hover{
color: red;
}
nav li:hover{
}
.fa-bars{
color: black;
font-size: 14px;
padding-left: 15px;
}
.fa-bars:hover{
color: red;
cursor: pointer;
}
.wrapper{
position: relative;
height: 100%;
width: 100%;
}
.backgroundlogo{
}
.bild1{
height: 350px;
width: 600px;
margin-top: 100px;
margin-left: 80px;
position: absolute;
z-index: 4;
background-image: url('Img/KBA.jpg');
background-position: 10% 30% ;
background-size: 180%;
}
.bild2{
height: 350px;
width: 600px;
margin-top: 140px;
margin-left: 120px;
z-index: 3;
position:absolute;
background-color: #3D6BB8;
}
.entrytext{
float: right;
margin-right: 90px;
margin-top: 175px;
clear: both;
}
.entrytext>h1{
font-weight: 800;
font-style: normal;
font-size: 54px;
}
.entrytext>button{
border: none;
display: inline-block;
background-color: #38b272;
color: white;
padding: 8px 10px 8px 15px;
letter-spacing: 6px;
border-radius: 8px;
font-weight: 500;
font-size: 17px;
text-align: left;
margin-top: 20px;
box-shadow: 20px 15px black;
}
.entrytext>button:hover{
border: none;
display: inline-block;
background-color: #c12147;
color: white;
padding: 8px 10px 8px 15px;
letter-spacing: 6px;
border-radius: 8px;
font-weight: 500;
font-size: 17px;
text-align: left;
margin-top: 20px;
}
button:focus {outline:0;}
.fa-angle-right{
font-size: 20px;
padding-left: 30px;
}
.entrytext>h2{
font-size: 14px;
font-weight: 600;
margin-top: 20px;
}
.citygalleria{
color: #CC2244;
}
.brand{
height: 110px;
width: 750px;
margin: 600px auto;
background-color: #CFCFCF;
clear: both;
z-index: 11;
}
.openBtn {
background: #f1f1f1;
border: none;
padding: 10px 15px;
font-size: 20px;
cursor: pointer;
}
.openBtn:hover {
background: #bbb;
}
.overlay {
height: 100%;
width: 100%;
display: none;
position: fixed;
z-index: 10;
top: 0;
left: 0;
background-color: white;
background-color: rgba(255,255,255, 0.8);
}
.overlay-content {
position: relative;
top: 20%;
width: 80%;
text-align: center;
margin-top: 30px;
margin: auto;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
cursor: pointer;
color: black;
}
.overlay .closebtn:hover {
color: #ccc;
}
.overlay input[type=text] {
padding: 15px;
font-size: 50px;
font-weight: bold;
border: none;
background:none;
margin: 0 auto;
text-decoration: none;
border-bottom: 6px solid black;
border-bottom-left-radius: 5px;
color:black;
text-align:center;
width: 100%;
}
input::placeholder {
color: black;
}
.overlay input[type=text]:hover {
background: none;
}
.overlay button {
float: left;
width: 20%;
padding: 15px;
background: #ddd;
font-size: 17px;
border: none;
cursor: pointer;
}
input:focus {outline:0;}
.overlay button:hover {
background: #bbb;
}
.type1{
width: 1700px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" href="style.css" type="text/css">
<meta charset="utf-8">
<script src="https://kit.fontawesome.com/908c2e5c96.js"></script>
<link href="https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<title>Kungsmässan — Måste upplevas!</title>
</head>
<body>
<header>
<div class="container">
<nav>
<ul>
<li>Butiker</li>
<li>Resturang & Café</li>
<li>Utbyggnad</li>
<li>Öppetider</li>
<div id="myOverlay" class="overlay">
<span class="closebtn" onclick="closeSearch()" title="Close Overlay">×</span>
<div class="overlay-content">
<form action="/action_page.php">
<input class="type1" id="type2" onblur="this.placeholder = 'Sök'" onfocus="this.placeholder = ''" type="text" placeholder="Sök" name="search">
</form>
</div>
</div>
<i onclick="openSearch()" id="openBtn" class="fas fa-search"></i>
<script>
function openSearch() {
document.getElementById("myOverlay").style.display = "block";
}
document.addEventListener('keydown',function(){document.getElementById('type2').focus();});
function closeSearch() {
document.getElementById("myOverlay").style.display = "none";
}
</script>
<i class="fas fa-bars"></i>
</ul>
</nav>
</div>
</header>
<div class="bild1">
</div>
<div class="bild2">
</div>
<div class="entrytext">
<h1>Sveriges bästa <br/> <span class="citygalleria">citygalleria.</span> Mitt <br/> i Kungsbacka.</h1>
<h2>35 000 KVADRATMETER OCH ÖVER 100 AFFÄRER!</h2>
<button type="LÄS MER" name="button ">LÄS MER<i class="fas fa-angle-right"></i></button>
</div>
<div class="brand">
</div>
<span>
<img class="backgroundlogo" src="Img/bg.png" alt="">
</span>
</body>
</html>

If you set the value of the input back to nothing when the closing button is clicked, the placeholder should appear again:
const button = document.querySelector( 'button' );
const input = document.querySelector( 'input' );
button.addEventListener( 'click', event => {
input.value = '';
});
<input type="text" placeholder="Sok">
<button>Close</button>

Try with setValue('') method to reset any element value.

html checkbox select list with collapsible children

I am using Vue.js and HTML, SCSS to create a website and am in need of creating a drop-down similar to the below gif
The above gif show how the drop-down should function when the hotel is selected the dropdown should show the room types available within that hotel.
I have already created the above example using HTML, and vue v-if. but the code is bulky and has bugs, is there any packages, or examples that provide a similar drop-down. can anyone suggest me for this?
Thanks in advance...
my code,
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-family: "Open Sans";
font-weight: normal;
font-style: normal;
font-stretch: normal;
letter-spacing: normal;
color: grey;
line-height: 1.5;
margin-left: 20px;
font-size: 16px;
width: 229px;
height: 60px;
border: solid 1px #e9e9e9;
border-radius: 5px;
padding-left: 15px;
margin-top: 7px;
margin-left: 20px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/* background: url("../assets/First_Picker/icon-copy-2.svg") no-repeat; */
background-size: 12px;
background-position: calc(100% - 20px) center;
background-color: white;
background-repeat: no-repeat;
}
.navbar a:hover,
.dropdown:hover .dropbtn,
.dropbtn:focus {
background-color: white;
outline: none;
}
.dropdown-content {
display: none;
position: relative;
background-color: #f9f9f9;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1000;
line-height: 1.5;
margin-left: 20px;
font-size: 16px;
min-width: 229px;
width: 229px;
border-radius: 0;
padding-left: 15px;
margin-top: 7px;
margin-left: 20px;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
#arrow1 {
padding-left: 50px;
width: 5.4px;
height: 8.8px;
/* transform: rotate(-270deg); */
color: #a9a9a9;
}
.dropdown-header {
color: #a9a9a9;
}
.show {
display: block;
}
/*CHECK BOX STYLES*/
.container {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
/* width: 102px; */
height: 24px;
font-family: "Open Sans";
font-size: 14px;
font-weight: normal;
font-style: normal;
font-stretch: normal;
line-height: 1.71;
letter-spacing: normal;
color: #272729;
}
/* Hide the browser's default checkbox */
.container input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
/* Create a custom checkbox */
.checkmark {
position: absolute;
top: 5px;
left: 0;
height: 18px;
width: 18px;
background-color: white;
border: 1px solid grey;
}
/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
/* background-color: #283fb0; */
}
/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
background-color: #283fb0;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
display: inline-block;
}
/* Style the checkmark/indicator */
.container .checkmark:after {
left: 6px;
top: 2px;
width: 6px;
height: 9px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.checkout_btn {
width: 114px;
margin-top: 6px;
margin-left: 20px;
height: 60px;
border-radius: 5px;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
background-color: #283fb0;
}
.checkout_txt {
width: 76px;
height: 24px;
font-family: "Open Sans";
font-size: 14px;
font-weight: bold;
font-style: normal;
font-stretch: normal;
line-height: 1.71;
letter-spacing: normal;
text-align: center;
color: #ffffff;
}
<div class="dropdown">
<button class="dropbtn" #click="PickHotel">
{{ hotel_selected ? selected_hotel.name: 'Select Hotel' }}
<i
class="fa fa-chevron-down"
id="arrow1"
></i>
</button>
<div
id="myDropdown3"
v-bind:class="[hotelPicker == true ? 'dropdown-content show' : 'dropdown-content']"
>
<p
class="dropdown-header"
v-if="hotel_selected ==false || hotel_selected==true & roomTypes_selected.length >1"
>Select Hotel</p>
<p class="dropdown-header" v-else>Select a Room Type</p>
<label class="container" v-if="!hotel_selected" v-for="(item,i) in Hotel" :key="i">
{{ item.hotel }}
<input
type="checkbox"
:value="item.hotel"
:name="i"
:id="i"
#input="selectHotel($event.target.value,$event.target.name)"
>
<span class="checkmark"></span>
</label>
<!-- ROOMTYPES -->
<label
class="container"
v-if="hotel_selected"
v-for="rmType in Hotel[selected_hotel ? selected_hotel.id : 0].roomTypes"
:key="rmType.id"
>
{{ rmType.type }}
<input
type="checkbox"
:value="rmType.type"
:name="rmType.id"
:id="rmType.id"
#input="selectRoomType($event.target.value,$event.target.name)"
>
<span class="checkmark"></span>
</label>
</div>
</div>

Check this solution out. I just created a small component that will help you modify your code a little. I hope this helps.
<template>
<div class="container">
<form>
<div class="row">
<div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
<div class="form-group">
<select v-model="selectedValue">
<option v-for="(val,key) in formData" :key="key">{{key}}</option>
</select>
</div>
<div class="form-group">
<app-checkbox :childData="selectedChildData"></app-checkbox>
</div>
</div>
</div>
{{selectedChildData}}
</form>
</div>
</template>
<script>
import AppCheckbox from "./AppCheckbox"
export default {
data(){
return {
formData:{
test1:["single","double"],
test2:["sample1","sample2"]
},
selectedValue:"",
selectedChildData:[],
formDataSelected:[]
}
},
watch:{
selectedValue(val){
this.selectedChildData = this.formData[val]
}
},
components:{
"app-checkbox": AppCheckbox
}
}
</script>
<style>
</style>
This is the code for AppCheckbox Component
<template>
<div>
<div class="form-group" v-if="customData.length != 0 || customData.length != null" v-for="(val,index) in customData" :key="index">
<input type="checkbox" :value="val" v-model="childSelectedData">{{val}}
</div>
</div>
</template>
<script>
export default {
props:{
childData:Array
},
data(){
return {
childSelectedData:[]
}
},
computed:{
customData:{
get(){
return this.childData;
}
}
}
}
</script>

How to display text written in input type by user into an iframe?

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();

We Keep Coding

JavaScript is the programming language of the Web.

JS Function Not Defined Chrome Extension Popup.js - javascript

I needed to download jquery and link it to popup.html using and my JS code needed to be placed inside $(document).ready(function () { //code goes here });

Related

Hovering on animated navbar goes wrong

3 popup div click outside to close

How to reset a placeholder whenever you exit a search box event?

html checkbox select list with collapsible children

How to display text written in input type by user into an iframe?

Categories

Resources