I have a div that has a background video whos size is roughly 6mb. I want to show the entire page until that video finishes loading.
I've seen in plenty websites, specially the ones of movies (recent ones) they have background video, and before they show the page, there's like a loading screen.
How can I achieve this? I've been searching around but so far, no luck. Is there a specific name for this technique if you can call it like that?
You can use jquery to achieve this like follows:
$(window).load(function() {
$('PUT_ID_OF_VIDEO_CONTAINER_HERE').hide();
});
I would suggest using the callback on jQuery load() like this >>>
<div id=videoHolder></div>
<div id=loadrHolder></div>
<script>
$( document ).ready(function() {
$('#videoHolder').hide();
$('#videoHolder').load( "myVideo.mp4", function() {
$('#videoHolder').show();
$('#loadrHolder').hide();
});
});
</script
If you are using a library like jquery.videoBG (http://syddev.com/jquery.videoBG/) to show the video, I think you could modify the code to show your page when the video has been loaded.
HTML:
<body>
<div id="dvLoading">Loading...</div>
<div id="dvContent" style="display:none"></div>
</body>
Javascript in library:
$video.bind('canplaythrough',function() {
$('#dvLoading').hide();
$('#dvContent').show();
});
You can find a listing of the events for the video element here: http://www.w3schools.com/tags/ref_av_dom.asp
Related
I am having some issues fully loading an html file into my div. After reading though different questions here I realized that I should use an iframe instead of trying to mess around with divs, ajax, or JS. This has served me well, however, upon loading it returns the page though in a scroll box as so:
how can I solve this issue?
Code snippets below:
This part comes from the index.html:
<div class="blurbs" id="blurbs">
<iframe id = "frame" width="100%" height="100%" frameborder="0" ></iframe>
</div>
the rest comes from the january html file which is a large one that just contains all that information so i am uncertain if y'all need to see it as I doubt it has anything to do with this.
this here is the javascript that is called when January is clicked:
function load_january() {
var ajaxCall = document.getElementById("frame");
ajaxCall.setAttribute("src", "../HTML/months/january.html");
}
I think you are interested in resizing the iframe height to match the height of the source HTML. This way you won't see the scrollbar.
This problem has been solved here:
Adjust width height of iframe to fit with content in it
So i got around this by using a div instead, and calling an ajax function. Iframes are too much of a hassle with my knowledge level of CSS at this time.
$(document).ready(function() {
$("#jan").click(function () {
$.ajax({
url: "../HTML/months/january.html", success: function (result) {
$("#blurb").html(result);
}
});
});
});
I know this has been asked and answered many times in this forum. But it does not work in what I am looking for.
I want to display a loading indicator while the ajax div is loading. There are cases when it takes a few minutes to load so it would be good to let the user know that the is loading.
From what I gathered it can be done in jquery. I am not too familiar with jquery yet. With this code the loading works but only for the first page.
$(document).ready(function() {
$('body').append('<div id="ajaxBusy"><p><img src="ajax-loader.gif"></p></div>');
});
$(document).ajaxStart(function(){
$('#ajaxBusy').show();
}).ajaxStop(function(){
$('#ajaxBusy').hide();
});
My page is structured like this
Header Page
-Div (display ajax here)
-Another div within the first loaded page(Load another page through ajax here)
I need it to display the loading indicator in the second div while it's loading. I am assuming that jquery "body" appends it to the main page body once and doesn't run again as it's within the same page. I did try to create a div and instead of body, load the div in jquery but it doesn't work.
Any help will be greatly appreciated.
I found that the easiest way to add the loader gif to specific elements is to create a CSS class with the loader as a background instead of appending an actual image:
.ajax-loader {
background: url(ajax-loader.gif) center center no-repeat;
}
Then you just add that class to the element you are loading and remove it when it is done:
// Removes any loaded images on Ajax success
var removeLoader = function(event, XMLHttpRequest, ajaxOptions)
{
$('.ajax-loader').removeClass('ajax-loader');
};
// Add the ajax loader to a specific element and remove it when successful
$('.div1').addClass('ajax-loader').load('mypage.html', removeLoader);
considering that the div you want to load your image has an id="theDiv"
$(document).ready(function() {
$('#theDiv').append('<div id="ajaxBusy"><p><img src="ajax-loader.gif"></p></div>');
});
Is there a reason you're appending your "ajaxBusy" div via Javascript? Why not just include the HTML on the page itself?
<div id="main">
<div id="ajaxBusy">
<p><img src="ajax-loader.gif"></p>
</div>
</div>
Try binding the ajaxStart and ajaxStop to the ajaxBusy div instead of the document.
$('#ajaxBusy').ajaxStart(function(){
$(this).show();
}).ajaxStop(function(){
$(this).hide();
});
I have an element which shows important text to the user, as such I'd like to animate it in to the pane (motion draws the eye) rather than just have it somewhere where the user may miss it.
How can I have it showing by default (for the 1% or so of users who surf with javascript off), but animated in for the rest?
Using
$(document).ready(function(){
$('#messagecenter').hide();
$('#messagecenter').show('fade', 'slow');
})
Causes the element to load visible, then disapear, then fade.
display:hidden;
$(document).ready(function(){
$('#messagecenter').show('fade', 'slow');
})
Will of course hide it for users with no Javascript.
Is there any good way to do this?
Simple way: have the content hide for JS-enabled users immediately after
including it in the page, rather than waiting for the entire document to load:
<div id="messagecenter">Albatross!</div>
<script type="text/javascript">
$('#messagecenter').hide();
$(document).ready(function() {
$('#messagecenter').show('fade', 'slow');
});
</script>
This is usually enough to stop a flash of the content rendering as the page loads. But maybe not if the content is complicated/large. In that case:
Watertight way: add a class to an ancestor element (eg body) when JS is enabled, using CSS to ensure that the content being loaded is hidden-by-default only when JS is on:
<head>
<style type="text/css">
body.withjs #messagecenter { visibility: hidden; }
</style>
<script type="text/javascript">
$(document).ready(function() {
$('#messagecenter').show('fade', 'slow');
});
</script>
</head>
<body>
<script type="text/javascript">
$(document.body).addClass('withjs');
</script>
...
<div id="messagecenter">Albatross!</div>
You can go with your second option of using display: none;, and include your text again inside a noscript tag.
Not exactly the cleanest thing though, since you'll be duplicating your element/text.
Easiest answer: Don't wait for document.ready to show it. Just put that code at the bottom of your <body> and it should hardly be noticeable.
Be sure to chain your queries too.
$('#messagecenter').hide().fadeIn('slow');
Always use the <noscript>...</nosript> tag for those 1% users.
And keep the code for the normal users untouched.
I have tried this code to hide the body, and show when is loaded in totality. But I noticed that is not working well, because when the fade occurs, some images are not yet loaded.
How I can do this effect?
<script type="text/javascript">
$(document).ready(function(){
$('.nav').fadeIn(700);
});
</script>
<body class="nav" style="display: none">
Surely it's as simple as:
$(window).load(function() {
$('.nav').fadeIn(700);
});
If you want to wait for the images (questionable idea, but it's your site) you can just handle the "load" event instead:
$(document).load(function() { $('.nav').fadeIn(700); });
I say that that's a questionable idea because it may take some time to get the images, and that may be confusing. However, I don't have any clue what your site looks like, of course, so perhaps it's fine.
Oh, also: if you're really just targetting the body element, then you can just use
$('body').fadeIn(700);
Not that it matters at all in this context, but that's going to be more efficient.
Using Fancybox to play youtube videos in a modal box.
My Problem is that I keep getting "The requested content cannot be loaded. Please try again later."
The modal box is popping up so I know the script is running, it might be a problem with my API call... here is my call:
<script type="text/javascript">
$(document).ready(function() {
/* This is basic - uses default settings */
$("a.fancybox").fancybox({
'hideOnContentClick': true
});
/* This is a non-obtrustive method for youtube videos*/
$("a[rel=fancyvideo]").fancybox({
overlayShow: true,
frameWidth:640,
frameHeight:360,
});
});
</script>
Do you have any <a>s with both class="fancybox" and rel="fancyvideo"? If you do then you'll be binding Fancybox to those elements twice and Fancybox might not like that. Try taking out this one:
$("a.fancybox").fancybox({
'hideOnContentClick': true
});
And see what happens with just the second one in place.
UPDATE: Strange. The demo (http://chadly.net/demos/video-lightbox.html) is producing different HTML than your page, the demo builds an <object data=...> but yours builds a <object><embed src="youtube-url"> thing. You're saying:
type: 'swf'
in your Fancybox binding, that's where the <object><embed>...</embed></object> stuff comes from. However, the href points at a plain old YouTube video viewing HTML page and that href ends up as the src attribute for the <embed>. The URL for embedding a YouTube video isn't the same as the video's HTML page and that's probably the source of your problem.
Try replacing the href that looks like this:
http://www.youtube.com/watch?v=QmVvgSfdmJQ
with one like this:
http://www.youtube.com/embed/QmVvgSfdmJQ
The first is the plain HTML page for YouTube, the second is the embeddable SWF.
UPDATE 2: The example you're working from is for Fancybox 1.0.0 but you're using 1.3.4, 1.0.0 has some special checks for YouTube that aren't present in later versions:
//...
} else if (url.match(/youtube\.com\/watch/i)) {
//...
That's from 1.0.0 and the code after that else if rewrites the HTML page URL (e.g. http://www.youtube.com/watch?v=QmVvgSfdmJQ) to the older embeddable SWF URL (e.g. http://www.youtube.com/v/QmVvgSfdmJQ). This version problem also explains why the demo was producing different HTML than your's.
So, you have some version problems on top of everything else.
Check if you have included the jquery.fancybox-media.js
<script type="text/javascript" src="jquery.fancybox-media.js?v=1.0.0"></script>
Looks like your code might be slightly off
<script type="text/javascript">
$(document).ready(function() {
$("a[#rel*=fancyvideo]").fancybox({
overlayShow: true,
frameWidth:640,
frameHeight:360
});
});
</script>
http://chadly.net/post/2009/01/29/Lightbox-for-YouTube-Videos.aspx
use this sample don't forget href
<a class="fancybox" href="your path for image or other">
<img src="imagepath">
</a>