I am trying to change the text every time the text hits the bottom of the scroll!
I haven't been able to figure out how to do it.
Also, Can someone help me remove the "undefined" from the end of the text?
(i want everything to be automatic, no buttons nor interactivity required please!)
my code is below!
<!DOCTYPE html>
<script>
function randomText() {
//array splashes
var say = [];
say[0] = "Welcome.";
say[1] = "Coming Soon";
say[2] = "eek";
//pick a random greeting
var howmany = 2;
var bRand = 0;
bRand = Math.random();
bRand = Math.floor(bRand * howmany);
//prepare and docwrite the greeting
sayWhat = say[bRand];
document.write(sayWhat)
document.close()
//direct type in html p element
//document.getElementById("splash").innerHTML ='javascript:alert("' + '");'
// I tried to make this work but it says no.
}
// Change Interval here to test. For eg: 5000 for 5 sec </script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</script>
<html lang="en" dir="ltr">
<head>
<link rel="preload" href="https://fonts.googleapis.com/css?family=Montserrat:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" as="style" onload="this.rel = 'stylesheet'">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Webpage is Under Maintenance</title>
</head>
<body class="red">
<style media="screen">
body{
font-family: 'Montserrat', sans-serif;
text-align: center;
color: white;
margin: 0;
}
h1{
color: white;
}
marquee{
height: 5rem;
text-align: center;
}
.red{
background: #c60929;
}
.green{
background: #106b03;
}
.play{
background: #ffdd33;
color: #333333;
}
.container{
background: rgba(0,0,0,0.3);
}
a{
color: white;
}
footer{
margin-top: 0.5rem;
background: rgba(0,0,0,0.7);
padding: 0.5rem;
}
</style>
<div class="container">
<h1>Site is Under Maintenance</h1>
<p>
This Webpage is Currently Under Maintenance. In other words, We are recoding or changing the code on this website!
<br>
<br>
If we have downloaded javascript or other files to this site. An Update will be Required after!
<br>
In the meantime, Check other Webpages! This Webpage may be down currently, but there should still be webpages at AstraOnline that are still functioning!
</p>
<noscript>
I see you have Javascript Disabled. You should try Enabling it, This Site Runs on Javascript!
</noscript>
<p>Current state: <span id="status" class="red">Under Maintenance</span></p>
<marquee direction="down"> <script> document.write(randomText()) </script> </marquee>
</div>
<script>
</script>
<style>
.simon{
margin: auto;
display: flex;
width: 15rem;
height: 15rem;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.simon > button{
flex: 50%;
border: 0.25rem solid black;
appearance: none;
}
.simon > button:active{
opacity: 0.8;
}
#r{
background: #e21b3c;
}
#b{
background: #1368ce;
}
#y{
background: #ffa602;
}
#g{
background: #26890c;
}
#alt{
background: #ffdd33;
border-radius: 0.5rem;
padding: 1rem;
box-shadow: 0.25rem 0.25rem rgba(0,0,0,0.5);
color: black;
font-weight: 800;
}
#alt a{
color: black;
}
</style>
```
Related
I am trying to develop a quiz app using JS, CSS, and HTML. Most likely, there are some errors in my JS code. I am not able to click on the buttons, go to the next question, or reveal the wrong or right answers colored in green and red. I'm suspecting there is a simple error in one of the functions.
Btw I'm using VS code 1.66.2.
//game.js
const question = document.getElementById('question');
const choices = Array.from(document.getElementsByClassName('choice-text')); //array of 4 choices
const progressText = document.getElementById("ProgressText");
const progressBarfull = document.getElementById("progressBarfull");
const questionCounterText = document.getElementById("questionCounter");
const scoreText = document.getElementById("score");
let currentQuestion = {};
let acceptingAnswers = false;
let score = 0;
let questionCounter = 0;
let availableQuestions = [];
let questions = [
{
question: "Inside which HTML element do we put the JavaScript?",
choice1: "<script>",
choice2: "<javascript>",
choice3: "<js>",
choice4: "<Scripting>",
answer: 1
},
{
question: "What is the correct syntax for referring to an external script called 'xxx.js'?",
choice1: "<script href='xxx.js'>",
choice2: "<script name='xxx.js'>",
choice3: "<script src='xxx.js'>",
choice4: "<script file='xxx.js'>",
answer: 3
},
{
question: "How do you write 'Hello World' in an alert box?" ,
choice1: "msgBox('Hello World');",
choice2: "alertBox('Hello World');",
choice3: "msg('Hello World');",
choice4: "alert('Hello World');",
answer: 4
},
];
//constants
const CORRECT_BOUNS=10;
const MAX_QUESTIONS=3;
startGame=function () {
questionCounter = 0;
score = 0;
availableQuestions = [...questions]; //spread operator in js (...) to quickly copy all or part of an array
getNewQuestion();
};
getNewQuestion = function () {
if (availableQuestions.length == 0 || questionCounter >= MAX_QUESTIONS) {
localStorage.setItem('mostRecentScore',score);
//localStorage.setItem("mostRecentScore", score);
return window.location.assign("/end.html"); //go to the end page
}
questionCounter++;
progressText.innerText = `Question${questionCounter}/${MAX_QUESTIONS}`;
progressBarfull.style.width = `Question ${(questionCounter / MAX_QUESTIONS) * 100} ;
px`;
const questionIndex = Math.floor(Math.random() * availableQuestions.length); //take the integer of the random number
currentQuestion = availableQuestions[questionIndex];
question.innerHTML = currentQuestion.question;
choices.forEach(function (choice) {
const number = choice.dataset["number"];
choice.innerHTML = currentQuestion["choice" + number];
});
availableQuestions.splice(questionIndex, 1); //take the available questions array and get rid of the used ques
acceptingAnswers = true;
};
choices.forEach(function (choice) {
choice.addEventListener("click", function (e) {
if (!acceptingAnswers)
return;
acceptingAnswers = false;
const selectedChoice = e.target;
const selectedAnswer = selectedChoice.dataset["number"];
const classToApply = selectedAnswer == currentQuestion.answer ? "correct" : "incorrect";
if (classToApply === "correct") { //call incrementScore fun
incrementScore(CORRECT_BOUNS);
} //increment score by correct bonus
selectedChoice.parentElement.classList.add(classToApply);
setTimeout(function () {
selectedChoice.parentElement.classList.remove(classToApply);
getNewQuestion();
}, 1000);
});
});
incrementScore = function (num) {
score += num;
scoreText.innerText = score;
};
//game.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>Quick Quiz - Play</title>
<link rel="stylesheet" href="app.css" />
<link rel="stylesheet" href="game.css" />
</head>
<body>
<div class="container">
<div id="game" class="justify-center flex-column">
<div id="hud">
<div id="hud-item">
<p id="progressText" class="hud-prefix">
Question
</p>
<div id="progressBar">
<div id="progressBarfull">
</div>
</div>
</div>
<div id="hud-item">
<p class="hud-prefix" >
Score
</p>
<h1 class="hud-main-text" id="score">
0
</h1>
</div>
</div>
<h2 id="question">What is the answer to this questions?</h2>
<div class="choice-container">
<p class="choice-prefix">A</p>
<p class="choice-text" data-number="1">Choice 1</p>
</div>
<div class="choice-container">
<p class="choice-prefix">B</p>
<p class="choice-text" data-number="2">Choice 2</p>
</div>
<div class="choice-container">
<p class="choice-prefix">C</p>
<p class="choice-text" data-number="3">Choice 3</p>
</div>
<div class="choice-container">
<p class="choice-prefix">D</p>
<p class="choice-text" data-number="4">Choice 4</p>
</div>
</div>
</div>
<script src="game.js"></script>
</body>
</html>
//game.css
.choice-container{
display: flex;
margin-bottom: 0.5rem;
width: 100%;
font-size: 1.8rem;
border: 0.1rem solid rgba(241, 69, 175, 0.25);
background-color: white;}
.choice-container:hover{
cursor: pointer;
box-shadow: 0 0.4rem 1.4rem 0 rgba(241, 69, 175, 0.25);;
transform: translateY(-0.1rem);
transition: transform 150ms;}
.choice-prefix{
padding: 1.5rem 2.5rem;
background-color:#f76b8a;
color: white;}
.choice-text{
padding: 1.5rem;
width: 100% ;}
.correct{
background-color: #28a745;
}
.incorrect{
background-color: #dc3545;
}
/* hud */
#hud {
display: flex;
justify-content: space-between;
margin-bottom: 100px;
}
.hud-prefix{
text-align:center;
font-size: 2rem;}
#questionCounter{
display: flex;
left: 3%;
top:45%;}
#score{
display: flex;
top:45%;
left: 91%;
}
#hud-item{
margin-bottom: 6%;
}
#progressBar{
width:20rem;
height: 4rem;
border: 0.3rem solid #f76b8a ;
margin-top: 1.5rem;
}
#progressBarfull{
height: 3.6rem;
width: 0%;
background-color:#f76b8a ;
}
//index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset+"UTS-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie-edge" />
<title> Quick Quiz </title>
<link rel="stylesheet" href="app.css" />
</head>
<body>
<div class"container">
<div id="home" class="flex-center flex-column">
<h1>Quick Quiz</h1>
<a class="btn" href="/game.html">play</a>
<a class="btn" href="/highscors.html">High Scores</a>
</div>
</div>
</body>
</html>
//app.css
:root{
background-color: #FFF0F5;
font-size: 62.5%;
}
* {
box-sizing:border-box;
font-family: Arial,Helvetica,sans-serif;
margin:0;
color: #333;
}
h1,
h2,
h3,
h4{
margin-bottom: 1rem;
}
h1{
font-size: 5.4rem;
color: #f76b8a;
margin-bottom: 5rem;
left: 0;
line-height: 5px;
margin-top: -150px;
position: absolute;
text-align: center;
top: 50%;
width: 100%;
}
h1>span {
font-size: 2.4rem;
font-weight: 500;
}
h2{
font-size: 4.2rem;
margin-bottom: 4rem;
font-weight: 700;
}
h3{
font-size: 2.8rem;
font-weight: 500;
}
/* UTILITIES */
.container {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
max-width: 80rem;
margin: 0 auto;
position:fixed;
display: grid;
padding: 2rem;
}
.container>*{
width:100%;
}
.flex-column {
display: flex;
flex-direction: column;
}
.flex-center {
justify-content: center;
align-items: center;
display: flex;
height: 650px;
}
.justify-center {
justify-content: center;
}
.text-center {
text-align: center;
}
.hidden {
display: none;
}
.btn {
font-size: 1.8rem;
padding: 1rem 0;
width: 20rem;
text-align: center;
border: 0.1rem solid #f76b8a;
margin-bottom: 1rem;
text-decoration: none;
color: #f76b8a;
background-color: white;
}
.btn:hover {
cursor: pointer;
box-shadow: 0 0.4rem 1.4rem 0 rgba(219, 135, 188, 0.5);
transform: translateY(-0.1rem);
transition: transform 150ms;
}
.btn[disabled]:hover {
cursor: not-allowed;
box-shadow: none;
transform: none;
}
/* FORMS */
form{
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
input{
margin-bottom: 1rem;
width: 20rem;
padding: 1.5rem;
font-size: 1.8rem;
border:none;
box-shadow: 0 0.1rem 1.4rem 0 rgba(220, 156, 197, 0.5);
}
input::placeholder{
color: #aaa;
}
I don't really understand all of your code, but I can see a couple of issues.
In the game.js file you start by defining some DOM constants, but a couple of them happen to be undefined.
questionCounterText isn't defined because there isn't any element whose id is questionCounter or anything similar. You also have this (non-existant) element referred to in your CSS. I assume you had this HTML element but removed it at some point.
Anyway, that doesn't make your code bug. Progress text is the issue. You select it like that:
const progressText = document.getElementById("ProgressText");
The id is capitalized. But in your HTML file, it appears like that:
<p id="progressText" class="hud-prefix">...</p>
With the first letter in lowercase. So your progressText constant is undefined, and that triggers an error when calling startGame (which by the way, I've called from the console, since there's no Start Game button).
I changed that and saw that sometimes the answer choices weren't filled with the expected text. That's because when the choices are like <script href='xxx.js'>, that's actually an HTML tag, and so when you use:
choice.innerHTML = currentQuestion["choice" + number];
you're adding an script tag inside each choice. Script tags aren't dispayed by default (display: none). Poor browser will try to download the xxx.js file, with no success. You should use the innerText method to display HTML tags as text strings:
choice.innerText = currentQuestion["choice" + number];
Also, your progress bar isn't working. You set its width as a weird string:
progressBarfull.style.width = `Question ${(questionCounter / MAX_QUESTIONS) * 100} px`;
Remove Question from this last assignment.
You say your buttons don't work, but I can see any button.
I don't know if there's any other issue.
I have a problem with my div when I write in the text area and hit save nothing is show up. I have a problem with my div when I write in the text area and hit save nothing is show up
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="Go from idea to action in seconds with wesam to do list">
<title>wesam list to do</title>
<script>
function input() {
var name = document.getElementById("text").Value
document.getElementById("output").innerHTML = name;
}
</script>
<style>
#b {
background-color: red;
}
#output {
width: 100%;
height: 200px;
background-color: black;
color: black;
}
</style>
</head>
<body>
<form>
<h1> Add your tasks </h1>
<textarea id="text"></textarea>
<button onClick="input()" id=" b " type="button "> save</button>
<div id="output"></div>
</body>
Try this. There were a few issues with this code. I added comments to the changes.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="Go from idea to action in seconds with wesam to do list">
<title>wesam list to do</title>
<script>
function input(event) {
//added preventDefault() to keep the page from reloading
event.preventDefault();
//changed Value to value - watch your case
var name = document.getElementById("text").value;
document.getElementById("output").innerHTML = name;
}
</script>
<style>
#b {
background-color: red;
}
#output {
width: 100%;
height: 200px;
background-color: black;
/*changed the text color from black to white so you can see when the output is added*/
color: white;
}
</style>
</head>
<body>
<form>
<h1> Add your tasks </h1>
<textarea id="text"></textarea>
<button onClick="input(event)" id="b" type="button"> save</button>
<div id="output"></div>
</form>
</body>
</html>
Cheers!
Your output element has both a black background, and black text, so you won't see anything change.
You were missing a </form> tag.
It looks like you're trying to create a list of tasks, and each time you add a new task, and click "save" it adds a new task under the proceeding ones.
Here's an updated example that uses more modern JS methods that you might find useful. Links to the relevant documentation are at the bottom of the post.
// First we cache all our elements
const task = document.querySelector('textarea');
const list = document.querySelector('ul');
const button = document.querySelector('button');
// Instead of inline JS we add an event listener to
// the cached button element.
button.addEventListener('click', handleClick, false);
// `focus` the cursor in the textarea
task.focus();
function handleClick() {
// We create a new list item
const item = `<li>${task.value}</li>`;
// We add that to the list
list.insertAdjacentHTML('beforeend', item);
// Reset the textarea value
task.value = '';
// And refocus on it so we don't have to
// manually click in it to write a new task
task.focus();
}
button { background-color: red; color: white; }
<form>
<h3>Add your tasks</h3>
<textarea></textarea>
<button type="button">Save task</button>
</form>
<ul></ul>
Addition documentation
querySelector
Template/string literals
insertAdjacentHTML
addEventListener
There are couple problem:
You didn't close the form tag in HTML
you write the first letter of value as capital in input function
And you may did not look but your button background color is not coming that is because there is spaces inside the id in HTML just remove those and you're good to go.
And make a paragraph inside the output div and give him the id of output and than stor that into a variable and do o.innerText o is you output paragraph = i.value i is your input
I have added some features to to your application if you want to copy it i do not mined -
// ES6 Syntax
const render = () =>{
// Getting the value from HTML DOM to inputEl variable
const inputEl = document.getElementById('text');
// Getting the output paragraph from HTML DOM and storig it into output
const outputEl = document.getElementById('output-text');
// Rendering the inputEL value into outputEl
outputEl.textContent = inputEl.value;
}
// ES5-- Syntax
function renderES(){
// Getting the value from HTML DOM to inputEl variable
const inputEl = document.getElementById('text');
// Getting the output paragraph from HTML DOM and storig it into output
const outputEl = document.getElementById('output-text');
// Rendering the inputEL value into outputEl
outputEl.textContent = inputEl.value;
}
#import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap');
:root{
--primary-color: rgb(26, 26, 26);
--secondary-color: white;
--font-family: Nunito, sans-serif;
--box-shadow: rgb(0 0 0) 1px 1px 3px 0px inset, rgb(48 48 48 / 50%) -1px -1px 3px 1px inset;;
--all-transition:transform ease-in-out 0.3s 0s;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: var(--font-family);
}
.main-content{
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.container{
border-radius: 10px;
box-shadow: var(--box-shadow);
width: 85%;
height: 270px;
display: flex;
justify-content: space-between;
align-items: center;
background-color: var(--primary-color);
flex-direction: column;
}
.container>h1{
margin-top: 15px;
color: var(--secondary-color);
text-transform: uppercase;
}
form{
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
padding: 5px;
width: 100%;
height: 75%;
}
form>textarea{
width: 95%;
height: 30%;
background-color: var(--primary-color);
border: none;
border-radius: 10px;
box-shadow: var(--box-shadow);
padding: 15px;
color: var(--secondary-color);
}
#output{
width: 95%;
height: 40%;
background-color: var(--primary-color);
box-shadow: var(--box-shadow);
color: var(--secondary-color);
padding: 10px;
}
form>button{
background-color: var(--primary-color);
box-shadow: var(--box-shadow);
width: 95%;
height: 30px;
border-radius: 10px;
border: none;
font-weight: bold;
margin-bottom: 10px;
color:var(--secondary-color);
transition: var(--all-transition);
cursor: pointer;
}
/* NTH CHILD */
form>textarea::placeholder{
color: var(--secondary-color);
}
/* Animations */
form>button:hover{
transform: scale(1.02)
}
form>button:active{
border: 1px solid var(--secondary-color);
}
<!doctype HTML>
<html>
<head>
<title>codedamn HTML Playground</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/style.css" />
</head>
<body>
<div class="main-content">
<div class="container">
<h1> Add your tasks </h1>
<form>
<textarea id="text" placeholder="Enter you task here.."></textarea>
<div id="output">
<p id="output-text"></p>
</div>
<button
type="button"
id="addtask-btn"
onclick="render()">
Save
</button>
<form>
</div>
</div>
<script src="/script.js"></script>
</body>
</html>
It seems that you haven't ended the
<form>
tag
I've added a search bar in the header that is set to display: none by default and I used js to make it appear on a button click via assigning a .show class which contains display: block !important to the search bar element (#search). It's working fine but my only problem is the rough transition from display: none to block, so I've been looking into ways to make this transition smooth and most of the answers I found were using jQuery, which I don't really want to do since I'm still in the learning phase of js, so if there's a way I can do this using vanilla js, please help me with it.
Here's my code https://jsfiddle.net/5jxLq9ck/
In CSS line 38, I add the .show utility class
.show {
display: block !important;
}
And I'm assuming I'll have to edit something in here (js) to get the desired effect:
function showSearch(e) {
e.preventDefault;
if (
e.target.classList.contains("show-btn") ||
e.target.classList.contains("fas")
) {
const searchBar = document.querySelector("#search");
searchBar.classList.add("show");
}
}
Additional question: is my use of e.preventDefault correct here? The functionality didn't work until I used it.
Thanks a lot in advance.
Here is an updated snippet, I've changed the input width for the animation. You can make it even more smooth by set the input height.
const searchDiv = document.querySelector("#search-div");
// ADD EVENT LISTENERS
searchDiv.addEventListener("click", showSearch);
// FUNCTION: SHOW SEARCH BAR ON BUTTON CLICK
function showSearch(e) {
e.preventDefault;
if (
e.target.classList.contains("show-btn") ||
e.target.classList.contains("fas")
) {
const searchBar = document.querySelector("#search");
searchBar.classList.add("show");
}
}
/* GENERAL */
:root {
--light-color: #ccc;
--lighter-color: #f4f4f4;
--dark-color: #333;
--darker-color: #222;
--brand-color: #ff4;
--danger: #f44;
--danger-dark: #c00;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: var(--dark-color);
color: var(--light-color);
font-family: "Trebuchet MS";
}
ul li {
list-style: none;
}
button,
input {
outline: none;
}
/* UTILITY */
.highlight {
color: var(--brand-color);
}
.show {
width: 300px !important;
border: black 2px solid;
padding: 0.6rem 1rem;
}
/* HEADER */
header {
background: var(--darker-color);
display: flex;
flex-direction: row;
align-items: center;
text-align: center;
justify-content: space-between;
padding: 1.4rem 6rem;
width: 100%;
}
#logo {
font-size: 2.4rem;
font-weight: 200;
}
#search-div {
width: auto;
height: auto;
display: flex;
gap: 0.4rem;
}
.show-btn {
padding: 0.6rem 0.7rem;
background: var(--light-color);
border-radius: 5px;
border: none;
transition: ease-in 300ms;
font-size: 1.2rem;
cursor: pointer;
height: 100%;
margin-top: 2px;
}
.show-btn:hover {
background: var(--brand-color);
transition: ease-in 300ms;
}
#search {
width: 0;
background: var(--lighter-color);
color: var(--darker-color);
height: 100%;
font-size: 1.2rem;
border-radius: 2px;
transition: ease-in 300ms;
border: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Contact List</title>
<link rel="stylesheet" href="css/style.css">
<script src="https://kit.fontawesome.com/3ad7573e76.js" crossorigin="anonymous"></script>
</head>
<body>
<header>
<div id="logo-div">
<h1 id="logo">
<span class="highlight"><i class="fas fa-user-friends"></i></span> My<span
class="highlight">Contact</span>List
</h1>
</div>
<div id="search-div">
<button class="show-btn"><i class="fas fa-search"></i></button>
<input id="search" type="text" placeholder="Search contacts...">
</div>
</header>
<script src="js/main.js"></script>
</body>
</html>
You can make the transition from no display to block display smooth by playing with the opacity property so that when the element is given the "show" class it animates from an opacity of 0 to an opacity of 1 like so.
function showSearch(e) {
e.preventDefault;
if (
e.target.classList.contains("show-btn") ||
e.target.classList.contains("fas")
) {
const searchBar = document.querySelector("#search");
searchBar.classList.add("show");
}
}
document.getElementById("show").addEventListener("click", e => {
showSearch(e);
});
#keyframes smooth {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.show {
animation: smooth 1s ease;
display: block !important;
}
.none {
display: none;
}
<div class="none" id="search">Example</div>
<button class="show-btn fas" id="show">Show</button>
First of all I've been browsing for a while trying to avoid opening yet another "div not expanding" question, but I haven't found a solution yet.
I'm building a web reporting tool with SCOM data I get via powershell scripting. We don't have access to SCOM reporting tools, that's why I have to build a website by hand.
<!DOCTYPE html>
<html lang="en">
<head>
<title>SCOM Reporting</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href=".\style\style.css">
</head>
<body>
<div class="header">
<h1 id="header">SCOM WEB REPORTING TOOL</h1>
</div>
<div class="navbar">
Home
PROD
ABN
EDEN
</div>
<div class="div_report" id="divReport">
</div>
<script src=".\js\scripts.js"></script>
</body>
</html>
My css
/* Style the body */
body, html {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
overflow: hidden;
height:100%;
width: 100%;
min-height:100%;
}
/* Header/logo Title */
.header {
padding: 20px;
text-align: center;
background: DarkSeaGreen;
color: white;
}
/* Increase the font size of the heading */
.header h1 {
font-size: 60px;
}
.navbar {
overflow: hidden;
text-align: center;
background-color: DimGrey;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.navbar a:hover {
background-color: #555;
}
/* Main column */
.main {
padding: 20px;
}
.div_report {
width: auto;
height: 500px;
border:1px solid #c0c0c0;
overflow: hidden;
}
And my js
function changeGuay(id){
changeHeader(id);
changeContent(id);
}
function changeHeader(id) {
if (id === "HOME") {
document.getElementById("header").innerText = "SCOM WEB REPORTING TOOL";
} else {
document.getElementById("header").innerText = id + " REPORTING";
}
}
function changeContent(id){
if (id === "HOME"){
document.getElementById("divReport").innerHTML = '<object type="text/html" data="about:blank"></object>';
} else {
document.getElementById("divReport").innerHTML = '<object type="text/html" data="'+id+'.html"></object>';
}
}
The div content changes to whatever I want as I desire but the content it shows doesn't expand at all, it remains as a small square. I'd like it to fill the rest of the empty space of the page, with the vertical scroll since the data I'm pulling from SCOM is long.
Live example here : https://codepen.io/bala421/pen/wvMqKwy
The problem is not the div, it is that you are using an <object> </object>. Select the object and apply the styles to it. I used this
object{
width: 100%;
height: 100%;
}
for basic grid layout i suggest bootstrap.
but anyway,
.div_report {
width: 100%;
}
(setting disabled = 'true' didn't seem to work for me so this is another way around it)
How do you disable an HTML range slider, for example when a button is pressed:
<input type="range" class="tempo-slider" max="300" min="1" value="150" />
I couldn't find the answer anywhere but this is my fix to the issue:
My fix for it was constantly resetting the range slider's value when you a user tried to change it using:
event.target.value = bpm;
Where event is the clicking of the event slider.
My full code is here, I hope it can help someone:
//This is code taken from a larger oop project and so some of the logic may look janky, but I just made it work for this example
//These two variable need to be predefined
let bpm = 150;
let playing = false;
//Select your slider and button from your html:
const tempoSlider = document.querySelector(".tempo-slider");
const playButton = document.querySelector(".play");
//Update the html function, essentially purely for styling
updateHTML = function () {
if (!playing) {
tempoSlider.classList.toggle("inactive");
playButton.innerText = "Stop";
playButton.classList.toggle("active");
playing = true;
} else {
tempoSlider.classList.toggle("inactive");
playButton.innerText = "Play";
playButton.classList.toggle("active");
playing = false;
}
};
//this fucntion updates the temp text and the slider
function changeTempo(event) {
//get the temp number from the document
const tempoText = document.querySelector(".tempo-number");
if (!tempoSlider.classList.contains("inactive")) {
//if the slider isnt inactive then update the bpm as usual
bpm = event.target.value;
tempoText.innerText = bpm;
} else {
//else just make the slider reset to the preset bmp, this way it will not change
event.target.value = bpm;
}
}
//add event listeners to the button and the range slider
tempoSlider.addEventListener("input", function (event) {
changeTempo(event);
});
playButton.addEventListener("click", function () {
updateHTML();
});
/*All of this styling just makes it clear when the temp slider is inactive*/
:root {
--background-color: #ffffff;
--text-color: #322e2f;
}
body {
display: flex;
flex-direction: column;
align-items: center;
}
.play {
width: 10rem;
transition: all 0.5s ease;
padding: 1rem 2rem;
font-size: 1.5rem;
background: var(--text-color);
color: var(--background-color);
border: none;
cursor: pointer;
margin-top: 3rem;
outline: none;
border: solid 0.01rem var(--text-color);
}
.play.active {
color: var(--text-color);
background: var(--background-color);
border: solid 0.01rem var(--text-color);
}
.tempo {
margin: 1rem;
width: 20%;
}
.tempo-slider {
transition: all 0.5s ease;
padding: 0.3rem;
-webkit-appearance: none;
appearance: none;
margin: 1rem 0rem;
outline: none;
width: 100%;
position: relative;
background: var(--text-color);
cursor: pointer;
border-radius: 2rem;
border: solid 0.05rem var(--text-color);
}
.tempo-slider::-webkit-slider-thumb {
transition: all 0.5s ease;
-webkit-appearance: none;
appearance: none;
width: 1rem;
height: 1rem;
border-radius: 2rem;
background: var(--background-color);
cursor: pointer;
}
.tempo-slider.inactive {
background: var(--background-color);
}
.tempo-slider.inactive::-webkit-slider-thumb {
background: var(--text-color);
}
.tempo p {
font-size: 1.5rem;
text-align: center;
}
<!--This is part of a larger project I have scaled back to display the slider-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!--Basic button to say start an audio file-->
<button class="play">Play</button>
<!-- slider to devide the audio's bpm-->
<div class="tempo">
<input type="range" class="tempo-slider" max="300" min="1" value="150" />
<p>Tempo: <span class="tempo-number">150</span></p>
</div>
<script src="app.js"></script>
</body>
</html>
The full project should be done in the next week and available on my github here: https://github.com/MichealNestor01