How to set div width based on a set of dynamic images? - javascript

I have a set of 15 images that are stacked horizontally. They are completely dynamic in size based on the viewport size.
To extend the page past 100% I'm using a DIV which needs to have it's width updated periodically with the widths of the 15 images + a fixed amount.
I'm fairly new to javascript but I looked around and was able to peice together a simple script and made a test page.
Update, here's the full code of the test page which I can't get to work:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
<script type="text/javascript">
window.onresize = function(event) {
var img = document.getElementById('1');
var w1 = parseInt(img.clientWidth);
var img = document.getElementById('2');
var w2 = parseInt(img.clientWidth);
d.style.width= w1 + w2 + 400;
}
</script>
<style type="text/css">
html,body{
margin:0;
padding:0;
border:none;
overflow-y:hidden;
}
.gal{
vertical-align:middle;
}
</style>
</head>
<body style="color: #1b1b1d">
<div style="position:absolute; width:18500px; height:100%; margin:0px; padding:0px; left:0px; right:0px;z-index:1;background-color:#1b1b1d">
<img id="1" class="gal" height="100%" src="image1.jpg" />
<img id="2" class="gal" height="100%" style="max-height:652px;max-width:1024px" src="image1.jpg" />
</div>
</body>
</html>
It fails to work both with and without + "px" at the end of the script.
For whatever reason it's not working at all. Can anyone help guide me here? I'm new to this. I have jquery installed with another copy and pasted script if that helps.

Try this:
var img = document.getElementById('#1');
var w1 = img.clientWidth;
var img = document.getElementById('#2');
var w2 = img.clientWidth;
d.style.width = (w1 + w2 + 400) + "px";

I think the last line in your script:
d.style.width="w1 + w2 + 400";
Needs to not be in quotes ie:
d.style.width= w1 + w2 + 400;
With regards to updating the width dynamically - you would really need to attach this script to the resize event of the browser to handle it. ie:
window.onresize = function(event) {
//your code here
}

Try this:
var img = document.getElementById('1');
var w1 = parseInt(img.clientWidth);
var img = document.getElementById('2');
var w2 = parseInt(img.clientWidth);
d.style.width= (w1 + w2 + 400) + "px";

Related

Why are my generated images not setting their position based on my mouse cursor?

I am fairly new to web development and I wanted to practice the HTML, CSS, and Javascript that I learned over the weekend. I am having trouble positioning my images correctly based on my mouse cursor. I can see that my images are being appended in the "inspect" section of google chrome but their positioning is not matching up with how the style indicates. Is there a problem with my HTML, CSS, or Javascript or all three? I want it to work similarly to http://howlooongcanthisgoon.com/
1[]2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Jaws that Bite My Claws That Catch</title>
<style>
*{
padding: 0;
margin: 0;
}
#witchwood{
background: url("witchwood.jpg");
height: 100vh;
background-position: 75% 20%;
overflow: hidden;
}
.shudder{
position: absolute;
}
</style>
</head>
<body>
<div id="witchwood" onclick="wok(event)"></div>
</body>
<script type="text/javascript">
//document.getElementById('witchwood').addEventListener("click", wok);
var z = 0;
function wok(e){
//finds position of mouse
var x= e.clientX;
var y= e.clientY;
//creates the img element
var img = document.createElement("img");
img.src = "shudderwock.png";
img.class = "shudder";
img.style.top = y + "px";
img.style.left = x + "px";
//appends the img into the div class="witchwood"
document.getElementById('witchwood').appendChild(img);
}
</script>
</html>
Here is a link to the jsfiddle.
Your .shudder class is not being applied. The appropriate DOM property is called className. You don't set an HTMLElement attribute with img.class.
Change
img.class = "shudder";
To
img.className = "shudder";
Alternatively, you could use;
img.setAttribute('class', 'shudder');

Setting height relative to `window.innerHeight` not working

This might be a very stupid question for some people, but I surely am not able to understand the problem behind this. The code is fairly simple, and goes as follows:
HTML:
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>####</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body onload="resizeDiv();">
<div id="testElement">ABCD</div>
<div id="secElement">ABC</div>
<script type="text/javascript" src="javascript.js"></script>
</body>
</html>
CSS:
html , body{
height:100%;
}
#testElement{
background-color:black;
color:white;
}
#secElement{
font-size:50px;
}
JS:
(function immediate(){
document.getElementById('secElement').textContent = window.innerHeight;
}());
function resizeDiv(){
document.getElementById('testElement').style.height = (window.innerHeight - 50) * 0.9;
}
Now, by this code, the div with id 'testElement' should have an height which is 90% of the window.innerHeight - 20. But, nothing seems to work. Please help.
Add "px":
document.getElementById('testElement').style.height = (window.innerHeight - 50) * 0.9 + "px";
body tag has a onload handler assigned to resizeDiv() but your script is at the bottom of the page so, the onload handler can't refer to it.
Use document.getElementById('testElement').setAttribute("style","height:" + (window.innerHeight - 50) * 0.9) + ' px'; You can find more explanation why to use it here: Setting DIV width and height in JavaScript

Randomly creating and positioning elements exceeds browser window

Using JQuery I am creating elements and adding them to the body (I've also tried using a DIV and get the same results), the new DIVs that JQuery is creating are being positioned well beyond the window (randomized limits).
I pretty much have a blank HTML page, that pulls in JQuery and the script.js for the page.
My screen resolution is 1920x1080, so in my JQuery I used those limits to randomize the top and left values to position the blocks; I also use a rotation which I'm not haveing any issues with. But when it places all the blocks, the X-axis blocks are WAY off my screen (almost double my screen width) and the Y-axis blocks have a handful that exceed the bottom of the screen too (I expect to have those on the edge cut off, but not all the way off the view; in fact I have -20 at the end of the calculations to create cutt offs on the top and left sides)
Here's the HTML page (very empty (but I put some CSS in here):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script type="text/javascript" src="jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<title>Tickets</title>
<style>
.ticket{
position: relative !important;
background: #F90;
float: left;
padding: 7px 3px;
margin: 0 5px 5px 0;
}
</style>
</head>
<body>
</body>
</html>
Then in JQuery I have this code that creates the blocks:
// JavaScript Document
$(function(){
var ticket="<div class='ticket'><p>Random<br />Box</p></div>";
var numTickets=100;
for(var x=1;x<=numTickets;x++){
$(ticket).appendTo("body");
}
$(".ticket").each(function(i){
var posx = Math.round(Math.random() * 1920)-20;
var posy = Math.round(Math.random() * 1080)-20;
var rotationNum=Math.round((Math.random()*360)+1);
var rotation="rotate("+rotationNum+"deg)";
$(this).css("top", posy + "px").css("left", posx + "px").css("transform",rotation).css("-ms-transform",rotation).css("-webkit-transform",rotation);
});
});
Why are you setting position to relative?
Here is one I did.
http://jsfiddle.net/29M54/
.ticket{
position: absolute;
background: #F90;
padding: 7px 3px;
}
$(document).ready(function(){
var ticket="<div class='ticket'><p>Random<br />Box</p></div>";
var numTickets=100;
for(var x=1;x<=numTickets;x++){
$(ticket).appendTo("body");
}
// get window dimentions
var ww = $(window).width();
var wh = $(window).height();
$(".ticket").each(function(i){
var rotationNum=Math.round((Math.random()*360)+1);
var rotation="rotate("+rotationNum+"deg)";
var posx = Math.round(Math.random() * ww)-20;
var posy = Math.round(Math.random() * wh)-20;
$(this).css("top", posy + "px").css("left", posx + "px").css("transform",rotation).css("-ms-transform",rotation).css("-webkit-transform",rotation);
});
});
I use this css style for the same problem:
$(this).css({
"position":"absolute",
"left":"'+posx +'px",
"top":"'+posy +'px",
"padding":"5px",
"transform":"'+ rotation +'",
"-ms-transform":"'+ rotation +'",
"-webkit-transform":"'+ rotation +'"
});
Also, you coul use something like this:
$(function(){
var numTickets=100;
for(var x=1;x<=numTickets;x++){
var posx = Math.round(Math.random() * 1920)-20;
var posy = Math.round(Math.random() * 1080)-20;
var ticket="<div class='ticket' style='position:absolute;left:'+posy+';top:'+posx+';'><p>Random<br />Box</p></div>";
$(ticket).appendTo("body");
}
});

create random top , right for each div

I want to create random top , right for each div
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
.cube {
width:50px;
height:50px;
background-color:red;
border-radius:25px;
position:absolute;
}
</style>
<script src="jquery.js"></script>
<script>
$(function () {
var Wh = window.innerHeight;
var number = 1 + Math.floor(Math.random() * Wh);
$('.cube').each(function() {
$(this).css({"right":number+"px","top":number+"px"});
});
});
</script>
</head>
<body>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
</body>
</html>
i don't know why each function not working here !
i see only one div changed , how can i fix this ?
Close your <div>s and change ID to classes:
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
Now, I think you want to apply a different position to each cube, so alter your code like this:
$(function () {
var Wh = window.innerHeight;
$('.cube').each(function() {
var number = 1 + Math.floor(Math.random() * Wh);
$(this).css({"right":number+"px","top":number+"px"});
});
});
The $(this) part is important, as it applies the positioning to a single DOM element, and not all elements with a class of .cube.
UPDATE
Also move your random number generator into the each function, so that a new number will be generated each time.
Booo, you cant do this: <div id="cube"><div id="cube"><div id="cube">
Id must be unique at ALL times. You need to use class. Like so: <div class="cube">
In JavaScript reference it by $('.cube')
Also close those divs man.
Your JavaScript should look like:
<script>
$(function () {
var wh = window.innerHeight;
$('.cube').each(function() {
var number = 1 + Math.floor(Math.random() * wh);
//$(this) refers to the current object in the 'each' iteration
$(this).css({"right":number+"px","top":number+"px"});
});
});
</script>

How to set div tag height and width using javascript?

How can I set the width and height of a div using JavaScript?
Here is my code
<%#page import="org.json.JSONObject"%>
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>View JSON</title>
<script type="text/javascript">
var rect1='{"minX": 0.0,"minY": 0.0,"maxX": 2460.0,"maxY": 3008.0}';
var rectangle = JSON.parse(rect1);
var maxx=rectangle.maxX;
var maxy=rectangle.maxY;
***What should i do here?***
</script>
</head>
<body>
<h5>JSON View</h5>
<div id="set">
</div>
</body>
</html>
I want to set the div width to maxx and height to maxy values. I also want to set its border to 1px so that I can see whether it's working or not.
Thanks
You need to use
document.getElementById('set').style.width = maxX + "px";
and
document.getElementById('set').style.height = maxY + "px";
Also, you may need to make sure the document is loaded before the script runs, or else the set div may not have been created. You do this in window.onload as foillows:
window.onload = function ()
{
Javascript code goes here
}
You'd make use of the element's style:
document.getElementById('set').style.width = maxx + "px";
document.getElementById('set').style.height = maxy + "px";
document.getElementById('set').style.border = "1px solid #000";
JSFiddle example.
Being a fixed value, border in this case would probably be better controlled with just CSS.
div#set {
border:1px solid #000;
}

Categories