I want to use a preloader animation for my website and want it to fadeout after my site's all content has loaded. I have tried this
way:
<script>
window.onload = function () {
document.querySelector(".loader-container").style.display = 'none';
};
</script>
But sometimes the animation is going infinitely and i can't see any content of my website and sometimes it vanishes before the images had
loaded.I have searched google for various alternatives but none worked.
It will be a great help if anyone could help a beginner like me(it has been 3 months) by providing a code snippet to accomplish this.
Related
I regularly download images as blob and show them in the html or download the to the HD. Most of the time they show correctly. But sometimes they are loaded for 50% or with weird background colours. Like these examples (last one is normal).
Here is how I download the images. I use the aurelia-fetch-client in the aurelia framework for this.
Html:
<div css="background-image: url(${ imageUrl })"></div>
Javascript:
const blob = await this.client.fetch(`${this.endpoint}/attachments/${this.attachment.name}`,
{
method: 'GET'
}).then((x) => x.blob());
this.imageUrl = URL.createObjectURL(blob);
Any idea what is causing this? It happens randomly to images that I show in the webbrowser or download to the HD. Any help is appreciated.
I use Muse and I want to be able to share the current URL dynamically. I have achieved this with Facebook and Twitter. However Google Plus is still evading me.
This is the JS code I have been working with.
<script language="javascript">
function gplussharecurrentpage() {
sharelink = "https://plus.google.com/share?url={URL}"+url;
newwindow=window.open(sharelink,'name','height=400,width=600');
if (window.focus) {newwindow.focus()}
return false;
}
var url="www.google.co.uk";
googleplusbtn(url);
</script>
I have a button linked to activate the script however it comes back with a this link is not valid.
Any ideas?
I'm having trouble hooking up the F1 help function in AutoCAD Lisp with a custom Youtube video instead of showing the default AutoCAD Help files. I've found this article to be quite helpful, but it won't allow me to supply a youtube video in any way.
The custom AutoCAD browser is too old and does not support HTML5 (which is needed to run Youtube videos). Any help on how to solve my issue?
Case: How to bind the F1 help to a custom function in AutoCAD Lisp, then activate a Youtube clip on F1 keypress.
After a while, I got it all figured out. I had to use a combination of HTML/Javascript to trigger the default web browser (which hopefully supports HTML5), and then view the Youtube clip there:
Lisp:
(setfunhelp "C:MyFunction" "C:\\path\\to\\html\\file\\MyFunc_Help.html")
(defun C:MyFunction ()
(alert "this is my function")
)
HTML:
<html>
<body>
<script>
function OpenInNewTab(url, callback) {
var acWindow = window.open("", "_self");
acWindow.document.write("");
setTimeout (function() {acWindow.close();},500);
var newWindow = window.open(url, '_blank');
newWindow.focus();
}
OpenInNewTab("https://youtu.be/FERNTAh5s0I");
</script>
</body>
</html>
This HTML code opens a new browser window in your default browser, then closes the AutoCAD default browser after 500 milliseconds.
I hope this will be of help to someone.
I am looking fore some code allowing me to launch automatically a video after another one.
I'am using the great video.js library, which has a quite complete API. I found some snippet to get an event listener working at the end of the 1st video, but then I cannot launch the second one.
This is working, displaying an alert at the end of the 1st video :
_V_("intro").ready(function(){
this.addEvent("ended", function(){
alert('foo');
});
});
And this is also working, launching a video in fullscreen on page reload :
_V_("leader").ready(function(){
var leader = this;
leader.requestFullScreen();
leader.play();
});
But I can't get the 2nd video launching in fullscreen at the end of 1st video...
Last subtility, I would like to entirely build the 2nd video with javascript, not having to write it and just hiding id with CSS.
Thank you folks !
Elliot
You can simply use the provided 'src' method in the Video.js API, if you want to play a second video right after the first one finishes it would work like this:
_V_("intro").ready(function(){
this.addEvent("ended", function(){
this.src({ type: "video/mp4", src: "http://path/to/second/video.mp4" });
});
});
I have been working on a mediaplayer with playlist using flowplayer in combination with jQuery tabs. But I run into issues with IE where when I switch tabs it still keeps playing the video in the closed tab. This does not happen in firefox or chrome, only in IE.
You can checkout my demo here
I was browsing the flowplayer forums and someone posted a solution, but the persons solution was not using jQuery UI, instead he was using jQuery Tools. So I am trying to figure out how to implement it in jQuery UI. I did not get any help from the flowplayer forums, so I thought I'd try in here.
This is the code the person used to supposedly solve the issue in jQuery Tools (forum post) I tried this using jQuery Tools and it didn't work completely.
incomplete jQuery Tools solution:
$(function() {
var api = $(".items").tabs(".tabs-cont").data("tabs");
api.onClick(function(index) {
var video = api.getCurrentPane().find("div.video"),
videoCont = video.find("div.video-cont");
videoCont.detach();
video.append(videoCont);
});
});
html:
<div class='video'>
<div class="video-cont"><object>FLASH EMED HERE</object></div>
</div>
I was able to figure something out on my own. Don't know if there is a better way of doing it, but it did solve my problem.
$( "#tabs" ).tabs({
show: function(e, ui) {
$.cookie( "tab-name", ui.panel.id );
},
select: function (e, ui) {
var tab = "#" + $.cookie ( "tab-name");
var video = $( tab ).find("div.media-container"),
flow = video.find("div.flow-container").attr('id');
$f(flow).stop();
}
});