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
Related
i am trying to recreate a simple jQuery animation with JavaScript. And it doesn't work. I would be very happy if you tell me what is wrong, because for me it seems right. Thank you in advance!
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("div").animate({fontSize: "100px"}, "slow");
});
</script>
</head>
<body>
<div style="background:#98bf21;height:200px;width:600px;">Hello World</div>
</body>
</html>
And below is the JavaScript animation:
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>This is a title!!!</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div style="background-color: #98bf21; width: 200px; height: 600px;">Hello World!</div>
<button onclick="startFontIncrease()">Click me</button>
<script>
function startFontIncrease() {
var element = document.getElementsByTagName("div")[0];
var fontSize = element.style.fontSize;
var id = setInterval(increaseFont, 5);
function increaseFont() {
if (fontSize == 100) {
clearInterval(id);
}
else {
fontSize++;
element.style.fontSize = fontSize;
}
}
}
</script>
</body>
</html>
There are numerous problems with the transcription to plain JS.
To begin with, you have not set an initial font-size in the inline style and it is thus an empty string when you try to access it. So the HTML should be like this:
<div style="background-color: #98bf21; width: 200px; height: 300px; font-size: 12px;">
Hello World!
</div>
Then, you must get the initial font size out of the font-size increasing function and you must also parse it to make sure you get the number (and not the "12px" string, otherwise it will be NaN when you try to increment).
var element = document.getElementsByTagName("div")[0];
var fontSize = parseInt(element.style.fontSize);
function startFontIncrease() {
var id = setInterval(increaseFont, 5);
function increaseFont() {
if (fontSize == 100) {
clearInterval(id);
}
else {
fontSize++;
element.style.fontSize = fontSize + 'px';
}
}
}
Instead of giving slow attribute,adjust them in milliseconds if possible.
<script>
$(document).ready(function(){
$("div").animate({fontSize: "100px"}, 2000);
});
</script>
Your implementation doesn't work because the fontSize you get for the div is ""
What you have to is
document.getElementById("btn").addEventListener("click",startFontIncrease);
function startFontIncrease() {
var element = document.getElementsByTagName("div")[0];
var fontSize = parseFloat(window.getComputedStyle(element, null).getPropertyValue('font-size'));
var id = setInterval(increaseFont, 100);
function increaseFont() {
if (fontSize == 100) {
clearInterval(id);
} else {
fontSize++;
element.style.fontSize = fontSize + "px";
}
}
}
For the jQuery version Hameed Syed seams to be correct.
I'm trying to position an element relative to another using the jQuery offset() method and I am trying to figure out why the $(window).resize function is not working.
JSBIN:http://jsbin.com/lanako/7/edit?html,js,output
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<style>
div{
display:inline-block;
position:relative;
height:200px;
width:200px;
border:solid black;
}
#somepara{
border: solid blue;
position:relative;
left:20%;
}
</style>
<body>
<div id ="first"> FIRST</div>
<div id = 'somepara'> </div>
</body>
</html>
JavaScript:
var p = $( "#somepara" );
var pf = $('#first');
var offset = p.offset();
p.html( "left: " + offset.left);
function offcss(){
pf.css({'left': offset.left + 6 + "px"});
}
$(document).ready(function(){
offcss();
$(window).resize(function(){
offcss();
});
});
I am essentially grabbing the offset().left of the second element ('#somepara') and trying to set the css of ('#first') right 6 pixels from (#somepara).Note: (#somepara) is has a fluid measurement (%), so the left position changes.
The equation initially works, but I want to upon resizing the browser, for the equation pf.css(), which calculates the css left property of (#first) to execute. Unfortunately the $(window).resize function I have set is not working, and thus the left property of (#first) is unchanged. The end goal I want is regardless the browser size, the elements will be separated by 6 pixels (#first right 6 pixels from #somepara).
Any help would be greatly appreciated!
The position of #somepara changes when you resize, so you need to take the value of p.offset() every time you call the offcss() function (and not only on first load).
function offcss() {
pf.css({'left': p.offset().left + 6 + "px"});
}
Regarding the resize it seems like it does exactly what you want.
Check this example:
http://jsbin.com/dewazuyuqo/1/edit?html,js,output
I am not really sure of how to start this one off.
Either way, I want to show x and y coordinates on a webpage when the mouse moves on the page. It also has to work with any browser.
Heres the HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Coordinates</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div id="center">
<h1>Mouse Coordinates</h1>
<p>x-coordinate: </p><p id="xcord">0</p>
<p>y-coordiante: </p><p id="ycord">0</p>
</div>
</body>
</html>
CSS File:
#center{
margin: 0 auto;
width: 500px;
}
JavaScript File:
Not much, not sure where to start off...
window.onload = init;
function init(e) {
}
basically you need to document.addEventListener('mousemove', mousemover, false); that references a function - mouseover() - that will get your clientX and clientY. From there you need to set innerHTML of your two p elements to those values.
You can use pageX and pageY something like this:
$(document).ready(function(){
$('body').on('mousemove', function init(e) {
$('#xcord').text(e.pageX);
$('#ycord').text(e.pageY);
});
});
demo
I guess this is what you are looking for assuming you are using JQuery.
$(function(){
$(document).on('mousemove', function(e){
$("#xcord").html(e.pageX);
$("#ycord").html(e.pageY);
});
});
http://jsfiddle.net/Zvm7s/2/
Hope it helps
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;
}
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";