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
Related
Is there a way to name a var using a sort of "Array?" My code is this:
for(var i = 0; i < (getHorizontalSquares * getVerticalSquares); i++){
var Square[i] = document.createElement("div");
Square[i].style.position = "relative";
Square[i].style.float = "left";
Square[i].style.width = "50px";
Square[i].style.height = "50px";
Square[i].id = "square" + (i + 1);
for(var ii = 0; ii < 6; ii++){
var TestColor = TestColorArray[Math.round(Math.random()*(TestColorArray.length - 1))];
getTestColor += TestColor;
}
Square[i].style.backgroundColor = "#" + getTestColor;
SquareCont.appendChild(Square[i]);
}
I know my code doesn't work, but I want to implement the same idea so I can get a result of this:
var Square1...
var Square2...
var Square3...
var Square4...
var Square5...
etc
I also tried doing a "Concentration" var, but it didn't work. How do I do this so the document doesn't append the same square multiple times?
var Square = {};
var SquareCont = document.createElement('div');
var getHorizontalSquares = 10;
var getVerticalSquares = 10;
var TestColorArray = ['a','b','c','f','e','0','1','2','3','3','4','5'];
var getTestColor = '';
for(var i = 0; i < (getHorizontalSquares * getVerticalSquares); i++){
Square['Square'+i] = document.createElement("div");
Square['Square'+i].style.position = "relative";
Square['Square'+i].style.float = "left";
Square['Square'+i].style.width = "50px";
Square['Square'+i].style.height = "50px";
Square['Square'+i].id = "square" + (i + 1);
for(var ii = 0; ii < 6; ii++){
var TestColor = TestColorArray[Math.round(Math.random()*(TestColorArray.length - 1))];
getTestColor += TestColor;
}
Square['Square'+i].style.backgroundColor = "#" + getTestColor;
SquareCont.appendChild(Square['Square'+i]);
getTestColor = '';
}
console.log(Square);
This example does what you want using an object instead of an array, but meets your desire to dynamically create accessible Square1, Square2, etc... They are all contained in Square. In the console with this snippet, you will see that 100 squares are created and added to the Square object. They will be accessible by Square.SquareX (where X is some number), or Square['SquareX'], or Square['Square'+X] where X is some number again.
Your declaration syntax is not valid. But, I think the larger point you are trying to get to is to be able to populate an array with dynamically created elements and that you can do:
var squares = []; // Array must exist before you can populate it
var testColorArray = ["green", "yellow", "blue", "orange", "silver"];
var getTestColor = null;
function makeSquares(count){
for(var i = 0; i < count; i++){
// Just create the element and configure it. No need to worry about the array yet
var element = document.createElement("div");
element.style.float = "left";
element.style.width = "75px";
element.style.height = "75px";
element.id = "square" + (i + 1);
element.style.backgroundColor = testColorArray[Math.floor(Math.random()* testColorArray.length)];
element.textContent = element.id;
squareCont.appendChild(element);
// Now, add the element to the arrray
squares.push(element);
}
// Test:
console.log(squares);
}
makeSquares(10);
<div id="squareCont"></div>
i have multiple ul's with their respective li's and i'm trying to retrieve the childNodes length of specific ul. My logic here was, retrieve them by tag, give them classes(so i can style them) so they get stored in an array and then i would just retrieve the li's as childNodes.length of that specific ul. However, when i tried to target those li i found out that it's actually retrieving ALL of the li's, regardless of ul.
Where did i go wrong?
var parinte = document.getElementsByTagName("ul");
var copil = document.getElementsByTagName("li");
for (var x = 0; x < parinte.length; x++){
parinte[x].setAttribute("class","parinte");
for (y = 0; y <= parinte[x].childNodes.length; y++) {
copil[y].setAttribute("class","copil");
}
}
var parinteClass = document.getElementsByClassName("parinte");
var copilClass = document.getElementsByClassName("copil");
var bottom = 0;
var altBottom = -20;
for (var x = 0; x < parinte.length; x++) {
parinteClass[x].style.position = "absolute";
parinteClass[x].style.bottom = bottom + "px";
bottom = bottom - 80;
for ( var y = 0; y <= parinte[x].childNodes.length; y++){
if (altBottom === -60) {
altBottom = -20;
}
copilClass[y].style.position = "absolute";
copilClass[y].style.bottom = altBottom + "px";
altBottom = altBottom - 20;
}
}
replace this line
var copil = document.getElementsByTagName("li");
with
var copil = parinte.getElementsByTagName("li");
or
var copil = parinte.children;
Since you need to narrow your search inside that ul not in the entire document.
Your code should become now
var parinte = document.getElementsByTagName("ul");
for (var x = 0; x < parinte.length; x++){
parinte[x].setAttribute("class","parinte");
var copil = parinte[x].getElementsByTagName("li");
for (y = 0; y < copil.length; y++) {
copil[y].setAttribute("class","copil");
}
}
in line two replace
var copil = document.getElementsByTagName("li");
with
var copil = parinte.getElementsByTagName("li");
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.
$j(document).ready(<script type="text/JavaScript">
function getProps(){
var imgwidth = [];
var imgheight = [];
var w, h;
var width = document.getElementById('des').clientWidth;
var height = document.getElementById('des').clientHeight;
img = document.getElementById('des').getElementsByTagName('img').length;
w = document.getElementById('des').getElementsByTagName('img');
h = document.getElementById('des').getElementsByTagName('img');
for ( count = 0; count < img; count++){
imgwidth[count] = w.item(count).clientWidth;
imgheight[count] = h.item(count).clientHeight;
}
</script>);
I think this is what you want, I refactored your code a little:
function getProps()
{
var imgwidth = [];
var imgheight = [];
var images = document.getElementById('des').getElementsByTagName('img');
var count = images.length;
for ( i = 0; i < count; i++)
{
imgwidth[i] = images[i].clientWidth;
imgheight[i] = images[i].clientHeight;
}
console.log(imgwidth);
console.log(imgheight);
}
$(document).ready(function()
{
getProps()
});
I have set up a jsfiddle for you to demonstrate this: http://jsfiddle.net/JbpdW/
Edit
If you use jQuery (what you obvilously do), you can simplify that process a little by using:
$("#des img").each(function(i)
{
imgwidth[i] = this.clientWidth;
imgheight[i] = this.clientHeight;
});
with jquery it is very short:
$j(function() {
var result=$j.map($('#des img'),function(el,i) {
var $el=$j(el); //optimize
return {width:$el.width(),height:$el.height()};
});
console.log(result);
});
please note that i used array of objects instead of two variables, it easer to work with one variable than with two :)
http://jsbin.com/uzikeh/2/edit
I am using this tutorial to freeze the header of the GridView. I did everything as explained in the tutorial but I got the following error in IE9 and I don't know why.
Error:
Line: 182
Error: Unable to get value of the property 'offsetWidth': object is
null or undefined
I defined the GridView in the Javascript code as show below:
<script type = "text/javascript">
var GridId = "<%=GridView1 %>";
var ScrollHeight = 300;
window.onload = function () {
var grid = document.getElementById(GridId);
var gridWidth = grid.offsetWidth;
var gridHeight = grid.offsetHeight;
var headerCellWidths = new Array();
for (var i = 0; i < grid.getElementsByTagName("TH").length; i++) {
headerCellWidths[i] = grid.getElementsByTagName("TH")[i].offsetWidth;
}
grid.parentNode.appendChild(document.createElement("div"));
var parentDiv = grid.parentNode;
var table = document.createElement("table");
for (i = 0; i < grid.attributes.length; i++) {
if (grid.attributes[i].specified && grid.attributes[i].name != "id") {
table.setAttribute(grid.attributes[i].name, grid.attributes[i].value);
}
}
table.style.cssText = grid.style.cssText;
table.style.width = gridWidth + "px";
table.appendChild(document.createElement("tbody"));
table.getElementsByTagName("tbody")[0].appendChild(grid.getElementsByTagName("TR")[0]);
var cells = table.getElementsByTagName("TH");
var gridRow = grid.getElementsByTagName("TR")[0];
for (var i = 0; i < cells.length; i++) {
var width;
if (headerCellWidths[i] > gridRow.getElementsByTagName("TD")[i].offsetWidth) {
width = headerCellWidths[i];
}
else {
width = gridRow.getElementsByTagName("TD")[i].offsetWidth;
}
cells[i].style.width = parseInt(width - 3) + "px";
gridRow.getElementsByTagName("TD")[i].style.width = parseInt(width - 3) + "px";
}
parentDiv.removeChild(grid);
var dummyHeader = document.createElement("div");
dummyHeader.appendChild(table);
parentDiv.appendChild(dummyHeader);
var scrollableDiv = document.createElement("div");
if(parseInt(gridHeight) > ScrollHeight){
gridWidth = parseInt(gridWidth) + 17;
}
scrollableDiv.style.cssText = "overflow:auto;height:" + ScrollHeight + "px;width:" + gridWidth + "px";
scrollableDiv.appendChild(grid);
parentDiv.appendChild(scrollableDiv);
}
</script>
So how I fix this problem?
You have written code incorrectly
Instead of
var GridId = "<%=GridView1 %>";
Change to
var GridId = "<%=GridView1.ClientID %>"; //<= Check this
When ASP.Net controls are rendered their Id gets mangled and to get the mangled on client side the notation is as shown above.
Hope this solves your problem.