How to display an image fullscreen on page load - javascript

I have the script from previous stack overflow question on how to pick an image from an array at random.
Script to display an image selected at random from an array on page load
I want to take his idea a bit further, and display this image fullscreen on page load. I am working on a website, and had the idea to use an image as a greeting page. Where, when the page loads, you are greeted with a fullscreen HD image. When clicked, this image would disappear and show the full site. I wasn't exactly sure how to accomplish this though. Any ideas?
Edit: I'm not looking for direct implementation. Just general thoughts or jsFiddles on how to accomplish this task.

For showing the image on the page load you can use $( document ).ready() function. on click() of the image you could show the website.

Try using CSS like,
First option,
img {
position: fixed;
top: 0;
left: 0;
/* Preserve aspet ratio */
min-width: 100%;
min-height: 100%;
}
Second option,
img {
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: fixed;
top: 0;
left: 0;
}
To understand the above options read Perfect Full Page Background Image
I recommend you to use a complete full page background image slider for your problem. If it is available then use it without wasting your time.
I found a full page slider on http://www.freshdesignweb.com/fullscreen-jquery-slider.html in which the first one background slider is best suitable to you.
Also you can go to https://www.google.co.in/?q=full+background+image+slider to get more image sliders

Related

Images with "display: none" blinking in Firefox before displaying

I have a sequence of images that I want to display one at a time. All the other images are hidden with display: none. The problem is, although I'm waiting all images finish the request, when I change the image to be displayed, the image is blinking. Here is an example:
The issue happens only in Firefox. I also created a JSFiddle with the example above: https://jsfiddle.net/ofte9g5v/7/
I was able to achieve the expected behavior using opacity property but I still would like to know why the first approach doesn't work as it is the most straightforward solution and also works in all other browsers.
Edit: I forgot to mention the images blink only the first time they are loaded.
You're using JavaScript to switch the visibility in two separate calls; first you alter the CSS styles for the visible image, setting its display property to none. It looks like Firefox picks this up and paints faster than other browsers, resulting in no images showing. Next you set the display to block on one of the other images, prompting it to be painted as expected.
Generally when you want to switch between images like this you need to stack the images using CSS in order to prevent these sorts of unwanted effects. Transition Groups are a useful tool to handle transitioning state between hidden, transitioning in, visible, and transitioning out. In this case you can get by with a little CSS:
.imageContainer {
position: relative;
width: 100%;
padding-bottom: 100%;
}
.img {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
object-fit: cover;
z-index: 1;
}
Then when you want to show an image, simply set the z-index property on it to 2 or higher and set the z-index property on all other images to 1 afterward.
As an alternative, if you need the visible image to be position: relative; what I did was I set visibility:hidden; position: absolute; on the inactive images and visibility: visible; position: relative; on the active one.
The problem seems to be that Firefox doesn't decode images until they're within the viewport. So after you set the selected image to display: block; and the other images to display: none, there's a moment where no image is displayed while Firefox decodes the selected image.
The solution I found was to decode() the image prior to changing its display:
selectedImage.decode().then(() => {
for (var i = 0; i < unselectedImages.length; i++) {
unselectedImages[i].style.display = 'none';
}
selectedImage.style.display = 'block';
})

How do you code a button that can make an iframe go full screen when clicked?

How do you make an iframe fullscreen on button click? I've search but the ones provided only show how to make the window full screen, not iframe. Please help, I'm trying to make an embedded iframe become fullscreen on click. Thanks!
You will have to do two things: make the window fullscreen, and then the <iframe> to fill up the whole size.
You can make it go fullscreen with JS such as in this SO answer.
Then, to make it full size, just add a few styles, like below. What this JS script does is add a class with those styles to the <iframe>.
JS
document.getElementsByTagName("iframe")[0].className = "fullScreen";
CSS
body, html {
height: 100%;
margin: 0;
}
.fullScreen {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
See this partially working* example on JSFiddle.
*partially working because JSFiddle doesn't allow the fullscreen method because it deems it unsafe. But it should work for you.

How can I make a waiting icon appear in the middle of my page with twitter bootstrap 3?

I looked through all the documentation but still cannot find an example. What I would like to do is to have a waiting icon appear in my page when it's doing an Ajax call. Can someone tell me how I can do this with twitter bootstrap.
Also if there are any other non-jquery implementations which are better I would also like to know about those.
Thank you.
Just pick an loading icon (gif) from font-awesome for bootstrap,
show before the ajax call
hide once the ajax response is delivered
To position the icon in the middle of the screen, use the following css
.ajaxLoader {
position: absolute;
top: 50%;
left: 50%;
width: 500px;
height: 500px;
margin-top: -250px; /* Half the height */
margin-left: -250px; /* Half the width */
}
Also take a look for button loading images
JSFiddle
If you want something dead center, you can use the absolute position technique.
To do it, create a div and give it these attributes:
margin:auto;
position:absolute;
top:0;left:0;bottom:0;right:0;
width:<however wide the image is>;
height:<however big the image is>;
This will put it smack bam in the center no matter when someone resizes the screen, making it work on mobiles as well as desktops (as long as the image isn't huge).
If you want this to work inside another div, make sure that the parent is position:relative;
You can add a bootstrapmodal with your waiting logo,
unbind theclose event,
and close the modal when your ajax call is ended...

Displaying page loading gif in javascript

I am making a ajax submit using dojo.xhrpost.
It takes quite a while to get the response.
So i want to display a page loading gif till i get the response.
At the same time I kinda want to hide or reduce the visibility of the page so that the user cant click anything on the page till the response has been received.
I want to overlay the page loading gif over the entire web page till the response is received.
use a div with below css. All you need to do is show/hid this div
.overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 100000;
opacity: 0.6;
background: black url(http://1.bp.blogspot.com/_xn2gmPb9TfM/SBZwjqwS6MI/AAAAAAAABZw/uMVQlcxlosA/s400/loading-icon.gif) no-repeat center center;
}​
demo: http://jsfiddle.net/4k9cH/
When you show the loading gif, wrap it in a div that covers the page with some low opacity.
In your dom, you can stick something like
<div id="overlay"><img src="loading.gif"></div>
with style like
position: fixed;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
background-color: white;
opacity: 0.3;
display:none;
z-index: 100; /* should be large enough to be on top of everything */
Then before the ajax call, you show that div
dojo.query("#overlay").style("display", "block");
And then when the load is successful, you hide it
var deferred = dojo.xhrPost({ ...,
load: function() {
dojo.query("#overlay").style("display","none");
}
});
I haven't done much work with Dojo but it seems like this ought to work. If not, I bet it's really close.
As long as you have no event bindings on the #overlay div, users should not be able to interact with the page until the div is hidden.
You may also want to hide the overlay on error too (checkout the error callback) so that if your request fails, at least the user can still get to the stuff on the page.
Add a DIV with a specific name (lets say 'loading') that is 100% in width and height and has a (semi) transparent background (image). Add an inner DIV (lets say 'loadingInner') that holds the loading gif. Set the loading DIVs to display: none by default.
Then, when you access external information, show the loading DIVs with jQuery:
function showLoading() {
var loadControl = $("#loading");
if (loadControl) {
$("#loadingInner").show();
$("#loading").show();
}
}
Hope this helps
Hope this may also help for the loading image to appear on whole window during ajax call pending status:
http://www.edwardawebb.com/web-development/cakephp/disable-page-show-translucent-progress-bar

Make iframe expand/collapse

I have several apps inside iframes in the page that consolidates the apps (it acts as an app container).
I want to add a button somewhere that can expand and collapse the iframes to full size of the page.
The app now has a menu, header, footer, etc. and the application in iframe. When the user clicks say "+" button I want to expand the iframe to the full page and make everything else invisible. When they click it again I want to return to original size.
Maybe there is already something written that can make this happen, I tried to do some js on iframes and it seems hard to write browser independent code.
I can't use HTML5 since we need to support IE7.
An example.
Basically, just give your expanded iframe these CSS attributes,
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
z-index: 10;
and it will fill its (relative) parent.
Source: "Full screen" <iframe>
You can use either traditional JS or jQuery to achieve this. jQuery is a JS library that is meant to allow cross-browser DOM handling in a sane way.
If I were you, I might code it as (using jQuery):
$('iframe#myid').click(function() {
$('iframe#' + current).removeClass('current');
$('iframe#myid').addClass('current');
var current = '#myid';
});
with the CSS code as:
body, iframe {
margin: 0px; //to normalize the default stylesheet applied by the browser
}
iframe.current {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 999;
}

Categories