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;

allowing absolute position html divs,nested in relative position div, to have scrollable overflow-y content and visible overflow-x content

How would one go about using CSS properties to allow a div with nested divs, which have absolute position defined, to be able to scroll vertically once the defined position of those divs goes outside of their parent div AND be able to allow the horizontal overflow content remain visible?
This question arose from another question (making a scrollable div, inside of a td, with divs that have absolute positions defined) and seemed to warrant a new thread since this one and/or another related thread (CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue) do not seem to contain the answer.
Here is an almost working example, barring the fact that the horizontal overflow content doesn't remain visible even if you add overflow-x:visible into the innerstuffcols CSS section:
#mainHeader {
background-color: #999999;
color: #ffffff;
position: absolute;
width: 100%;
height: 5%;
left: 0;
top: 0;
}
#mainPlace {
position: absolute;
width: 100%;
height: 95%;
left: 0;
top: 5%;
overflow: hidden;
}
#mainTable {
position: absolute;
left: 0;
height: 100%;
width: 85%;
overflow: hidden;
}
#mainMenu {
position: absolute;
left: 85%;
right: 0;
height: 100%;
}
#tablebody {
height: 100%;
width: 100%;
}
th.tableheaders {
border: 1px solid black;
height: 5%
}
td.someCols {
border: 1px solid black;
}
table,
th,
td {
border-collapse: collapse;
}
.innerstuffCols {
position: relative;
overflow-y: scroll;
width: 100%;
height: 100%;
}
div.stuffbox {
height: 200px;
position: absolute;
width: 200px;
left: 5px;
text-align: center;
background-color: #f1f1f1;
}
<div id="mainHeader">
<p align="center"> random header here </p>
</div>
<div id="mainPlace">
<div id="mainTable">
<table style='width:100%;height:100%;position:absolute;top:0;bottom:0;left:0;border:1px solid black'>
<tr id='tableheader'>
<th class='tableheaders'>header 1</th>
<th class='tableheaders'>header 2</th>
</tr>
<tr id='tablebody'>
<td class='someCols'>
<div class='innerstuffCols'>
<div class='stuffbox' style='top:55px;'> stuff 1 </div>
<div class='stuffbox' style='top:265px;'> stuff 2 </div>
<div class='stuffbox' style='top:475px;'> stuff 3 </div>
<div class='stuffbox' style='top:685px;'> stuff 4 </div>
<div class='stuffbox' style='top:895px;'> stuff 5 </div>
<div class='stuffbox' style='top:1105px;'> stuff 6 </div>
</div>
</td>
<td class='someCols'>
<div class='innerstuffCols'>
some other stuff
</div>
</td>
</tr>
</table>
</div>
<div id="mainMenu">
<p> some stuff here </p>
</div>
</div>
For educational purposes, I'm certainly open to any suggestions even if it means overhauling this example code a bit. Adding JS tag in case anyone has a workaround using JS though I prefer not to have that for multiple reasons.
Thank you in advance.

How to style element to overlap scroll

I am working on an already existing project, with a pretty complex front end. I want to introduce a new element which should be a substitute for a dropdown. Basically it's a div bind with knockout to a collection.
The problem I have is that on a single page there are several divs inside which a more complex structure is rendered for each one, and inside one of this divs is my custom dropdown. The problem is that when I try to expand the dropdown (a class bind to a click event using jQuery) my "dropdown" is rendered up to the top of the div because of the fact that there is too much content and in order to preserve the entire page look and appearance there is no good way to use overflow: visible.
A snippet that pretty well introduce my problem is HERE :
$('.show-dropdown').click(function() {
if ($(this).next('.render-this').hasClass('hide-me')) {
$(this).next('.render-this').removeClass('hide-me');
} else {
$(this).next('.render-this').addClass('hide-me');
}
})
td {
position: relative;
}
#top-div {
width: 500px;
max-width: 500px;
border: 1px solid black;
max-height: 100px;
overflow-y: auto;
white-space: nowrap;
}
#bottom-div {
width: 500px;
max-width: 500px;
border: 1px solid black;
max-height: 100px;
overflow-y: auto;
}
.show-dropdown {
width: 120px;
height: 40px;
background-color: green;
}
.render-this {
position: absolute;
bottom: 10px;
z-index: 5;
width: 20px;
height: 150px;
background-color: red;
}
.hide-me {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="top-div">
<p>
lorem ipsum lorem ipsum lorem ipsum lorem ipsumlorem ipsumlorem ipsum lorem ipsum lorem ipsum
</p>
</div>
<div id="bottom-div">
<table class="w3-table">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
<th>Column 5</th>
<th>Column 6</th>
</tr>
<tr>
<td><div class="show-dropdown"></div><div class="render-this hide-me"></div></td>
<td><div class="show-dropdown"></div><div class="render-this hide-me"></div></td>
<td><div class="show-dropdown"></div><div class="render-this hide-me"></div></td>
<td><div class="show-dropdown"></div><div class="render-this hide-me"></div></td>
<td><div class="show-dropdown">></div><div class="render-this hide-me"></div></td>
<td><div class="show-dropdown"></div><div class="render-this hide-me"></div></td>
</tr>
</table>
I've read a lot about this topic. My conclusion so far is that if you have overflow it is pretty much game over. However from the question HERE I see that with transform and maybe some other CSS it might be still possible to achieve something. Also, what I need is to render my dropdown completely, I was also thinking about using overflow: visible and some sort of JS created scroll, but haven't dig deep for this still.

Demo
https://jsfiddle.net/mg8zbr41/172/
(I hope this was the desired behaviour)
Explanation
The whole problem would have been solved if we were allowed to have overflow-x: auto and overflow-y: visible together. But we cannot do that (see this answer). So we use the following workaround.
If you want to have want the red div to pop out you cannot put
position: relative parent. So we remove that first
Now bottom becomes relative to parent relative element i.e. body but we don't want that so we also remove bottom
Now we have top, right, bottom, left all as auto. So the elements placed below the green box as it would have been if it was static. The only difference is it pops out of the bottom box
Now we want it to be 10px above the green box for that we use translateY(calc(100% + 10px) * -1)
Now this works till there's no scrolling. When the div is scrolled the red box stays there and doesn't move with its green box, we need to fix that
This can be easily fixed if we know how much is the div scrolled. Suppose the div is scrolled by 100px towards left we'll shift the red box towards left by 100px
We cannot find scrollLeft without JS. I personally don't like JS intervention for styling. We cannot avoid it but at least we can make it more semantic by using css variables for communication between JS and CSS.
We use JS to update a --scroll-left css variable on #bottom-div with the scrollLeft value
Once we have --scroll-left we can now add translateX(calc(var(--scroll-left,0px) * -1))
Also we don't want the red box to pop out of the box horizontally. We cannot fix this by overflow: hidden because that would require position: relative. So we use clip-path: inset(-999px 0px -999px 0px).
Finally we achieved want we wanted. Phew.
Demerits:
Horizontal repositioning will be laggy in Firefox because of Scroll Lined Effects. Same might be the problem in mobile browsers
See also:
https://css-tricks.com/popping-hidden-overflow/ Source of inspiration for my answer but both (solution in the article and my solution) are quite different but same core approach

You can add a wrapper div with relative position around the scrollable container and then your absolute positioned dropdown would bind to that element. As you can see in this example.
css:
.position-relative {
position: relative;
}
#top-div {
width: 500px;
max-width: 500px;
border: 1px solid black;
max-height: 100px;
overflow-y: auto;
white-space: nowrap;
}
#bottom-div {
width: 500px;
max-width: 500px;
border: 1px solid black;
max-height: 100px;
overflow-y: auto;
}
.show-dropdown {
width: 120px;
height: 40px;
background-color: green;
}
.render-this {
position: absolute;
bottom: 10px;
z-index: 5;
width: 20px;
height: 150px;
background-color: red;
}
.hide-me {
display: none;
}
html:
<div class="position-relative">
<div id="bottom-div">
<table class="w3-table">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
<th>Column 5</th>
<th>Column 6</th>
</tr>
<tr>
<td>
<div class="show-dropdown"></div>
<div class="render-this hide-me"></div>
</td>
<td>
<div class="show-dropdown"></div>
<div class="render-this hide-me"></div>
</td>
<td>
<div class="show-dropdown"></div>
<div class="render-this hide-me"></div>
</td>
<td>
<div class="show-dropdown"></div>
<div class="render-this hide-me"></div>
</td>
<td>
<div class="show-dropdown">></div>
<div class="render-this hide-me"></div>
</td>
<td>
<div class="show-dropdown"></div>
<div class="render-this hide-me"></div>
</td>
</tr>
</table>
</div>
</div>
js
$('.show-dropdown').click(function() {
if ($(this).next('.render-this').hasClass('hide-me')) {
$(this).next('.render-this').removeClass('hide-me');
} else {
$(this).next('.render-this').addClass('hide-me');
}
})
Then you can adjust the top, left, right, bottom properties as you wish.

If you change your CSS as follows, you can get this to work as you would like:
Remove the position:relative; from your td.
Use a different approach to make the #bottom-div expend to it's content, using display: table;, and also apply the position:relative; to it.
all other css rules stay the same.
So, this is your new css:
#top-div {
width: 500px;
max-width: 500px;
border: 1px solid black;
max-height: 100px;
overflow-y: auto;
white-space: nowrap;
}
#bottom-div {
width: 500px;
max-width: 500px;
border: 1px solid black;
max-height: 100px;
position: relative;
display: table;
}
.show-dropdown {
width: 120px;
height: 40px;
background-color: green;
}
.render-this {
position: absolute;
bottom: 10px;
z-index: 5;
width: 20px;
height: 150px;
background-color: red;
}
.hide-me {
display: none;
}
Here is a link to a Fiddle with the new css.

How to expand input field to the right in a header bar

I have a header bar with left-aligned items, center items and right-aligned items. In the center, I have multiple items and a search input field. When the search field gets focus, I'm making it wider by animating the width. Right now, because the items are centered, it's animating both left and right to center the content. How can I change this so it keeps the alignment and expands the width to the right?
I'm not using Bootstrap.
I'm currently using a table for the header bar content. I'm open to changing that, but if there's a way to do it with the current design, that would be preferred.
Here's a JSFiddle...click in the search field to see what's happening: https://jsfiddle.net/L60g0j64/1/
EDIT: I've updated it with the suggested solution below. My only issue is that the red container surrounding the input should expand also.
HTML/CSS/JS Snippet
$('#search').focus(function() {
$(this).val("");
$('#hidden_content').css('display','inline');
$(this).animate({width: '180px'}, 200);
});
$('#search').blur(function() {
$(this).val('Search');
$('#hidden_content').css('display','none');
$(this).animate({width: '120px'}, 200);
});
.header-navbar {
cursor: pointer;
white-space: nowrap;
background-color: #1f2127;
color: #cbcbcb;
min-width: 0;
text-overflow: ellipsis;
z-index: 299;
top: 0px;
left: 0px;
width: 100%;
height: 32px;
float: none;
position: fixed;
border-spacing: 0px;
}
td.cell-center {
text-align: center;
}
.cell-center table {
margin: 0 auto;
}
.header-table {
height: 32px;
border: none;
border-spacing: 0px;
}
td.header_rtd {
padding-right:12px;
}
td.header_ltd {
padding-left:12px;
}
.search-wrapper {
max-width: 124px;
background-color: red;
padding:4px;
}
.hidden_content{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="header-navbar" id="header" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>
<table class="header-table" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class='header_rtd'>left1</td>
<td class='header_rtd'>left2</td>
</tr>
</table>
</td>
<td width=100% class='cell-center'>
<table class="header-table" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class='header_rtd'>center</td>
<td class='header_rtd'>center</td>
<td><div class="search-wrapper">
<input class="search" id="search" style="width: 120px;" type="text" size="60" value="Search"/>
<div class='hidden_content' id='hidden_content'>
hidden content
</div>
</div></td>
</tr>
</tbody>
</table>
</td>
<td>
<table class="header-table" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class='header_ltd'>right1</td>
<td class='header_ltd'>right2</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>

One quick solution would be to give the parent element a max-width equal to the initial width of the element. In doing so, the element will still be centered relative to the initial width because the input element's animated width will not effect the width of the parent element.
Updated Example
.search-wrapper {
max-width: 124px;
}
As a side note, you don't need jQuery/JS to animate the width, you can simply use a CSS transition along with the :focus pseudo-class.
Updated Example
.search-wrapper input.search {
transition: 1s width ease;
width: 120px;
}
.search-wrapper input.search:focus {
width: 180px;
}

How can I make a table move in JavaScript?

My problem is that I was creating a simple website the other day and I needed the content to move according to the button pressed.
I managed to do so in CSS3, but the solution did not work for IE whatsoever. Therefore I would like to ask if there is a simple solution for that in js? I don't know js at all but I heard what I need is much easier in js than in css.
Details:
http://i42.tinypic.com/6yl4ia.png
I need the table in the picture to move according to the buttons (which are labels to be exact).
The visible area is a div.
Here's the relevant code (without animation as I was not satisfied with it):
body {
background-color: #fff;
color: #fff;
padding:0px;
}
#bodywrapperfixed {
width: 1248px;
margin: 0px auto;
position: relative;
overflow: hidden;
height: 730px;
}
#bodywrapper {
display:block;
background-color: #fff;
width: 1248px;
color: #59595B;
padding-top:50px;
font-family: 'Roboto', sans-serif;
position: absolute;
top:0px;
left:0px;
z-index:1;
font-size: 60px;
height:730px;
}
#bodywrapper img {
width:400px;
padding:15px 0px 20px 0px;
}
#texten {
font-family: 'Roboto', sans-serif;
font-size: 35px;
padding:5px;
}
#textpl {
font-family: 'Roboto', sans-serif;
font-size: 25px;
padding:5px;
}
table#linki {
width: 110px;
border: none;
margin-top:15px;
}
label {
display: block;
height: 54px;
width: 54px;
color:#fff;
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size: 35px;
background-color: #117D10;
text-align: center;
padding:23px;
}
label:hover {
background-color: #004F00;
cursor: pointer;
}
input#pl {
position: absolute;
top: -9999px;
left: -9999px;
}
input#en {
position: absolute;
top: -9999px;
left: -9999px;
}
and the relevant HTML:
<div id="bodywrapperfixed">
<div id="bodywrapperfloat">
<table id="ramka">
<tr>
<td>random text</td>
<td><div id="bodywrapper">
<center>
<div id="texten"><div style="font-weight:300; display:inline-block;">Introducing the all-in-one entertainment system.</div><div style="font-weight:500; display:inline-block;"> For everyone.</div></div>
<div id="textpl"><div style="font-weight:300; display:inline-block;">Przedstawiamy zintegrowany system rozrywki.</div><div style="font-weight:500; display:inline-block;"> Dla wszystkich.</div></div>
<img src="imgs/xboxone.png">
<div id="texten"><div style="font-weight:300; display:inline-block;">Choose your version of the story:</div></div>
<div id="textpl"><div style="font-weight:300; display:inline-block;">Wybierz swoją wersją opowieści:</div></div>
<table id="linki">
<tr>
<td><label for="en">en</label><input id="en" type="checkbox"></td>
<td><label for="pl">pl</label><input id="pl" type="checkbox"></td>
</tr></table>
</center>
</div></td>
<td>random text</td>
</tr>
</table>
</div>
</div>
Here's what it looks like:
http://ingame.lh.pl/thinkone/
Please help me.

CSS3 Transformations will not work in IE9 and below since they simply don't support it. If you need to do transforms and the like then one of the many options available is jQuery.
jQuery is a JavaScript Library that simplifies your use of JavaScript and makes DOM Manipulations like transformations and animations simpler. They have a number of great demos on their website that should help you get started. I would recommend having a look at their own JavaScript 101 which will help you get started with the basics of JavaScript itself (without jQuery) and then lead you into making your life easier with jQuery.
For specifically what you are after (what I assume you are after anyway) you may want to have a look at their events tutorial (attaching click handerls to elements etc.), css styling tutorial (CSS 'Getting, Setting and Manipulations') and the effects tutorial (Attaching effects to elements).
I hope this helps get you started in the world of JavaScript and jQuery. Note that many other libraries exist, but this one is the one you will see the most of everywhere.

Hope this helps..The code contains a table and buttons as you depicted in the picture
http://jsfiddle.net/ramanbedi/vDdJL/
here is the js code:
$(function(){
$(".left-button").on('click',function(e){
e.preventDefault();
$(".table").animate({left:'-=10'},500);
})
$(".right-button").on('click',function(e){
e.preventDefault();
$(".table").animate({left:'+=10'},500);
})
})
I have used jQuery library and reasons are mentioned in the comments.