div resize with browser - javascript

I'm trying to build a simple image viewer that resizes with the browser width/height. I believe I'm almost there. However, I need a hint on how to finish this. Here is the code. I didn't want to use jquery because I'm trying to keep this as simple and as light as possible.
Thank you,
MK
<style type="text/css">
body {
background-color: #999;
}
#fullscreenPhoto {
border: thin solid #F00;
}
</style>
<body onresize="resizeImage()">
<div onload="resizeImage()" margin="0" border="0" id="fullscreenPhoto">
<img src="resizeImage.jpg" width="100%" >
</div>
<script type="text/javascript">
var divResize = document.getElementById('fullscreenPhoto');
function resizeImage()
{
var window_height = document.body.clientHeight
var window_width = document.body.clientWidth
var image_height = divResize.offsetHeight
var image_width = divResize.offsetWidth
var height_ratio = image_height / window_height
var width_ratio = image_width / window_width
if (height_ratio > width_ratio)
{
divResize.style.width = "auto"
divResize.style.height = "100%"
}
else
{
divResize.style.width = "100%"
divResize.style.height = "auto"
}
}
</script>
</body>

How about setting maxHeight and maxWidth instead of width and height where it needs to be 100%. That way you may not even need to specify 'auto'
So in your example it would be
if (height_ratio > width_ratio)
{
divResize.style.maxHeight = "100%"
}
else
{
divResize.style.maxWidth = "100%"
}

The div is never loaded. It is a primitive HTML type. You have to put the onload statement in the image tag. And as the image is within the Div, you don't have to resize it. It gets stretched by the image.

Ok, here s another answer altogether (based on your comment on wanting to set the 'stretch' based on 'height'... this one doesnt event use JavaScript! Just make sure the html and body CSS property height is set to 100% and then set the image CSS height property to 100%
HTML:
<div margin="0" border="0" id="fullscreenPhoto">
<img src="http://www.walmik.com/wp-content/themes/spring/images/motif.png" >
</div>
CSS:
html, body {height: 100%; margin: 0; padding: 0;}
#fullscreenPhoto img {position:fixed; top:0; left:0; width:auto; height:100%;}
And finally, here s a working example: http://jsfiddle.net/XwBxh/
And here s a small addition in case you want to support IE6:
html { overflow-y: hidden; }
body { overflow-y: auto; }
#fullscreenPhoto img { position:absolute; z-index:-1; }

Related

How to change image element class with JavaScript based on window width?

I am trying to adjust the size of a background image based on the width of the window. I have been testing this, and I can get the alerts to show up in chrome when I 'inspect element' and change the width size, and the alerts show up as they should. But I cannot get the class of the image to change.
Any ideas?
This is my basefunctions.js file
window.onload = function changeClass(){
if( window.innerWidth < 770 ) {
document.getElementById("bg_img").setAttribute("class", "imgMobile");
alert("On Mobile");
}else{
alert("Not on Mobile");
}
}
This is my HTML/CSS
<script language="JavaScript" type="text/javascript" src="js/basefunctions.js"></script>
<style>
#bg_img {
width: 100%;
z-index: 1;
border: 1px #000 solid;
height:80%;
}
.imgMobile {
display: none;
width: 100%;
z-index: 1;
margin-left: -100;
}
</style>
<img src="img/gavel.png" alt="" id="bg_img" class="">
You should use className rather than using setAttribute.
document.getElementById("bg_img").className = "imgMobile";
Here is another SO about changing an dom object's class.
I also put together a jsfiddle to demonstrate.
You can set the class using
document.getElementById("bg_img").className = "imgMobile";
If you want to add the class without overriding other classes, then use
document.getElementById("bg_img").className += " imgMobile";

I need the contents of an iframe to expand like an animation and fill up the entire screen and shrink to it original size

I need the contents of an iframe which has height of 100px(displays only part of iframe) to expand like an animation on read more button click,and fill up the entire screen(expands in all directions), and on clicking close button positioned on top of it, it needs to animate and shrink to it original size.
I found a fiddle that dooes something similar
http://jsfiddle.net/FP2DZ/.
But my issue is that my div cannot be absolutely positioned as I have contents underneath that and that gets affected if I make this one absolutely positioned.
Absolutely positioning rest of the contents also does not seem to me like a good solution
Code
<html>
<head>
<script type="text/javascript">
var isFullscreen = false;
function fullscreen(){
//var d = document.getElementById('controls').style;
var d = {};
var speed = 900;
if(!isFullscreen){ // MAXIMIZATION
/*comment to have smooth transition from centre but loose covering the header*/
//document.getElementById('controls').style.position= "absolute";
d.width = "100%";
d.height="100%";
//d.left="0%";
d.top="0px";
//d.margin="0 0 0 0";
$("#header").animate({
height: 0
}, speed);
$("#controls2").animate(d,speed);
isFullscreen = true;
}else{ // MINIMIZATION
d.width="300px";
d.height="100px";
d.margin="0 auto";
d.position="relative";
//d.top="+=30px";
/* comment to have smooth minimze transition but not be placed below header */
// document.getElementById('controls').style.position= "relative";
$("#header").animate({
height: 30
}, speed);
$("#controls2").animate(d,speed);
isFullscreen = false;
}
}
</script>
<style>
* { margin: 0 }
#controls {
width:100%;
height:100%;
margin: 0 auto;
display:block;
position:absolute;
left: 50%;
z-index:5;
}
#controls2 {
overflow:visible;
width: 300px;
height: 100px;
position: relative;
left: -50%;
background-color: green;
z-index:10;
}
</style>
</head>
<body>
<h1 id="header" align=center> Header (To be covered on Fullscreen) </h1>
<div id='controls' style="" align="center">
<div id='controls2'>
<input type='button' value='fullscreen' onclick='fullscreen();' /><br>
I am some centered shrink-to-fit content! <br />
tum te tum
</div>
</div>
</body>
Probably the easiest way is to utilize the .animate({}) method in Jquery.
Check out this fiddle: http://jsfiddle.net/cm6v7bca/2/
$("#clickhere").on("click", function () {
$("#myframe").animate({
width: "200px",
height: "200px"
}, 1000);
});
.animate({}) allows you to change the css properties and then smoothly animates the changes onto the element. There are several different parameters you can pass. In the fiddle you'll see that I passed "1000" - that's the duration for the animation to complete in ms.
You can read more about the parameters and the method here: https://api.jquery.com/animate/
That really helps. But then the iframe needs to cover rest of the contents in the page and overlay them, Thats seems possible only if iframe is absolutely positioned. But there is so much dynamic content in the page, I do not want to absolute position the iframe.
http://jsfiddle.net/CvhkM/2833/
this is like what I want just that am not able to absolute position.
JS:
$(this).stop().animate({
left: parseInt(this.style.left)-100,
top: parseInt(this.style.top)-100,
width: parseInt(this.style.width)+200,
height: parseInt(this.style.height)+200
}, 300);

Code to disable page contents while loading and show a gif image

Can anyone help me how to keep the whole page inactive while loading and showing an image? I have the following code to show the image but while page is loading all the contents are active.Here's the code below :
<body onLoad="init()">
<div id="loading" style="position:absolute; width:100%; text-align:center;top:300px;">
<img src="https://bancore.com/images/vv/loading_smaller.gif" border=0 />
</div>
<script>
var ld = (document.all);
var ns4 = document.layers;
var ns6 = document.getElementById && !document.all;
var ie4 = document.all;
if (ns4)
ld = document.loading;
else if (ns6)
ld = document.getElementById("loading").style;
else if (ie4)
ld = document.all.loading.style;
function init() {
if (ns4) {
ld.visibility = "hidden";
} else if (ns6 || ie4) ld.display = "none";
}
</script>
</body>
Here is the sample website : http://www.bancore.com/
See while loading the page is inactive.
On your #loading div you should use height: 100% instead of top: 300px because top only moves the element 300 pixels from the top, making the top 300 pixels of the page clickable.
If you need to move the image down 300px, you still need to keep the #loading div fixed to the top but you can set the top margin to the image to 300px. Like this:
<div id="loading" style="position:absolute; width:100%; height: 100%; text-align:center;">
<img src="https://bancore.com/images/vv/loading_smaller.gif" border=0 style="margin-top:300px;">
</div>
You should also avoid using inline styles, but simply set the CSS rules in your CSS file:
#loading {
position:absolute;
width:100%;
height: 100%;
text-align:center;
}
#loading img {
margin-top: 300px;
}
the idea in this case is create a 'mask' over your website, then remove it when document is ready.
create CSS :
.loading {
position: fixed; // position fixed with height, width = 100% will take over your window
width:100%;
height: 100%;
top : 0;
left : 0;
text-align : center;
background : #ccc;
opacity : 0.5; // fade your page.
}
.loading img {
// I'm not good at CSS, so you can find some attribute to center it
//check my fiddle for style
}
add to HTML :
<div id="loading" class="loading">
<img src="https://bancore.com/images/vv/loading_smaller.gif" border=0>
</div>
and Javascript jQuery document ready :
$(document).ready(function() {
$('#loading').removeClass('loading'); // the `class` loading will be remove
})
Fiddle here

move image down on scroll

usually when you scroll down on a page, the content moves up.
I need to create something similar to a window shade. Imagine a wall (your browser) with a window (a div) that has a pull-down shade (image) attached at the top. lets pretend that it's at top:-100px. When you pull the shade down (scroll down the div) the shade (image) 'reveals itself.' (goes from a top:-100px position, to top:0px position, to fill your window.
any help would be much appreciated!
this is a basic mockup that i've managed to piece together so far, from scouring similar questions here. it's obviously not working, and IT IS NOT RELAVENT TO WHAT I WANT TO DO AT ALL, but i was trying to make it relavent, but to no avail.
<!DOCTYPE html>
<html>
<head>
<script>
var $scrollingDiv = $("#aerobot");
$(window).scroll(function () {
$scrollingDiv.stop().animate({
"marginTop": ($(window).scrollTop() + 30) + "px"
}, "slow");
});
</script>
<style>
body {
height: 600px;
overflow:scroll;
}
#one {
width: 300px;
height: 400px;
position:relative;
float:left;
background-color:pink;
}
img {
z-index:1000;
top:0;
position:absolute;
width: 350px;
height: 50px;
background-color:blue;
right:0;
display:block;
}
#parent {
width: 400px;
height: 400px;
background-color:red;
position:relative;
display:block;
}
</style>
</head>
<body>
<div id="parent">
<img title="yo" src="images/aerobot.png" id="aerobot" align="right" />
<div id="one"></div>
</div>
</body>
</html>
any help would be super duper appreciated!
Here is your code. I think it is self-explanatory.
var img = document.getElementById("aerobot");
window.onscroll = function() {
var bodyHeight = parseInt(getComputedStyle(document.body).height, 10);
var scrollLimit = bodyHeight - window.innerHeight;
var scrollTop = document.body.scrollTop;
var scrollPCT = (scrollTop / (scrollLimit/100)) / 100;
img.style.top = bodyHeight * scrollPCT - img.offsetHeight + "px" ;
}
FIDDLE
An easy way to get a picture to stay where it was originally placed is to use css.
The way to do this would be with a position: fixed;

How to fill the browser window with a canvas element without creating scroll bars?

I have a problem to get my window size, I try this code:
Javascript
var game;
function game() {
this.canvas = document.getElementById('canvas');
this.canvasWidth = window.innerWidth;
this.canvasHeight = window.innerHeight;
this.initCanvas = function() {
this.canvas.style.width = this.canvasWidth + "px";
this.canvas.style.height = this.canvasHeight + "px";
}
this.run = function() {
this.initCanvas();
}
}
game = new game();
game.run();
I also have
CSS
html, body {
padding: 0;
margin: 0;
}
I only have a canvas in my body.
Problem is, that I have a vertical and horizontal scroll bar. This means the size of canvas is too large. How to make it of the window size without the scroll bars appearing?
It looks like you're just trying to make your canvas have a width and height of 100%. You can do this with just css:
HTML
<body>
<canvas id="canvas"></canvas>
</body>
CSS
body, html {
height: 100%;
width: 100%;
margin: 0px;
}
canvas {
background: #ffcccc;
height: 100%;
width: 100%;
display: block;
}
​
Demo
Or if you want to use your code but get rid of the scroll bars on the window, you need to specify block on the canvas tag.
CSS
canvas {
display: block;
}
Demo
When you use CSS to style your <canvas> element it will get scaled instead of sized. Be sure to set the .width and .height properties on the canvas element instead (ie canvas.width not canvas.style.width).
jsfiddle example
In the example the first canvas element is scaled correctly, the second (using CSS) is not scaled properly. This has to do with a default canvas element size (300x150) that CSS scales.
To prevent getting scrollbars when setting the <canvas> to the full window width/height set the body to overflow:hidden; as used in the jsfiddle above.

Categories