We Keep Coding

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.

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

Overlapping Two DIVS Horizontally

Hi I have two divs within a table cell (making a Timeline) and I need them to overlap rather then come under each-other.
The position attribute of all DIVs inside the cell has to remain the same (because of a drag/drop JQUERY plugin I used)
Link to Fiddle
Link to Updated Fiddle
<tr style="border:1px; height:30px;">
<td style="border:1px solid black; position:static">
<div style="margin-left:0;width:50px;display:inline;position:relative">
<div style="background-color: green; position:absolute">
Div1
</div>
</div>
<div style="margin-left:0px;width:20px;display: inline; position:relative">
<div style="background-color: red; position:absolute">
Div2
</div>
</div>
</td>
<td>
</td>
</tr>
I need both DIVs to be start relavtive from the edge of the cell.
Thanks

As far as I can tell you just need to push the red <div> down a bit. And since you've positioned it absolutely, it's easily done with top:
<div style="background-color: red; position:absolute; top:10px;">
Check this update on your jsFiddle

They're going to be stacked like this, you should also be able to float the divs and set z-index explicitly to stack them.
http://jsfiddle.net/ianfc89/JDff9/13/
HTML
<body onload="REDIPS.drag.init()">
<script>
REDIPS.drag.dropMode = 'multiple';
</script>
<div id="drag" class="containDiv">
<table class="tableWhole">
<tbody>
<tr>
<td class="tableCell">
<div style="position:relative">
<div id="A125_Contain" class="drag progressContainer" >
<div id="A125" style="cursor: move; background-color: red; width: 500px; height: 20px; ">A125</div>
</div>
<div id="B125_Contain" class="drag progressContainer" >
<div id="B125" style="cursor: move; background-color: green; width: 100px; height: 20px; ">A125</div>
</div>
<div>
</td>
<td class="tableCell"></td>
<td class="tableCell"></td>
<td class="tableCell"></td>
<td class="tableCell"></td>
<td class="tableCell"></td>
</tr>
<tbody>
</table>
</div>
Styles
.containDiv {
}
.tableWhole {
width:1000px;
table-layout:fixed;
}
.tableCell {
width:300px;
height:60px;
border:1px solid black;
}
.progressContainer
{
display:inline; border-bottom-style: none; position: relative; top: 0px; left: 0px; width: 100px; height: 20px;
}

Trying to get my HTML 5 audio player to play more than one file on the same page

I have coded a simple HTML5 audio player (javascript and css) thats starts when the user clicks play. I have got it to work with one file on the page. I have copied and pasted the code several times so I can have several files on the same page, the player breaks and won't play any of them. Please, any help is appreciated! Below is my HTML:
<div id="audioplayer">
<audio id="audio" src="052011.mp3"></audio>
<span id="playpause" title="Play/Pause">Play</span>
<script type="text/javascript" src="audioplayer-min.js"></script>
Here is the css:
/* globals */
html {
font:62.5%/1 "Droid Sans", "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
background: url('background.png');
background-repeat: no-repeat
}
body {
margin: 0 auto;
text-align: center;
}
#audioplayer {
display: block;
overflow: hidden;
width: 30px;
height: 30px;
position: relative;
}
.play,.pause {
background: #fff;
width: 20px;
height: 20px;
border-radius: 10px;
position: absolute;
margin: 5px;
display: block;
overflow: hidden;
text-indent: -1000px;
}
.play:after {
border-color:transparent transparent transparent #000;
border-style:solid;
border-width: 5px 5px 5px 10px;
width:0;
height:0;
position: absolute;
top: 5px;
left: 6px;
content: '';
}
.pause:after {
border-color: #000;
background: #fff;
border-style:solid;
border-width: 0 3px 0 3px;
width:2px;
height:10px;
position: absolute;
top: 5px;
left: 6px;
content: '';
}
And last but not least my Javascript:
var audio=document.getElementById("audio");var canvasWidth=canvasHeight=30;var radius=canvasWidth/2;var audioplayer=document.getElementById("audioplayer");canvas=document.createElement("canvas");canvas.setAttribute("width",canvasWidth);canvas.setAttribute("height",canvasHeight);canvas.setAttribute("id","canvas");audioplayer.appendChild(canvas);function updateUI(){var f=audio.currentTime;var g=audio.duration;var b=document.getElementById("canvas");var e=b.getContext("2d");var a=y=radius=canvasWidth/2;var d=-Math.PI/2;var c=d+((f/g)*Math.PI*2);b.getContext("2d").clearRect(0,0,canvasWidth,canvasHeight);e.fillStyle="#000";e.beginPath();e.moveTo(a,y);e.arc(a,y,radius,d,c,false);e.closePath();e.fill()}audio.addEventListener("play",function(a){document.getElementById("playpause").innerHTML='Pause'},true);audio.addEventListener("pause",function(a){document.getElementById("playpause").innerHTML='Play'},true);audio.addEventListener("ended",function(a){document.getElementById("playpause").innerHTML='Play'},true);document.getElementById("playpause").addEventListener("click",function(){if(audio.paused){audio.play()}else{if(audio.ended){audio.currentTime=0;document.getElementById("playpause").innerHTML='Pause';audio.play()}else{audio.pause()}}},true);audio.ontimeupdate=updateUI;audio.addEventListener("timeupdate",updateUI);
Iframe added to the HTML:
<tbody>
<tr>
<td style="vertical-align: top;">
<div id="audioplayer">
<audio id="audio" src="052011.mp3"></audio>
<span id="playpause" title="Play/Pause">Play</span>
<script type="text/javascript" src="audioplayer-min.js"></script>
</div>
<br>
</td>
<td style="vertical-align: top;">
<div style="text-align: right;">
</div>
<div style="text-align: right;"><big><big><span style="font-weight: bold;"><small><span class="style2"><span class="style6">May 6, 2011 <span style="font-style: italic;">(Right Click and select Save As to download to your iPod or other MP3 player)</span></span></span></small></span></big></big><br>
<big>
</big></div>
</td>
</tr>
<tr>
<td style="vertical-align: top;"> <iframe src=<div id="audioplayer">
<audio id="audio" src="052011.mp3"></audio>
<span id="playpause" title="Play/Pause">Play</span>
<script type="text/javascript" src="audioplayer-min.js"></script>"></iframe> <br>
</td>
<td style="vertical-align: top;"><br>
</td>
</tr>
<tr>
<td style="vertical-align: top;"><br>
</td>
<td style="vertical-align: top;"><br>
</td>
</tr>
</tbody>
</table>

A couple of months ago I built a jQuery plugin that replaces element with a little of custom HTML code. By adding some CSS you get a whole new player which looks the way you want and has the same functionality as the default player. There is no direct way to style the element. But the HTML5 DOM has methods, properties, and events for the element and thus makes it quite easily manipulable.
try this
http://osvaldas.info/audio-player-responsive-and-touch-friendly

Try to enclosure another player in Iframe or HTML tag

document.getElementById (still) not working

I started a thread here document.getElementById not working but it looks as though even the suggestions made were valid I still have a problem.
I have a couple of checkboxes. When i view the page source here there are. document.getElementById('chk1') is the only one that is not null. How could that be?
<input id="chk0" value="JobStages###StageCode~JobCode###DRAW~1005" onclick="addRemoveRow(this.value,this.checked)" style="border-width:0px;padding:1px;margin:0px;height:14px;" type="checkbox" />
<input id="chk1" value="JobStages###StageCode~JobCode###FEAS~1005" onclick="addRemoveRow(this.value,this.checked)" style="border-width:0px;padding:1px;margin:0px;height:14px;" type="checkbox" />
<input id="chk2" value="JobStages###StageCode~JobCode###N/C~1005" onclick="addRemoveRow(this.value,this.checked)" style="border-width:0px;padding:1px;margin:0px;height:14px;" type="checkbox" />
EDIT: Pretty much the complete code
<tr id='rw1' onMouseOver='setHover(this,event);' class='DRAW~1005 '
onClick='setClick(this,event);'>
<td id='RowId_0' width=0 style='display: none'>1</td>
<td id='PrimaryKey_0' width=0 style='display: none'>DRAW~1005</td>
<td id='StageCode_0' width=0 style='display: none'>DRAW</td>
<td id='Allocated_0' nowrap
style='overflow: hidden; height: 16px; width: 136px; overflow: hidden; text-align: center; padding-left: 5px;'
class='col1'><input id="chk0"
value="JobStages###StageCode~JobCode###DRAW~1005"
onclick="addRemoveRow(this.value,this.checked)"
style="border-width: 0px; padding: 1px; margin: 0px; height: 14px;"
type="checkbox" /></td>
<td id='StageCode_0' nowrap
style='overflow: hidden; height: 16px; width: 136px; overflow: hidden; text-align: left; padding-left: 5px;'
class='col2'></td>
<td id='StageDescription_0' nowrap
style='overflow: hidden; height: 16px; width: 123px; overflow: hidden; text-align: left; padding-left: 5px;'
class='col3'
onclick="showTextEditor(event,'JobStages','StageDescription','StageCode~JobCode','DRAW~1005 ');">
</td>
<td id='StartDate_0' nowrap
style='overflow: hidden; height: 16px; width: 171px; overflow: hidden; text-align: left; padding-left: 5px;'
class='col4'
onclick="showCalendar(event,'JobStages','StartDate','StageCode~JobCode','DRAW~1005 ');">
</td>
<td id='EndDate_0' nowrap
style='overflow: hidden; height: 16px; width: 112px; overflow: hidden; text-align: left; padding-left: 5px;'
class='col5'
onclick="showCalendar(event,'JobStages','EndDate','StageCode~JobCode','DRAW~1005 ');">
</td>
</tr>
<tr id='rw2' onMouseOver='setHover(this,event);' class='FEAS~1005 '
onClick='setClick(this,event);'>
<td id='RowId_1' width=0 style='display: none'>2</td>
<td id='PrimaryKey_1' width=0 style='display: none'>FEAS~1005</td>
<td id='StageCode_1' width=0 style='display: none'>FEAS</td>
<td id='Allocated_1' nowrap
style='overflow: hidden; height: 16px; width: 136px; overflow: hidden; text-align: center; padding-left: 5px;'
class='col1'><input id="chk1"
value="JobStages###StageCode~JobCode###FEAS~1005"
onclick="addRemoveRow(this.value,this.checked)"
style="border-width: 0px; padding: 1px; margin: 0px; height: 14px;"
type="checkbox" /></td>
<td id='StageCode_1' nowrap
style='overflow: hidden; height: 16px; width: 136px; overflow: hidden; text-align: left; padding-left: 5px;'
class='col2'></td>
<td id='StageDescription_1' nowrap
style='overflow: hidden; height: 16px; width: 123px; overflow: hidden; text-align: left; padding-left: 5px;'
class='col3'
onclick="showTextEditor(event,'JobStages','StageDescription','StageCode~JobCode','FEAS~1005 ');">
</td>
<td id='StartDate_1' nowrap
style='overflow: hidden; height: 16px; width: 171px; overflow: hidden; text-align: left; padding-left: 5px;'
class='col4'
onclick="showCalendar(event,'JobStages','StartDate','StageCode~JobCode','FEAS~1005 ');">
</td>
<td id='EndDate_1' nowrap
style='overflow: hidden; height: 16px; width: 112px; overflow: hidden; text-align: left; padding-left: 5px;'
class='col5'
onclick="showCalendar(event,'JobStages','EndDate','StageCode~JobCode','FEAS~1005 ');">
</td>
</tr>

You are probably executing the javascript before the DOM nodes are available.
this will not work
<script type="text/javascript">
// trying to retrieve #chk1 before it exists in the DOM!
document.getElementById('chk1');
</script>
<input id="chk1">
Whereas either of these will
<input id="chk1">
<script type="text/javascript">
// #chk1 exists in DOM, this works
document.getElementById('chk1');
</script>
or
<script type="text/javascript">
// Force execution to wait until window is done i.e, DOM is ready
window.onload = function()
{
document.getElementById('chk1');
}
</script>
<input id="chk1">
EDIT
I copied your entire chunk of HTML from above, added this to the end of it
<script type="text/javascript">
alert([
document.getElementById('chk0')
, document.getElementById('chk1')
]);
</script>
and opened it in IE7. The alert produced [object],[object] which means it worked and found both nodes. Not sure what to tell you.

I know this post is old, but I found it while looking for help on a similar issue: .getElementById was not working for me with input type=text. Works fine for select controls, and works fine for me for input type=text on other pages in my system, but I was pulling out my hair for hours trying to get it to work on this one stupid page...
Called from window_onload, not a dom issue, blah blah blah.
I still don't know why it's not working, but I was able to successfully use .getElementsByName as a replacement. May not be ideal but it should definitely get you moving forward again. Hope this helps.

I agree with the other answer, you are probably trying to access the dom before its loaded. Try this
window.onload = function(){alert(document.getElementById('chk1'));}
See how that works for ya

just a hunch, but maybe ie8 doesnt like it when the input dont have a name (especially since they are checkboxes)

Are you using the .checked property of the checkbox to see if it is checked or not? Take a look at this example. It explains how you may evaluate a checkbox's check state.
http://www.developertutorials.com/tutorials/javascript/controlling-checkboxes-javascript-050629/page1.html

Are you using chk0 and chk2 as the element id for any other html element on the page.

With Jquery, try this:
<script type="text/javascript">
$().ready(function() {
$('#chk1');
});
</script>
It will execute once the DOM is ready to be manipulated, this should fix your issue.

Also if you are running this on a facebook application and use a prefix 'f' like f0 or f_10 then it doesn't work either, wierd error I discovered, thought I would share as this is what I googled for