Develop Reference

HTML Displays empty DIV element before function is executed [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
Before function is called
After function is called
Hey guys!
I have this weird behavior of a div element that holds text generated by a function.
Basically if you take a look at 1, empty div element is displayed that should be hidden until button is pressed.
If you take a look at 2, you can see how does it look when button is pressed.
I am not sure how to remove the white block div from showing up until user clicks on a button?
Any help will be appreciated!
Thank you!

document.getElementById("div-class").style.display = "none";
you can manipulate dom elements via your javascript code. try to set display none.

Add a class of hidden to that div, and in css:
.hidden{
display:none;
}
then on button click, remove that class.
document.getElementById('yourButton').addEventListener(function(e){
// other lines
document.getElementById('thatdiv').classList.remove('hidden');
});

let quotes = [
'The best thing about a boolean is even if you are wrong, you are only off by a bit. (Anonymous)',
'Without requirements or design, programming is the art of adding bugs to an empty text file. (Louis Srygley)',
'Before software can be reusable it first has to be usable. (Ralph Johnson)',
'The best method for accelerating a computer is the one that boosts it by 9.8 m/s2. (Anonymous)',
'I think Microsoft named .Net so it wouldn’t show up in a Unix directory listing. (Oktal)',
'If builders built buildings the way programmers wrote programs, then the first woodpecker that came along would destroy civilization. (Gerald Weinberg)',
'There are two ways to write error-free programs; only the third one works. (Alan J. Perlis)',
'Ready, fire, aim: the fast approach to software development. Ready, aim, aim, aim, aim: the slow approach to software development. (Anonymous)',
'It’s not a bug – it’s an undocumented feature. (Anonymous)',
'One man’s crappy software is another man’s full-time job. (Jessica Gaston)',
'A good programmer is someone who always looks both ways before crossing a one-way street. (Doug Linder)',
'Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live. (Martin Golding)',
'Programming is like sex. One mistake and you have to support it for the rest of your life. (Michael Sinz)',
'Deleted code is debugged code. (Jeff Sickel)',
'Walking on water and developing software from a specification are easy if both are frozen. (Edward V Berard)',
'If debugging is the process of removing software bugs, then programming must be the process of putting them in. (Edsger Dijkstra)',
'Software undergoes beta testing shortly before it’s released. Beta is Latin for “still doesn’t work. (Anonymous)',
'Programming today is a race between software engineers striving to build bigger and better idiot-proof programs, and the universe trying to produce bigger and better idiots. So far, the universe is winning. (Rick Cook)',
'It’s a curious thing about our industry: not only do we not learn from our mistakes, but we also don’t learn from our successes. (Keith Braithwaite)',
'There are only two kinds of programming languages: those people always bitch about and those nobody uses. (Bjarne Stroustrup)',
'In order to understand recursion, one must first understand recursion. (Anonymous)',
'The cheapest, fastest, and most reliable components are those that aren’t there. (Gordon Bell)',
'The best performance improvement is the transition from the nonworking state to the working state. (J. Osterhout)',
'The trouble with programmers is that you can never tell what a programmer is doing until it’s too late. (Seymour Cray)',
'Don’t worry if it doesn’t work right. If everything did, you’d be out of a job. (Mosher’s Law of Software Engineering)'
];
function genQuote() {
// Selecing an element from HTML
let quote = document.querySelector('#quote-content');
// Creating an indexQ of a random number
// And floor it between 0 to length of quotes[]
let indexQ = Math.floor(Math.random() * quotes.length);
// Display the quote of that index
quote.innerHTML = quotes[indexQ];
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
text-align: center;
text-decoration: none;
background-color: #8BC6EC;
background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
background-size: cover;
background-attachment: fixed;
overflow: hidden;
}
#quote-content {
font-size: 22px;
}
.btn {
background: url(/img/favicon1.png) no-repeat;
border: none;
width: 102px;
height: 100px;
outline: none;
transition: 400ms;
}
.btn:active {
opacity: .2;
}
.card {
padding: 15px 30px 15px 30px;
margin: 20px auto;
max-width: 500px;
max-height: 300px;
background-color: #f2e6ff;
border-radius: 8px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.card>h2 {
color: #ffeeee;
padding: 15px;
font-size: 28px;
background-color: #5390d9;
font-family: arial;
text-align: center;
border-radius: 5px;
box-shadow: 4px 4px #023e8a;
}
.card>p {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-weight: 400;
font-size: 20px;
}
<!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">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#600&display=swap" rel="stylesheet">
<link rel="shortcut icon" href="img/quotes.png">
<title>Coding Quotes</title>
</head>
<body>
<div class="container">
<div class="card">
<h2>Random quote</h2>
<p>Generate random quote!</p>
<button onclick="genQuote()" class="btn"></button>
</div>
<div id="quote-content" class="card"></div>
</div>
<script src="main.js"></script>
</body>
</html>
Somebody mentioned that this happens because div (class="card") has a padding in CSS.
I've tested removing the padding and it actually does the trick however, it kinda ruins the way card looks.
I have attached the code so if anybody has any tip/advice, I'm open to it! :)

Div's display: none gets overridden by user agent stylesheet, but works locally

I have this piece of code on my website:
<div class="test_section no_display" id="test_section_metric">
<div class="section_start_bar">
</div>
<div class="section_end_bar">
</div>
</div>
And this piece of css:
.test_section
{
width:70%;
margin-left:15%;
background-color: var(--color_main);
}
.no_display
{
display: none;
}
But the div with "no_display" class is displayed, because when I inspect the site in Chrome I see that it overrides it with user agent stylesheet like this:
div{
display:block;
}
However, when I open the site just as a file on my computer it is actually not displaying and is working as intended.
I've already searched for an answer, but I've mostly encountered people fixing it by putting a <!DOCTYPE html> before the <html> tag, which I've already done.
The .no_display class is a separate thing, because it'll be removed with javascript to show things on a button click.
Any ideas how to fix this?

using css property display: none !important; will override the user agent setting. bonus points for checking that your class name and css class selector are spelled the same 😅

How to live preview a set of files?

I want to build a simple online editor like plunker. Does anyone know how to accomplish the live preview, once several files (.html, .css, .js, .json) have been uploaded?
Taking JSBin as example, there are only 1 html text, 1 css text and 1 js text, so it is simple: we just need to construct one complete html file from these texts and use Document.write().
However, how do editors such as plunker, brackets, vscode do live preview? Do they also construct one complete file by themselves or they use some third-party tools?

Live previews are pretty easy. Just replace the HTML of an area on the page with the HTML the user provided. In practice, you probably want to do this in a sandboxed iframe for security purposes.
The snippet below shows how this can be done, all in JavaScript. Try running the snippet and typing in the box.
function doLivePreview() {
$("#output").html($("#source").val());
}
$(function() {
doLivePreview();
$("#source").on("input", doLivePreview);
});
#source {
float: left;
}
#output {
float: left;
border: 1px solid #AAA;
margin-left: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<textarea id="source" cols="50" rows="8">
Type to see a live preview
<br/>
<a href="https://www.google.com">Google<a>
</textarea>
<div id="output">
</div>

how to create a simple popup window displaying only text, on a web site

I'm not a programmer, I've created a web site using a major hosting service's application. I want to insert code into a box provided by the hosting service that allows you to paste any HTML code.
I want to create a link on the site that opens a popup window to display text that I hard-code into the code. I don't want to jump to another HTML page.
I found the following code below that allows me to jump to another HTML page (it was set to CNN.com as an example). Is there a way to replace the action of jumping to another HTML page, with opening the popup and displaying the following example text "hello world". (please note in the code below, I deleted the opening and closing "a" tags at the beginning and end of the code since their inclusion causes problems when I type this question out on this web site).
Pop-up Window
Thanks

Easy to make popup window without Jquery. Just copy this code and paste. and clicl the open text. Popup shown.
<p>To display the box, click on the link <a href="#" onClick="document.getElementById('shadowing').style.display='block';
document.getElementById('box').style.display='block';">open</a>
</p>
<div id="shadowing"></div>
<div id="box">
<span id="boxclose" onClick="document.getElementById('box').style.display='none';
document.getElementById('shadowing').style.display='none'">close </span>
<div id="boxcontent">
And this is the static content of the box. <br><br>
Dynamic content in the next demo...
</div>
</div>
<style type="text/css">
#shadowing{display: none;position: fixed;top: 0%;left: 0%;width: 100%;height: 100%; background-color: #CCA; z-index:10; opacity:0.5; filter: alpha(opacity=50);}
#box {display: none;position: fixed;top: 20%;left: 20%;width: 60%;height: 60%;max-height:400px;padding: 0; margin:0;border: 1px solid black;background-color: white;z-index:11; overflow: hidden;}
#boxclose{float:right;position:absolute; top: 0; right: 0px; background-image:url(images/close.gif);background-repeat:no-repeat; background-color:#CCC; border:1px solid black; width:20px;height:20px;margin-right:0px;}
#boxcontent{position:absolute;top:23px;left:0;right:0;bottom:0;margin:0 0 0 0;padding: 8px;overflow: auto;width:100%;height:100%; overflow:hidden;}
</style>

You can place the function in the <head> section OR you can pull the function from a .js file. This will open a window and load the url you want. It won't redirect the original page as you use the # instead of the actual url.
<script>
function popup(){
window.open('http://www.cnn.com','1426494439650','width=440,height=300,toolbar=0,menubar=0,location=1,status=1,scrollbars=1,resizable=1,left=0,top=0')
}
</script>
link

Manipulate Google results page to add a section on the RHS

I'm building a Chrome Extension, where in, based on the search query I want to display some stuff(let's assume links for now) on the RHS of the Google results page. Very similar to what Wajam does.
I understand I need to use Content-Scripts for such tasks, which is clear and fine.
The problem is, Google seems to return divs with different IDs each time based on the query in its html. For instance if you search for a movie name, there seems to be different set of IDs in the html as opposed to, let's say when you search for a Javascript error message.
I wonder how Wajam has implemented its plugin, which works so reliably and displays links on the RHS.
How should I go about it? Any specific IDs you can see in the html that I can use or build upon reliably?
Just to be clear for folks who are not into Chrome Extensions, the question doesn't require knowledge of Extension architecture/APIs. It's a seemingly simple html/javascript/css related question.

I don't know anything about Chrome Extensions developement, but I tried to understand Google results page structure, and I hope that will help you :
Every google result page has a #rhs div, even if there are no additional informations on the right. This div has an unique id, so I think it would be easy to put dynamical content inside.
I've tried with Web Developer Tools, and that worked very well :
I think you'll just have to append content to this div to get what you want : the "different IDs based on the query" may be children of this parent and unique #rhs div. So I don't think you have to care about these children "random id" divs, just append your content (custom css, images, videos...) in this #rhs div :)
if you want to try with a Web Developer Tool :
just paste this code instead of the original <div id="rhs">...</div>
<div id="rhs" style="
border: 2px solid red;
padding: 16px;">
Put whatever you want here
<div style="
font-weight: 700;
padding: 12px;
border: 1px solid #aaa;
background-color: #eee;
margin: 20px;
-webkit-box-shadow:0 1px 2px rgba(34,25,25,0.4);
-moz-box-shadow:0 1px 2px rgba(34,25,25,0.4);
box-shadow:0 1px 2px rgba(34,25,25,0.4);
font-size: 1.4em;
">
Custom CSS
</div>
<img src="http://myrrix.com/wp-content/uploads/2012/06/stackoverflow.png"> images
<iframe id="ytplayer" type="text/html" width="340" height="390" src="http://www.youtube.com/embed/M7lc1UVf-VE?autoplay=0&origin=http://example.com" frameborder="0"></iframe>
</div>
and you'll get the same result as me.
Hope I helped you ! :)