Layering div using zIndex - javascript

Background:
I am attempting to have a radio buttons set zIndex onclick to bring a div to the foreground.
Each associated div is positioned atop each other, having the same CSS (position: absolute;).
I have attempted to use a global variable to keep incrementing and applying as zIndex to a specific div id when a radio button is clicked. I have also attempted to use a loop to set all zIndex to 1 and the passed div name set to 2. I will have both sets of code in the related section.
Issue:
I am not seeing the zIndex applied, for either incremented or looped functions, when inspecting the elements on the page.
Question:
Any help to get the zIndex to apply would be appreciated. Listing out glaring issues would also be on the table, as I am very much still learning these languages.
Code in Question:
<script type="javascript" src="index_scripts.js">
var highest_index = 1;
function getHighestIndex() {
return ++highest_index;
}
function beg1() {
document.getElementById('beginner1').style.zIndex = getHighestIndex();
}
function adt1() {
document.getElementById('adept1').style.zIndex = getHighestIndex();
}
function int1() {
document.getElementById('intermediate1').style.zIndex = getHighestIndex();
}
function adjust_zIndex(ele_id) {
var i = 0;
var max_div = document.getElementById('test').getElementsbyTagName('div');
var z;
for (i; i < max_div; i++) {
var div_id = div_id[i];
if (ele_id === div_id) {
z = 2;
} else {
z = 1;
}
document.getElementById('div_id').style.zIndex = z;
}
}
</script>
/* ##########################
Base objects
######################## */
body {
background-color: black;
}
form {
font-family: Verdana;
}
div {
position: absolute;
background-color: lightblue;
}
/* ##########################
Division IDs
######################## */
#top, #btm {
left: 1%;
right: 1%;
font-weight: bold;
border: 1px solid blue;
}
#top {
top: 1%;
bottom: 95%;
vertical-align: top;
}
#bdy,#beginner1 , #adept1, #intermediate1 {
overflow-y: scroll;
top: 6%;
height: 89%;
left: 20%;
right: 1%;
border: 1px solid blue;
}
#btm {
top: 96%;
bottom: 1%;
font-size: 9px;
vertical-align: middle;
}
#dok {
overflow-y: scroll;
top: 6%;
height: 89%;
left: 1%;
right: 81%;
font-size: 12px;
border: 1px solid blue;
}
/* ##########################
Items within divisions IDs
######################## */
/* */
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="WebPartPageExpansion" content="full" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML Testing Site</title>
</head>
<body>
<form>
<!--
TOP AND BOTTOM OF PAGE, DOCK AND BODY/OVERLAYS ARE RELATIVE TO THESE POSITIONS
-->
<div id="top">
<table width="100%">
<tr>
<td width="50%">Test Site</td>
<td width="50%" style="text-align: right;">Welcome to the Jungle</td>
</tr>
</table>
</div>
<div id="btm">
<p>Mock-Up</p>
</div>
<!--
DOCK ON LEFT
-->
<div id="dok">
<div style="left: 0; width:100%;">
<p style="font-size: 12px; padding: 0%,1%,0%,0%; font-weight: bold;">
Beginner
</p>
<input type="radio" name="div_select" onclick="adjust_zIndex(beginner1)"/>Video<br/>
<hr/>
<p style="font-size: 12px; padding: 0%,1%,0%,0%; font-weight: bold;">
Adept
</p>
<input type="radio" name="div_select" onclick="adjust_zIndex(adept1)"/>Video<br/>
<hr/>
<p style="font-size: 12px; padding: 0%,1%,0%,0%; font-weight: bold;">
Intermediate
</p>
<input type="radio" name="div_select" onclick="int1()"/>Video<br/>
<hr/>
</div>
</div>
<!--
OVERLAY BODY SECTIONS, TO BE IN FOREGROUND WHEN RADIO BUTTON SELECTED FROM DOCK
-->
<div id="beginner1">
<table>
<tr>
<td style="font-weight: bold; font-size: 20px; text-align: left; width: 80%;">Beginner 1 div intended to test</td>
</tr>
</table>
<hr/>
<table width="100%">
<tr>
<td style="width: 50%;"><ul>
<li>List Item</li>
</ul></td>
<td style="width: 50%;">Second Column</td>
</tr>
<tr>
<td style="height: 1000px; vertical-align: bottom;">End</td>
</tr>
</table>
</div>
<div id="adept1">
<p id="ap"></p>
<table>
<tr>
<td>Adept 1 div intended to test </td>
</tr>
</table>
</div>
<div id="intermediate1">
<p id="ap"></p>
<table>
<tr>
<td>Intermediate 1 div intended to test </td>
</tr>
</table>
</div>
<div id="bdy" style="text-align: center;">
<p style="font-size: 12px">Please select a radio button.</p>
</div>
</form>
</body>
</html>

I corrected your code and simplified it to some extent.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="WebPartPageExpansion" content="full" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML Testing Site</title>
<script>
function adjust_zIndex(ele_id) {
var i = 0;
var max_div = document.getElementsByTagName('div');
console.log(max_div ,'ele_id', ele_id);
var z;
var ids = ['adept1' , 'beginner1' , 'intermediate1'];
for (i; i < max_div.length; i++) {
var div_id = max_div[i];
if (ele_id == div_id.id) {
console.log('here 2' , div_id.id);
document.getElementById(div_id.id).style.zIndex = 3;
}
}
var index = ids.indexOf(ele_id);
for(var i=0; i < ids.length;i++)
{
if(i == index)
continue;
else
document.getElementById(ids[i]).style.zIndex =1;
}
}
</script>
<style type="text/css">
/* ##########################
Base objects
######################## */
body {
background-color: black;
}
form {
font-family: Verdana;
}
div {
position: absolute;
background-color: lightblue;
}
/* ##########################
Division IDs
######################## */
#top, #btm {
left: 1%;
right: 1%;
font-weight: bold;
border: 1px solid blue;
}
#top {
top: 1%;
bottom: 95%;
vertical-align: top;
}
#bdy,#beginner1 , #adept1, #intermediate1 {
overflow-y: scroll;
top: 6%;
height: 89%;
left: 20%;
right: 1%;
border: 1px solid blue;
}
#btm {
top: 96%;
bottom: 1%;
font-size: 9px;
vertical-align: middle;
}
#dok {
overflow-y: scroll;
top: 6%;
height: 89%;
left: 1%;
right: 81%;
font-size: 12px;
border: 1px solid blue;
}
/* ##########################
Items within divisions IDs
######################## */
/* */
</style>
</head>
<body>
<form>
<!--
TOP AND BOTTOM OF PAGE, DOCK AND BODY/OVERLAYS ARE RELATIVE TO THESE POSITIONS
-->
<div id="top">
<table width="100%">
<tr>
<td width="50%">Test Site</td>
<td width="50%" style="text-align: right;">Welcome to the Jungle</td>
</tr>
</table>
</div>
<div id="btm">
<p>Mock-Up</p>
</div>
<!--
DOCK ON LEFT
-->
<div id="dok">
<div style="left: 0; width:100%;">
<p style="font-size: 12px; padding: 0%,1%,0%,0%; font-weight: bold;">
Beginner
</p>
<input type="radio" name="div_select" onclick="adjust_zIndex('beginner1')"/>Video<br/>
<hr/>
<p style="font-size: 12px; padding: 0%,1%,0%,0%; font-weight: bold;">
Adept
</p>
<input type="radio" name="div_select" onclick="adjust_zIndex('adept1')"/>Video<br/>
<hr/>
<p style="font-size: 12px; padding: 0%,1%,0%,0%; font-weight: bold;">
Intermediate
</p>
<input type="radio" name="div_select" onclick="int1()"/>Video<br/>
<hr/>
</div>
<!--
OVERLAY BODY SECTIONS, TO BE IN FOREGROUND WHEN RADIO BUTTON SELECTED FROM DOCK
-->
<div id="beginner1">
<table>
<tr>
<td style="font-weight: bold; font-size: 20px; text-align: left; width: 80%;">Beginner 1 div intended to test</td>
</tr>
</table>
<hr/>
<table width="100%">
<tr>
<td style="width: 50%;"><ul>
<li>List Item</li>
</ul></td>
<td style="width: 50%;">Second Column</td>
</tr>
<tr>
<td style="height: 1000px; vertical-align: bottom;">End</td>
</tr>
</table>
</div>
<div id="adept1">
<p id="ap"></p>
<table>
<tr>
<td>Adept 1 div intended to test </td>
</tr>
</table>
</div>
<div id="intermediate1">
<p id="ap"></p>
<table>
<tr>
<td>Intermediate 1 div intended to test </td>
</tr>
</table>
</div>
<div id="bdy" style="text-align: center;">
<p style="font-size: 12px">Please select a radio button.</p>
</div>
</form>
</body>

Related

How to set background-color on every page in wkhtmltopdf?

Here's the generated pdf of wkhtmltopdf the second page doesn't have a background color and border. I want to apply background-color and border for every page using laravel blade and wkhtmltopdf.
Here's the body and footer CSS:
body {
/* box-sizing: border-box; */
font-family: "Open Sans", sans-serif;
padding-top: 8px;
padding-bottom: 0;
margin-bottom: 0;
}
.container {
background-color: #e8e8e8 !important;
width: 99.2%;
height: 759px !important;
height: auto;
border-top: 6px solid #383434;
border-left: 6px solid #383434;
border-right: 6px solid #383434;
padding: 10px 0px 10px 0px;
}
.content {
width: 306px !important;
min-height: 350px;
/* height: 753px !important; */
background-color: #474747;
display: flex;
flex-direction: row;
display: -webkit-box; /* wkhtmltopdf uses this one */
color: white;
border-radius: 2%;
margin-left: 8px;
margin-right: 4px;
font-weight: 400;
font-family: "Open Sans", sans-serif;
font-size: 12px;
page-break-inside: avoid;
}
.footer {
background-color: black;
width: 100%;
}
.top-section {
background-color: #383434;
padding-top: 10px;
padding-bottom: 10px;
padding-right: 10px;
padding-left: 10px;
color: white;
position: relative;
display: table;
width: 100.1%;
font-family: "Open Sans", sans-serif;
font-weight: 700;
font-size: 16px;
}
.bottom-section {
display: flex;
display: -webkit-box; /* wkhtmltopdf uses this one */
flex-direction: row;
color: white;
flex-wrap: wrap;
-webkit-box-pack: center; /* wkhtmltopdf uses this one */
justify-content: center;
height: 175px;
}
Here's the body laravel blade:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?
family=Open+Sans:wght#400;700&display=swap" rel="stylesheet">
<title>Proof of Order</title>
</head>
<body>
<!-- content -->
<div class="container">
<table class="ct-table">
<tr>
<td>
<div class="content">
<div class="left-content">
<p>Product(s): 1,2,3,4</p>
<h>Material Type:</h>
<div class="type">
<div class="box"></div>
<div><p>Windows Graphics</p></div>
</div>
<p>Dimensions:</p>
<ul class="dimensions">
<li>1 - W: 49.5"| H: 54.25"</li>
<li>2 - W: 49.5"| H: 54.25"</li>
<li>3 - W: 49.5"| H: 35.25"</li>
<li>4 - W: 49.5"| H: 35.25"</li>
</ul>
<p>Options:</p>
<!--Addition of option list in table layout-->
<table class="option-list" id="option-list">
<tr>
<td> <img src="price_point.svg" alt=""
class="option-logo"></td>
<td> <p>Price Point 2/$4.00</p></td>
</tr>
</table>
<table class="option-list">
<tr>
<td> <img src="comments.svg" alt=""
class="option-logo"></td>
<td> <p>Comments/Text: "Thanks for Shopping"</p>
</td>
</tr>
</table>
<table class="option-list">
<tr>
<td><img src="logo.svg" alt="" class="option-
logo"></td>
<td><p>Logo: logo.png</p></td>
</tr>
</table>
</ul>
<!--Addition of quanity count in table layout-->
<table class="quantity-table">
<tr>
<td><p>Quantity: 2</p></td>
<td> <img src="qty.svg" alt="" class="option-logo"></td>
</tr>
</table>
</div>
<div class="right-content">
<img src="me_1.jpg" alt="">
</div>
</div>
</td>
</tr>
</table>
</div>
</body>
</html>
Here's the php code:
$footerHtml = view()->make('admin.reports.final_proof.footer', compact('data'))-
>render();
$pdf = PDF::loadView('admin.reports.final_proof.pdf', compact('data', 'products',
'no_of_products'))
->setOptions(array(
'page-size' => 'A4',
'margin-top' => 0,
'margin-right' => 0,
'margin-left' => 0,
'margin-bottom' => 48,
'encoding' => 'UTF-8',
'footer-html' => $footerHtml,
'enable-javascript' => true,
'page-width'=>'279.5',
'page-height'=>'216.0'
));
Here's the footer laravel blade:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Proof of Order</title>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght#400;700&display=swap" rel="stylesheet">
<script>
var pdfInfo = {};
var x = document.location.search.substring(1).split('&');
for (var i in x) {
var z = x[i].split('=', 2);
pdfInfo[z[0]] = unescape(z[1]);
}
function getPdfInfo() {
var page = pdfInfo.page || 1;
var pageCount = pdfInfo.topage || 1;
document.getElementById('pdfkit_page_current').textContent = page;
document.getElementById('pdfkit_page_count').textContent = pageCount;
}
</script>
</head>
<body onload="javascript:getPdfInfo()" style="margin-top:0;padding-top:0;">
<div class="footer">
<div class="top-section">
<p>ORDER# MEC_EO-150454_AbingstonStopNGas</p>
<p>PAGE 1 OF 1</p>
<p>Designer: Ryan Test</p>
</div>
<div class="bottom-section">
<div class="logo">
<img src="monster_energy.png" alt="">
</div>
<div class="order">
<!--Changing into table layout since flex/grid feature doesn't work-->
<table class="option-list" id="option-list">
<tr>
<td> <div class="order-type">
<img src="man.png" alt="">
<p>Ordered By</p>
</div></td>
<td> <div class="text-content">
<p>Johnboy VanSampson</p>
<p>johnboy#cocacola.com</p>
<p>720-555-5698</p>
</div></td>
</tr>
</table>
</div>
<div class="location">
<!--Changing into table layout since flex/grid feature doesn't work-->
<table class="option-list" id="option-list">
<tr>
<td> <div class="order-type">
<img src="shop.png" alt="">
<p>Project <br> Location</p>
</div></td>
<td> <div class="text-content">
<p>Abington Stop N Gas</p>
<p>Attn:Johnboy VanSampson</p>
<p>1562 Hiltop Pallace Blvd.</p>
<p>Swingtown, NJ 77895</p>
</div></td>
</tr>
</table>
</div>
<div class="shipping">
<!--Changing into table layout since flex/grid feature doesn't work-->
<table class="option-list" id="option-list">
<tr>
<td> <div class="order-type">
<img src="car.png" alt="">
<p>Shipping</p>
</div></td>
<td> <div class="text-content">
<p>Abington Stop N Gas</p>
<p>Attn:Johnboy VanSampson</p>
<p>1562 Hiltop Pallace Blvd.</p>
<p>Swingtown, NJ 77895</p>
</div></td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>

Function clearing the div in vertical tabs not working

I'm learning javascript and I have a problem with a div... On my CV there are four divs that should be hidden and only the active div should be visible.
All fine with that but at the beginning, all is mixed together. I would like instead that only the general tabcontent will be visible...
Can you help with that?
https://github.com/DevFrancoisXavierPelletier/CV
if you want do this with js code ,just add this code somewhere in index.html :
<script>
openTab(event, 'General');
</script>
but it is not right way ! the best way and lightweight way is handle with css , put this css class in bottom of style.css :
.tabcontent{
display: none;
}
.tabcontent:first-child{
display: block;
}
In your CSS just add...
.tabcontent{
display: none;
}
#General {
display: block;
}
Then just add class active to the first link.
You can use display property in CSS
#General {
display: block;
}
.tabcontent{
display: none;
}
Also add active class on the first button (General).. so you will see General button in white (as selected)..
<button class="tablinks active" onclick="openTab(event, 'General')">Général</button>
function openTab(evt, tab) {
// Declare all variables
var i, tabcontent, tablinks;
// Get all elements with class="tabcontent" and hide them
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
// Get all elements with class="tablinks" and remove the class "active"
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
// Show the current tab, and add an "active" class to the link that opened the tab
document.getElementById(tab).style.display = "block";
if(evt){
evt.currentTarget.className += " active";
}
}
html, body{
margin: 0;
padding: 0;
top: 0;
}
#sidebar{
background: #c5deea;
background: -moz-linear-gradient(top, #c5deea 0%, #8abbd7 31%, #066dab 100%);
background: -webkit-linear-gradient(top, #c5deea 0%,#8abbd7 31%,#066dab 100%);
background: linear-gradient(to bottom, #c5deea 0%,#8abbd7 31%,#066dab 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c5deea', endColorstr='#066dab',GradientType=0 );
position: fixed;
z-index: 1;
top: 0;
left: 0;
top: 0;
height:100%;
width:20%;
}
#photo{
width:100%;
height:40%;
}
.sidenav button {
width: 100%;
height: 75px;
padding: 6px 8px 6px 16px;
font-family: sans-serif;
font-size: 25px;
text-decoration: none;
text-align: center;
color: darkslategrey;
background-color: transparent;
border: none;
outline: none;
display: block;
}
.sidenav button:hover {
background-color: navajowhite;
}
.sidenav button.active {
background-color: white;
}
.tabcontent{
background: transparent;
position: fixed;
z-index: 1;
top: 0;
left: 20%;
top: 0;
padding: 2.5%;
height:97.5%;
width:75%;
}
h3{
font-family: sans-serif;
}
table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
border: 1px solid #ddd;
border-radius: 25px;
font-family: sans-serif;
}
th, td {
text-align: left;
padding: 16px;
}
.bold {
background-color:antiquewhite;
font-weight: bold;
}
#General {
display: block;
}
.tabcontent{
display: none;
}
.container {
width: 100%; /* Full width */
background-color: #ddd; /* Grey background */
}
.skills {
text-align: right; /* Right-align text */
padding: 10px; /* Add some padding */
color: white; /* White text color */
}
.html {width: 90%; background-color: #4CAF50;} /* Green */
.css {width: 80%; background-color: #2196F3;} /* Blue */
.js {width: 65%; background-color: #f44336;} /* Red */
.php {width: 60%; background-color: #808080;} /* Dark Grey */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8" />
<title>My CV online</title>
<link href="style.css" rel="stylesheet" />
</head>
<body>
<div id="sidebar">
<div id="photo">
<img src="https://raw.githubusercontent.com/DevFrancoisXavierPelletier/CV/master/image.png" alt="Francois Xavier Pelletier" style="width:75%;height:75%; padding: 12.5%;">
</div>
<div class="sidenav">
<button class="tablinks active" onclick="openTab(event, 'General')">Général</button>
<button class="tablinks" onclick="openTab(event, 'Experience')">Expérience</button>
<button class="tablinks" onclick="openTab(event, 'Studies')">Etudes</button>
<button class="tablinks" onclick="openTab(event, 'Skills')">Compétences</button>
</div>
</div>
<div id="General" class="tabcontent">
<h3>Informations générales</h3>
<table class="table">
<tr>
<td class="bold">Prénom</td>
<td class="bold">Nom</td>
<td class="bold">Age</td>
</tr>
<tr>
<td>François Xavier</td>
<td>Pelletier</td>
<td>29 ans</td>
</tr>
<tr>
<td class="bold">Adresse</td>
<td class="bold">Code Postal</td>
<td class="bold">Ville</td>
</tr>
<tr>
<td>52 rue Madame de Maintenon</td>
<td>78120</td>
<td>Rambouillet</td>
</tr>
</table>
<h3>Contact</h3>
<table class="table">
<tr>
<td class="bold">Téléphone</td>
<td class="bold">Email</td>
</tr>
<tr>
<td>+33 **********</td>
<td>dev.francois.xavier.pelletier#gmail.com</td>
</tr>
</table>
<h3>Mobilité</h3>
<table class="table">
<tr>
<td class="bold">Permis</td>
<td class="bold">Véhicule</td>
</tr>
<tr>
<td>B</td>
<td>Non</td>
</tr>
</table>
</div>
<div id="Experience" class="tabcontent">
<h3>Experience</h3>
<table class="table">
<tr>
<td class="bold">Nom du projet</td>
<td class="bold">Adresse en ligne</td>
<td class="bold">Contact</td>
</tr>
<tr>
<td>Eagle-dev</td>
<td>www.eagle-dev.com</td>
<td>dev.francois.xavier.pelletier#gmail.com</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
<div id="Studies" class="tabcontent">
<h3>Etudes</h3>
<table class="table">
<tr>
<td class="bold">Année</td>
<td class="bold">Nom de l'établissement</td>
<td class="bold">Statut</td>
</tr>
<tr>
<td>2018-2019</td>
<td>IFOCOP (Paris) - Développeur intégrateur web</td>
<td>En cours</td>
</tr>
<tr>
<td>2014-2017</td>
<td>War Studies Academy (Varsovie) - Relations internationales</td>
<td>Licence obtenue</td>
</tr>
</table>
</div>
<div id="Skills" class="tabcontent">
<h3>Compétences</h3>
<p>HTML</p>
<div class="container">
<div class="skills html">90%</div>
</div>
<p>CSS</p>
<div class="container">
<div class="skills css">80%</div>
</div>
<p>JavaScript</p>
<div class="container">
<div class="skills js">40%</div>
</div>
<p>PHP</p>
<div class="container">
<div class="skills php">0%</div>
</div>
</div>
<script src="myScript1.js"></script>
</body>

change css using JS

I am trying to call a JS event, depending on a button press, (there are three buttons) i want some CSS to change the font-size (differently for each button), but what i have does not work. can anyone help?
body {
background-image: url("back2.jpg");
background-size: 100% 100%;
}
.buttonSize1{
font-size: 3px;
}
.buttonsize2{
font-size: 26px;
}
.buttonsize3{
font-size: 45px;
}
.fixed {
position: fixed;
Top: 100px;
Left: 0px;
width: 150px;
border: #0E6B5B 3px solid;
background-color: #FF9933;
}
p {
padding-left: 100px;
}
td {
padding-top: 10px;
padding-bottom: 50px;
text-align: center;
font-family: "Lucida Console", Monaco, monospace;
}
.opac {
opacity: 0.5;
filter: alpha(opacity=10); /* For IE8 and earlier */
}
.opac:hover {
opacity: 1.0;
filter: alpha(opacity=100); /* For IE8 and earlier */
}
.MainTable{
border: #0E6B5B 3px solid;
background-color: #FF9933;
width: 50%;
padding-top: 10px;
padding-left: 100px;
padding-right: 100px;
}
table.center {
width:70%;
margin-left:15%;
margin-right:15%;
}
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="7Global.css"/>
<title> CSGO </title>
<script>
function textSizeS(){
document.getElementById("Maintbl").style.font-size = "3px";
}
function textSizeM(){
document.getElementById("Maintbl").style.font-size = "26px";
}
function textSizeL(){
document.getElementById("Maintbl").style.font-size = "45px";
}
</script>
</head>
<body>
<table class = "fixed opac">
<tr>
<td>Home </td>
</tr>
<tr>
<td>Maps </td>
</tr>
<tr>
<td>Counter <br/> Terrorists </td>
</tr>
<tr>
<td>Terrorists </td>
</tr>
<tr>
<td>About </td>
</tr>
<tr>
<td><button class="buttonsize1" onclick="textSizeS()">A</button> <button class= "buttonsize2" onclick="textSizeM()">A</button> <button class= "buttonsize3" onclick="textSizeL()">A</button></td>
</tr>
</table>
<br/>
<br/>
<br/>
<table id = "Maintbl" class = "MainTable center">
<td> CS:GO’s Next Major </td>
<tr>
<td>
Europe Region – Hosted by DreamHack
</td>
</tr>
</table>
<table id = "Maintbl" class = "MainTable center">
<td> Operation Wildfi </td>
<tr>
<td>
What’s new? Visit the page below for details!
</td>
</tr>
</table>
<table id = "Maintbl" class = "MainTable center">
<td> We made some adjustments to rifles recently... </td>
<tr>
<td>
nCS:GO. M
</td>
</tr>
</table>
</body>
</html>
Like this, where I added a wrapper div to set the font size to, corrected the syntax error from ...style.font-size to ...style.fontSize and removed that duplicated id's (as they should be unique).
function textSizeS(){
document.getElementById("MaintblWrapper").style.fontSize = "3px";
}
function textSizeM(){
document.getElementById("MaintblWrapper").style.fontSize = "26px";
}
function textSizeL(){
document.getElementById("MaintblWrapper").style.fontSize = "45px";
}
body {
background-image: url("back2.jpg");
background-size: 100% 100%;
}
.buttonSize1{
font-size: 3px;
}
.buttonsize2{
font-size: 26px;
}
.buttonsize3{
font-size: 45px;
}
.fixed {
position: fixed;
Top: 100px;
Left: 0px;
width: 150px;
border: #0E6B5B 3px solid;
background-color: #FF9933;
}
p {
padding-left: 100px;
}
td {
padding-top: 10px;
padding-bottom: 50px;
text-align: center;
font-family: "Lucida Console", Monaco, monospace;
}
.opac {
opacity: 0.5;
filter: alpha(opacity=10); /* For IE8 and earlier */
}
.opac:hover {
opacity: 1.0;
filter: alpha(opacity=100); /* For IE8 and earlier */
}
.MainTable{
border: #0E6B5B 3px solid;
background-color: #FF9933;
width: 50%;
padding-top: 10px;
padding-left: 100px;
padding-right: 100px;
}
table.center {
width:70%;
margin-left:15%;
margin-right:15%;
}
<table class = "fixed opac">
<tr>
<td>Home </td>
</tr>
<tr>
<td>Maps </td>
</tr>
<tr>
<td>Counter <br/> Terrorists </td>
</tr>
<tr>
<td>Terrorists </td>
</tr>
<tr>
<td>About </td>
</tr>
<tr>
<td><button class="buttonsize1" onclick="textSizeS()">A</button> <button class= "buttonsize2" onclick="textSizeM()">A</button> <button class= "buttonsize3" onclick="textSizeL()">A</button></td>
</tr>
</table>
<br/>
<br/>
<br/>
<div id = "MaintblWrapper">
<table class = "MainTable center">
<td> CS:GO’s Next Major </td>
<tr>
<td>
Europe Region – Hosted by DreamHack
</td>
</tr>
</table>
<table class = "MainTable center">
<td> Operation Wildfi </td>
<tr>
<td>
What’s new? Visit the page below for details!
</td>
</tr>
</table>
<table class = "MainTable center">
<td> We made some adjustments to rifles recently... </td>
<tr>
<td>
nCS:GO. M
</td>
</tr>
</table>
</div>
fontSize not font-size
Demo https://jsfiddle.net/eLrdeagq/
function textSizeS(){
document.getElementById("Maintbl").style.fontSize = "3px";
}

CSS issue, need help in correcting this issue

I have 12 squares in which number 6 has scrollable content. but will not align up properly in the square, its all over the place. Adjusting the screen size creates other issues. This text shows differently in chrome and IE. I need help in aligning the text in square 6 and keeping it there no matter the screen size or browser.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<META HTTP-EQUIV=Refresh CONTENT='300; URL=pWebMonitor.html'>
<title>Web-Monitor</title>
<link rel="stylesheet" href="webMonitor.css">
<script src="jquery-2.1.4.min.js"></script>
<script type="text/javascript">
/*Example message arrays for the two demo scrollers*/
var pausecontent=new Array()
pausecontent[0]='<li><span class="statusGreen">-000-</span> ....Trying to Load collected Data....</li>'
pausecontent[1]='<li><span class="statusGreen">-000-</span> ....Trying to Load collected Data....</li>'
pausecontent[2]='<li><span class="statusGreen">-000-</span> ....Trying to Load collected Data....</li>'
var pausecontent2=new Array()
</script>
<script type="text/javascript">
/***********************************************
* Pausing up-down scroller- (c) Dynamic Drive (www.dynamicdrive.com)
* Please keep this notice intact
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/
function pausescroller(content, divId, divClass, delay){
this.content=content //message array content
this.tickerid=divId //ID of ticker div to display information
this.delay=delay //Delay between msg change, in miliseconds.
this.mouseoverBol=0 //Boolean to indicate whether mouse is currently over scroller (and pause it if it is)
this.hiddendivpointer=1 //index of message array for hidden div
document.write('<div id="'+divId+'" class="'+divClass+'" style="position: relative;overflow: hidden"><div class="innerDiv" style="position: absolute; width: auto;" id="'+divId+'1">'+content[0]+'</div><div class="innerDiv" style="position: absolute; width: auto; visibility: hidden" id="'+divId+'2">'+content[1]+'</div></div>')
var scrollerinstance=this
if (window.addEventListener) //run onload in DOM2 browsers
window.addEventListener("load", function(){scrollerinstance.initialize()}, false)
else if (window.attachEvent) //run onload in IE5.5+
window.attachEvent("onload", function(){scrollerinstance.initialize()})
else if (document.getElementById) //if legacy DOM browsers, just start scroller after 0.5 sec
setTimeout(function(){scrollerinstance.initialize()}, 500)
}
// -------------------------------------------------------------------
// initialize()- Initialize scroller method.
// -Get div objects, set initial positions, start up down animation
// -------------------------------------------------------------------
pausescroller.prototype.initialize=function(){
this.tickerdiv=document.getElementById(this.tickerid)
this.visiblediv=document.getElementById(this.tickerid+"1")
this.hiddendiv=document.getElementById(this.tickerid+"2")
this.visibledivtop=parseInt(pausescroller.getCSSpadding(this.tickerdiv))
//set width of inner DIVs to outer DIV's width minus padding (padding assumed to be top padding x 2)
this.visiblediv.style.width=this.hiddendiv.style.width=this.tickerdiv.offsetWidth-(this.visibledivtop*2)+"px"
this.getinline(this.visiblediv, this.hiddendiv)
this.hiddendiv.style.visibility="visible"
var scrollerinstance=this
document.getElementById(this.tickerid).onmouseover=function(){scrollerinstance.mouseoverBol=1}
document.getElementById(this.tickerid).onmouseout=function(){scrollerinstance.mouseoverBol=0}
if (window.attachEvent) //Clean up loose references in IE
window.attachEvent("onunload", function(){scrollerinstance.tickerdiv.onmouseover=scrollerinstance.tickerdiv.onmouseout=null})
setTimeout(function(){scrollerinstance.animateup()}, this.delay)
}
// -------------------------------------------------------------------
// animateup()- Move the two inner divs of the scroller up and in sync
// -------------------------------------------------------------------
pausescroller.prototype.animateup=function(){
var scrollerinstance=this
if (parseInt(this.hiddendiv.style.top)>(this.visibledivtop+5)){
this.visiblediv.style.top=parseInt(this.visiblediv.style.top)-5+"px"
this.hiddendiv.style.top=parseInt(this.hiddendiv.style.top)-5+"px"
setTimeout(function(){scrollerinstance.animateup()}, 50)
}
else{
this.getinline(this.hiddendiv, this.visiblediv)
this.swapdivs()
setTimeout(function(){scrollerinstance.setmessage()}, this.delay)
}
}
// -------------------------------------------------------------------
// swapdivs()- Swap between which is the visible and which is the hidden div
// -------------------------------------------------------------------
pausescroller.prototype.swapdivs=function(){
var tempcontainer=this.visiblediv
this.visiblediv=this.hiddendiv
this.hiddendiv=tempcontainer
}
pausescroller.prototype.getinline=function(div1, div2){
div1.style.top=this.visibledivtop+"px"
div2.style.top=Math.max(div1.parentNode.offsetHeight, div1.offsetHeight)+"px"
}
// -------------------------------------------------------------------
// setmessage()- Populate the hidden div with the next message before it's visible
// -------------------------------------------------------------------
pausescroller.prototype.setmessage=function(){
var scrollerinstance=this
if (this.mouseoverBol==1) //if mouse is currently over scoller, do nothing (pause it)
setTimeout(function(){scrollerinstance.setmessage()}, 100)
else{
var i=this.hiddendivpointer
var ceiling=this.content.length
this.hiddendivpointer=(i+1>ceiling-1)? 0 : i+1
this.hiddendiv.innerHTML=this.content[this.hiddendivpointer]
this.animateup()
}
}
pausescroller.getCSSpadding=function(tickerobj){ //get CSS padding value, if any
if (tickerobj.currentStyle)
return tickerobj.currentStyle["paddingTop"]
else if (window.getComputedStyle) //if DOM2
return window.getComputedStyle(tickerobj, "").getPropertyValue("padding-top")
else
return 0
}
</script>
</head>
<body>
<div id="squareBox">
<p id="lastRun">Management Dashboard<span style="font-size: small;">©™ (v1.14)<Strong> <a href="../WebMon/WebMonitorHelp.html" target="_blank" >☂</a></Strong></span><br/>
</p>
<div id="square1" class="squared">
<span class="sqHeader"> 1 Monitor</span>
<table id="tb_1">
<th>Response</th>
<th>Longest-Queued</th>
<th>Status</th>
<th>#</th>
<tbody id="data1"></tbody>
</table>
</div>
<div id="square2" class="squared">
<span class="sqHeader">2 Monitor</span>
<table id="tb_2">
<th>Response</th>
<th>Longest-Queued</th>
<th>Status</th>
<th>#</th>
<tbody id="data2"></tbody>
</table>
</div>
<div id="square3" class="squared">
<span class="sqHeader">3 Monitor</span>
<table id="tb_3">
<th>Type</th>
<th>Longest-Queued</th>
<th>Status</th>
<th>#</th>
<tbody id="data3"></tbody>
</table>
</div>
<div id="square4" class="squared">
<span class="sqHeader" id="Kaiser">4 Monitor</span>
<table id="tb_4">
<th>Type</th>
<th>UnTouched Ticket</th>
<th>Status</th>
<th>#</th>
<tbody id="data4"></tbody>
</table>
</div>
<div id="square5" class="squared">
<span class="sqHeader">5 Monitor</span>
<table id="tb_5">
<th>Minutes</th>
<th>Longest-Queued</th>
<th>Status</th>
<th>#</th>
<tbody id="data5"></tbody>
</table>
</div>
<div id="square6" class="squared">
<span class="sqHeader">6 Monitor</span>
<table id="tb_6">
<tbody id="pscroller1"></tbody>
</table>
</div>
<div id="square7" class="squared">
<span class="sqHeader">7 Monitor</span>
<table id="tb_7">
<th>Response</th>
<th>Longest-Queued</th>
<th>Status</th>
<th>#</th>
<tbody id="data7"></tbody>
</table>
</div>
<div id="square8" class="squared">
<span class="sqHeader">8 Monitor</span>
<table id="tb_8">
<th>Response</th>
<th>Longest-Queued</th>
<th>Status</th>
<th>#</th>
<tbody id="data8"></tbody>
</table>
</div>
<div id="square9" class="squared">
<span class="sqHeader">9 Monitor</span>
<table id="tb_9">
<th>Response</th>
<th>Longest-Queued</th>
<th>Status</th>
<th>#</th>
<tbody id="data9"></tbody>
</table>
</div>
<div id="square10" class="squared">
<span class="sqHeader">#10 Monitor</span>
<table id="tb_10">
<th>Response</th>
<th>Longest-Queued</th>
<th>Status</th>
<th>#</th>
<tbody id="data10"></tbody>
</table>
</div>
<div id="square11" class="squared">
<span class="sqHeader">#11 Monitor</span>
<table id="tb_11">
<th>Response</th>
<th>Longest-Queued</th>
<th>Status</th>
<th>#</th>
<tbody id="data11"></tbody>
</table>
</div>
<div id="square12" class="squared">
<span class="sqHeader">#12 Monitor</span>
<table id="tb_12">
<th>Response</th>
<th>Longest-Queued</th>
<th>Status</th>
<th>#</th>
<tbody id="data12"></tbody>
</table>
</div>
</div>
<script type="text/javascript">
//new pausescroller(name_of_message_array, CSS_ID, CSS_classname, pause_in_miliseconds)
new pausescroller(pausecontent, "pscroller1", "someclass", 5000)
document.write("<br />")
//new pausescroller(pausecontent2, "pscroller2", "someclass", 2000)
</script>
</body>
</html>
//CSS
body {
background: #d0e4fe;
font-family: 'HP Simplified', Arial, Verdana, Helvetica, Sans-serif;
}
p#lastRun{
font-family: Garamond, 'Times New Roman', Georgia, serif;
font-variant: small-caps;
//font-weight: bold;
font-size:1.5em;
text-align:center;
background: black;
color: white;
}
h1 {
color: orange;
text-align: center;
}
a {color:#7FFFD4;
}
#mHeader, #mHeader2{
text-align: center;
font: Georgia, Times, serif;
font-size: small;
//font-weight: bold;
}
/* squares configuration */
#squareBox {
margin-left: auto;
margin-right: auto;
width: 1568px;
height: 700px;
//border: 2px solid #73AD21;
//border-radius: 10px;
//background: url(paper.gif);
background: tan;
}
.squared {
position: relative;
float: left;
background: WhiteSmoke;
width: 386px;
height: 203px;
outline-style: solid;
outline-width: 1px;
outline-color: green;
margin-left: 5px;
margin-top: 5px;
text-align: center;
}
#square1{
margin-top: -18px;
}
#square2{
margin-top: -18px;
}
#square3{
margin-top: -18px;
}
#square4{
margin-top: -18px;
}
#square5{
}
#square6{
}
#square7{
}
#square8{
}
#square9{
}
#square10{
}
#square11{
}
#square12{
}
.sqHeader{
font-weight: bold;
font-variant: small-caps;
text-align: center;
}
/* Table configuration */
th{
font-size: small;
font-variant:small-caps;
background: Wheat;
}
table, td, th{
margin: 1em; border-collapse: collapse;
border: 1px solid black;
padding: .15em;
margin-top: 2px;
font-size: 100%;
font-weight: bold;
margin-left: auto;
margin-right: auto;
}
td {
font-size:87%;
}
td #pscroller1 {
//font-size: 87%;
}
tbody tr:nth-child(even) {
background: #F8F8F8 ;
}
tbody tr:nth-child(odd) {
background: #99FFCC;
}
tbody tr:hover {
background: #c9f;
}
#dataContainter, #rightNavBar, #leftNavBar{
height: 580px;
outline-style: solid;
outline-width: 1px;
outline-color: green;
}
#leftNavBar , #rightNavBar {
width: 146px;
background: light-gray;
font-size: 74%;
}
#leftNavBar {
float: left;
}
#rightNavBar {
float: right;
}
#filterButton{
margin-left: auto;
margin-right: auto;
}
.statusGray {
background: gray;
}
.statusRed {
background: red;
color: white;
font-weight: bold;
text-decoration: blink;
}
.statusYellow{
background: yellow;
color: black;
font-weight: bold;
}
.statusGreen{
background: green;
color: white;
font-weight: bold;
}
.statusBlue{
background: blue;
color: white;
font-weight: bold;
}
.regionRed {
background: #FF6600;
}
#displayResults tr:hover {
background: #FFFF00;
}
#customers tr.alt td {
color: #EAF2D3;
background: #000000;
};
input:focus {
background: yellow;
}
button:hover {
background: blue;
color: white
}
.dEntry:focus, .qSearch:focus {
background: #99FFFF;
}
.dEntry, .data {
font-family: 'HP Simplified', Arial, Verdana, Helvetica, Sans-serif;
//font-weight: bold;
//font-size: 80%;
//color: blue;
}
/*****************************************************
* generic styling for ALS elements: outer container
******************************************************/
/*Example CSS for the two demo scrollers*/
div#pscroller1 {
position: absolute;
width: 340px;
height: 160px;
bottom: 405px;
padding: 5px;
left: 465px;
//border: 1px solid black;
}
#pscroller2{
width: 700px;
height: 20px;
border: 1px solid black;
padding: 3px;
}
#pscroller1 li, #pscroller1 a{
text-decoration: none;
font-size: 89%;
font-variant:small-caps;
font-weight: bold;
color: black;
}
.someclass{ //class to apply to your scroller(s) if desired
}
I assumed by "scrollable content" you mean automatically moving across the screen. What about using a marquee library?
Here's a fiddle I put together on your grid: https://jsfiddle.net/7gz5x1mk/1/
using the jquery marquee plugin http://aamirafridi.com/jquery/jquery-marquee-plugin#examples
HTML
<div id="square6" class="squared" style="border: 1px solid red;">
<span class="sqHeader">6 Monitor</span>
<div class="marquee">jQuery marquee is the best <b>marquee</b> plugin in the world</div>
</div>
HTML for vertical scrolling
<div class="marquee ver" data-direction='up' data-duration='1000' data-pauseOnHover="true">
jQuery marquee is the best marquee plugin in the world. jQuery marquee is the best marquee plugin in the world <b>end</b>
</div>
Javascript
$('.marquee').marquee();
CSS
.marquee {
width: 300px;
overflow: hidden;
border: 1px solid #ccc;
background: #ccc;
}

Element OverLap: DropDown Menu not overlapping the contents, instead pushes them down

I have a drop Down Menu, which when clicked upon, pushes the content below it to make space for its items.
However I would like for the drop down to overlap the contents below without pushing it down.
I tried a couple of things but they didnt work including z-index:1; on the drop down list.
<td valign="top" class="navigationLink" style="width: 20%" >
<div class="reportDiv">
<h:outputLabel value="Report" rendered="#{welcomeBean.report}" class="reportMenu"/>
<ul class="reportUL" >
<li><h:link value="Project Wise Report" outcome="/webpages/ProjectWiseReport.xhtml" rendered="true" class="reportItems"/></li>
<li><h:link value="Employee Wise Report" outcome="/webpages/EmployeeWiseReport.xhtml" rendered="true" class="reportItems"/></li>
</ul>
</div>
</td>
This is the drop down. This forms one row of the table in which i have placed the contents of the webpage.
When i click on My Account label, the ul drops down and the height of the table's row increases and pushes the row below it down.
I would like for the drop down to overlap the next row contents. How should i do that?
Some more code below and above it
<div class="container">
<!-- this is where the webpages starts from. The below table is where the main contents are -->
<table border="0" cellpadding="2" style="width: 100%; ">
<tr style="background-color: #95D0CA;">
<!-- contains header of page -->
<td colspan="2">
</td>
</tr>
<tr style=" position: relative; z-index:1;">
<td colspan="2" valign="top">
<!-- THIS IS WHERE I HAVE ADDED A NEW TABLE TO CONTAIN THE MENU ITEMS. THE DROP DOWN IS A (td) OF THIS TABLE -->
<table border="0" cellspacing="2" cellpadding="2" class="templateBody" style="width: 100%;">
<tr >
<td>
<!-- other menu items -->
</td>
<!-- DROP DOWN -->
<td valign="top" class="navigationLink" style="width: 20%" >
<div class="reportDiv">
<h:outputLabel value="Report" rendered="#{welcomeBean.report}" class="reportMenu"/>
<ul class="reportUL" >
<li><h:link value="Project Wise Report" outcome="/webpages/ProjectWiseReport.xhtml" rendered="true" class="reportItems"/></li>
<li><h:link value="Employee Wise Report" outcome="/webpages/EmployeeWiseReport.xhtml" rendered="true" class="reportItems"/></li>
</ul>
</div>
</td>
</tr>
</table>
</td>
</tr>
<!-- NOW the Row which gets pushed down appears -->
<tr>
<td colspan="2" valign="top" style="width: 100%">
<div class="contentBody">
</div>
</td>
</tr>
</table>
</div>
I will show some snaps of how it looks. This might guide you guys to understand my problem.
Below an image of before drop down expands:
!(http://imgur.com/QauRGVc)
image after drop down expands:
!(http://imgur.com/VMlcCbp)
I have tried using jsFiddle as many of you suggested, but it wasnt showing my code as it is. So that was not serving the purpose. I hope this edit helps.
Please Help me. And do let me know if you need additional codes.
** Thank You in Advance :)**
**Edit**
Adding CSS and JAVA SCRIPT CODES
CSS CODE for the code i have provided
.navigationLink a
{
background-color: #95D0CA;
margin-top: 5px;
margin-bottom: 5px;
}
.navigationLink label
{
background-color: #95D0CA;
margin-top: 5px;
margin-bottom: 5px;
}
.reportMenu
{
text-decoration: none;
color: #216961;
font-weight: bold;
font-size: 15px;
display: block;
padding: 10px 5px 10px 5px;
text-align: center;
cursor: pointer;
}
.reportItems
{
color: white;
text-decoration: none;
font-weight: 400;
font-size: 15px;
padding: 10px;
background-color: #95D0CA;
text-align: center;
}
.container
{
width: 1000px;
background-color: whitesmoke;
padding: 10px;
margin: 50px auto;
position: relative;
}
.templateBody
{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
width: auto;
}
.templateBody td
{
text-align:center;
}
.contentBody
{
background-color: whitesmoke;
margin: 10px 0px 10px 0px;
width: 100%;
position: relative;
clear: both;
}
.reportUL
{
list-style-type: none;
position: absolute;
z-index: 1;
padding: 0;
margin: 0;
text-align: left;
}
.reportUL li
{
background-color: #95D0CA;
}
JQUERY CODE
$(document).ready(function()
{
$(".img, #img").show();
$("#loginWindow").hide();
$("#loginSlide").show();
$(".reportItems").hide();
$(".reportItems1").hide();
$("#loginSlide").click(function()
{
$("#loginWindow").slideToggle(200);
});
$(".toDate").datepicker();
$(".fromDate").datepicker();
$( "#accordion" ).accordion({
collapsible: true
});
$(".reportDiv").hover(function()
{
$(".reportItems").slideToggle(150);
});
$(".accountDiv").hover(function()
{
$(".reportItems1").slideToggle(150);
});
$(".mainLinks, .reportMenu, .reportItems, .reportMenu1, .reportItems1 ").hover(function()
{
$(this).css({"text-shadow":"0px 0px 5px #FFFFFF"});
}, function(){
$(this).css("text-shadow","none");
});
});
Take a look at following fiddles.
These are some nice drop down menu's you can build
Fidde 1
Fiddle 2
I just need to add the following CSS properties to the class reportUL of the the
un-ordered list (ul) i used to add the drop down menu:
the property required to overlap the drop down on the contents below is:
position: absolute;
and to make it show above / on top of the below content i used:
z-index: 1;
the complete and correct CSS for the class is:
.reportUL
{
list-style-type: none;
position: absolute;
z-index: 1;
padding: 0;
margin: 0;
text-align: left;
}

Categories