How to make a fixed size of an div element?
So that when i write in it ,it won't change the width.
Can't figure out what i did wrong.
part of code with css :
var table = document.body.getElementsByTagName("table");
for (var i = 0; i < table.length; i++) {
table[i].style.border = "solid";
table[i].style.borderWidth = "1px";
table[i].style.width = "1024px";
table[i].style.height = "auto";
table[i].style.textAlign = "left";
};
var tdAll = document.body.getElementsByTagName("td");
for (var i = 0; i < tdAll.length; i++) {
tdAll[i].style.border = "1px solid #dddddd";
tdAll[i].style.height = "30px";
};
var divALL = document.body.getElementsByTagName("div");
for (var i = 0; i < divALL.length; i++) {
divALL[i].style.height = "100%";
divALL[i].style.width = "100%";
divALL[i].style.lineHeight = "25px";
};
whole code on fiddle : https://jsfiddle.net/zzduqpky/
set max-width property
e.g. max-width="100px"
this will fixed the problem of div width.
The problem was solved by adding table-layout:fixed to my table styles. The table cell and div doesn't expand anymore.
Thank you everyone for their time!!!
Related
In JavaScript I am creating a grid (the type of grid you see in Photoshop) with HTML tables. The grid size is going to be variable, i.e., changeable by the user, so the size of each grid square must be calculated and divided by the number of pixels available to get an exact size grid.
I've done all this, but I have a problem adding in the necessary table elements to create the grid. My code is in full working order, except when I use the appendChild() function inside a for loop it only ever appends a single child, when it should be appending up to a couple of hundred.
My code:
grid.show = function(event)
{
var e = event;
if(grid.show_grid == false)
{
grid.show_grid = true;
parent.document.getElementById("grid_table").style.display = "block";
// Get grid (table) and create some elements.
grid.get_grid = parent.document.getElementById("grid_table");
grid.tr = parent.document.createElement("tr");
grid.td = parent.document.createElement("td");
// Clear the grid of all squares so we don't have to worry about subtracting anything.
grid.get_grid.innerHTML = "";
// Calculate the number of horizontal and vertical squares.
var horizontal = Math.ceil(grid.total_width / grid.size);
var vertical = Math.ceil(grid.total_height / grid.size);
// This was a nested loop, removed for demonstration.
// Attempting to add 10 "<tr><td></td></tr>" to the table.
for(var j = 0; j < 10; j++)
{
grid.tr.appendChild(grid.td);
}
//console.log(grid.tr);
// Add the elements to the table.
grid.get_grid.appendChild(grid.tr);
}
else
{
grid.show_grid = false;
parent.document.getElementById("grid_table").style.display = "none";
}
}
This only ever returns a single table row with single table data inside, like so:
<tr>
<td></td>
</tr>
I've already looked at this page and this page, and they sound promising but I just can't figure out how to make this work.
EDIT: Code now working, solution:
grid.show = function(event)
{
var e = event;
if(grid.show_grid == false)
{
grid.show_grid = true;
parent.document.getElementById("grid_table").style.display = "block";
grid.get_grid = parent.document.getElementById("grid_table");
grid.tr = null;
grid.td = null;
grid.get_grid.innerHTML = "";
var horizontal = Math.ceil(grid.total_width / grid.size);
var vertical = Math.ceil(grid.total_height / grid.size);
for(var i = 0; i < vertical; i++)
{
grid.tr = parent.document.createElement("tr");
for(var j = 0; j < horizontal; j++)
{
grid.td = parent.document.createElement("td");
grid.td.width = grid.size;
grid.td.height = grid.size;
grid.tr.appendChild(grid.td);
}
grid.get_grid.appendChild(grid.tr);
}
}
else
{
grid.show_grid = false;
parent.document.getElementById("grid_table").style.display = "none";
}
}
You are appending the same element over and over. You need to call document.createElement each time you wish to have a new element.
EDIT: If the element setup is really complicated and potentially includes children then you can also use Node.cloneNode
If you want to make one copy of the element, you will need to clone it. Use cloneNode()
So change
grid.tr.appendChild(grid.td);
to
grid.tr.appendChild(grid.td.cloneNode(true));
for(var j = 0; j < 10; j++)
{
grid.tr.appendChild(grid.td);
}
should be
for(var j = 0; j < 10; j++) {
var newTd = parent.document.createElement('td');
grid.tds.push(newTd); // if you need it, not sure why though
grid.tr.appendChild(newTd);
}
function createDiv(x) {
var dIv, t;
for (i = 0; i < 3; ++i) {
dIv = document.createElement("DIV");
t = document.createTextNode(i);
dIv.appendChild(t);
dIv.id = i;
dIv.style.color = "blue";
dIv.style.width = "100%";
dIv.style.height = "100%";
document.getElementById("SAREE").appendChild(dIv);
}
}
The above code is to create multiple depends the value passed (x). But
only one with id = 0 is created.
It's working, but the div take 100% of the body, just scroll down to see the others....
Try to replace height: 100% by height : 10% wand you will see all...
You need to reference x in the for loop count. That will give you the correct amount of divs.
function createDiv(x) {
var dIv, t;
for (i = 0; i <= x; i++) {
dIv = document.createElement("DIV");
t = document.createTextNode(i);
dIv.appendChild(t);
dIv.id = i;
dIv.style.color = "blue";
dIv.style.width = "100%";
dIv.style.height = "100%";
document.getElementById("SAREE").appendChild(dIv);
}
}
createDiv(2)
createDiv(5)
<div id="SAREE"></div>
I have a bunch of divs positioned on top of an image.
I am trying to make the fraction hidden by the div to appear on the mouse hover. To achieve this I tried setting the zIndex of the div to be lower than the one of the image so it gets revealed. But I can seem to select ALL the divs.
Here is my javascript code:
window.onload = function () {
var block = document.getElementById('container');
block.addEventListener('mouseover', function () {
var blocks = document.querySelectorAll("#container div");
var index = 0, length = blocks.length;
for (var index = 0; index < length; index++) {
blocks[index].style.zIndex = 2;
}
});
for (var i = 0; i < 40; i++) {
for (var j = 0; j < 40; j++) {
var div = document.createElement("div");
div.className = "block";
div.style.left = j * 25 + 'px';
div.style.top = i * 25 + 'px';
div.style.display = "inline-block";
div.style.verticalAlign = "top";
div.style.zIndex = "1";
document.getElementById("container").appendChild(div);
}
var jump = document.createElement("br");
document.getElementById("container").appendChild(jump);
}
};
Where did I go wrong? Thank you. The div container has the background image that is placed "under" the created inner divs.
document.querySelectorAll returns an array of elements. You would need to loop through them individually.
var blocks = document.querySelectorAll("#container div");
var index = 0, length = blocks.length;
for ( ; index < length; index++) {
blocks[index].style.zIndex = 1;
}
If you are only looking for a single element you can also use document.querySelector which returns the first element it finds that matches the selector and you can work directly on it as you originally had in your code.
I'm a begginer with javaScript. and I want to create number of windows (div) with loop operation only with javaScript.
This is my code:
var numOfWindows = 3;
var arrayDiv = new Array();
for (var i = 0; i < numOfWindows; i++)
{
arrayDiv[i] = document.createElement('div');
arrayDiv[i].id = 'block' + i;
arrayDiv[i].style.backgroundColor = 'green';
arrayDiv[i].className = 'block' + i;
document.body.appendChild(arrayDiv[i]);
}
but I see a blank screen.
Your JavaScript works perfectly, if you give the created elements some content, or specific dimensions in CSS:
var numOfWindows = 3;
var arrayDiv = new Array();
for (var i = 0; i < numOfWindows; i++)
{
arrayDiv[i] = document.createElement('div');
arrayDiv[i].id = 'block' + i;
arrayDiv[i].style.backgroundColor = 'green';
arrayDiv[i].className = 'block' + i;
// setting the textContent to the 'i' variable:
arrayDiv[i].textContent = i;
document.body.appendChild(arrayDiv[i]);
}
JS Fiddle demo.
Or:
var numOfWindows = 3;
var arrayDiv = new Array();
for (var i = 0; i < numOfWindows; i++) {
arrayDiv[i] = document.createElement('div');
arrayDiv[i].id = 'block' + i;
arrayDiv[i].style.backgroundColor = 'green';
arrayDiv[i].className = 'block' + i;
// setting the class-name of the created elements:
arrayDiv[i].className = 'bordered';
document.body.appendChild(arrayDiv[i]);
}
JS Fiddle demo.
Give your div a specified width and height.
div.style.width = '10px';
div.style.heigt = '10px';
Or give it content.
I have a list of images with various sizes and I have to show them all in a page. I want to arrange them in such a way that no white spaces are shown between images on oneline and the image on the next line. Anyways I can achieve this using CSS and Javascript, ??
Following is the example on jsFiddle.
http://jsfiddle.net/zHxPT/1/
If you're willing to have the images overlap each other you can have minimum gap between them using client side code to position the items dynamically:
window.onload = function() {
var oList = document.getElementById("liParent")
var arrItems = oList.getElementsByTagName("li");
var totalWidth = parseInt(oList.style.width, 10);
var curLeft = 0;
var curTop = 0;
var arrHeights = new Array();
var colIndex = 0;
for (var i = 0; i < arrItems.length; i++) {
var oCurItem = arrItems[i];
var oImage = oCurItem.getElementsByTagName("img")[0];
oCurItem.style.position = "absolute";
var curWidth = oImage.offsetWidth;
var curHeight = oImage.offsetHeight;
if (curLeft + curWidth > totalWidth) {
curLeft = 0;
colIndex = 0;
}
if (colIndex < arrHeights.length)
curTop = arrHeights[colIndex];
oCurItem.style.left = curLeft + "px";
oCurItem.style.top = curTop + "px";
arrHeights[colIndex] = (curHeight + curTop);
curLeft += curWidth;
colIndex++;
}
}
Updated jsFiddle: http://jsfiddle.net/zHxPT/2/
Have you looked into jquery?
With CSS you could set the margin and padding of the elements to 0. Then use javascript as an array, get a random number and write that index to the page.
Load the images (in a hidden div if needed) then find the tallest and give all the images the same height. That way there will be no gap to the next row (and then show the div)
For example