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
Related
I'm trying to position two images on top of eachother, and having one of them rotate on scroll while the other one is not rotating - which works, except i'm unable to position and scale my elements in my CSS. As soon as i start scrolling, the image with the JS jumps into the corner while the other one remains where it is. I believe it's because my JS overwrites my CSS properties, but is there any way of working around this? Can i position my two elements while maintaining my JS?
var elem = document.getElementById("rotatelogo");
window.addEventListener('scroll', function() {
var value = window.scrollY * 0.25;
elem.style.transform = `translatex(-50%) translatey(-50%) rotate(${value}deg)`;
});
body {
height: 200vh;
background: darkblue;
}
.guide {
width:150px;
height:150px;
margin-top:50px;
margin-bottom:-300px;
margin-left:50px;
}
<div class="guide" style="position:relative">
<img src="http://jakobnatorp.com/wp-content/uploads/2021/10/ARROW.png" style="position:fixed;"/>
<img class="portfolio" id="rotatelogo" src="http://jakobnatorp.com/wp-content/uploads/2021/10/SELECTED-WORK-BEIGE.png" style="position:fixed"/>
</div>
Remove translate from your code.
var elem = document.getElementById("rotatelogo");
window.addEventListener('scroll', function() {
var value = window.scrollY * 0.25;
elem.style.transform = `rotate(${value}deg)`;
});
body {
height: 200vh;
background: darkblue;
}
.guide {
width:150px;
height:150px;
margin-top:50px;
margin-bottom:-300px;
margin-left:50px;
}
<div class="guide" style="position:relative">
<img src="http://jakobnatorp.com/wp-content/uploads/2021/10/ARROW.png" style="position:fixed;"/>
<img class="portfolio" id="rotatelogo" src="http://jakobnatorp.com/wp-content/uploads/2021/10/SELECTED-WORK-BEIGE.png" style="position:fixed"/>
</div>
I am not sure what you want to achieve by usingtranslatex(-50%) translatey(-50%), but this is causing the images center to be positioned on the top left corner of the parent element.
If you just use elem.style.transform = `rotate(${value}deg)`; it will rotate in place.
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 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);
(I am looking for an HTML/CSS fix but if there really is none then JS (prefereably JQuery) works for me)
I have two main divs inside my page, I have the #maincontent and the #footer.
Basically, I want the footer to always sit at the bottom on the page:
#footer{
position:fixed;
bottom:0;
}
BUT I do not want it to overflow on the #maincontent when the page is too small.
For the sake of the question the page can be thought of as simple as:
<body>
<div id="maincontent">Dynamic Content</div>
<div id="footer">StaticContent</div>
</body>
My problem is that I can do one or the other, either I fix it to the bottom of the page but when I make the viewport < (footer + maincontent) the footer sits on top of the content. I want the footer to always be at the bottom of the page but disappear off page before it overtakes the main content.
Add a class to the footer with jQuery that changes it to position: absolute when the viewport is too small.
$(document).ready(function() {
var height = $(window).height();
function windowHeight() {
height = $(window).height();
}
windowHeight();
$(window).resize(function() {
windowHeight();
});
if (height < 600) { //arbitrary height value you can set yourself
$('#footer').addClass('not-fixed');
} else {
$('#footer').removeClass('not-fixed');
}
});
If you know your footer's height whatever happens to the window height, or its content :
Just add a "padding-bottom" to your body or main content that matches the footer's height.
If you don't know your footer's height. This is trickier, as you will probably need some javascript to calculate the height of the footer, the height of the main content, compare the sum of both with the window height, and if it doesn't fit, add some adequate bottom padding to the body / main content.
EDIT :
Ok I understand, I think this jsfiddle should do the trick : http://jsfiddle.net/ah4XA/2/
The javascript would be :
$(document).ready(function () {
function updateFooter () {
var footerH = $("#main-footer").height();
var contentH = $("#main-content").height();
var windowH = $(window).height();
if ( contentH + footerH > windowH) {
$("#main-footer").removeClass("fixed");
} else {
$("#main-footer").addClass("fixed");
}
}
$(window).resize(function () {
updateFooter();
});
updateFooter();
});
If I understand what you're looking for, you want the footer to stay on the bottom of the window regardless of the page content, but also not overlap the page as the window is resized vertically.
One possible solution is to switch between position:absolute; and position: fixed; with a media query. So past a certain height it's fixed, but below that the footer position:absolute;.
EXAMPLE FIDDLE
CSS:
#media all and (max-height:300px) {
#footer {
background: red; <- added for testing
position: absolute;
}
}
The only drawback to this approach is that you need to know the height to set the switchover to. This may be tricky, but position:fixed;.
The simplest solution would be to position footer at the bottom permanently and increase the z-index of your maincontent so that it comes over the footer if window size is decreased.
NOTE: This is not the only way to do this.
JSFIDDLE DEMO
Sample CSS
#maincontent{
height : 400px;
background-color : green;
/*
position : relative is added to enable z-index.
*/
position:relative;
/*
z-index will bring it above footer,
if window size is reduced.
*/
z-index: 1;
width : 100%;
}
#footer{
height : 100px;
width : 100%;
background-color : black;
/* Below two properties will
postion footer at the bottom of the page.
*/
position : fixed;
bottom : 0;
color : white;
}
You should play with CSS position property to get this done.
EDIT:
Here is another CSS solution :
The maincontent and footer are wrapped in a bodyContainer div its position is set to relative and then footer is positioned w.r.t it.
JSFIDDLE DEMO 1 Footer is below body and not shown.
JSFIDDLE DEMO 2 Footer is shown since body height is less.
HTML
<div id="bodyContainer">
<div id="maincontent">Dynamic Content
</div>
<div id="footer">StaticContent</div>
</div>
CSS
#bodyContainer {
min-height: 100%;
position: relative;
}
#maincontent{
height : 800px;
background-color : green;
padding-bottom: 60px;
width : 100%;
}
#footer{
background-color: black;
bottom: 0;
color: #FFFFFF;
height: 48px;
position: absolute;
width: 100%;
}
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; }