So I have been trying this for hours since I have no huge experience in JavaScript. Basically, I have modified a CSS and HTML codes for the pop up, that I found on the web. However, I would love to make the pop up to show up 10 seconds after a page load. I have tried lots of methods, but none of them gave me the result I wanted. Actually, none of them worked, even partially.
Here is the latest method, which also didn't work.
function toggle(div_id) {
var el = document.getElementById(div_id);
if ( el.style.display == 'none' ) { el.style.display = 'block';}
else {el.style.display = 'none';}
}
function blanket_size(popUpDivVar) {
if (typeof window.innerWidth != 'undefined') {
viewportheight = window.innerHeight;
} else {
viewportheight = document.documentElement.clientHeight;
}
if ((viewportheight > document.body.parentNode.scrollHeight) && (viewportheight > document.body.parentNode.clientHeight)) {
blanket_height = viewportheight;
} else {
if (document.body.parentNode.clientHeight > document.body.parentNode.scrollHeight) {
blanket_height = document.body.parentNode.clientHeight;
} else {
blanket_height = document.body.parentNode.scrollHeight;
}
}
var blanket = document.getElementById('blanket');
blanket.style.height = blanket_height + 'px';
var popUpDiv = document.getElementById(popUpDivVar);
popUpDiv_height=blanket_height/2-200;//200 is half popup's height
popUpDiv.style.top = popUpDiv_height + 'px';
}
function window_pos(popUpDivVar) {
if (typeof window.innerWidth != 'undefined') {
viewportwidth = window.innerHeight;
} else {
viewportwidth = document.documentElement.clientHeight;
}
if ((viewportwidth > document.body.parentNode.scrollWidth) && (viewportwidth > document.body.parentNode.clientWidth)) {
window_width = viewportwidth;
} else {
if (document.body.parentNode.clientWidth > document.body.parentNode.scrollWidth) {
window_width = document.body.parentNode.clientWidth;
} else {
window_width = document.body.parentNode.scrollWidth;
}
}
var popUpDiv = document.getElementById(popUpDivVar);
window_width=window_width/2-200;//200 is half popup's width
popUpDiv.style.left = window_width + 'px';
}
function popup(windowname) {
blanket_size(windowname);
window_pos(windowname);
toggle('blanket');
toggle(windowname);
}
window.onkeydown = function( event ) {
if ( event.keyCode == 27 ) {
console.log( 'ESC' );
document.getElementById('popUpDiv').style.display = 'none';
document.getElementById('blanket').style.display = 'none';
}
}
#charset "UTF-8";
body {
font-family:Palatino, Baskerville, Georgia, serif;
background:#190121;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
}
#container {
width: 780px;
background: #FFFFFF;
margin: 0 auto;
font-size:14px;
text-align: left;
}
#mainContent {
padding: 0 60px;
min-height:600px;
line-height:25px
}
img {border:0px}
/*LINKS*/
#mainContent .gamortva:link {
color:#ffffff;
text-decoration:none;
font-size:8px;
background:#000000;
padding:5px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
}
#mainContent .gamortva:visited {
color:#ffffff;
text-decoration:none;
font-size:8px;
background:#000000;
padding:5px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
}
#mainContent .gamortva:hover {
color:#ffffff;
text-decoration:none;
font-size:9px;
background:#333333;
padding:5px;
-webkit-border-radius:10px;
-moz-border-radius:10px
}
#mainContent .gamortva:active {
color:#ffffff;
text-decoration:none;
font-size:9px;
background:#333333;
padding:5px;
-webkit-border-radius:10px;
-moz-border-radius:10px
}
/*STYLES FOR CSS POPUP*/
#blanket {
background-color:#111;
opacity: 0.65;
*background:none;
position:absolute;
z-index: 9001;
top:0px;
left:0px;
width:100%;
-webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;
-o-transition: all 2s ease-in-out;
transition: all 2s ease-in-out;
}
#popUpDiv {
position:absolute;
background:url(***.jpg) no-repeat;
width:400px;
height:400px;
border:5px solid #000;
z-index: 9002;
}
.amazonis-knopka:link {
display: block;
text-align: center;
padding: 10px;
margin-top: 30px;
color:white;
text-decoration:none;
font-size:40px;
background:#000000;
opacity:0.8;
-webkit-border-radius:20px;
-moz-border-radius:20px;
}
.amazonis-knopka:hover{
padding: 10px;
text-decoration:underline;
font-size:43px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
opacity:1;
}
.amazonis-knopka:visited{
color:white;
}
#mainContent .gamortva:active {
color:#ffffff;
}
.popTitle {
display: block;
margin-top: 10px;
text-align: center;
background:#333333;
padding:19px;
-webkit-border-radius:100px;
-moz-border-radius:10px;
background: rgba(0, 0, 0, 0.5);
display: block;
color:white;
font-size:23px;
}
.popText {
display: block;
margin-top: 40px;
text-align: center;
padding:30px;
-webkit-border-radius:20px;
-moz-border-radius:20px;
background: rgba(144, 154, 56, 0.3);
font-size:25px;
font-weight: bolder;
-webkit-text-fill-color: red;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Pop Up</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function openPopUp() {
element = document.getElementById("popUpDiv");
}
window.onload = setTimeout(openPopUp, 10000);
</script>
<script type="text/javascript" src="css-pop.js"></script>
</head>
<body onload="popup('popUpDiv')">
<div id="container">
<div id="mainContent">
<p><strong>Pop Up</strong> Beta <em>V1</em></p>
<div id="blanket" style="display:none;"></div>
<div id="popUpDiv" style="display:none;">
<a href="#" class="gamortva" onclick="popup('popUpDiv')" >Close</a>
<span class="popTitle">Heading!..</span>
<span class="popText">Text..</span>
Link...
</div>
Click Here To Open The Pop Up
</div>
</div>
</body>
</html>
The setTimeout code is the following:
<script type="text/javascript">
function openPopUp() {
element = document.getElementById("popUpDiv");
}
window.onload = setTimeout(openPopUp, 10000);
</script>
I thought maybe if I could load the pop up with the <script> code it would be very helpful, because I don't really like that the pop up is being loaded with the body tag: <body onload="popup('popUpDiv')">
But, I could not manage to do that, because the pop up does not load after I try to load it with the function. Maybe I was doing it wrong, but I have tried everything I could think of, and almost everything I found on web.
I know I have a lot of other mistakes other than the pop up, I am still working on them.
Sorry for not being very specific and copying entire codes, but without those I thought it would be hard to figure out what I was trying to do.
Thank you.
Just run your function in right place )
function toggle(div_id) {
var el = document.getElementById(div_id);
if ( el.style.display == 'none' ) { el.style.display = 'block';}
else {el.style.display = 'none';}
}
function blanket_size(popUpDivVar) {
if (typeof window.innerWidth != 'undefined') {
viewportheight = window.innerHeight;
} else {
viewportheight = document.documentElement.clientHeight;
}
if ((viewportheight > document.body.parentNode.scrollHeight) && (viewportheight > document.body.parentNode.clientHeight)) {
blanket_height = viewportheight;
} else {
if (document.body.parentNode.clientHeight > document.body.parentNode.scrollHeight) {
blanket_height = document.body.parentNode.clientHeight;
} else {
blanket_height = document.body.parentNode.scrollHeight;
}
}
var blanket = document.getElementById('blanket');
blanket.style.height = blanket_height + 'px';
var popUpDiv = document.getElementById(popUpDivVar);
popUpDiv_height=blanket_height/2-200;//200 is half popup's height
popUpDiv.style.top = popUpDiv_height + 'px';
}
function window_pos(popUpDivVar) {
if (typeof window.innerWidth != 'undefined') {
viewportwidth = window.innerHeight;
} else {
viewportwidth = document.documentElement.clientHeight;
}
if ((viewportwidth > document.body.parentNode.scrollWidth) && (viewportwidth > document.body.parentNode.clientWidth)) {
window_width = viewportwidth;
} else {
if (document.body.parentNode.clientWidth > document.body.parentNode.scrollWidth) {
window_width = document.body.parentNode.clientWidth;
} else {
window_width = document.body.parentNode.scrollWidth;
}
}
var popUpDiv = document.getElementById(popUpDivVar);
window_width=window_width/2-200;//200 is half popup's width
popUpDiv.style.left = window_width + 'px';
}
function popup(windowname) {
blanket_size(windowname);
window_pos(windowname);
toggle('blanket');
toggle(windowname);
}
window.onkeydown = function( event ) {
if ( event.keyCode == 27 ) {
console.log( 'ESC' );
document.getElementById('popUpDiv').style.display = 'none';
document.getElementById('blanket').style.display = 'none';
}
}
function openPopUp() {
setTimeout(function(){
popup('popUpDiv');
}, 5000);
}
#charset "UTF-8";
body {
font-family:Palatino, Baskerville, Georgia, serif;
background:#190121;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
}
#container {
width: 780px;
background: #FFFFFF;
margin: 0 auto;
font-size:14px;
text-align: left;
}
#mainContent {
padding: 0 60px;
min-height:600px;
line-height:25px
}
img {border:0px}
/*LINKS*/
#mainContent .gamortva:link {
color:#ffffff;
text-decoration:none;
font-size:8px;
background:#000000;
padding:5px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
}
#mainContent .gamortva:visited {
color:#ffffff;
text-decoration:none;
font-size:8px;
background:#000000;
padding:5px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
}
#mainContent .gamortva:hover {
color:#ffffff;
text-decoration:none;
font-size:9px;
background:#333333;
padding:5px;
-webkit-border-radius:10px;
-moz-border-radius:10px
}
#mainContent .gamortva:active {
color:#ffffff;
text-decoration:none;
font-size:9px;
background:#333333;
padding:5px;
-webkit-border-radius:10px;
-moz-border-radius:10px
}
/*STYLES FOR CSS POPUP*/
#blanket {
background-color:#111;
opacity: 0.65;
*background:none;
position:absolute;
z-index: 9001;
top:0px;
left:0px;
width:100%;
-webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;
-o-transition: all 2s ease-in-out;
transition: all 2s ease-in-out;
}
#popUpDiv {
position:absolute;
background:url(iRobot.jpg) no-repeat;
width:400px;
height:400px;
border:5px solid #000;
z-index: 9002;
}
.amazonis-knopka:link {
display: block;
text-align: center;
padding: 10px;
margin-top: 30px;
color:white;
text-decoration:none;
font-size:40px;
background:#000000;
opacity:0.8;
-webkit-border-radius:20px;
-moz-border-radius:20px;
}
.amazonis-knopka:hover{
padding: 10px;
text-decoration:underline;
font-size:43px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
opacity:1;
}
.amazonis-knopka:visited{
color:white;
}
#mainContent .gamortva:active {
color:#ffffff;
}
.popTitle {
display: block;
margin-top: 10px;
text-align: center;
background:#333333;
padding:19px;
-webkit-border-radius:100px;
-moz-border-radius:10px;
background: rgba(0, 0, 0, 0.5);
display: block;
color:white;
font-size:23px;
}
.popText {
display: block;
margin-top: 40px;
text-align: center;
padding:30px;
-webkit-border-radius:20px;
-moz-border-radius:20px;
background: rgba(144, 154, 56, 0.3);
font-size:25px;
font-weight: bolder;
-webkit-text-fill-color: red;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Pop Up</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="css-pop.js"></script>
</head>
<body onload="openPopUp()">
<div id="container">
<div id="mainContent">
<p>Roomba iRobot <strong>Pop Up</strong> Beta <em>V1</em></p>
<div id="blanket" style="display:none;"></div>
<div id="popUpDiv" style="display:none;">
<a href="#" class="gamortva" onclick="popup('popUpDiv')" >Close</a>
<span class="popTitle">Heading!..</span>
<span class="popText">Text..</span>
Link...
</div>
Click Here To Open The Pop Up
</div>
</div>
</body>
</html>
Related
I am developing a project, and I made a custom input element. The problem is that whenever I try to add text, it shifts to the next line, so I was making it stop and shifting the position whenever input is added. I am making it go to the right whenever input is added(in my project, you can only add 1 text at a time). For the first few times, it works, but after 4 inputs, the space between the cursor(made by me/custom) and the closest text becomes more than it should be, for now, for a new input, the code adds 5px to the current margin, and the problem occurs, if I add 4px, the text moves too far. Is there any way that I can make my custom cursor move just as needed for it to look good.
Code(Note: I have code that is not used/is not needed, but I am scared that if I remove anything, something will go wrong, also you need to have a full page to see the cursor, else you can't see it, and the problem with it going below is something I have to solve once this problem is solved):
<!DOCTYPE html>
<html style="background-color:black; margin:0;padding:0;" lang="en-US">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<meta charset="utf-8"/>
<link rel="icon" href="icon.png"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
<meta name="description" content="Description"/>
<title>MyTitle</title>
<style>
a{
color: inherit;
text-decoration: none;
}
*{
margin:0;
padding:0;
}
#heading{
color: white;
text-align: center;
font-size: 24px;
font-weight: 420 bold;
font-family: sans-serif;
text-shadow: 2px 2px red;
margin-right: 10px;
margin-top: 20px;
}
#description{
color: green;
text-align: center;
font-size: 19px;
font-weight: 69 bold;
font-family: serif;
text-shadow: 1px 1px white;
margin-right: 10px;
margin-top: 20px;
}
#cursor{
text-align: initial;
position: absolute;
left: 0;
font-weight: 35;
font-size: 25px;
color: #2E3D48;
-webkit-animation: 1s blink step-end infinite;
-moz-animation: 1s blink step-end infinite;
-ms-animation: 1s blink step-end infinite;
-o-animation: 1s blink step-end infinite;
animation: 1s blink step-end infinite;
}
#field{
color: white;
text-align: center;
font-size: 20px;
}
#fieldDiv{
background-color: #968786;
text-align: center;
width: 100%;
height: 28px;}
#keyframes "blink" {
from, to {
color: transparent;
}
50% {
color: black;
}
}
#-moz-keyframes blink {
from, to {
color: transparent;
}
50% {
color: black;
}
}
#-webkit-keyframes "blink" {
from, to {
color: transparent;
}
50% {
color: black;
}
}
#-ms-keyframes "blink" {
from, to {
color: transparent;
}
50% {
color: black;
}
}
#-o-keyframes "blink" {
from, to {
color: transparent;
}
50% {
color: black;
}
}
#cursorContainer{
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#bton{
width: 20px;
height: 20px;
}
</style>
</head>
<body>
<h1 id="heading">
Heading
</h1>
<p id="description">Description</p>
<div id="fieldDiv">
<p id="field"></p><p id="cursorContainer" onclick="hideCursor()"><span id="cursor">|</span></p>
</div>
<br/>
<button id="bton" onclick="change();">
<!--Always add the script on the bottom of the BODY tag since it contains the script-->
<script type="text/javascript">
var marginNum = screen.width/2;
const screenWidth = screen.width;
function checkCtrlA(){
var ctrlPressed = false;
window.addEventListener("keydown", function(e){
if(e.keyCode == 17){
ctrlPressed = true;
}
});
if(ctrlPressed){
window.addEventListener("keydown", function(e){
if(e.keyCode == 65){
hideCursor();
}
})
}
}
window.onload = function(){
const cursor = document.getElementById("cursor");
const widthNeeded = innerWidth/2;
cursor.style.marginLeft = widthNeeded.toString() + "px";
cursor.style.cursor = "default";
};
const divToHide = document.getElementById("fieldDiv");
divToHide.onclick = hideCursor;
function printf(val){
console.log(val);
}
document.getElementById("fieldDiv").addEventListener('click', function(){
const element = document.getElementById("cursor");
element.style.visibility = "hidden";
});
document.getElementById("fieldDiv").addEventListener("mouseover", function(){
const element = document.getElementById("cursor");
element.style.visibility = "hidden";
});
document.getElementById("fieldDiv").addEventListener("mouseout", function(){
const element = document.getElementById("cursor");
element.style.visibility = "visible";
});
var currentText = document.getElementById("field").textContent;
function change(){
movePosCursor();
currentText = document.getElementById("field").textContent += "a";
document.getElementById("cursor").style.visibility = "visible";
}
function movePosCursor(){
const element = document.getElementById("cursor");
marginNum += 5;
var widthInPx = marginNum.toString() + "px";
element.style.marginLeft = widthInPx;
}
function hideCursor(){
const element = document.getElementById("cursor");
element.style.visibility = "hidden";
}
checkCtrlA();
</script>
</body>
</html>
My goal is to understand why the div with the id of product is not shown when the page is loaded.
I would expect the product div to be displayed as a grid by default because that is what it is set as in the stylesheet. In reality, the product div doesn't show until the submit event attached to the search field is fired.
I am unable to understand why product is referenced in the javascript at the bottom of the productUpdate() function, even though it is never actually defined as a const or var.
if(!flag_error){
product.style.display = "grid";
hint.style.display = "none";
forwardBtn.style.display = "inline";
backBtn.style.display = "inline";
I have tried extensively to understand exactly which bit of code turns product div on and off. The code is below and I've also uploaded it to http://va.ogs17.brighton.domains/.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>V&A online item search</title>
<link rel="stylesheet" type="text/css" href="index.css">
<script src="index.js"></script>
</head>
<body>
<div class="main-container">
<div class="welcome-container">
<h1>Search the V&A Online</h1>
<h2>Start searching now by entering in a keyword in the searchbar below</h2>
</div>
<div id="search-container">
<form>
<fieldset>
<legend><strong>Search for an item here:</strong></legend>
<p>The V&A Museum is the world's leading museum of of art, design and performance, housing a permanent collection of over 2.27 million objects. You can search for them here.</p>
<img class="info-icon" src="info-icon2.png">
<p class="search-hint"> Stuck for ideas? Try searching for an object like a throne or vase. You could try a person or a place. Is there certain techniques or materials you are loooking for? Any keyword will work, even dragons!</p>
<label for="search-bar"></label>
<input id="search-bar" type="search">
<input type="submit" value="Search" href="#product-top">
<div class="nav-btn-container">
Previous Item
Next Item
<span id="hint">This is the last item in the list.</span>
</div>
</fieldset>
</form>
</div>
<div id="loading">
<img class="loading-img" src="Bean Eater-1s-200px.gif">
</div>
<div id="product">
<a id="product-top"></a>
<div class="title">
<h2 class="">No title found</h2>
</div>
<div class="photo-container"><img class="photo" src="image-not-found.png"></div>
<div class="information">
<p class="artist">Artist: Unknown</p>
<p class="object">Object: Unkown</p>
<p class="date_text">Date: Unkown</p>
<p class="place">Place: Unkown</p>
<p class="location">Location: Unknown</p>
<p class="object_number">Object Number: Unkown</p>
<p class="museum_number">Museum Number Token: Unkown</p>
</div>
</div>
<div id="success">
<p>Success!</p>
<!-- Link back to empty form -->
</div>
<div id="error">
<p>error...</p>
<!-- Link back to empty form -->
</div>
</div>
</body>
</html>
CSS
body {
font-family:'Roboto',sans-serif;
padding: 32px;
margin: 0;
background-image: url("vanda-front.jpg");
background-size: 100%;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
img {
width: 100%;
}
.welcome-container {
color:honeydew;
text-shadow: black;
margin-top: 2rem;
margin-left: 3rem;
margin-bottom: 18rem;
}
.welcome-container h1 {
font-size: 3.5rem;
}
fieldset {
padding: 20px;
width: 60%;
margin: auto;
background-color: black;
opacity: 0.9;
border-style: none;
}
fieldset label, p, legend {
color: blanchedalmond;
}
fieldset img{
max-width: 1rem;
}
/* Button style partly by Frederico Dossena fdossena.com/?p=html5cool/buttons/i.frag */
.nav-btn-container a, input[type=submit] {
padding:0.35em 1.2em;
border:0.1em solid #FFFFFF;
margin:0 0.3em 0.3em 0;
border-radius:0.12em;
box-sizing: border-box;
background-color: black;
text-decoration:none;
font-weight:300;
color:#FFFFFF;
text-align:center;
transition: all 0.2s;
cursor: pointer;
}
input[type=submit] {
font-size: 1.5rem;
}
input[type=search] {
/* padding:0.35em 1.2em; */
border:0.1em solid #FFFFFF;
margin:0 0.3em 0.3em 0;
border-radius:0.12em;
box-sizing: border-box;
text-decoration:none;
/* min-height: 2.5rem; */
font-size: 3rem;
}
.nav-btn-container a:hover, input[type=submit]:hover {
color:#000000;
background-color:#FFFFFF;
}
.nav-btn-container {
margin-top: 1.2rem;
}
.search-hint{
display: none;
}
#product {
display: grid;
grid-template-columns: repeat(9, 1fr);
grid-template-rows: 10rem 1fr;
gap: 0.2rem;
padding: 10px;
box-sizing: border-box;
/* in the internal divs use grid-column-start and grid-row-end: ;
basic vid here - https://www.youtube.com/watch?v=Y9rHsdCxU8Q */
}
.photo-container {
opacity: 1;
}
/* text-overflow code by Jokesterfr stackoverflow.com/questions/7711490/prevent-text-from-overflowing-a-padded-container-in-html */
.title {
background-color: black;
opacity: 0.9;
border-style: none;
color: blanchedalmond;
font-size: 3rem;
overflow: hidden;
border-left:1em solid transparent;
border-right:1em solid transparent;
text-overflow: ellipsis;
}
.information {
background-color: black;
opacity: 0.9;
border-style: none;
color: blanchedalmond;
}
.back-button, .forward-button {
display: none;
}
.forward-button{
float: right;
}
.title {
grid-column-start: 1;
grid-column-end: 10;
grid-row-start: 1;
grid-row-end: 1;
}
.photo-container {
grid-column-start: 1;
grid-column-end: 6;
grid-row-start: 2;
grid-row-end: 3;
}
.information{
grid-column-start:6;
grid-column-end: 10;
grid-row-start: 2;
grid-row-end: 3;
}
input {
display: block;
Margin: 5px;
width: 100%;
}
#hint {
color:red;
display: none;
}
#success, #error, #product {
text-align: center;
display: none;
}
.loading-img{
display: none;
}
/* Android A70 */
/* #media(min-width: 751px) and (max-width: 1080px) {
body{background-color: red;}
} */
/* iPhone 6 */
#media(max-width: 750px) {
/* body{
background-color: orangered;
background-image: none;
} */
.welcome-container {
margin-bottom: 12rem;
}
.title {
grid-column-start: 1;
grid-column-end: 10;
grid-row-start: 1;
grid-row-end: 1;
}
.photo-container {
grid-column-start: 1;
grid-column-end: 10;
grid-row-start: 2;
grid-row-end: 3;
}
.information{
grid-column-start:1;
grid-column-end: 10;
grid-row-start: 3;
grid-row-end: 4;
}
}
JavaScript
window.addEventListener('load', function() {
//global varaibles
var searchHint = document.querySelector('.search-hint');
//by defualt, the first item is always shown. Position is incremented using next and previous buttons to show new items.
var position = 0;
var maxCap = 45;
//code by Ry stackoverflow.com/questions/21147832/convert-camel-case-to-human-readable-string
function toCapitalizedWords(name) {
var words = name.match(/[A-Za-z][a-z]*/g) || [];
return words.map(capitalize).join(" ");
}
function capitalize(word) {
return word.charAt(0).toUpperCase() + word.substring(1);
}
function productUpdate(step) {
if(position + step >= maxCap - 1){
//show hint
var hint = document.querySelector("#hint");
hint.style.display = "inline";
}
else {
// var loading = document.querySelector('#loading');
position += step;
var flag_error = false;
// get all form fields
var search = document.querySelector("#search-bar").value.trim();
var hint = document.querySelector("#hint");
var backBtn = document.querySelector(".back-button");
var forwardBtn = document.querySelector(".forward-button");
var productTitle = document.querySelector(".title");
var productPhoto = document.querySelector(".photo");
var productInformation = document.querySelectorAll(".information");
var xhrSearch = new XMLHttpRequest();
xhrSearch.onreadystatechange = function() {
//readystate 4 means oporation is complete developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/readyState
//status 200 means OK
if(this.readyState == 4 && this.status == 200) {
console.log(search);
//TODO
//if there is response text, do this, if not, display hint saying product not found
const result = JSON.parse(xhrSearch.responseText);
productTitle.textContent = result.records[position].fields.title;
//js loops god post stackoverflow.com/questions/3010840/loop-through-an-array-in-javascript
for (let item of productInformation[0].children) {
console.log(item);
itemClass = item.className;
item.textContent = toCapitalizedWords(itemClass) + ": " + result.records[position].fields[itemClass];
}
var xhrFullRecord = new XMLHttpRequest();
xhrFullRecord.onreadystatechange = function() {
if(this.readyState == 4 && this.status == 200) {
const fullRecordResult = JSON.parse(xhrFullRecord.responseText);
productPhoto.src = "https://framemark.vam.ac.uk/collections/" + fullRecordResult[0].fields.image_set[0].fields.image_id + "/full/735,/0/default.jpg";
}
}
fullRecordUrl = "https://www.vam.ac.uk/api/json/museumobject/" + result.records[position].fields.object_number;
xhrFullRecord.open("GET", fullRecordUrl);
xhrFullRecord.send();
}
};
//what happens to URL if £$&^%$£ is put in search?
url = "https://www.vam.ac.uk/api/json/museumobject/search?q=" + search + "&limit=" + maxCap;
//do I want any other params here?
xhrSearch.open("GET", url);
xhrSearch.send();
if(!flag_error){
//setTimeout(loading.style.display = "none", 5000);
product.style.display = "grid";
hint.style.display = "none";
forwardBtn.style.display = "inline";
backBtn.style.display = "inline";
}
}
}
document.querySelector('#search-container').addEventListener("submit", function(evt){
// stop page reload default action
evt.preventDefault();
position = 0;
productUpdate(0);
})
document.querySelector('.info-icon').addEventListener("click", function(evt){
// stop page reload default action
// evt.preventDefault();
if(searchHint.style.display == "inline"){
searchHint.style.display = "none";
} else {
searchHint.style.display = "inline";
}
})
document.querySelector('.back-button').addEventListener("click", function(evt){
// stop page reload default action
evt.preventDefault();
productUpdate(-1);
})
document.querySelector('.forward-button').addEventListener("click", function(evt){
// stop page reload default action
evt.preventDefault();
productUpdate(1);
})
function displayLoading(){
var loadIcon = document.querySelector(".loadingImg");
product.style.display = "none";
loadIcon.style.display = "inline";
}
});
you have onload event but onload there is no call to productUpdate()
window.addEventListener('load', function() {
........
........
// append this line before closing
productUpdate(0);
})
Im trying to make a navbar that is transparent when youre on the top of the page and when you move down the background for the navigation bar appears but when the animation triggers for the first time it looks like it was triggered twice. How could I fix this?
window.onscroll = function () {
var scroll = getScrollTop();
var navbar = document.getElementById('navbar');
if (scroll > 20) {
navbar.classList.remove('onTop');
navbar.classList.add('moved');
}
else{
navbar.classList.remove('moved');
navbar.classList.add('onTop');
}
}
function getScrollTop(){
if(typeof pageYOffset!= 'undefined'){
return pageYOffset;
}
else{
var B= document.body;
var D= document.documentElement;
D= (D.clientHeight)? D: B;
return D.scrollTop;
}
}
body {
background: linear-gradient(215deg, #d55724, #5259e2);
background-size: 400% 400%;
margin:0;
padding:0;
height:1000px;
}
.navbar {
position: fixed;
top:0;
width:100%;
height:50px;
}
.onTop {
position: fixed;
top:0;
width:100%;
height:50px;
animation-iteration-count: 1;
animation: NavBar-onTop .3s;
}
.moved {
background-color: white;
position: fixed;
top:0;
width:100%;
height:50px;
animation-iteration-count: 1;
animation: NavBar-moved .6s;
}
#keyframes NavBar-moved {
from {background-color: rgba(255, 255, 255, 0);}
to {background-color: rgb(255, 255, 255);}
}
#keyframes NavBar-onTop{
from {background-color: rgb(255, 255, 255);}
to {background-color: rgba(255, 255, 255, 0);}
}
<div id="navbar" class="navbar">ExampleNavBar</div>
I have fixed it.
$(window).scroll(function(){
var scroll = $(window).scrollTop();
if(scroll < 300){
$('.navbar').css('background', 'transparent');
} else{
$('.navbar').css('background', 'white');
}
});
function getScrollTop(){
if(typeof pageYOffset!= 'undefined'){
//most browsers except IE before #9
return pageYOffset;
}
else{
var B= document.body; //IE 'quirks'
var D= document.documentElement; //IE with doctype
D= (D.clientHeight)? D: B;
return D.scrollTop;
}
}
body {
background: linear-gradient(-250deg, #1E3B70, #29539B);
background-size: 400% 400%;
margin:0;
padding:0;
height:10000px;
}
.navbar {
margin-top: 0 !important;
position: fixed !important;
top:0 !important;
width:100%;
height:50px;
transition:500ms ease;
background-color: transparent;
}
.navbar.scrolled {
background:white;
}
<div id="navbar" class="navbar">TEST</div>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
let myInput = document.querySelector(".input");
let myOutput = document.querySelector(".result");
let sudo = false;
let isGood = false;
let enter = false;
let repeat =
'<div class="content2">'
+ '<div class="linia">'
+ '<span id="terminal2">linux#love:~</span>'
+'<input type="text" class="input" size="50">'
+'</div>'
+'<div class="result"></div>'
+'</div>';
myInput.disabled = false;
let cA = [
["mkdir", "creates new dir"],
["userdel", "deletes user"],
["useradd", "adds user"]
]
const listHelp = function(command)
{
if(command == "help" || command == "HELP")
{
for(let i=0; i<cA.length; i++){
// console.log(cA[i][0]);
myOutput.innerHTML += '<span>' + (cA[i][0]) + '</span><br />';
}
myOutput.innerHTML += repeat;
myInput = document.querySelector(".input");
return inputValue;
}
else{
myOutput.innerHTML += '<span>' + "Error" +'</span><br />';
myOutput.innerHTML += repeat;
return checkCMD;
}
}
/*------------------------------------------------------------*/
const commandList = function (command){
console.log(command);
if(sudo == true)
{
command = command.replace("sudo ", "");
console.log(command);
}
for (let i = 0; i<cA.length; i++)
{
if(cA[i].includes(command) == true){
console.log(cA [i][1]);
isGood = true;
myOutput.innerHTML += '<span>' + cA [i][1] + '</span><br />';
break;
}
}
if(isGood == true){
myOutput.innerHTML += repeat;
}
else{return listHelp(command);}
}
const isSudo = function (checkSudo){
if (checkSudo.startsWith("sudo") == true)
{
console.log(checkSudo);
sudo = true;
return commandList(checkSudo) + sudo;
}
else{
console.log("Nie sudo");
return commandList(checkSudo);
}
}
const isEnter = function (checkEnter){
if (checkEnter.keyCode === 13)
{
inputValue = myInput.value;
console.log("Enter");
myInput.disabled = true;
console.log(inputValue);
return isSudo(inputValue);
}
}
const checkCMD = myInput.addEventListener("keypress", isEnter);
html{
box-sizing: border-box;
font-family: 'Ubuntu', sans-serif;
}
body{
width:500px;
height:auto;
word-wrap: break-word;
overflow-x: hidden;
overflow-y: hidden;
}
.konsola{
width:500px;
height:300px;
color:#71a33b;
position:absolute;
border-radius:1%;
font-family: 'Ubuntu Mono', monospace;
//float:left;
//z-index: 3;
}
#terminal2::selection{
background:black;
color:white;
}
.pasek{
font-weight:100;
background:linear-gradient(#616161, #353535);
box-shadow: black 0px 1.7px 4px -0.7px;
color:white;
width:100%;
height:8%;
user-select:none;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
font-family: 'Ubuntu', sans-serif;
}
.zamknij{
position:relative;
background-color:darkorange;
color:gray;
border-radius:100%;
width:13px;
height:13px;
float:left;
margin-left:5px;
margin-top:5px;
line-height: 13px;
font-size:10px;
text-align:center;
transition: .2s ease-in-out;
}
.zamknij:hover{
background-color:orange;
transition: .2s ease-in-out;
}
.zamknij:active{
background-color:darkorange;
transition: .05s ease-in-out;
}
#minimalizuj{
position:relative;
background-color:#63625c;
color:gray;
border-radius:100%;
width:13px;
height:13px;
float:left;
margin-left:5px;
margin-top:5px;
line-height: 11px;
font-size:20px;
text-align:center;
transition: .2s ease-in-out;
}
#minimalizuj:hover{
background-color:orange;
transition: .2s ease-in-out;
}
#minimalizuj:active{
background-color:darkorange;
transition: .1s ease-in-out;
}
#maksymalizuj{
position:relative;
background-color:#63625c;
color:gray;
border-radius:100%;
width:13px;
height:13px;
float:left;
margin-left:5px;
margin-top:5px;
line-height: 10px;
font-size:13px;
text-align:center;
transition: .2s ease-in-out;
}
#maksymalizuj:hover{
background-color:orange;
transition: .2s ease-in-out;
}
#maksymalizuj:active{
background-color:darkorange;
transition: .1s ease-in-out;
}
#terminal{
margin:7px;
line-height:9px;
font-size:15px;
float:left;
}
#terminal2{
position:relative;
line-height:9px;
font-size:15px;
font-weight:700;
left: 5px;
top: 10px;
float:left;
}
.content{
background-color:#39152e;
position:relative;
width:100%;
height:100%;
overflow-y: scroll;
overflow-x:hidden;
}
.content2{
background-color:#39152e;
position:relative;
width:100%;
height:100%;
overflow-y: hidden;
overflow-x:hidden;
}
.wynik{
color:red;
}
textarea, #odmowa{
position:relative;
background:none;
border:none;
font-family: 'Ubuntu Mono', monospace;
color:white;
resize:none;
font-size:15px;
width: 78%;
line-height:17px;
//margin-top:13px;
outline:none;
text-decoration:none;
top:4px;
left:10px;
overflow: hidden;
float:left;
}
textarea::selection , #odmowa::selection, .wynik::selection{
background-color: black;
color:white;
}
::-webkit-scrollbar{
border-radius:50px;
width:4px;
}
::-webkit-scrollbar-thumb{
background-color:orange;
border-radius:50px;
}
.linia{
position:relative;
width:100%;
height:30px;
top:1px;
}
#odmowa{
line-height: 20px;
}
<!DOCTYPE HTML>
<head>
<title>Konsola</title>
<link rel="Stylesheet" href="konsola.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Ubuntu|Ubuntu+Mono" rel="stylesheet">
</head>
<body>
<div class="konsola">
<div class="pasek">
<div class="zamknij">X</div>
<div id="minimalizuj">-</div>
<div id="maksymalizuj">□</div>
<span id="terminal">linux#love:~</span>
</div>
<div class="content">
<div class="linia">
<span id="terminal2">linux#love:~</span>
<!--<textarea spellcheck="false" class="input" cols="50" rows="1"></textarea>-->
<input type="text" class="input">
</div>
<div class="result"></div>
</div>
</div>
<script language="javascript" src="konsola2.js" type="text/javascript"></script>
</body>
After few days of thinking and making my code I'm finally stuck. I want to make Terminal.
Type help to see commands, and then try to enter one of them. It's impossible, myInput.value doesn't refresh itself or just checkCMD isn't called again.
My question is: how to call checkCMD after first input / or how to refresh
myInput.value
to change every time user type some text. Should I delete its content in any function? I don't expect ready code from you, just small hint with description.
Sorry for nooby question and mess in my code.
Your event listener is always listening for keypress of your first .input element (even when it becomes disabled).
So in your loop you'll have to select newly created element (by using querySelectorAll and selecting last one, or myInput = document.querySelector(".input:not(:disabled)"); to select not disabled one. Then add new event listener to this element: myInput.addEventListener("keypress", isEnter);
I'want that my box scroll down with my page but this script seem dosn't work her's my code:
CSS
/* Print and Download Buttons */
#box {top: 271px;}
a.print{ background:#ffffff url(images/bg-print.jpg) no-repeat top center; border:1px solid #ccc; display:block; height:24px; padding:2px;
position:absolute; right:765px; text-indent:-9999px; top:271px; width:24px; z-index:110; }
a.download{ background:#ffffff url(images/bg-download.jpg) no-repeat top center; border:1px solid #ccc; display:block; height:24px; padding:2px;
position:absolute; right:765px; text-indent:-9999px; top:300px; width:24px; z-index:111; }
a.print:hover, a.download:hover{ padding-right:12px; }
HTML Code :
<script type="text/javascript" src="_layout/js/costum.js"></script> <!--The Js file call !-->
<!-- My div Box that's i want to scroll down !-->
<div id="box">
Print CV
Download CV
</div>
And this is my costum.js
window.onload = function() {
function getScrollTop() {
if (typeof window.pageYOffset !== 'undefined' ) {
// Most browsers
return window.pageYOffset;
}
var d = document.documentElement;
if (d.clientHeight) {
// IE in standards mode
return d.scrollTop;
}
// IE in quirks mode
return document.body.scrollTop;
}
window.onscroll = function() {
var box = document.getElementById('box'),
scroll = getScrollTop();
if (scroll <= 300) {
box.style.top = "300px";
}
else {
box.style.top = (scroll + 2) + "px";
}
};
};
You have set position:absolute on the a tags not box so setting top will not affect its position. Move position to the div and it should work fine:
/* Print and Download Buttons */
#box {
position:absolute;
right:765px;
top:271px;
}
a.print {
background:#f00;
border:1px solid #ccc;
display:block;
height:24px;
padding:2px;
text-indent:-9999px;
width:24px;
z-index:110;
}
a.download {
background:#c00;
border:1px solid #ccc;
display:block;
height:24px;
padding:2px;
position:absolute;
text-indent:-9999px;
width:24px;
z-index:111;
}
a.print:hover, a.download:hover {
padding-right:12px;
}