How to populate content of DOM elements after the initial append? Most of the code shown below is the DOM creation. The span segments are my four clickable elements. They all call the same function once clicked. The button calls a seperate function, which is used to reload the screen but show the next set of questions from JSON.
i=0;
function myFunction(){
//console.log('hello')
div1=document.createElement("div");
div1.setAttribute("class","container");
// console.log(div1)
// for(var i=0;i<content.length;i++){
div2=document.createElement("div");
div2.setAttribute("class","question-card");
div1.appendChild(div2);
// console.log(div2)
h11=document.createElement("h1");
h11.setAttribute("id","question1");
h11.innerHTML=content[i].question;
div2.appendChild(h11);
// console.log(h11)
div3=document.createElement("div");
div3.setAttribute("class","answer-choices");
div1.appendChild(div3);
// console.log(div3)
div4=document.createElement("div");
div4.setAttribute("class","row1");
div3.appendChild(div4);
// console.log(div4)
span1=document.createElement("span");
span1.setAttribute("class","choice1");
span1.setAttribute("id","one");
document.addEventListener('click',function(e){
if(e.target && e.target.id== 'one'){//do something}
unlocknext();
}});
//span1.setAttribute("onclick","choice1()");
span1.innerHTML=content[i].options[0];
div4.appendChild(span1);
// console.log(span5)
button1=document.createElement("button");
button1.setAttribute("id","btn");
button1.setAttribute("disabled",true);
document.addEventListener('click',function(e){
if(e.target && e.target.id=='btn'){//do something}
nextScreen();
}});
button1.innerHTML="Next";
div1.appendChild(button1);
//}
// console.log(button1)
document.body.appendChild(div1);
}
function unlocknext(){
document.getElementById('btn').removeAttribute("disabled");
document.getElementById('question1').innerHTML="Answer recorded, click next.";
console.log('Unlock next')
console.log(div1)
}
function nextScreen(){
console.log(i);
i++;
myFunction();
console.log("NextscreenUpload")
}
My JS
<!DOCTYPE html>
<html>
<head>
<title>Quiz game</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
</body>
<script src="json/qubank.json"></script>
<script src="js/dynamicindex.js"></script>
</html>
My HTML
body{
background-color: #642ca3;
font-family: Roboto;
}
.container{
text-align: center;
position:absolute;
width: 100%;
left: 50%;
background-color: green;
top: 40%;
transform: translate(-50%, -50%);
}
.question-card{
background-color: yellow;
}
.answer-choices{
background-color:
}
.choice1{
background-color: #f75c4f;
}
.choice1:hover{
background-color: #f52f1e;
}
.choice2{
background-color: #f23def;
}
.choice2:hover{
background-color: #ec10e9;
}
.choice3{
background-color: #02b6ee;
}
.choice3:hover{
background-color: #028fbb;
}
.choice4{
background-color: #f2ba2c;
}
.choice4:hover{
background-color: #dda30e;
}
.row1{
margin: 50px;
padding: 30px;
}
.row2{
margin: 50px;
padding: 30px;
}
span{
padding: 2%;
margin: 10%;
cursor: pointer;
}
button{
padding: 10px;
border-radius: 15px;
}
MY CSS
Related
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>
```
I have added all required js and css files, still getting this error. I am sharing my header script : It's a jquery slider plugin I have downloaded from github and trying to integrate in a laravel web application
<link rel="stylesheet" type="text/css" href="{{asset('css/bootcamp.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('css/lightslider.css')}}">
<style>
.bootcamp-body{
background: white;
color: black;
}
.content{
}
.content-slider{
list-style: none outside none;
padding-left: 0;
margin: 0;
}
.demo .item{
margin-bottom: 60px;
}
.content-slider li{
background-color: #ed3020;
text-align: center;
color: #FFF;
}
.content-slider h3 {
margin: 0;
padding: 70px 0;
}
.demo{
width: 800px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src='{{asset('js/lightslider.js')}}'></script>
<script>
$(document).ready(function() {
$("#content-slider").lightSlider({
loop:true,
keyPress:true
});
$('#image-gallery').lightSlider({
gallery:true,
item:1,
thumbItem:9,
slideMargin: 0,
speed:500,
auto:true,
loop:true,
onSliderLoad: function() {
$('#image-gallery').removeClass('cS-hidden');
}
});
});
</script>
I am getting the following error :
The library looks (after clicking on the link) :
This is my first leap on trying to implement a HTML/CSS website, so please take this into consideration.
I have multiple .html pages that implement the navbar from a nav.html, using a jQuery function( i guess?). The other html's are similar to index.
Any idea of what's wrong?
<script>
$(function(){
$("#nav-placeholder").load("nav.html");
});
</script>
The code i used for adding active class is pure JS.
Here is index.html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/9a39db93cf.js" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
let count = 0;
function counter()
{
count++;
document.querySelector('#pageContent').innerHTML = count;
}
</script>
<script>
$(function(){
$("#nav-placeholder").load("nav.html");
});
</script>
<script type="text/javascript">
const currentLocation = location.href;
const menuItem = document.querySelectorAll('a');
const menuLength = menuItem.length
for( let i=0; i<menuLength; i++){
if(menuItem[i].href === currentLocation){
menuItem[i].className = "active";
}
}
</script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
<link href="styles.css" rel="stylesheet">
<title>My Webpage</title>
</head>
<body>
<div id="nav-placeholder" class="sticky-top">
</div>
<div class="firstPage">
<h4>The title of this paragraph</h4>
<img onclick="counter(); return false;" src="images/mirciun.jpg" alt="mirciun" height=auto max-width=auto class="center">
<p id='pageContent'>0</p>
</div>
</body>
</html>
CSS:
body{
display: block;
margin: 0;
}
.menu li{
display: inline-block;
margin: 0;
}
ul.topnav{
background-color: #333;
margin: 0;
padding: 0;
text-align:center;
overflow: hidden;
}
ul.topnav li a{
display: block;
font-size: 20px;
padding: 10px;
color: whitesmoke;
text-decoration: none;
}
ul.topnav li a:hover:not(.active) {background-color: #222;}
ul.topnav li a.active {background-color: #4CAF50;}
#media screen and (max-width: "600px") {
ul.topnav li {float: none;}
}
#brand{
display: table-cell;
vertical-align: middle;
line-height:50px;
}
#topText{
max-width: 500px;
margin: auto;
text-align: center;
border: 5px solid green;
color: red;
background-color: #0f0f0f;
margin-top: 10px;
}
.firstPage
{
margin-top: -20px;
background-color:grey;
max-width: 100%;
height: auto;
}
h4{
padding: 20px;
text-align: center;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
#pageContent{
text-align:center;
width: 75%;
margin: auto;
color: blue;
}
wrap your code with jquery on ready function and move to the bottom of the page.
$(function () {
const currentLocation = location.href;
const menuItem = document.querySelectorAll('a');
const menuLength = menuItem.length
for (let i = 0; i < menuLength; i++) {
if (menuItem[i].href === currentLocation) {
menuItem[i].className = "active";
}
}
})
Nevermind, i solved it using $( window ).on( "load", function(){, instead of $( document ).ready(function () { . The short explanation is that code will run once the entire page (images or iframes), not just the DOM, is ready. - > https://learn.jquery.com/using-jquery-core/document-ready/
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%;
}
I've been searching a lot on the site and the web but can't really seem to find any help. My problem is that I need to make a function that creates a new div box on the press of a button and that div box needs to be draggable and editable.
function makeNote(e) {
// Check the event object if the .click is on the canvas
// or a created note
if (e.eventPhase === 2) {
// Create the new comment at the corsor postition
var $newbox = $('<div class="ui-widget-content" id="newbox" style="top:' + e.pageY + 'px; left: ' + e.pageX + 'px;"><span id="close">Delete comment</span><p>Your comment:</p><textarea></textarea></div>');
$('#canvas').append($newbox);
$newbox.draggable();
}
}
function deleteNote() {
$(this).parent('#newbox').remove();
}
// wait until the dom document is loaded
jQuery(document).ready(function () {
// listen for a .click() event on the canvas element
$('#canvas').click(function (e) {
makeNote(e);
});
// Remove the note
$("#close").click(function () {
deleteNote();
});
});
html, body {
background-color: #cccccc;
margin: 0;
padding: 0;
height: 100%;
position: relative;
}
#newbox {
position: absolute;
background-color: white;
height: 200px;
width: 200px;
box-shadow: 10px 10px 10px #888;
padding: 20px;
z-index: 1000;
}
textarea {
background: transparent;
width: 200px;
height: 180px;
border: 0;
}
#canvas {
height:auto !important;
min-height: 100%;
height:100%;
z-index: -1000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" scr="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="JavaScript.js"></script>
<link rel="stylesheet" ahref="StyleSheet1.css" />
</head>
<body>
<div id="canvas">
</div>
</body>
</html>
draggable is a part of jquery-ui library. Not jquery.
Add <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> to your code.
function makeNote(e) {
// Check the event object if the .click is on the canvas
// or a created note
if (e.eventPhase === 2) {
// Create the new comment at the corsor postition
var $newbox = $('<div class="ui-widget-content" id="newbox" style="top:' + e.pageY + 'px; left: ' + e.pageX + 'px;"><span id="close">Delete comment</span><p>Your comment:</p><textarea></textarea></div>');
$('#canvas').append($newbox);
$newbox.draggable();
}
}
function deleteNote() {
$(this).parent('#newbox').remove();
}
// wait until the dom document is loaded
jQuery(document).ready(function () {
// listen for a .click() event on the canvas element
$('#canvas').click(function (e) {
makeNote(e);
});
// Remove the note
$("#close").click(function () {
deleteNote();
});
});
html, body {
background-color: #cccccc;
margin: 0;
padding: 0;
height: 100%;
position: relative;
}
#newbox {
position: absolute;
background-color: white;
height: 200px;
width: 200px;
box-shadow: 10px 10px 10px #888;
padding: 20px;
z-index: 1000;
}
textarea {
background: transparent;
width: 200px;
height: 180px;
border: 0;
}
#canvas {
height:auto !important;
min-height: 100%;
height:100%;
z-index: -1000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="JavaScript.js"></script>
<link rel="stylesheet" ahref="StyleSheet1.css" />
</head>
<body>
<div id="canvas">
</div>
</body>
</html>
Since you use jQuery, you can use .draggable() from jQuery UI along with contenteditable="true":
function addNew() {
var field = $('<div contenteditable="true">Text</div>')
field.appendTo('#fields').draggable();
}
#fields div {
border: 1px dashed #ddd;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<button onClick="addNew()">Add new field</button>
<hr/>
<div id="fields"></div>
There is something I want to notice.
never use same id to elements.
use jquery .on function for element that make by scripts.
never use box-shadow :D
function makeNote(e) {
// Check the event object if the .click is on the canvas
// or a created note
if (e.eventPhase === 2) {
// Create the new comment at the corsor postition
var $newbox = $('<div class="ui-widget-content" id="newbox'+e.pageX+e.pageY+'"><span class="close">Delete comment</span><p>Your comment:</p><textarea></textarea></div>');
$('#canvas').append($newbox);
$($newbox).css({
'top' : ($('#canvas').height() / 2 - 150 + sequentCounter++) + 'px' ,
'left' : ($('#canvas').width() / 2 - 100 + rowSeqCounter + sequentCounter++) + 'px'
});
$newbox.draggable({cancel : '.close'});
}
}
var sequentCounter = 1;
var rowSeqCounter = 1;
// wait until the dom document is loaded
jQuery(document).ready(function () {
// listen for a .click() event on the canvas element
$('#div_element_maker').click(function (e) {
if (sequentCounter > 70){
sequentCounter = 1;
rowSeqCounter += 11;
if (rowSeqCounter > 50)
rowSeqCounter = 1;
}
makeNote(e);
});
// Remove the note
$('#canvas').on('click',".close", function () {
$(this).parent().remove()
});
});
html, body {
background-color: #cccccc;
margin: 0;
padding: 0;
height: 100%;
position: relative;
}
.ui-widget-content {
position: absolute;
background-color: white;
height: 180px;
width: 185px;
border: 1px solid darkgray;
/*box-shadow: 10px 10px 10px #888;*/
padding: 20px;
z-index: 1000;
}
textarea {
background: transparent;
width: 180px;
height: 100px;
border: 1px solid darkgray;
}
#canvas {
height:auto !important;
min-height: 100%;
height:100%;
z-index: -1000;
}
.close{
cursor: pointer;
background: red;
}
#div_element_maker{
cursor: pointer;
background: green;
padding: 10px;
margin: 10px;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" scr="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="JavaScript.js"></script>
<link rel="stylesheet" ahref="StyleSheet1.css" />
</head>
<body>
<div id="canvas">
<span id="div_element_maker">make element</span>
</div>
</body>
</html>