get a hover function to appear in all 100 divs - javascript

I would really aprreciate help on my code logic.
I have a loop of 100 divs and i want that when i a mouse overs on any one of the div it should display a popup(i have gotten just little adjustments left to make).
the problem is i can't seem to make the popup work on all divs when hovered on...only the first one works..
Please help show me what i am doing wrong. thank you
below is my code
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<link href="/css/index.css" rel="Stylesheet"/>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type='text/javascript'>
$(document).ready(function() {
$('#popDiv').hover(
function() { $('#divTable').show(); },
function() { $('#divTable').hide(); }
);
});
</script>
</head>
<body >
<div id="wrapper">
<div id="container">
<form action="/models/top100.js">
<div id="divTable" class="tooltip" href="#">
<table id= "tbDetails" class="popup" >
<tbody><tr>
<td class="col1"></td>
<td class="col2"></td>
<td class="col3"></td>
<td class="col4"></td>
</tr> </tbody>
</table>
</div>
<div id="bodydiv"> <div id="leftdiv" >
<% for (var i = 0; i < 100; i++) { %>
<div id="popDiv">
</div>
<div id="tabDiv"></div>
<% } %>
</div>
</div>
</form>
</div>
</div>
</body>
</html>
and the css
a.tooltip {outline:none; }
a.tooltip strong {line-height:20px;}
a.tooltip:hover {text-decoration:none;}
.tooltip {
z-index:10;display:none; margin-right:50px;
width:135px; line-height:16px;
position:absolute; color:#111;
border:1px solid #D2D2D2; background:#ffffff;
}
.tooltip.show { display: inline-block; }
.callout {z-index:20;position:absolute;top:30px;border:0;left:-12px;}
.popup
{
width:135px;
height:50px;
text-align: center;
background-color: yellow;
display: inline-block;
vertical-align: middle;
margin-right: 50px;
line-height: 50%;
}
#wrapper
{
margin: auto;
}
#container
{
position:absolute;
margin:0px auto;
}
#bodydiv
{
margin:0 auto;
padding:0px;
}
#leftdiv
{
margin-top:30vh;
margin-left:15vh;
width:90vh;
height:75vh;
float:left;
}
#popDiv
{
display:inline-block;
border-width: 2px;
border-style: solid;
border-color: rgb(236, 80, 184);
background-color: rgb(236, 80, 184);
margin-left:10vh;
width:5vh;
height:20vh;
}
#tabDiv
{
width:70vh;
height:20vh;
display:inline-block;
border-width: 2px;
border-style: solid;
background-color: rgb(179, 80, 236);
border-color: rgb(122, 204, 241);
}
thanks in advance

You are using ID selector when writing hover function so that'll work only for the first element in the DOM. Instead you need to use class selector and give class name to divs like this.
$(document).ready(function() {
$(".test").hover(function() {
$(this).css("background-color", "yellow");
}, function() {
$(this).css("background-color", "white");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test">Hover the mouse pointer over this</div>
<div class="test">Hover the mouse pointer over this</div>
<div class="test">Hover the mouse pointer over this</div>
P.S Your id should be unique within the page.

Give your divs the same class, and us it in your hover.
$(document).ready(function () {
$('.popDiv').hover(
function () {
$('#divTable').show();
},
function () {
$('#divTable').hide();
}
);
});
.popup {
width: 135px;
height: 50px;
text-align: center;
background-color: yellow;
display: inline-block;
vertical-align: middle;
margin-right: 50px;
line-height: 50%;
}
#wrapper {
margin: auto;
}
#container {
position: absolute;
margin: 0px auto;
}
#bodydiv {
margin: 0 auto;
padding: 0px;
}
#leftdiv {
margin-top: 30vh;
margin-left: 15vh;
width: 90vh;
height: 75vh;
float: left;
}
#popDiv {
display: inline-block;
border-width: 2px;
border-style: solid;
border-color: rgb(236, 80, 184);
background-color: rgb(236, 80, 184);
margin-left: 10vh;
width: 5vh;
height: 20vh;
}
#tabDiv {
width: 70vh;
height: 20vh;
display: inline-block;
border-width: 2px;
border-style: solid;
background-color: rgb(179, 80, 236);
border-color: rgb(122, 204, 241);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div id="container">
<form action="/models/top100.js">
<div id="divTable" style="display: none" class="tooltip" href="#">
<table id="tbDetails" class="popup">
<tbody>
<tr>
<td class="col1"></td>
<td class="col2"></td>
<td class="col3"></td>
<td class="col4"></td>
</tr>
</tbody>
</table>
</div>
<div id="bodydiv">
<div id="leftdiv">
<!--<% for (var i = 0; i < 100; i++) { %>-->
<div class="popDiv" style="width: 200px; height: 50px; background-color: green">
1
</div>
<div class="popDiv" id="tabDiv" style="width: 200px; height: 50px; background-color: red">2</div>
<!--<% } %>-->
</div>
</div>
</form>
</div>
</div>

Related

I can't get iframe to get data from textarea

I am trying to make an iframe which shows text putted in the textarea.
How can I do that? Am I missing something here?
<html>
<head>
<title>Code Player</title>
<script type="text/javascript" src="jquery.min.js"></script>
<!--i am using the latest jquery-->
<style type="text/css">
body{
font-family: sans-serif;
margin: 0;
padding: 0;
}
#header{
width: 100%;
background-color: #EEEEEE;
padding: 5px;
height: 30px;
}
#logo{
float: left;
font-weight: bold;
font-size: 120%;
padding: 3px 5px;
}
#buttonContainer{
width: 240px;
margin: 0 auto;
}
.toggleButton{
float: left;
border: 1px solid gray;
padding: 6px;
border-right: none;
font-size: 90%;
}
#html{
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
#output{
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
border-right: 1px solid gray;
}
.active{
background-color: #E8F2FF;
}
.highlightedButton{
background-color: gray;
}
textarea{
resize: none;
border-top: none;
border-color: gray;
}
.panel{
float: left;
width: 49%;
border-left: none;
}
iframe{
border: none;
}
</style>
</head>
<body>
<div id="header">
<div id="logo">
CodePlayer
</div>
<div id="buttonContainer">
<div class="toggleButton active" id="html">HTML</div>
<div class="toggleButton" id="css">CSS</div>
<div class="toggleButton" id="javascript">JavaScript</div>
<div class="toggleButton active" id="output">Output</div>
</div>
</div>
<div id="bodyContainer">
<!--I want to get iframe data from the textarea section-->
<textarea id="htmlPanel" class="panel">Hello World!</textarea>
<iframe id="outputPanel" class="panel"></iframe>
</div>
<script type="text/javascript">
$(".toggleButton").hover(function () {
$(this).addClass("highlightedButton");
}, function () {
$(this).removeClass("highlightedButton");
});
$(".toggleButton").click(function () {
$(this).toggleClass("active");
$(this).removeClass("highlightedButton");
});
$(".panel").height($(window).height() - $("#header").height() - 15);
$(".panel").width($((window).width() / 2));
$("iframe").contents().find("html").html($("#htmlPanel").val());
$("textarea").on('change keyup paste', function() {
$("iframe").contents().find("html").html($("#htmlPanel").val());
});
</script>
</body>
</html>
Everything in this code works expect the iframe. I can't get the data from textarea.
You have a syntax error, otherwise it works fine. Demo
$(".panel").width($((window).width() / 2));
should be
$(".panel").width($(window).width() / 2);

Site Overlay not working "Uncaught ReferenceError: closeNav is not defined"

I'm trying to code a site just to learn but i can't get something to work on my site togheter with all the other elments but if i code that part alone it works. I'm talking about a bottom navigation bar or "Filter". I want it to slide down if i press on "x" but it doesn't and in the browser console i get this message "Uncaught ReferenceError: closeNav is not defined" and "Uncaught ReferenceError: openNav is not defined"
Here's the code (it's pretty messy):
function openNav() {
document.getElementById("myFilterTab").style.height = "100px";
}
function closeNav() {
document.getElementById("myFilterTab").style.height = "0%";
}
body {
margin:0;
background-color: white;
color: #a5a5af;
font: 12px/1.4em Arial,sans-serif;
}
#header {
position: relative;
background-color: #77c9d4;
color: #FFF;
height: 11.3%;
}
#header input{
position:absolute;
top: 20px;
padding: 5px 9px;
height: 30px;
margin-left: 700px;
width: 600px;
border: 1px solid #a4c3ca;
background: #FFFFFF;
border-radius: 6px 0px 0px 6px;
}
.SearchBar{
color:black;
}
.SearchBar:focus{
outline:0;
color:black;
}
.SearchButton{
position:absolute;
padding:6px 15px;
left:1300px;
bottom:64px;
border: 1px solid #57BC90;
background-color:#57BC90;
color:#fafafa;
border-radius: 0px 6px 6px 0px;
}
.SearchButton:active{
outline:0;
}
.SearchButton:hover{
background-color:#015249;
border-color: #015249;
}
#logo {
font-size: 30px;
line-height: 40px;
padding: 15px;
color:white;
}
ul {
position:relative;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #57BC90;
}
li {
border-right:1px solid #57BC90;
float:left;
}
#NavBar{
width:455.76px;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.Login{
float:right;
text-decoration: none;
}
li a:hover{
color:white;
text-decoration:none;
}
li a:hover:not(.active) {
background-color: #015249;
}
.active {
background-color: #015249;
}
br.clearLeft {
clear: left;
}​
* {
margin: 0;
}
.glyphicon-log-in{
right: 4px !important;
}
.openBox{
position:absolute;
width: 50px;
background-color: #57BC90;
top: -24px;
left:926px;
cursor:pointer;
}
.glyphicon-chevron-right{
transform: rotate(-90deg);
font-size:20px;
color:white;
right: -13px;
top: 3px;
}
.glyphicon-remove{
position:absolute;
left: 1865px;
top: 13px;
font-size:20px;
color:white;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 142px; /* .push must be the same height as .footer */
}
.footer{
background-color:#77c9d4;
}
.ShowBox{
padding:1px;
border: 1px solid gray;
height:108px;
width: 192px;
}
.FilterTab{
transition: 0.5s;
position: fixed;
height: 100px;
width: 100%;
padding: 1px;
background-color: #57BC90;
bottom: 0px;
border-radius: 20px 20px 0px 0px;
}
#media screen and (max-height: 450px) {
.FilterTab {padding-top: 15px;}
.FilterTab a {font-size: 18px;}
}
/*
Sticky Footer by Ryan Fait
http://ryanfait.com/
*/
<!DOCTYPE html>
<html>
<head>
<title>PC Master</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" type="text/css" href="ScrollBar.css">
<link rel="stylesheet" type="text/javascript" href="ScrollBar.js">
</head>
<body>
<div id="header">
<div id="logo">PC Master</div>
<form method="get">
<input class="SearchBar" type="text" name="search" placeholder="Cauta.." required>
<button type="submit" Value="submit" class="SearchButton"><span class="glyphicon glyphicon-search"></span></button>
</form>
<ul>
<li>Home</li>
<li>Componente</li>
<li>Periferice</li>
<li>Contact</li>
<li class="Login"><span class="glyphicon glyphicon-log-in" ></span>Login</li>
</ul>
<br class="clearLeft" />
</div>
<div class="FilterTab" id="myFilterTab">
</span>
<div class="openBox"><span class="glyphicon glyphicon-chevron-right" onclick='openNav()'></span></div>
</div>
<div class='wrapper'>
<div class="ShowBox">
</div>
<div class="ShowBox">
</div>
<div class="ShowBox">
</div>
<div class="ShowBox">
</div>
<div class="ShowBox">
</div>
<div class="ShowBox">
</div>
<div class="ShowBox">
</div>
<div class="ShowBox">
</div>
<div class="ShowBox">
</div>
<div class="ShowBox">
</div>
<div class="ShowBox">
</div>
<div class="ShowBox">
</div>
<div class='push'></div>
</div>
<div class='footer' id="logo">PC Master</div>
</body>
</html>
The site is only for full hd monitor so in smaller monitors it won't look ok.
JavaScript is not a stylesheet
<link rel="stylesheet" type="text/javascript" href="ScrollBar.js">
use a script tag like all of the other includes in the page
<script src="ScrollBar.js"></script>

How to Change Navigation Bar Background with Scroll?

I'm new to web-developing. For one of my projects, I want to change the navigation bar's background when the user scrolls.
I want it to look like exactly this:
https://www.nlogic.co/understanding-vlan-hopping-attacks/
Here's my code:
nav .row {
margin-right: 0px;
}
nav {
border: 2px ridge #999;
position: fixed;
}
nav li {
float: left;
list-style: none;
padding: 20px 30px;
}
nav a {
color: white;
font-size: 20px;
}
.btn button {
background-color: transparent;
color: white;
margin: 10px 30px;
padding: 10px 25px;
border: 2px solid #999;
border-radius: 5px;
}
.btn button:hover {
border: 2px solid white;
border-radius: 10px;
}
<nav class="col-md-12">
<div class="row">
<ul class="col-md-8">
<li>About
</li>
<li>Contact
</li>
<div class="clearfix"></div>
</ul>
<div class="btn col-md-4">
<button>Sign Up</button>
<button>Sign In</button>
</div>
</div>
</nav>
I am not good at jQuery. In fact, I only know the basics of Javascript. I will be Very Very Grateful if someone can help me here.
Try this :
$(document).ready(function(){
$(window).on("scroll",function(){
if($(document).scrollTop() > 150)
$(".col-md-12").css({backgroundColor:"gray",position:"fixed"});
else
$(".col-md-12").css({backgroundColor:"transparent",position:"absolute"});
})
})
Final code :
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body {
height: 1500px;
}
nav .row{
margin-right: 0px;
}
nav{
border: 2px ridge #999;
position:absolute;
}
nav li{
float: left;
list-style: none;
padding: 20px 30px;
}
nav a{
color:white;
font-size: 20px;
}
.btn button{
background-color: transparent;
color: white;
margin: 10px 30px;
padding: 10px 25px;
border: 2px solid #999;
border-radius: 5px;
}
.btn button:hover{
border: 2px solid white;
border-radius: 10px;
}
</style>
</head>
<body>
<nav class="col-md-12">
<div class="row">
<ul class="col-md-8">
<li>About</li>
<li>Contact</li>
<div class="clearfix"></div>
</ul>
<div class="btn col-md-4">
<button>Sign Up</button>
<button>Sign In</button>
</div>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(window).on("scroll",function(){
if($(document).scrollTop() > 150)
$(".col-md-12").css({backgroundColor:"gray",position:"fixed"});
else
$(".col-md-12").css({backgroundColor:"transparent",position:"absolute"});
})
})
</script>
</body>
</html>
try this. change the sizes as your need. refer this example and implement it for your project.try below working demo.
<html>
<head></head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<style type="text/css">
body{
height: 1000px;
margin: 0;
padding: 0;
}
div.navbar{
width: 100%;
height: 100px;
background-color: black;
position: fixed;
}
</style>
<body>
<div class="navbar"></div>
</body>
<script type="text/javascript">
$(window).scroll(function(){
var thescroll = $('body').scrollTop();
//alert(thescroll);
//in here, get the scroll position, if it is greater than you navbar height then change the color or whatever.
if (thescroll > 80)
{
$("div.navbar").css({"background-color":"pink"});
}
else
{
$("div.navbar").css({"background-color":"black"});
}
});
</script>
</html>

Javascript - bring up infobox on click image

I have some images, I need to have a clickevent on them bringing up an infobox on each image.
$('.show-infobox').on('click', function() {
// Hide all infoboxes to prevent multiple showing at once
$('.infobox').addClass('hidden');
// Show infobox background
$('.infobox-container').removeClass('hidden');
// Show infobox matching last part of ID
$('#' + this.id.replace('show')).removeClass('hidden');
});
$('.hide-infobox').on('click', function() {
// Manually hide all infoboxes and background
$('.infobox-container').addClass('hidden');
$('.infobox').addClass('hidden');
}).children().on('click', function() {
return false;
});
#charset "utf-8";
.container {
height: 800px;
width: 1000px;
margin: 0;
}
body {
padding:0px;
width:100%;
}
header
{
top: 11px;
width: 100%;
padding-bottom: 10px;
}
#wrapper{
margin-left: auto;
margin-right: auto;
width: 1000px;
}
ol {
list-style-type: upper-roman;
}
H3 {
font-size:16px;
text-shadow: 0px 0px 5px grey;
}
.mainBox
{
background-color: #F0F0F0;
width: 700px;
box-shadow: 0px 0px 15px grey;
top: 310px;
border-radius: 20px;
padding-top: 30px;
padding-right: 50px;
padding-left: 50px;
}
.container nav ul {
list-style-type: none;
}
nav
{
width: 720px;
height:40px;
background-color: #F0F0F0;
border-color: grey;
border-width: 1px;
border-style: solid;
border-radius: 10px;
font-family: 'PT Sans';
font-size: 20px;
margin-bottom:50px;
}
ul{
padding-right: 20px;
margin-top: 6px;
}
a {
color: black;
text-decoration: none;
padding: 25px;
}
a:hover
{
color:#00A0C6;
text-decoration:none;
cursor:pointer;
}
.imagePack
{
float:left;
height: 300px;
width: 200px;
border-style:solid;
}
img.staff {
cursor: pointer;
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */
}
img.staff:hover {
opacity: 1.0;
filter: alpha(opacity=100); /* For IE8 and earlier */
}
.infobox-container {
background: rgba(0, 0, 0, .2);
width: 100%;
height: 100%;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
}
.infobox {
background: #fff;
display: inline-block;
padding: 2rem;
border: solid 1px #eee;
}
.show-infobox {
cursor: pointer;
}
.hidden {
display: none;
}
<!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">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<title>Test</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="jquery-2.1.4.js"></script>
<script>
$( document ).ready(function() {
$('.show-infobox').on('click', function() {
// Hide all infoboxes to prevent multiple showing at once
$('.infobox').addClass('hidden');
// Show infobox background
$('.infobox-container').removeClass('hidden');
// Show infobox matching last part of ID
$('#' + this.id.replace('show')).removeClass('hidden');
});
$('.hide-infobox').on('click', function() {
// Manually hide all infoboxes and background
$('.infobox-container').addClass('hidden');
$('.infobox').addClass('hidden');
}).children().on('click', function() {
return false;
});
});
</script>
<div id="wrapper">
<center><header><img src="Bilder/spegel.jpg"/></header></center>
</head>
<!--Bakgrundsbild-->
<center><body bgcolor="#FFFFFF ">
<!--Javascript-->
<!--Lådan som håller inne allt innehåll-->
<div class="container">
<!--Header-->
<!--Nedan skrivs innehål/text till sidan-->
<div class="mainBox">
<center><img src="Bilder/title.png"></center>
<p>
<div class="infobox-container hide-infobox hidden">
<div id="infobox-1" class="infobox hidden">This is infobox 1! <span class="hide-infobox">[close]</span></div>
<div id="infobox-2" class="infobox hidden">This is infobox 2! <span class="hide-infobox">[close]</span></div>
</div>
<span id="show-infobox-1" class="show-infobox">Show infobox 1</span>
<span id="show-infobox-2" class="show-infobox">Show infobox 2</span>
</div>
</body></center>
</div>
</html>
At the moment Im just trying to bring up the infobox on a simple text just to see if it works. But it doesn't. Only the container comes up without the actual infobox.
I am just showing how this can be done. Still you need to change your code a lot.
I suggest you to go through w3schools for better understanding.
This is DEMO
$(".infobox-container, .infobox").hide();
$(".show-infobox").click(function()
{
var curId = this.id;
if(curId == "show1")
{
$(".infobox-container, #infobox-1").fadeIn(100);
}
if(curId == "show2")
{
$(".infobox-container, #infobox-2").fadeIn(100);
}
});
$(".hide-infobox").click(function()
{
$(".infobox-container, .infobox").fadeOut();
});
#charset"utf-8";
.container {
height: 800px;
width: 1000px;
margin: 0;
}
body {
padding:0px;
width:100%;
}
header {
top: 11px;
width: 100%;
padding-bottom: 10px;
}
#wrapper {
margin-left: auto;
margin-right: auto;
width: 1000px;
}
ol {
list-style-type: upper-roman;
}
H3 {
font-size:16px;
text-shadow: 0px 0px 5px grey;
}
.mainBox {
background-color: #F0F0F0;
width: 700px;
box-shadow: 0px 0px 15px grey;
top: 310px;
border-radius: 20px;
padding-top: 30px;
padding-right: 50px;
padding-left: 50px;
}
.container nav ul {
list-style-type: none;
}
nav {
width: 720px;
height:40px;
background-color: #F0F0F0;
border-color: grey;
border-width: 1px;
border-style: solid;
border-radius: 10px;
font-family:'PT Sans';
font-size: 20px;
margin-bottom:50px;
}
ul {
padding-right: 20px;
margin-top: 6px;
}
a {
color: black;
text-decoration: none;
padding: 25px;
}
a:hover {
color:#00A0C6;
text-decoration:none;
cursor:pointer;
}
.imagePack {
float:left;
height: 300px;
width: 200px;
border-style:solid;
}
img.staff {
cursor: pointer;
opacity: 0.4;
filter: alpha(opacity=40);
/* For IE8 and earlier */
}
img.staff:hover {
opacity: 1.0;
filter: alpha(opacity=100);
/* For IE8 and earlier */
}
.infobox-container {
background: rgba(0, 0, 0, .2);
width: 100%;
height: 100%;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
}
.infobox {
background: #fff;
display: inline-block;
padding: 2em;
border: solid 1px #eee;
}
.show-infobox {
cursor: pointer;
}
.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="wrapper">
<center>
<header>
<img src="Bilder/spegel.jpg" />
</header>
</center>
<center>
<!--Lådan som håller inne allt innehåll-->
<div class="container">
<!--Header-->
<!--Nedan skrivs innehål/text till sidan-->
<div class="mainBox">
<center>
<img src="Bilder/title.png" />
</center>
<p>
<div class="infobox-container">
<div id="infobox-1" class="infobox">This is infobox 1! <span class="hide-infobox">[close]</span></div>
<div id="infobox-2" class="infobox">This is infobox 2! <span class="hide-infobox">[close]</span></div>
</div>
</p>
<span class="show-infobox" id="show1">Show infobox 1</span>
<span class="show-infobox" id="show2">Show infobox 2</span>
</div>
</div>
</center>
</div>

Make <div> invisble if there no content

I am currently redisigning a page - making it so JS handles the upload of the content from a txt file and CSS formats the layout of divs and HTML contains the divs. What i am trying to do is hide the DIVs that DO NOT have any content in it - currently if tehre is no content it will still display the div as a long thin line. I've tried several suggestion, however having trouble of making it work properly. Have tried 'empty cell' option in CSS, but that ruins the layout for some reason.
Here is my HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>BROADCAST</title>
<link rel="stylesheet" href="BCdata/WebStyles.css">
<script src="jquery-ui/jquery-1.9.1.min.js"></script>
<script src="BCdata/ContentHandler.js"></script>
</head>
<body class="main">
<!--------------------------------DONT CHANGE UNLESS NEEDED-------------------------------------------------------------->
<div id="buttons_div">
<!------------------Banner---------------------------------------------------------------------------------------->
<img src="images/broadcastbanner.gif" id="Image35">
<span id="CurrentDate"></span>
</div>
<div id="buttons_div" style="top:10px;">
<!------------Archive Calendars----------------------------------------------------------------------------------->
<img src="images/broadcast2013archive.gif" id="Image4">
<img src="images/broadcast2014archive.gif" id="Image5">
<!--------------Signoff Sheet------------------------------------------------------------------------------------->
<img src="images/broadcastsignoff.gif" id="Image6">
<!----------------------Up and Home------------------------------------------------------------------------------->
<img src="images/Up.GIF" id="Image2">
<img src="images/Home.GIF" id="Image3">
</div>
<!-------------------------------------------CONTENT DIVS------------------------------------------------------------------>
<div id="content_divs" style="top:20px; background-image: url(images/bluebox.png);">
<p id="div1" style="color:white;"></p>
</div>
<div id="content_divs" style="top: 30px; background-image: url(images/whitebox.png);">
<p id="div2"></p>
<p id="div2"></p>
</div>
<div id="content_divs" style="top: 40px; background-image: url(images/redbox2.png);">
<p id="div3" style="color:white;"></p>
</body>
</html>
Here is my CSS
#CurrentDate
{
position: absolute;
top:15px;
left: 210px;
width:700px;
text-align: center;
z-index: 8;
color:white;
font-family:Arial;
font-size:35px;
text-transform: capitalize;
}
.main
{
background-color: #FFFFFF;
background-image: url(backbox.gif);
color: #000000;
text-align: center;
position: relative;
overflow: auto;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
top: 10px;
}
.main #content_divs
{
position: relative;
text-align: left;
z-index: 1;
width: 960px;
margin: 0 auto;
border-style : solid;
border-width: 3px;
border-color: white;
overflow: hidden;
}
h1
{
font-family: Arial;
font-size: 20px;
font-weight: bold;
position: relative;
text-transform: capitalize;
font-weight: bold;
z-index: 5;
}
h2
{
font-family: Arial;
font-size: 13px;
font-weight: bold;
position: relative;
z-index: 5;
}
p
{
font-family: Arial;
font-size: 13px;
position: relative;
z-index: 5;
margin-left: 20px;
margin-right: 20px;
}
#buttons_div
{
position: relative;
}
#Image35
{
position:relative;
border: 0px #000000 solid;
width: 960px;
height: 96px;
z-index: 2;
}
#Image2
{
border: 0px #000000 solid;
position: relative;
left:30px;
width: 90px;
height: 34px;
z-index: 3;
}
#Image3
{
border: 0px #000000 solid;
position: relative;
left:30px;
width: 86px;
height: 34px;
z-index: 4;
}
#Image4
{
border: 0px #000000 solid;
position: relative;
left:-30px;
width: 236px;
height: 34px; z-index: 5;
}
#Image5
{
border: 0px #000000 solid;
position: relative;
left:-30px;
width: 236px;
height: 34px;
z-index: 6;
}
#Image6
{
border: 0px #000000 solid;
position: relative;
left:-30px;
width: 236px;
height: 34px;
z-index: 7;
}
This is JS (content handler)
$(function()
{
$("#div1").load("BCdata/Content061114.txt .Div1 #p1");
});
$(function()
{
$("#div2").load("BCdata/Content061114.txt .Div2 #p1");
});
$(function()
{
$("#div3").load("BCdata/Content061114.txt .Div3 #p1");
});
$(function()
{
$("#CurrentDate").load("BCdata/Content061114.txt #CurrentDate");
});
onload=function()
{
var content_divs=document.getElementById('Div2');
if(!div2.hasChildNodes()){content_divs.style.display='none'}
}
And this is a TEXT file where content is located
<span id="CurrentDate">thursday 6th november 2014, wk 40</span>
<!----Use <p> tag for indentation of a text, otherwise use <div> tag------>
<div class="Div1">
<div id="p1">
<h1 style="color:white;">Congratulations to 66!</h1>
<div>PDFs of 'Record Weeks' are now available on the Intranet.</div>
<h2>Heading 1</h2>
<p>Content is here</p>
<h2>Heading 2</h2>
<p>Content is here</p>
<div><b><i>Click the link on the right to view PDFs</i></b></div>
</div>
</div>
<div class="Div2">
<div id="p1">
<h1 style="color:black;">Poster</h1>
<div>Poster Content</div>
</div>
</div>
<div class="Div3">
<div id="p1">
<h1 style="color:white;">heading Content is here</h1>
<div>Content is ehre blabla</div>
</div>
</div>
Any help is much apreciated - sorry if it seems that i am asking to fix the problem for me, but i am new to this and very keen to learn. Been stuck on this for a while now
You could try :empty pseudo-class.
div:empty {
display: none;
}
<div></div>
<div>div with content</div>
Reference: MDN
Something like this would work.
elementList = document.querySelectorAll('div');
for(var i = 0; i < elementList.length; i++)
{
var element = elementList[i];
(element.children === 0) ? element.style.display = "none": element.style.display = "block";
}
What this does it get all Div elements, puts them in an array, then checks each one, if it does not have a child it sets display to none, if it does it sets display to block.
EDIT
If you don't want it to mess with divs with children atall, just change if statement to:
(element.children === 0) ? element.style.display = "none": "";
We use .children because this only returns Element objects (aka HTML tagged stuff) and not 'absolutely' every child.
demo - http://jsfiddle.net/y7mgmm2u/
thanks to #emmanuel
*:empty {
display:none;
}
<div>
<p><span></span>
</p>
</div>
<div>test</div>
<p></p>
<p>test</p>

Categories