I have a Div in which I want to add another small Div's Dynamically. But small Div's strictly needs to be inside the main Div. I have added one small Div inside. But how to add all the 15 div's inside the main Div dynamically I'm not getting. Also the size of small Div's are fixed, if they are more in numbers say 20, then Main Div should have horizontal scroll bar.
Here is the HTML used:
<div id="tables" style="width:740px; height:50px; border:1px solid;margin-left:180px;">
<div id ="1" style="border:1px solid; height:44px; width:50px; margin-left:2px; margin-top:2px; margin-bottom:2px;">1</div>
</div>
And here is my fiddle link: Fiddle.
You need to loop as many times as required, create the elements and then append them to #tables. Something like this:
var $tables = $('#tables');
for (var i = 1; i <= 15; i++) {
$('<div />', { class: 'inner', text: i }).appendTo($tables);
};
Example fiddle
You can add the id property back in if needed, but I would advise against incremental id attributes as they only lead to a maintenance headache. Also, I changed the styling to use actual CSS classes for a better separation of concerns.
You can use the following code in jQuery to append a div :
smallDivWidth = (740 / 15);
for (var i = 1; i <= 15; i++) {
$('#tables').append('<div style="border:1px solid; height:44px;float:left; margin- left:2px; margin-top:2px; margin-bottom:2px;">1</div>');
$('#tables').children().css('width',(smallDivWidth-4)+'px');
};
Just as an example, see this here :
$("#btnDynamicDiv").click(function() {
var smallDivWidth = (740 / 15);
for (var i = 1; i <= 15; i++) {
$('#tables').append('<div style="border:1px solid; height:44px;float:left; margin- left:2px; margin-top:2px; margin-bottom:2px;">1</div>');
$('#tables').children().css('width',(smallDivWidth-4)+'px');
};
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div id="tables" style="width:740px; height:50px; border:1px solid;margin-left:180px;">
<div id ="1" style="border:1px solid; height:44px; width:50px; margin-left:2px; margin-top:2px; margin-bottom:2px;">1</div>
</div>
<input type="button" id="btnDynamicDiv" value ="Add div dynamically"></input>
Try like this (JSFiddle demo)
HTML:
<div id="tables">
<div class="inner" id="innder-1">1</div>
</div>
<div class="inner inner-template"></div>
<br>
<button id="add-btn">Add inner</button>
CSS:
#tables {
width:200px;
height:50px;
border:1px solid;
white-space: nowrap;
overflow-x: auto;
}
.inner {
border:1px solid;
height:44px;
width:50px;
margin-left:2px;
margin-top:2px;
margin-bottom:2px;
display: inline-block;
vertical-align: top;
white-space: howrap;
}
.inner-template {
display: none;
}
JS:
var $template = $('.inner-template');
$('#add-btn').on('click', function() {
var currentID = $('#tables .inner').length + 1;
var $inner = $template
.clone()
.removeClass('inner-template')
.attr('id', 'inner-' + currentID)
.text(currentID)
.appendTo('#tables');
});
Related
i have a user div, containing a list of users and onclick of any user i want a div with 3 child divs to be appended to another parent div.but when try running my code, 3 appended divs are created when two users are clicked and 5 appended divs are created when 3 users are clicked please any help will be appreciated. below is my code
<htmL>
<head>
<script src="js/jquery-1.11.1.min.js"></script>
</head>
<style>
.clear{
clear:both:
}
.mainwrapper{
width:700px;
border-style:solid;
bottom:5000px;
z-index:2;
margin-left:20px;
margin-top:150px;
//display:none;
}
.wrapper{
height:300px;
width:300px;
border-style:solid;
float:left;
}
.wrapper1{
height:90px;
width:280px;
border-style:solid;
margin:5px;
}
.wrapper11{
height:50px;
width:80px;
border-style:solid;
float:left;
}
.wrapper12{
height:50px;
width:190px;
border-style:solid;
}
.wrapper2{
height:90px;
width:280px;
border-style:solid;
margin:5px;
}
.wrapper21{
height:50px;
width:80px;
border-style:solid;
float:left;
}
.wrapper22{
height:50px;
width:190px;
border-style:solid;
}
.wrapper3{
height:90px;
width:280px;
border-style:solid;
margin:5px;
}
</style>
<body>
<div class="user">
<p>first</p>
<p>second</p>
<p>thid</p>
</div>
<!----parent container---->
<div class="mainwrapper">
</div>
</body>
<script>
$(".user").click(function () {
//alert('oko');
create();
})
function create(){
$('<div/>',{ class : 'wrapper'}).appendTo(".mainwrapper");
$('<div/>',{ class : 'wrapper1'}).appendTo(".wrapper");
$('<div/>',{ class : 'clear'}).appendTo(".wrapper1");
$('<div/>',{ class : 'wrapper2'}).appendTo(".wrapper");
$('<div/>',{ class : 'clear'}).appendTo(".wrapper2");
$('<div/>',{ class : 'wrapper3'}).appendTo(".wrapper");
$(".wrapper3").append('<form action="chatprocess.php?id="+"e"+" method="POST">');
$(".wrapper3 form").append('<input type="text" placeholder="Name" name="a" id="rname"/>');
$(".wrapper3 form").append('<br><input type="submit" name="submit" value="Send" />');
$(".wrapper3 form").attr('action', 'chatprocess.php?send='+send+'&&rec='+user+'&&cat='+cat);
return user
}
</script>
</html>
You shoud add some distinct tag to the wrapper class name that is added to the mainwrapper when you create the new divs so as to associate it with the specific user that was clicked.
To do that pass the tag ("user1" for example) in the create function.
Then name wrapper class as wrapper_user1 instead of just wrapper.
What happens with your code is that when you click on the 2nd and 3rd user, when you append to "wrapper" it is appending to the new wrapper you added, but also to the ones you created before by clicking user 1 and 2.
The same happens with wrapper3. I suggest you tag all your wrappers with the corresponding user in case you add more functionality.
If you want to keep the tagging only at the first level of wrappers you will need to change how you select the different elements by prepending the corresponding tagged wrapper in the jQuery selector.
Note: Also check your code. js has some syntax errors and undefined variables. Css also has syntax errors.
$(".user a").click(function() {
//alert('oko');
var tag = $(this).attr('data-tag');
create(tag);
});
function create(tag) {
var newClass = 'wrapper_' + tag;
//Declared for snippet to work
var send ="";
var user="";
var cat="";
//----------
$('<div/>', {
class: newClass
}).appendTo(".mainwrapper");
$('<div/>', {
class: 'wrapper1 wrapper1_' + tag
}).appendTo("." + newClass);
$('<div/>', {
class: 'clear'
}).appendTo(".wrapper1_" + tag);
$('<div/>', {
class: 'wrapper2 wrapper2_' + tag
}).appendTo("." + newClass);
$('<div/>', {
class: 'clear'
}).appendTo(".wrapper2_" + tag);
$('<div/>', {
class: 'wrapper3 wrapper3_' + tag
}).appendTo("." + newClass);
$(".wrapper3_" + tag).append('<form action="chatprocess.php?id="+"e"+" method="POST">');
$(".wrapper3_" + tag + " form").append('<input type="text" placeholder="Name" name="a" id="rname"/>');
$(".wrapper3_" + tag + " form").append('<br><input type="submit" name="submit" value="Send" />');
$(".wrapper3_" + tag + " form").attr('action', 'chatprocess.php?send=' + send + '&&rec=' + user + '&&cat=' + cat);
return user;
}
.clear {
clear: both;
}
.mainwrapper {
width: 700px;
border-style: solid;
bottom: 5000px;
z-index: 2;
margin-left: 20px;
margin-top: 150px;
//display:none;
}
.wrapper {
height: 300px;
width: 300px;
border-style: solid;
float: left;
}
.wrapper1 {
height: 90px;
width: 280px;
border-style: solid;
margin: 5px;
}
.wrapper11 {
height: 50px;
width: 80px;
border-style: solid;
float: left;
}
.wrapper12 {
height: 50px;
width: 190px;
border-style: solid;
}
.wrapper2 {
height: 90px;
width: 280px;
border-style: solid;
margin: 5px;
}
.wrapper21 {
height: 50px;
width: 80px;
border-style: solid;
float: left;
}
.wrapper22 {
height: 50px;
width: 190px;
border-style: solid;
}
.wrapper3 {
height: 90px;
width: 280px;
border-style: solid;
margin: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="user">
<p><a data-tag="user1" href="#">first</a></p>
<p><a data-tag="user2" href="#">second</a></p>
<p><a data-tag="user3" href="#">thid</a></p>
</div>
<!----parent container---->
<div class="mainwrapper"></div>
Have a DIV set in which you want to append//add 3 DIV, something like this:
<div id='parentDiv'>
<!-- place where 3 DIVs will be inserted -->
</div>
Somewhere you will have three texts for a click event to happen, add an onClick event to all the texts:
<div>
<a class = 'clickMe' onclick="myFunction()">one</a></div></br>
<a class = 'clickMe'onclick="myFunction()">two</a></br>
<a class = 'clickMe'onclick="myFunction()">three</a></br>
</div>
In a script tag define a string with has 3 DIVs inside a parent DIV, something like this:
var divWith3ChildDiv = '<div><div style="background-color:blue;">this is 1st added DIV</div><div style="background-color:red;">2nd Added DIV</div><div style="background-color:pink;">3rd added DIV</div></div>';//a parent DIV with 3 DIVs inside it
And then you can have your onClick event function which will use innerHTML method to add the string defined above as HTML to the 'parentDiv'
var getElements = document.getElementsByClassName('clickMe');
var myDiv = document.getElementById('parentDiv');
function myFunction(){
myDiv.innerHTML = divWith3ChildDiv;
}
So I have a div wrap whose size is a percentage of the screen width. Inside this wrap is multiple .item divs. As the window gets smaller it breaks into new lines obviously.
I wrote some code which basically takes the width of the wrap and divides it by the sum of the widths of the .item boxes. But the flaw is that it looks at it thinking how many boxes could fit in total, were one to mix and match them perfectly like building blocks, but that's not how it works because the ordering is stagnant.
How could I make this logic work?
CodePen
jQuery:
var itemWidth = 0;
var lineCount = 1;
$(window).on('resize', function(){
var lineWidth = $('.line').width();
var itemWidthSum = 0;
lineCount=1;
$('.item').each(function(index, element) {
if(itemWidthSum < (lineWidth - $(element).outerWidth())) {
itemWidthSum = itemWidthSum + $(element).outerWidth();
} else {
lineCount++;
itemWidthSum = 0;
}
});
});
HTML:
<div id="container">
<div class="rect">
<div class="line">
</div>
<div class="item">Computer Science</div>
<div class="item">Language</div>
<div class="item">Marketing</div>
<div class="item">Biology</div>
<div class="item">Computer Science</div>
<div class="item">Language</div>
<div class="item">Marketing</div>
<div class="item">Biology</div>
<div class="item">Computer Science</div>
<div class="item">Language</div>
<div class="item">Marketing</div>
<div class="item">Biology</div>
<div class="item">Computer Science</div>
<div class="item">Language</div>
<div class="item">Marketing</div>
<div class="item">Biology</div>
</div>
<h1 class="answer"></h1>
CSS:
body {
padding:25px;
}
.answer {
position:fixed;
bottom:0;
left:0;
}
#container {
border: 1px solid rgb(200,200,200);
height: auto;
width: 30%;
margin:0 auto;
}
.item {
padding: 10px;
background-color: #aef2bd;
float: left;
}
.rect {
height: 100px;
width:100%;
position: relative;
}
.rect .line {
position:absolute;
height:50px;
width: 100%;
bottom:0;
border-top: 1px solid red;
}
Figured out my logic mistake by debugging each step.
The correct jQuery:
var itemWidth = 0;
var lineCount = 1;
$(window).on('resize', function(){
var lineWidth = $('.line').width();
var itemWidthSum = 0;
var list = [];
lineCount=1;
$('.item').each(function(index, element) {
if((lineWidth - itemWidthSum) > ($(element).outerWidth())) {
itemWidthSum = itemWidthSum + $(element).outerWidth();
} else {
lineCount++;
itemWidthSum = $(element).outerWidth();
}
});
});
I am creating html elements using JQuery and appending them to the document, but I was wondering how I might be able to do it with style using something like on this page where it describes the "swinging in" animation down towards the bottom of page.
https://cssanimation.rocks/list-items/
I am using a setInterval method to append the divs one by one slowly, but I tried the method described in website, but it does not work.
timer = (setInterval(addprojectsNow, 1000));
function addprojectsNow(){
console.log("FIRSTCLICK ADDPROJECTS", firstClick);
console.log("PROJECTS LINKS OBJECT", projectLinks);
let newProject = $('<div style="display: none;" class="col-md-6">').attr('id', count);
let innerDiv = $('<div class="portfolio-item well">');
let heroku = $('<h4><b>' + projectLinks[count].project.heroku + '</b></h4>');
let github = $('<b><h4>Github Link</b></h4>');
let img = $('<img style="border: solid; border-width: thin; border-style: dashed;" class="img-portfolio img-responsive" src="' + projectLinks[count].project.imgSRC + '"' + '>');
innerDiv.append(heroku);
innerDiv.append(github);
innerDiv.append(img);
newProject.append(innerDiv);
$(newProject)addClass('show').appendTo('.portfolio-showcase').show('slow');
return;
}
//The container the new <divs> are being appended to. The last nested divs has the '.swing' class.
<section id="portfolio" class="portfolio">
<div class="container">
<div class="row">
<div class="col-lg-10 col-lg-offset-1 text-center ">
<h2>My Applications</h2>
<hr class="medium bold">
<div class="row portfolio-showcase swing">
/CSS
.swing {
perspective: 500px;
}
.swing div.col-md-6 {
opacity: 0;
-webkit-transform: rotateX(-90deg);
-webkit-transition: all 0.5s cubic-bezier(.36,-0.64,.34,1.76);
}
.swing div.show {
opacity: 1;
-webkit-transform: none;
-webkit-transition: all 0.5s cubic-bezier(.36,-0.64,.34,1.76);
}
You can set up the item as you like before you append it
var newDiv = "
$(newProject)addClass you're missing a .
$(newProject).addClass
There is some syntax issue :
$(newProject).addClass('show').appendTo('.portfolio-showcase').show('slow');
Please add the . just after $(newProject)
try this
setInterval(function(){
var newProject = $('<div style="display: none;" class="col-md-6">').attr('id', count);
var innerDiv = $('<div class="portfolio-item well">');
var heroku = $('<h4><b>' + projectLinks[count].project.heroku + '</b></h4>');
var github = $('<b><h4>Github Link</b></h4>');
var img = $('<img style="border: solid; border-width: thin; border-style: dashed;" class="img-portfolio img-responsive" src="' + projectLinks[count].project.imgSRC + '"' + '>');
innerDiv.append(heroku);
innerDiv.append(github);
innerDiv.append(img);
newProject.append(innerDiv);
newProject.addClass('show').appendTo('.portfolio-showcase').show('slow');
return;
}, 1000);
$(newProject).appendTo('.portfolio-showcase');
setTimeout(function(){$(newProject).addClass("show")},500)
You define the initial styles, then overwrite them with a class that you add via jQuery and the overwriting class uses transition to create the effect. But you need to add the class in a setInterval so that the element is added to the DOM with the initial style, then receives the new style to transition, otherwise the element will get the new class too fast and the transition won't fire. Here's a demo.
$('button').on('click',function() {
$newEl = $('<li>foo</li>');
$('ul').append($newEl);
setTimeout(function() {
$newEl.addClass('show');
})
})
li {
list-style: none;
background: #d1703c;
border-bottom: 0 solid #fff;
color: #fff;
height: 0;
padding: 0 0.5em;
margin: 0;
overflow: hidden;
line-height: 2em;
width: 10em;
transform: rotateY(-90deg);
transition: all 0.5s cubic-bezier(0.36, -0.64, 0.34, 1.76);
}
.show {
height: 2em;
border-width: 2px;
opacity: 1;
transform: none;
}
ul {
perspective: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>click</button>
<ul>
</ul>
I have a label I'm attempting to generate. It has the following structure.
.name-box { width: 400px; background-color: #efefef; border: 1px solid #000; overflow: hidden; white-space: nowrap; }
.last-name { font-size: 26px; display:inline; overflow: hidden;}
.first-name { display:inline; overflow: hidden;}
<div class="name-box">
<div class="last-name">McDonald-OrAReallySuperDuperLongLastName</div>
<div class="first-name">David</div>
</div>
What I'm wanting to do is change the text size of the first name, based on the length of the last name. If the name is "Venckus-Stringfellow" and I only have a little bit of space left I'd like the text size of the first name to be around 7px. But if the last name is "Le", then I'd want the first name to have a text size of 26px -- granted that having a text size of 26px still allows the first name to fit on the 600px that my div has to fill the label. How can I do this with HTML/CSS (if I MUST use Javascript then that's fine, was trying to avoid it though) ?
Javascript that uses the length of the last name in a mathematical equation to set the first names size. This is a very simple example and you'd need to change it if you wanted it to be exponential and you should probably set high and low bounds that it can't go below.
var lastNameText = document.querySelector('.last-name').textContent;
var firstName = document.querySelector('.first-name');
firstName.style.fontSize = (120 / lastNameText.length) + "px";
.name-box { width: 600px; }
.last-name { font-size: 26px; }
.first-name: { font-size: 26px; }
<div class="name-box">
<div class="last-name">McDonald</div>
<div class="first-name">David</div>
</div>
You're going to need javascript here, unfortunately. You can get close using viewport percentages, but that applies to the whole viewport. And it would only be for one container, not a preceding container. What you are going to need to do is create an algorithm that updates the font sizes, and run it everytime you load HTML/text into those div's.
Something like this should get you started:
function loadNames(var firstName, var lastName) {
//GET THE LENGTH OF THE LASTNAME STRING
var len = lastName.length;
var factor = .7; //CUSTOMIZE THIS TO DO YOUR SIZING BASED ON THE FONT
var fontSize = Math.ceil(factor * len); //GET THE NEW FONT SIZE, BASED ON THE LENGTH AND FACTOR, AND ROUNDED UP
//SET THE TEXT OF THE NAMES
$('firstName').Text(firstName);
$('lastName').Text(lastName);
//SET THE FONT SIZES
$('firstName').css({ 'font-size': fontSize + 'px;' });
$('lastName').css({ 'font-size': fontSize + 'px;' });
}
CSS solution unfortunately is not possible. It's not possible to select partial text inputs, and there's some calculation required that cannot be done with CSS at this point, in this age.
But javascript.. Were you looking for something like this OP?
$(document).on("ready", function(){
var ratio = 20;
$(".name").keydown(function(){
var input_length = $(this).val().length / ratio;
var new_size = (2 - input_length < 1 ? 1 : 2 - input_length);
$(this).css("font-size", new_size+"em");
});
});
input {
width: 40em;
margin: 0 auto;
display: block;
padding: 15px;
}
.main-wrapper {
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-wrapper">
<input class="name" type="text" placeholder="Enter name" />
</div>
This is another approach how You could achieve the result. Maybe it's possible to do not use table at all but each div should use display:inline-block; property.
$scalingL = $('.last-name').width();
$scalingF = $('.first-name').width();
$('.first-name').css('font-size',($scalingL / $scalingF * 26));
.name-box { width: 600px; background-color: #efefef; border: 1px solid #000; overflow: hidden; white-space: nowrap; }
.last-name { font-size: 26px; overflow: hidden; display:inline-block;}
.first-name { font-size: 26px; display:inline-block;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="name-box">
<table>
<tr>
<td>
<div class="last-name">McDonald-OrAReallySuperDuperLongLastName</div>
</td>
</tr>
</tr>
<td>
<div class="first-name">Something</div>
</td>
</tr>
</table>
</div>
Try this:
<style type="text/css">
.name-box{
width:auto;
overflow:auto;
}
#first-name{
display:inline-block;
width:auto;
clear:both;
float:left;
font-size:1px;
}
#last-name {
display:inline-block;
width:auto;
clear:both;
float:left;
font-size:26px;
}
</style>
<div class="name-box">
<div id="last-name">McDonalds</div>
<div id="first-name">David</div>
</div>
<script type="text/javascript">
var ln = document.getElementById("last-name");
var fn = document.getElementById("first-name");
for ( i = 1; ln.offsetWidth>fn.offsetWidth; i+=.5)
{
fn.style.fontSize=(i)+"px";
}
</script>
<style type="text/css">
.name-box{
width:auto;
overflow:auto;
}
#first-name{
display:inline-block;
width:auto;
clear:both;
float:left;
font-size:1px;
}
#last-name {
display:inline-block;
width:auto;
clear:both;
float:left;
font-size:26px;
}
</style>
<div class="name-box">
<div id="last-name">McDonalds</div>
<div id="first-name">David</div>
</div>
<script type="text/javascript">
var ln = document.getElementById("last-name");
var fn = document.getElementById("first-name");
for ( i = 1; ln.offsetWidth>fn.offsetWidth; i+=.5)
{
fn.style.fontSize=(i)+"px";
}
</script>
I am trying to create a hovering menu, but it doesn't work. I create a menu and set it with a high z-index value. I then generate a table using javascript, but then I scroll down the table goes in front of my menu buttons.
Edit:
I am just trying to get this to work for FF8.
Edit 2:
This code will actually work. In order to make my buttons appear on top I just set my table z-index to -1;
#blackHead
{
width:100%;
background-color:White;
}
#table
{
position:relative;
width: 40%;
left: 30%;
z-index: -1;
}
#header
{
position: fixed;
top:3%;
left:30%;
width:40%;
z-index: 100;
}
.inv
{
visibility:hidden;
width:30px;
}
.headerButton
{
text-decoration:none;
position:relative;
font-family:Arial;
font-weight:bold;
color:White;
border: solid 1px black;
background-color: Black;
border-radius: 5px;
padding: 5px;
z-index: 101;
}
.headerButton:hover
{
background-color: White;
color: Black;
}
#myTable {
position: absolute;
top:10%;
}
#button1
{
position: absolute;
top:0%;
left:0%;
}
#button2
{
position: absolute;
top:0%;
right:0%;
}
#button3
{
position: absolute;
top:0%;
left:50%;
}
#button4
{
position: absolute;
top:10%;
left:50%;
}
#button5
{
position: absolute;
top:10%;
right:0%;
}
</style>
<html>
<head>
<title>Table</title>
</head>
<body>
<div id="header" class="headerBar">
Create Table
<span class="inv">" "</span>
Update Table
<span class="inv">" "</span>
Quit
<span class="inv">" "</span>
Send Json
<span class="inv">" "</span>
Start Timer
<span class="inv">" "</span>
Stop Timer
</div>
</body>
</html>
<script type="text/javascript">
function create_table() {
// get the reference for the body
var body = document.getElementsByTagName("body")[0];
// creates a <table> element and a <tbody> element
var tbl = document.createElement("table");
tbl.id = "table";
var tblBody = document.createElement("tbody");
tbl.style.zIndex = -1;
// creating all cells
var xmlDoc = getXML();
var x = xmlDoc.getElementsByTagName("Registers");
for (var i = 0; i < x.length; i++) {
// creates a table row
var row = document.createElement("tr");
// Create a <td> element and a text node, make the text
// node the contents of the <td>, and put the <td> at
// the end of the table row
var name = document.createElement("td");
name.style.width = "80%";
var nameText = document.createTextNode(x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue);
name.appendChild(nameText);
row.appendChild(name);
var number = document.createElement("td");
number.style.width = "10%";
var numberText = document.createTextNode(x[i].getElementsByTagName("number")[0].childNodes[0].nodeValue);
number.appendChild(numberText);
row.appendChild(number);
var value = document.createElement("td");
value.style.width = "10%";
var valueText = document.createTextNode(x[i].getElementsByTagName("value")[0].childNodes[0].nodeValue);
value.appendChild(valueText);
row.appendChild(value);
row.addEventListener("dblclick", modify_value, false);
// add the row to the end of the table body
tblBody.appendChild(row);
}
// put the <tbody> in the <table>
tbl.appendChild(tblBody);
// appends <table> into <body>
body.appendChild(tbl);
// sets the border attribute of tbl to 2;
tbl.setAttribute("border", "2");
tbl.style.position = "absolute";
tbl.style.top = "30%";
}
</script>
myTable has position: absolute; - that will always go over something with position: static;
z-index will work, but both elements (the table and the menu have to both have z-index and position: absolute;
Without seeing the HTML it's pretty hard to detect the problem.
Example
Here's a fiddle describing the problem: http://jsfiddle.net/rZysU/
.a1's z-index is set to 1000 but it still is not visible. b1 is visible although its z-index is only 1. (it even is the same with -1)
In General
If you nest HTML elements then each nesting level creates its own z-index stack. If you set the z-index of an element inside a deeper node in the DOM tree then it might happen that although you've set the z-index to a high value it still will be underneath other elements that reside in a higher hierarchy level of the DOM.
Example:
div1
div1a
a (z-index= 100)
b (z-index= 101)
c (z-index= 102)
div1b
d (z-index= -1)
e (z-index= 1)
d will still be drawn on top of a as div1b is given a higher z-index because it is listed after div1a and HTML renderers draw one node after another and define z-indicies by that way if you don't provide it by your CSS definition.