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%;
}
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 some code working to make 2 div tags visible only when another div is clicked (an attempt to make a custom title bar)The 2 divs are invisible initially.
const {remote} = require('electron');
var win = remote.getCurrentWindow();
win.setSize(810,610);
function max(){
var win = remote.getCurrentWindow();
if(win.isMaximized()){
win.unmaximize();
document.getElementById('file').style.right = "744px";
document.getElementById('about_us').style.right = "664px";
}else{
win.maximize();
document.getElementById('file').style.right = "1314px";
document.getElementById('about_us').style.right = "1234px";
}
}
hidden = true;
function get(el){
return document.getElementById(el);
}
function open_file_menu(){
var fileMenu = [get('file_menu'),get('file_menu2')];
if (hidden == false){
for (i = 0;i<fileMenu.length;i++){
fileMenu[i].style.visibility = 'hidden';
hidden = true;
}
}
else{
for (i = 0;i<fileMenu.length;i++){
fileMenu[i].style.visibility = 'visible';
hidden = false;
}
}
}
body,html{
width: 47.5pc;
height: 100pc;
overflow: hidden;
-webkit-app-region:drag;
z-index: 0;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: monospace;
z-index: 1;
}
#container{
width: 100pc;
height: 100pc;
display: block;
position: absolute;
right: 40px;
top: 0;
}
#container nav{
display: grid;
width: 100pc;
height: 2.2pc;
background-color: #333333;
z-index: 1;
}
span{
position: absolute;
top:0;
transform: translateX(100px);
color:#dacbcb;
font-size: 1.5em;
font-weight:bold;
background-color: #222222;
padding-left: 25px;
padding-right: 25px;
padding-top: 7px;
padding-bottom: 6px;
transition: ease-in-out 1ms;
-webkit-app-region:no-drag;
}
#buttons{
position: absolute;
right: 120px;
}
#maximize{
transform: translateX(-124px);
}
#maximize span:hover,#minimize:hover span,.menu1:hover,.menu2:hover{
background-color: #333333;
}
#file{
position: absolute;
right:743px;
}
#about_us{
position: absolute;
right:663px;
#run{
transform: translateY(100px);
}
.menu1{
font-size: 1.1em;
padding-left: 25px;
padding-right: 25px;
padding-top: 10px;
padding-bottom: 8px;
}
.menu2{
font-size: 1.1em;
padding-left: 25px;
padding-right: 25px;
padding-top: 10px;
padding-bottom: 8px;
}
#file_menu{
visibility: hidden;
background-color: #222222;
transform: translateY(34px);
font-size: 1.1em;
}
#file_menu2{
visibility: hidden;
background-color: #222222;
transform: translateY(63px);
font-size: 1.1em;
padding-left: 25px;
padding-right: 17px;
padding-top: 7px;
padding-bottom: 6px;
}
.fm{
z-index: 2;
}
#file_menu:hover,#file_menu2:hover{
background-color: #333333;
}
<!DOCTYPE html>
<html>
<head>
<script src="init.js"></script>
<script src="text_editor.js"></script>
<meta charset="UTF-8">
<title>Extorc App</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div onclick="uff()">
<span id = "file_menu" class = "fm">new</span>
</div>
<div>
<span id = "file_menu2" class = "fm">open</span>
</div>
<div id="container">
<nav>
<div id="buttons">
<div id="file" onclick="open_file_menu()">
<span class = "menu1">file</span>
</div>
<div id="about_us">
<span class = "menu2">about..us</span>
</div>
<div id="maximize" onclick="max()">
<span>+</span>
</div>
</div>
</nav>
</div>
</body>
</html>
The code works ... the menu opens up with 2 divs displaying but the divs are un clickable or probably totally passive (i have set a :hover background color in my css)Though , this problem ends if i open the 2 divs and then maximize the window..then they become interactable and then after minimizing also they work which means the divs are un-interactable initially but then after one maximize , they work...any fix for that....should i not use visibility here?
Edit Not only by fullscreen but also if i resize the window , the buttons start working , and starting the window as fullscreen : true, doesnt make it work
You cannot put all the body as draggable: -webkit-app-region:drag; on body,html
You will have to define a specific area where it defined as draggable.
My recommendation define a specific area / SVG that means drag and don't put clickables on it.
E.g take a look at known electron products (VSCODE, Slack) you have specific regions from which you can drag from.
Hope I have helped.
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/
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>
I created a button using div tag. It is not actually a button but it is look like a button. Here I want to change the content of h3 tag to '>' this symbol when mouse is hover on it. How to do it?
I write code in javascript to change h3 contents but it will not show any effect? I don't know why?
function change-content() {
document.getElementById('button-name').innerHTML = ">";
}
body {
background-color: #6badf6;
}
#button-layout {
background-color: #3b81cf;
width: 100px;
height: 40px;
border-radius: 10px;
margin-left: 50%;
margin-top: 25%;
}
#button-name {
font-family: verdana;
font-size: 14px;
color: white;
padding-left: 22px;
padding-top: 11px;
}
#button-name:hover {
cursor: pointer;
}
<html>
<body>
<div id="button-layout">
<h3 id="button-name" onmouseover="change-content()">Submit</h3>
</div>
</body>
</html>
You can actually do this using pure CSS, no JS required, by adding attributes to the button containing the text you want for both the normal and hover states, and then setting the content of the :after pseudo to show this depending on :hover.
This also maintains clear separation of concerns, keeping content within your HTML and outside of your JS, meaning should you wish to change the value being displayed, you can simply reference the source markup directly.
body {
background-color: #6badf6;
}
#button-layout {
background-color: #3b81cf;
width: 100px;
height: 40px;
border-radius: 10px;
margin-left: 50%;
margin-top: 25%;
}
#button-name {
font-family: verdana;
text-align: center;
font-size: 14px;
color: white;
padding-top: 11px;
}
#button-name:hover {
cursor: pointer;
}
#button-name:after {
content: attr(data-label);
}
#button-name:hover:after {
content: attr(data-label-hover);
}
<div id="button-layout">
<h3 id="button-name" data-label="Submit" data-label-hover=">"></h3>
</div>
Concerning why your code currently isnt working, this has also been answered in this thread, namely, your function name contains the invalid - character.
Issue is in function declaration. define function with (_) like function change_content() it will work
Your function name is invalid. The parser see that as a subtraction.
<html>
<head>
<style>
body {
background-color: #6badf6;
}
#button-layout {
background-color: #3b81cf;
width: 100px;
height: 40px;
border-radius: 10px;
margin-left: 50%;
margin-top: 25%;
}
#button-name {
font-family: verdana;
font-size: 14px;
color: white;
padding-left: 22px;
padding-top: 11px;
}
#button-name:hover {
cursor: pointer;
}
</style>
<script>
function changeContent() {
document.getElementById('button-name').innerHTML = ">";
}
</script>
</head>
<body>
<div id="button-layout">
<h3 id="button-name" onmouseover="changeContent()">Submit</h3>
</div>
</body>
</html>
change your function name see example
changecontent()