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;
}
Related
I essentially have a table with rows and upon clicking a row, I would like a popUp box to appear. I have the div/HTML code for it. However, I am not sure how to implement the backend code of it.
1.) User clicks row
2.) It gets extra info from that row: For example, the row is only displaying $transactionID and $transactionAmount. Then the user clicks a row, a box pops up displaying the $transactionID, $transactionAmount, $transactionDate and $reference
How do I go about doing this? I am completely confused and have attempted to look everywhere to find a solution but can't seem to find any similar examples
document.addEventListener("DOMContentLoaded", () =>{
const rows = document.querySelectorAll("tr[data-href]");
rows.forEach(row => {
row.addEventListener("click", () =>{
// Not sure what to do here
})
})
})
.transfers table{
width: 651px;
margin: 450px auto;
border-collapse: collapse;
}
.transfers tr{
border-bottom: 1px solid #cbcbcb;
}
.transfers th{
font-family: "Montserrat", sans-serif;
}
.transfers th, td{
border: none;
height: 30px;
padding: 3px;
font-size: 20px;
}
.transfers .id{
text-align: left;
}
.transfers .amount{
text-align: right;
}
td{width:217px;}
<div class="transfers">
<table>
<thead>
<tr>
<th class="id">ID</th>
<th class="amount">Amount</th>
</tr>
</thead>
<tbody>
<?php
/* $transactionList = displayTransfers($conn, $accountNumber); - This will display a row */
foreach ($transactionList as $value){
$transactionID = $value['transactionID'];
$transactionAmount = $value['amount'];
$transactionDate = $value['transactionDate'];
$reference = $value['reference'];
echo "<tr data-href='$value'>";
echo "<td style='background-color:$colour'>$transactionID</td>";
echo "<td class='amount' style='background-color: $colour'>$transactionAmount</td>";
echo "</tr>";
}
</tbody>
</table>
</div>
This was my approach but it doesn't work correctly: It won't actually update the values when clicked. Upon clicking a row, it will constantly display the same values from the first row of the table
function displayTransaction() {
var x = document.getElementById("transactionBox");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
.transfers table{
width: 651px;
margin: 450px auto;
border-collapse: collapse;
}
.transfers tr{
border-bottom: 1px solid #cbcbcb;
}
.transfers th{
font-family: "Montserrat", sans-serif;
}
.transfers th, td{
border: none;
height: 30px;
padding: 3px;
font-size: 20px;
}
.transfers .id{
text-align: left;
}
.transfers .amount{
text-align: right;
}
td{width:217px;}
#transactionBox{
position: relative;
display: none;
overflow: hidden;
}
transactionBox_class{
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.8);
transition: opacity 500ms;
opacity: 0;
}
.wrapper{
margin: 150px auto;
padding: 20px;
background: #e7e7e7;
border-radius: 5px;
width: 15%;
position: relative;
transition: all 5s ease-in-out;
}
.wrapper h2{
margin-top: 0;
color: #333;
}
.wrapper .close{
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.wrapper .content{
max-height: 30%;
overflow: auto;
}
.container{
border-radius: 5px;
background-color: #e7e7e7;
padding: 20px 0;
}
form label{
text-transform: uppercase;
font-weight: 500;
letter-spacing: 3px;
}
.container p{
width: 50%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
}
<div class="transfers">
<table>
<thead>
<tr>
<th class="id">ID</th>
<th class="amount">Amount</th>
</tr>
</thead>
<tbody>
<?php
/* $transactionList = displayTransfers($conn, $accountNumber); - This will display a row */
foreach ($transactionList as $value){
$transactionID = $value['transactionID'];
$transactionAmount = $value['amount'];
$transactionDate = $value['transactionDate'];
$reference = $value['reference'];
echo "<tr onclick='displayTransaction()'>";
echo "<td style='background-color:$colour'>$transactionID</td>";
echo "<td class='amount' style='background-color: $colour'>$transactionAmount</td>";
echo "</tr>";
echo "<div class='transactionBox_class' id='transactionBox'>
<div class='wrapper'>
<h2>Transaction Details</h2>
<div class='content'>
<div class='container'>
<form>
<label>Transaction ID:</label>
<p>$transactionID</p>
<label>Amount:</label>
<p>$transactionAmount</p>
<label>Date:</label>
<p>$transactionDate</p>
<label>Reference:</label>
<p>$reference</p>
</form>
</div>
</div>
</div>
</div>";
}
?>
</tbody>
</table>
</div>
</body>
You can create a class called visible or something and add it to the children in the when it gets clicked.
You can use element.classList.add("my-class"); to add a class (.remove("myclass") to remove it)
After analyzing your foreach loop I can see that there are some rows of the table getting populated but the id remains the same for every transaction division that is transactionBox which is why you are getting only first row which is the first element with the id.
Solutions :-
Create a dynamic ID for each of the row's transaction division.
echo "<tr onclick='displayTransaction(".$transactionID.")'>";
echo "<td style='background-color:$colour'>$transactionID</td>";
echo "<td class='amount' style='background-color: $colour'>$transactionAmount</td>";
echo "</tr>";
echo "<div class='transactionBox_class' id='transactionBox_".$transactionID."'>
<div class='wrapper'>
<h2>Transaction Details</h2>
Use custom attribute but yaah unique.
echo "<tr onclick='displayTransaction(this)' transation='".$transactionID."'>";
echo "<td style='background-color:$colour'>$transactionID</td>";
echo "<td class='amount' style='background-color: $colour'>$transactionAmount</td>";
echo "</tr>";
echo "<div class='transactionBox_class' id='transactionBox' transaction-type='".$transactionID"'>
<div class='wrapper'>
<h2>Transaction Details</h2>
The working examples are below.
function showDetails_1(elem){
var actual_elem = "#transaction_"+elem;
console.log(actual_elem)
$(actual_elem).attr("style","display:block");
}
function showDetails_2(elem){
var actual_elem = "[transaction-type="+$(elem).attr("transaction")+"]";
console.log(actual_elem);
$(actual_elem).attr("style","display:block");
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border=3>
<tr>
<th>column 1</th>
<th>column 2</th>
<th>column 3</th>
<th>column 4</th>
</tr>
<tr>
<td>data 1</td>
<td>data 2</td>
<td>data 3</td>
<td><button onclick="showDetails_1(433)">show</button></td></tr>
<tr>
<td colspan="4">
<div class="tansaction" style="display:none" id="transaction_433">
Yo..! here are the details_1
</div></td>
</tr>
<tr>
<td>data 1</td>
<td>data 2</td>
<td>data 3</td>
<td><button onclick="showDetails_2(this)" transaction="433">show</button></td></tr>
<tr>
<td colspan="4">
<div class="tansaction" style="display:none" id="transaction" transaction-type="433">
Yo..! here are the details_2
</div></td>
</tr>
</table>
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>
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>
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 5 years ago.
Improve this question
when a div .TQA-SF006-U-160mm-parent is clicked, I want .div-TQA-SF006-U-160 to be displayed always and .div-TQA-SF006-U-static to be hidden after mouseout function is executed.
Any help would be appreciated.
JSFiddle example here
one easy way to do this is to add a global variable to check, whether that div condition is clicked or not. Then, you execute mouseover and mouseout event, when that div is not clicked
var clicked = false;
$(".TQA-SF006-U-160mm-parent").on('mouseover',function(){
if (clicked == false){
$(".div-TQA-SF006-U-static").hide();
$(".div-TQA-SF006-U-160").show();
}
});
$(".TQA-SF006-U-160mm-parent").on('mouseout', function(){
if (clicked == false){
$(".div-TQA-SF006-U-static").show();
$(".div-TQA-SF006-U-160").hide();
}
});
$(".TQA-SF006-U-160mm-parent").click(function(){
if (clicked == false){
$(".div-TQA-SF006-U-static").hide();
$(".div-TQA-SF006-U-160").show();
clicked = true;
}
else{
$(".div-TQA-SF006-U-static").show();
$(".div-TQA-SF006-U-160").hide();
clicked = false;
}
});
demo : https://jsfiddle.net/xpk82w65/4/
Also, you can attach binding to same elements, without re-calling those elements.
for example :
$(".TQA-SF006-U-160mm-parent").on('mouseover',function(){
})
.on('mouseout', function(){
})
.on('click', function(){
});
demo : https://jsfiddle.net/xpk82w65/6/
You can add a class to track the state of the element you're hovering/clicking, and only use the mouseover/mouseout code if the state is not clicked.
$(document).ready(function() {
var $parent = $(".TQA-SF006-U-160mm-parent"),
$static = $(".div-TQA-SF006-U-static"),
$160 = $(".div-TQA-SF006-U-160");
$parent.on('mouseover', function() {
if (!$(this).hasClass('clicked')) {
$static.addClass('hide');
$160.addClass('show');
}
}).on('mouseout', function() {
if (!$(this).hasClass('clicked')) {
$static.removeClass('hide');
$160.removeClass('show');
}
}).on('click', function() {
$(this).addClass('clicked');
$static.addClass('hide');
$160.addClass('show');
});
});
.div-TQA-SF006 .td-suspension-child-row2:hover {
text-decoration: underline;
}
.table-suspension-list {
border: 0;
}
.table-suspension-list .partNumber {
border: 1px solid #1F497D;
border-bottom: 1px solid white;
background-color: #1F497D;
color: white;
font-family: erasFamily;
font-size: 16px;
font-weight: bold;
line-height: 5px;
padding: 0;
vertical-align: middle;
}
.table-suspension-list .partNumber-bottom {
border: 1px solid #1F497D;
background-color: #1F497D;
color: white;
font-family: erasFamily;
font-size: 16px;
font-weight: bold;
padding: 0;
vertical-align: middle;
}
.table-suspension-list .partNumber div {
color: white;
}
.table-suspension-list .partNumber-bottom div {
color: white;
}
.table-suspension-list .partDescription {
border: 1px solid #1F497D;
color: #1F497D;
font-family: erasFamily;
text-align: center;
font-size: 16px;
font-weight: bold;
line-height: 5px;
padding: 0;
text-transform: uppercase;
vertical-align: middle;
}
.table-suspension-list .partDescription div {
color: #1F497D;
}
.table-suspension tbody {
text-align: center;
vertical-align: middle;
color: #002060;
}
.table-suspension th {
background-color: white;
border: 0;
border-top: 2px solid #002060;
padding: 10px 0 10px 0;
vertical-align: middle;
font-family: erasFamily;
font-size: 26px;
color: #002060;
text-transform: uppercase;
}
.td-suspension-parent {
background-color: #deeaf6;
text-align: center;
vertical-align: middle;
font-weight: bold;
}
.td-suspension-child {
background-color: white;
text-align: center;
vertical-align: middle;
}
.td-suspension-child-row2 {
background-color: white;
text-align: center;
vertical-align: middle;
}
.td-suspension-child div {
font-size: 30px;
font-weight: bold;
padding: 5px;
}
.td-suspension-child-row2 div {
font-size: 30px;
font-weight: bold;
padding: 5px;
}
.div-TQA-SF006-U-160 {
display: none;
}
.hide {
display: none;
}
.show {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div-TQA-SF006">
<table class="table-suspension">
<tbody>
<th colspan="6">
SPECIFICATIONS
</th>
<tr>
<td class="td-suspension-parent" colspan="3" style="width: 50%">Part Number</td>
<td class="td-suspension-parent" colspan="3" style="width: 50%">Description</td>
</tr>
<tr>
<td class="td-suspension-child" colspan="3">TQA-SF006</td>
<td class="td-suspension-child" colspan="3">Underslung Air Suspension for 10 Ton Axle</td>
</tr>
<tr>
<td class="td-suspension-parent" colspan="6">Available Ride Height</td>
</tr>
<tr>
<td class="td-suspension-child-row2" style="width:20%">
<div class="TQA-SF006-U-160mm-parent">160mm</div>
</td>
<td class="td-suspension-child-row2" style="width:20%">
<div class="TQA-SF006-U-200mm-parent">200mm</div>
</td>
<td class="td-suspension-child-row2" style="width:20%">
<div class="TQA-SF006-U-250mm-parent">250mm</div>
</td>
<td class="td-suspension-child-row2" style="width:20%">
<div class="TQA-SF006-U-275mm-parent">275mm</div>
</td>
<td class="td-suspension-child-row2" style="width:20%">
<div class="TQA-SF006-U-300mm-parent">300mm</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="div-TQA-SF006-U-static">
<table class="table-suspension">
<tbody>
<th>
Spare Parts
</th>
<tr>
<td class="td-suspension-parent">Hover mouse over desired Ride Height for pop-up information</td>
</tr>
</tbody>
</table>
</div>
<div class="div-TQA-SF006-U-160">
<table class="table-suspension">
<tbody>
<th colspan="6">
SPARE PARTS
</th>
<tr>
<td class="td-suspension-parent">TQA-SPA07</td>
<td class="td-suspension-parent">TQA-PB006</td>
<td class="td-suspension-parent">TQA-AB08</td>
<td class="td-suspension-parent">TQA-SA08</td>
<td class="td-suspension-parent">TQA-UB001</td>
<td class="td-suspension-parent">TQA-SPA20</td>
</tr>
<tr>
<td class="td-suspension-chlid">Parabolic Spring Straight Type</td>
<td class="td-suspension-chlid">Pivot Bolt Kit</td>
<td class="td-suspension-chlid">Air Spring</td>
<td class="td-suspension-chlid">Shock Absorber</td>
<td class="td-suspension-chlid">U-Bot Kit</td>
<td class="td-suspension-chlid">Spring Bush</td>
</tr>
</tbody>
</table>
</div>
I'm trying to create a simple tab menu using a table and div blocks.
When a tab is clicked, the style of the tab changes to create the effect that the tabs were switched and the body, which is a div block inside a table cell, is switched for another div block using css (display:block and display:none). It works the way it's supposed to in firefox, but in IE 11 the tabs size are modified when they are switched.
Here is the page:
Tab Example
function tabClick(tab, bodyId) {
// tabs and bodyes arrays
var tabCol = [document.getElementById('tab1'), document.getElementById('tab2'), document.getElementById('tab3')];
var bodyCol = [document.getElementById('body1'), document.getElementById('body2'), document.getElementById('body3')];
for (var i = 0; i < tabCol.length; i++) {
// find the tab that was clicke and
// set it's status to selected. set
// the others to unselected
if (tab === tabCol[i]) {
tabCol[i].className = 'tabSel';
} else {
tabCol[i].className = 'tabUnsel';
}
// show the body related to the selected
// tab and hide the others
if (bodyCol[i].id == bodyId) {
bodyCol[i].style.display = 'block';
} else {
bodyCol[i].style.display = 'none';
}
}
}
.tabUnsel:hover {
text-decoration: underline;
}
.tabUnsel {
text-align: center;
vertical-align: central;
padding: 5px 10px 5px 10px;
white-space: nowrap;
cursor: pointer;
background-color: #f0f0f0;
border: #898c95 solid 1px;
border-radius: 5px 5px 0px 0px;
}
.tabSel {
text-align: center;
vertical-align: central;
padding: 5px 10px 5px 10px;
white-space: nowrap;
background-color: #ffffff;
border: #898c95 solid 1px;
border-bottom: 0;
border-radius: 5px 5px 0px 0px;
}
<table style="width: 500px; font-family: verdana; font-size: 11px;" cellspacing="0">
<tr>
<td style="border-bottom: #898c95 solid 1px;"> </td>
<td id="tab1" class="tabSel" onclick="tabClick(this,'body1');">Tab 1</td>
<td style="border-bottom: #898c95 solid 1px;"> </td>
<td id="tab2" class="tabUnsel" onclick="tabClick(this,'body2');">Tab 2</td>
<td style="border-bottom: #898c95 solid 1px;"> </td>
<td id="tab3" class="tabUnsel" onclick="tabClick(this,'body3');">Tab 3</td>
<td style="width: 100%; border-bottom: #898c95 solid 1px;"> </td>
</tr>
<tr>
<td style="border: #898c95 solid 1px; border-top: 0; padding: 10px;" colspan="7">
<div id="body1" style="width:100%; min-height: 300px;">
Tab 1 content
</div>
<div id="body2" style="width:100%; min-height: 300px; display: none;">
Tab 2 content
<br/>
<img src="http://tropicalfarm.byethost13.com/tabs/img1.jpg" />
<img src="http://tropicalfarm.byethost13.com/tabs/img2.jpg" />
</div>
<div id="body3" style="width:100%; min-height: 300px; display: none;">
Tab 3 content
</div>
</td>
</tr>
</table>
try to add this to your empty tap style for example
empty-tap{
min-height: 500px;
height:auto !important;
height: 500px;
}
the source here