How to only show a gif while website loads - javascript

so I've been researching for a bit to get a loading screen on my website.
I finally found one that (somewhat) works. This is the code:
<script type="text/javascript">
/* display loader only if JavaScript is enabled, no JS-lib loaded at this point */
document.write('<div id="loader" style="display:table; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10000; background: #fff;">'
+ '<div style="display:table-cell; vertical-align:middle; text-align: center;">'
+ 'loading…<br /><img src="img/loading.gif" />'
+ '</div></div>');
</script>
That's put into the header, and this code is put at the very bottom of the HTML (just before the closing body tag)
<script type="text/javascript">
/* hide the loading-message */
$(window).load(function(){
$('#loader').fadeOut(500);
});
</script>
</body>
This works, but I realized that you can just scroll down while the loading screen is up and see the website in it's ugly, generating form. How can I make it so that you cannot view the rest of the website, and only see the loading gif?

You can add an overflow: hidden; to either the html or body tag to prevent scrolling of the page. This could be in your stylesheet (and activated with a loading class) or inline. Be sure to remove it on load as this prevents the page from scrolling.
To be absolutely sure your loading div stays within the viewport, you could also use position: fixed; instead of absolute.

Make div with id loader position fixed instead of absolute.
position:fixed;

You can use jQuery load method
You can look here:
http://jqueryfordesigners.com/image-loading/
This is one implementation of solution

You could make your content hidden by adding style attribute visibility:hidden; and when the page is loaded set it to visibility:visible; that will hide your content while loading.

Related

creating unscrollble background image using html and css only

i am trying to make a web page which background is fixed (meaning width is 100% and height does not scroll ) but the main div of the page which contain all the content of the page is scroll-able in y direction. you can see the effect here http://btemplates.com/2016/blogger-template-topgames/demo/. is it possible to achieve this effect using html and css only ? if not then how it can be done with javascript?
Yes, you can easily do that using a background image. If you inspect the page you can see how they did it.
CSS:
body {
background: url('<<Your URL Here>>'), center top no-repeat fixed;
}
content-wrapper {
width: 960px;
margin: 46px auto 0px;
padding: 0px;
}
HTML:
<body>
<content-wrapper>
</content-wrapper>
</body>
In the future, right-click the page and inspect the HTML and CSS and you should be able to figure most things out.

Have <iframe> merge with parent body, using only 1 scrollbar for whole page, always adjusting for height

I'm trying to do something that shouldn't be very hard, but surprisingly I haven't been able to find the solution online.
I want to embed iframes to any random website, without the visitors noticing that it's actually a different frame. I want the iframe to merge with the parent body, extending the body of the parent, so that the non-iframe-part and the iframe-part of the website can be scrolled only using the main scrollbar of the parent page.
This is my code so far:
<h1>Tours</h1>
<div style="background-color: red; color: white; padding: 200px; text-align: center;">
Top part of page
</div>
<iframe id="tourtask-iframe" style="overflow: hidden;" src="/public/index.php?b=eit&token=abcd1234&p=tours&lang=en">Please upgrade to a browser that supports iframes.</iframe>
<style>
body, html {
width: 100%;
height: 100%;
margin: 0;
}
#tourtask-iframe {
width: 100%;
height: 2000px;
border: none;
}
</style>
When I do a overflow: hidden; on the body of the source file of the iframe archive, the scrollbar disappears, but I'm unable to scroll the iframe portion of the page.
I'd need to update the height of the iframe element to fill up the 100% of the height of this file. I'd also need to update the height of the iframe element whenever I expand/collapse any collapsible content in the frame.
How can this be done? Or is there a better way?
I'd preferably not use any library/framework for the parent page, since I'll need to be able to embed this iframe to totally different webpages.
Thank you!
I found an amazing script for this called iFrame Resizer:
https://davidjbradshaw.github.io/iframe-resizer/
It feels any change in height of iframe source document and updates the iframe container accordingly. It took some tweaking and investigation to get it to work.
Please make sure you're complying with following requirements:
The source iframe document must start with <!DOCTYPE html>.
Make sure the body of the iframe document is not 100% (which it is by default when using Material Design for example).
To successfully embed the correctly resizing iframe to the parent document, I'm now using the following code:
<iframe id="tourTaskIframe" scrolling="no" src="/public/index.php?b=eit&token=abcd1234&p=tours&lang=en">Please upgrade to a browser that supports iframes.</iframe>
<script type="text/javascript" src="/public/js/iframeResizer.min.js"></script>
<script type="text/javascript" src="/public/js/iframeConfig.js"></script>
<link rel="stylesheet" type="text/css" href="/public/css/iframe-parent.css">
iframeConfig.js:
iFrameResize({
heightCalculationMethod : 'bodyOffset'
}, '#tourTaskIframe');
iframe-parent.css:
iframe{
width: 1px;
min-width: 100%;
border: none;
}
body {
margin: 0;
}
In the styles.css for the iframe source document, in addition to any other styles I'm using for aesthetics, I have the following essential lines:
body {
height: auto !important; /* Essential for resizing */
min-height: 0 !important; /* Essential for resizing */
}
And that's it!

Load a div before other page content in WordPress

As the title says, I want to load a div in WordPress before any other content on the site. I'll explain it better: when a user loads the page, I want to show an animated intro, and then let him see the site after. How can I do that?
You'll want to create a fixed div that covers the screen to act as an overlay. Say you have a div: <div class="overlay">.
Now, in your CSS, you want to make that div take up the whole screen:
.overlay {
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 100;
}
You also need to make sure your parent containers (html and body, most likely) have width/height of 100%. You might want to give your div another color so you can see it.
Also, reference this question.

Unable to get image to properly Overlay

I have an image that only appears when icon located within a pagegridview is selected. What should happen is that the overlay shows, with the full sized image on top of it. What really happens is that the overlay overlays my full sized image and off centers it. My code stands as followed:
CSS
#overlay{
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
background-color: #000;
opacity: 0.7;
filter: alpha(opacity = 70) !important;
display: none;
z-index: 100;
}
.fullView{
position: absolute;
}
Javascript
Works fine to display, can't test the hiding due to overlay being on top.
$('.preview').click(function(){
$("#<%=imgFull.ClientID%>").attr("src", $(this).attr('fullImg'));
$("#overlay").show();
$("#overlayContent").show();
});
$("#<%=imgFull.ClientID%>").click(function(){
$("#<%=imgFull.ClientID%>").attr("src", "");
$("#overlay").hide();
$("#overlayContent").hide();
});
Overlay/Full Image Divs
Located right below an ASP Panel and a PageGridView
<!-- Divs for displaying the full sized image. Initially hidden. Hides again when clicked -->
<div id="overlay"></div>
<div id="overlayContent" >
<asp:Image runat="server" ID="imgFull" Width="400" ImageUrl="" CssClass="fullView"/>
</div>
I could have sworn for the most part position:absolute css would solve the main portion, but the time crunch is on and I'm trying to do this with the flu. Any help is appreciated.
The answer was staring me in the face and I just didn't quite realize it. The #overlay# CSS was fine, however, I needed to additionally change the.fullViewtofixed` as well. Once this was done, the image hovered perfectly on top of the overlay, and I was able to utilize some CSS changes in the javascript to accurately center the image.

jQuery .css body opacity

I have a news tab where whenever an user clicks it, the popup box shows up with the details, however I want the background or the body tag itself to dim so I wrote:
$("#read").click(function(){
$("#pbox").fadeIn('slow');
$("body").css({"opacity": "0.5"});
});
However the box itself dims either. Is there a way to make the box ignore this command? Or maybe there is another way around?
As body contains the #pbox then the box itself will be subject to the 50% opacity you have applied. A better method would be to overlay a semi opaque div over your entire window, and then position #pbox above it, a little like so:
#overlay {
position: fixed;
top: 0;
left: 0;
background-color: #fff;
width: 100%;
height: 100%;
display: none;
}
#pbox {
z-index: 1;
}
So here you have the white #overlay div appearing over all your content with 50% opacity. Above it is #pbox with a z-index specified to ensure it appears on top.
The jQuery code would be a little like this:
$("#read").click(function(){
$("#pbox").fadeIn('slow');
$("#overlay").show().css({"opacity": "0.5"});
});
Unfortunately, there isn't. Since the popup is inside the body tag, it is included in the change in opacity.
The only way to do this would be to make an overlay layer which covers the entire body and is translucent, and then place your popup above that.

Categories

Resources