We Keep Coding

Fix covering hovered table / hovering problem with table

I have a problem with creating table. I need to create a table with some of cells with hover/tooltip event. For example when I point to the cell, I need to show one column table with links, but when do this in that way I have problem with overlaping (I can't use links from first cell). For now I only tried to use CSS and HTML, but soltuion with JS is also accepted.
HTML:
<div class="ttip">
<a class="foo">FOO</a>
<table>
<tr>
<td><a href='bar'>Bar</a></td>
</tr>
<tr>
<td><a href='baz'>Baz</a></td>
</tr>
</table>
</div>
<div class="ttip">
<a class="foo">FOO2</a>
<table>
<tr>
<td><a href='bar2'>Bar2</a></td>
</tr>
<tr>
<td><a href='baz2'>Baz2</a></td>
</tr>
</table>
</div>
Style:
.ttip {
position: relative;
display: table;
}
.ttip>table {
position: absolute;
white-space: nowrap;
border-collapse: collapse;
display: none;
}
.ttip>table td {
border: 1px dotted #000;
padding: 2px;
}
.ttip:hover>table {
display: table;
}
Live:
https://jsfiddle.net/uLm0gjcn/3/
Regards

The FOO2 is rendered after the FOO , meaning when its displayed, its technically below FOO2 text. To fix that you need to apply z-index in your css here in .ttip>table
.ttip>table {
position: absolute;
white-space: nowrap;
border-collapse: collapse;
display: none;
z-index: 1;
}
This way, when the drop-down/tool-tip appears from FOO, it is rendered on top of FOO2.
Edit. Also, to make it not transparent, apply a background-color to css in .ttip>table. for example for a white background background-color: white;

Divs side by side and under each other

First post here. I will provide pictures of the problem.
Hello!
I am currently working with a project where i have 2 divs that should always be on the top of the page. Side by side. That's no problem. The problem appears when i add new divs which should be side by side, but under the first 2 ones.
The size of the first 2 divs differ, and if the second of the 2 top ones is "shorter" than the first one, the ones that i add under these two ends up at wierd positions.
Every block is in ones own div and every div is in a big div. Hope you guys can help.
Here is the classes:
.panelLeft {
width: 40%;
float: left;
}
.panel {
background: #eee;
padding: 20px;
margin: 10px;
border-radius: 7px;
-webkit-box-shadow: 0px 9px 49px -23px rgba(0,0,0,0.54);
-moz-box-shadow: 0px 9px 49px -23px rgba(0,0,0,0.54);
box-shadow: 0px 9px 49px -23px rgba(0,0,0,0.54);
}
.displayNone {
display: none;
}
Here is some example code:
<div>
<div>
<table>
<tr>
<td><asp:Linkbutton runat="server" ID="linkbutton1" Text="Toggle div1" OnClientClick="toggleDiv('divNr1'); return false;" />:</td>
</tr>
<tr>
<td><asp:Linkbutton runat="server" ID="linkbutton2" Text="Toggle div2" OnClientClick="toggleDiv('divNr2'); return false;" />:</td>
</tr>
</table>
</div>
<div id="divNr1" class="panelLeft panel displayNone" runat="server">
<table>
<tr>
<td><asp:Literal runat="server" ID="someLiteral1" Text="Some text"/></td>
</tr>
</table>
</div>
<div id="divNr2" class="panelLeft panel displayNone" runat="server">
<table>
<tr>
<td><asp:Literal runat="server" ID="someLiteral2" Text="Some text"/></td>
</tr>
</table>
</div>
</div>
And here is the toggle funtcion:
function toggleDiv(divName) {
if (divName === 'divNr1') {
divNr1.toggle("fast");
}
else if (divName === 'divNr2') {
divNr2.toggle("fast");
}
}
Ill show you what i mean with a picture:
And how i want it is like this:
Thanks you so much!

Enclose each row of divs in another div. Like this:
<div>
<div>left</div>
<div>right</div>
</div>
<div>
<div>left</div>
<div>right</div>
</div>
etc...

Use inline-block for your divs, like this;
<div id="div1"> Div 1</div>
<div id="div2"> Div 2</div>
<div id="div3"> Div 3</div>
<div id="div4"> Div 4</div>
<div id="div5"> Div 5</div>
and this CSS
body {
font-size: 0;
}
div {
width:45%;
margin: 1px 2.5%;
height: 100px;
background: #ccc;
display: inline-block;
vertical-align: top;
font-size: 20px;
text-align: center;
padding-top: 20px;
}
#div1 {height: 150px;}
font-size: 0 is to make your dimensions work correctly but don't forget to put the font-sizes back in again.
https://codepen.io/chrispink/pen/EvxEoe

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;
}

CSS style issue in table rows

I have use the className like below code snippet.
Code Snippet
<tr class="gridrowtaskIdlevel0 e-alt_row e-gridtreerowexpand">
<td class="e-rowcell ">
<div style="height: 20px;">
<div class="intend" style="width: 0px; height: 1px; float: left; display: inline-block;">
</div>
<div class="e-gridtreeexpand" style="float: left; display: inline-block;">
</div>
<div class="e-cell" style="width: 100%; display: inline-block;">
6
</div>
</div>
</td>
<td class="e-rowcell">Implementation Phase 2</td>
<td class="e-rowcell">02/15/2010</td>
<td class="e-rowcell"></td>
<td class="e-rowcell">8</td>
<td class="e-rowcell">50</td>
<td class="e-rowcell"></td>
<td class="e-extendcolumn"></td>
</tr>
Note: here class Name = gridrowtaskIdlevel0 e-alt_row e-gridtreerowexpand
i have tried to apply css style(display) for this row based on some condition like following
two ways
$('.gridrowtaskIdlevel0').addClass('e-hide');
CSS:
.e-hide{
display:none;
}
2. $('.gridrowtaskIdlevel0').css({'display':'none'});
how to apply css style to tr in runtime

Don't really understand what runtime do you mean, but if you just need make this code working - you need put it in some event: click on smth, doc.ready and etc.
Please, try such construction:
JS:
$(document).ready(function() {
$('.gridrowtaskIdlevel0').addClass('e-hide'); // the 1st way
// or
$('.gridrowtaskIdlevel0').css({'display':'none'}); // the 2nd way
// or
$('.gridrowtaskIdlevel0').hide(); // the 3rd way
});
But If you will use the 1st way you also need to add css (same to your).
I recommend use 1st or 3rd variant, but all of they will work similarly.
Good luck!

<tr>s don't always do well with all styles.
Here's an example FIDDLE that shows how you might focus on <td>s.
CSS
table {
border-collapse: collapse;
}
tbody, th, td {
padding:0px;
margin:0px;
border:0px;
border-collapse: collapse;
padding: 5px;
}
tr.foo {
border: 1px solid blue;
background-color: red;
}
tr:nth-child(3) td {
border-top: 2px solid blue;
border-bottom: 2px solid blue;
}
tr:nth-child(3) td:nth-child(1){
border-left: 2px solid blue;
}
tr:nth-child(3) td:nth-child(2){
border-right: 2px solid blue;
}

on div click show all divs with X id [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
I want that when I click on one of the circle it shows the next row of circles. But can only have on with is-selected class. This is the code I have:
<table>
<tr>
<td>
<div style="position: relative;" class="can-select1">
<img src="http://lkimg.zamimg.com/images/guides/ability-marker.png" style="vertical-align: middle;" class="can-select">
<div class="can-select-text">1</div>
</div>
</td>
<td>
<div style="position: relative;" class="nothing1" id="tier1">
<img src="http://lkimg.zamimg.com/images/guides/ability-marker.png" style="vertical-align: middle;" class="nothing">
<div class="can-select-text">2</div>
</div>
</td>
</tr>
<tr>
<td>
<div style="position: relative;" class="can-select1">
<img src="http://lkimg.zamimg.com/images/guides/ability-marker.png" style="vertical-align: middle;" class="can-select">
<div class="can-select-text">1</div>
</div>
</td>
<td>
<div style="position: relative;" class="nothing1" id="tier1">
<img src="http://lkimg.zamimg.com/images/guides/ability-marker.png" style="vertical-align: middle;" class="nothing">
<div class="can-select-text">2</div>
</div>
</td>
</tr>
</table>
Javascript:
$('.can-select1').click(function(e){
$(this).addClass("is-selected");
$(this).find('.can-select').addClass("is-selected");
$(this).children('.can-select-text').addClass("is-selected");
});
CSS:
.can-select1 {
cursor:pointer;
opacity:0.4;
}
.can-select-text{
opacity: 0;
position: absolute;
top: 0;
left: 0;
text-align: center;
width: 32px;
font: bold 13px/32px 'Trebuchet Ms';
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6); color: #111;
}
.is-selected {
cursor:default;
opacity:1.0;
}
.nothing1{
cursor:default;
opacity:0;
}
JS fiddle: http://jsfiddle.net/p3Q7Z/7/

It's hard to tell what you actually want but this should help:
http://jsfiddle.net/p3Q7Z/8/
First, ids must be unique. I removed them.
Next, I added the line:
$(this).closest('td').next('td').find('.nothing1').removeClass('nothing1').addClass('can-select1');
This traverses from the button, up to the parent td, to the next sibling td, looks for its .nothing1 button, and makes it clickable.
Also, I changed the click handler line to:
$('table').on('click','.can-select1',function(e){
So the handler will apply when classes are added and removed. As you had it, the handler will only apply to the elements that existed when the page loaded for the first time.
edit
To modify all next td in the column:
$(this).closest('td').nextAll('td').each(function() {
$(this).find('.nothing1').removeClass('nothing1').addClass('can-select1');
});
edit after chat, here's a re-write
http://jsfiddle.net/p3Q7Z/12
Use radio buttons and labels:
<td class="column-0 selectable">
<input type="radio" name="column-0" id="column-0-row-0">
<label for="column-0-row-0">
<img src="http://lkimg.zamimg.com/images/guides/ability-marker.png">
<div>1</div>
</label>
</td>
Do all the styling in css without names:
td input[type="radio"] {
display: none;
}
td input[type="radio"] + label {
display:none;
cursor:default;
opacity:0;
position: relative;
}
td input[type="radio"] + label img {
vertical-align: middle;
}
td input[type="radio"] + label div {
position: absolute;
top: 0;
left: 0;
text-align: center;
width: 32px;
font: bold 13px/32px'Trebuchet Ms';
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
color: #111;
}
td.selectable input[type="radio"] + label {
display:block;
cursor:pointer;
opacity:0.4;
}
td.selectable input[type="radio"]:checked + label {
cursor:pointer;
opacity:1.0;
}