(function () {
// Creating and Appending scripts dynamically
function createScript(src) {
var script = document.createElement('script');
script.src = src;
document.getElementsByTagName('head')[0].appendChild(script);
}
// End script tags Here
function createLink(href) {
var link = document.createElement('link');
link.href = href;
link.rel = "stylesheet";
link.type = "type/css";
document.getElementsByTagName('head')[0].appendChild(link);
}
createLink('http://vjs.zencdn.net/4.12/video-js.css');
createScript('http://vjs.zencdn.net/4.12/video.js');
createLink('http://localhost/projects/test/bin/videojs.vast.vpaid.min.css');
createScript('http://localhost/projects/test/bin/videojs_4.vast.vpaid.min.js');
createScript('http://localhost/projects/test/bin/es5-shim.js');
createScript('http://localhost/projects/test/bin/ie8fix.js');
// DIV 2
// Div to hold the video
var divContainer = document.createElement('div');
divContainer.class = 'example-video-container';
divContainer.style.display = 'inline-block';
document.getElementById("video3438445[CB]").appendChild(divContainer);
// End parent Div here (parent of video div/tag)
// Video Player Below
// Create the video tag for html video player
var video = document.createElement('video');
video.id = 'video';
/*video.width = 300;
video.height = 250;*/
video.className = 'video-js vjs-default-skin';
video.autoplay = true;
video.controls = true;
video.muted = true;
video.preload = 'auto';
video.poster = "http://vjs.zencdn.net/v/oceans.png";
//video.data-setup = '{}';
// Function to create sources for video
function addSourceToVideo(element, src, type) {
var source = document.createElement('source');
source.src = src;
source.type = type;
element.appendChild(source);
}
addSourceToVideo(video, 'http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4', 'video/mp4');
addSourceToVideo(video, 'http://video-js.zencoder.com/oceans-clip.mp4', 'video/webm');
addSourceToVideo(video, 'http://video-js.zencoder.com/oceans-clip.mp4', 'video/ogg');
var paragraph = document.createElement('p');
paragraph.innerHTML = "Video PlayBack Not Supported";
video.appendChild(paragraph);
video.load();
//video.play();
divContainer.appendChild(video);
// Video player creation ends here
var vt = 'Vast_tag_url';
var vpaidPath = 'http://localhost/projects/test/bin/VPAIDFlash.swf';
setTimeout(myFunction, 1000);
function myFunction() {
var player = videojs(
"video", {
plugins: {
"vastClient": {
"adTagUrl": vt,
"adCancelTimeout": 15000,
"adsEnabled": true,
"playAdAlways": true,
"vpaidFlashLoaderPath": vpaidPath
}
}
})
}
})();
It works on normal HTML page when we have CSS and JS in head then a div with video and JS functions in body. But when I created a JS file and included it by javascript then it is not working.
Please suggest me what I am doing wrong.
Thanks so much for your response. My issue has been resolved. I used following code for this.
function loadScriptSync(src) {
var s = document.createElement('script');
s.src = src;
s.type = "text/javascript";
s.async = false; // <-- this is important
document.getElementsByTagName('head')[0].appendChild(s);
}
It will load js files synchronously.
The way you are loading the scripts is asynchronously.
You could either load them in the head directly, or implement a method that will listen to the loading events. Example below written in ES6.
function loadScript(src) {
return new Promise((onFulfilled, onRejected) => {
const script = document.createElement('script');
let loaded;
// set source path to load
script.setAttribute('src', src);
script.onreadystatechange = script.onload = () => {
if (!loaded) {
onFulfilled(script);
}
loaded = true;
};
script.onerror = function() {
// something went wrong
};
// append the given script
document.getElementsByTagName('head')[0].appendChild(script);
});
}
loadScript('http://url').then(() => {
// do something now that the script is loaded.
});
Now you will be sure that when the promise is fulfilled, the script is loaded successfully.
Related
I am triying to create mathjax output to png file
I have created a JSFiddle here
I used code like below, I have an html code like
function myFunction(eqn){
window.MathJax = {
jax: ["input/TeX", "output/SVG"],
extensions: ["tex2jax.js", "MathMenu.js", "MathZoom.js"],
showMathMenu: false,
showProcessingMessages: false,
messageStyle: "none",
SVG: {
useGlobalCache: false
},
TeX: {
extensions: ["AMSmath.js", "AMSsymbols.js", "autoload-all.js"]
},
AuthorInit: function() {
MathJax.Hub.Register.StartupHook("End", function() {
var mj2img = function(texstring, callback) {
var input = texstring;
var wrapper = document.createElement("div");
wrapper.innerHTML = input;
var output = { svg: "", img: ""};
MathJax.Hub.Queue(["Typeset", MathJax.Hub, wrapper]);
MathJax.Hub.Queue(function() {
var mjOut = wrapper.getElementsByTagName("svg")[0];
mjOut.setAttribute("xmlns", "http://www.w3.org/2000/svg");
// thanks, https://spin.atomicobject.com/2014/01/21/convert-svg-to-png/
output.svg = mjOut.outerHTML;
var image = new Image();
image.src = 'data:image/svg+xml;base64,' + window.btoa(unescape(encodeURIComponent(output.svg)));
image.onload = function() {
var canvas = document.createElement('canvas');
canvas.width = image.width;
canvas.height = image.height;
var context = canvas.getContext('2d');
context.drawImage(image, 0, 0);
output.img = canvas.toDataURL('image/png');
callback(output);
};
});
}
mj2img(eqn, function(output){
const t = document.getElementById("target"); const i = document.createElement('img'); i.src = output.img; t.append(i);
});
});
}
};
}
(function(d, script) {
script = d.createElement('script');
script.type = 'text/javascript';
script.async = true;
script.onload = function() {
// remote script has loaded
};
script.src = 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js';
d.getElementsByTagName('head')[0].appendChild(script);
}(document));
<textarea onkeyup="myFunction(this.value)"></textarea>
<div id="target"></div>
How to display image when keyup a form containing textarea?
Here is a working version of above code by giving direct value.
standard pattern for keyup Event listener
document.getElementById("target").onkeyup = function() {funName()};
According to your specific problem. I'm not pretty sure where do you want to apply it
I am currently using https://getbutton.io/. But problem is they have very slow css and JavaScript. I want to create my own scrolling button like this for Facebook and WhatsApp. Please help me to code
https://static.getbutton.io/css/whatshelp-font.css
https://static.getbutton.io/widget-send-button/js/widget/desktop.js
https://static.getbutton.io/widget-send-button/css/style.css
https://static.getbutton.io/widget-send-button/js/init.js
<script type="text/javascript">
(function () {
var options = {
facebook: "1769615853297972", // Facebook page ID
whatsapp: "+9203038518000", // WhatsApp number
call_to_action: "Message us", // Call to action
button_color: "#FF6550", // Color of button
position: "right", // Position may be 'right' or 'left'
order: "facebook,whatsapp", // Order of buttons
};
var proto = document.location.protocol, host = "getbutton.io", url = proto + "//static." + host;
var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = url + '/widget-send-button/js/init.js';
s.onload = function () { WhWidgetSendButton.init(host, proto, options); };
var x = document.getElementsByTagName('script')[0]; x.parentNode.insertBefore(s, x);
})();
</script>
<!-- /WhatsHelp.io widget -->
Please help me to make my own code so I did'nt need to use getbutton js and css files and I can host on my own server.
Use the below code
<script type="text/javascript">
(function () {
var options = {
facebook: "1769615853297972", // Facebook page ID
whatsapp: "+9203038518000", // WhatsApp number
call_to_action: "Message us", // Call to action
button_color: "#FF6550", // Color of button
position: "right", // Position may be 'right' or 'left'
order: "facebook,whatsapp", // Order of buttons
};
var proto = document.location.protocol, host = "whatshelp.io", url = proto + "//static." + host;
var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = url + '/widget-send-button/js/init.js';
s.onload = function () { WhWidgetSendButton.init(host, proto, options); };
var x = document.getElementsByTagName('script')[0]; x.parentNode.insertBefore(s, x);
})();
</script>
I would like to be able to display a GIF while the image is being loaded. Is this possible with the script I am using?
From what I understand I would use something like
$('#image').load { loadingimage.hide }
Here is my code:
$.get('http://192.168.1.69:8090/VirtualRadar/AirportDataThumbnails.json?icao=' + p.Icao + '®=' + p.Reg , function(res) {
var error = res.status;
if (error == "404") {
$("#image").attr('src', "placeholder.jpg");
$("#image2").attr('src', "placeholder.jpg");
$("#imageurl").attr('href', "//airport-data.com");
} else {
var imgUrl = res.data[0].image;
var imgHref = res.data[0].link;
$("#image").attr('src', imgUrl);
$("#image2").attr('src', imgUrl);
$("#imageurl").attr('href', imgHref);
}
})
Use the Image.onload attribute or attach an event listener.. load the loading wheel image first then display that while the larger image is loading...
function loadImage(src){
return new Promise(done=>{
var i = new Image();
i.onload = ()=>done(i);
i.src = src;
});
}
const loadImgSrc = "https://media.giphy.com/media/3oEjI6SIIHBdRxXI40/giphy.gif";
const bigImgSrc = "https://www.gannett-cdn.com/-mm-/4252e7af1a3888197136b717f5f93523f21f8eb2/r=x1683&c=3200x1680/local/-/media/USATODAY/onpolitics/2012/10/03/bigbird-16_9.jpg";
loadImage(loadImgSrc).then(img=>{
img.style.maxWidth = "100%";
document.getElementById('myImg').appendChild(img);
loadImage(bigImgSrc).then(img=>{
img.style.maxWidth = "100%";
document.getElementById('myImg').innerHTML = '';
document.getElementById('myImg').appendChild(img);
});
})
<div id=myImg></div>
So i have a js file as follows:-
(function(){
console.log("Starting Point");
// Creating and Appending scripts dynamically
function createScript(src) {
console.log("script for js");
var script = document.createElement('script');
script.src = src;
document.getElementsByTagName('head')[0].appendChild(script);
}
// End script tags Here
function createLink(href) {
console.log("script for links");
var link = document.createElement('link');
link.href = href;
link.rel = "stylesheet";
link.type = "type/css";
document.getElementsByTagName('head')[0].appendChild(link);
}
// DIV 1
// Create a main Div to hold everything
createScript('http://vjs.zencdn.net/4.7.1/video.js');
createScript('lib/videojs-contrib-ads/videojs.ads.js');
createScript('lib/vast-client.js');
createScript('videojs.vast.js');
createLink('http://vjs.zencdn.net/4.7.1/video-js.css');
createLink('lib/videojs-contrib-ads/videojs.ads.css');
createLink('videojs.vast.css');
console.log("Create mainDiv");
var mainDiv = document.createElement('div');
mainDiv.id = 'ad_placement';
// mainDiv.style.float = "right";
var currentScript = document.currentScript;
currentScript.parentElement.insertBefore(mainDiv, currentScript);
// document.body.appendChild(mainDiv);
console.log("End MainDiv");
// End main Div here
// DIV 2
// Div to hold the video
console.log("Create innerDiv")
var divContainer = document.createElement('div');
divContainer.class = 'example-video-container';
divContainer.style.display = 'inline-block';
mainDiv.appendChild(divContainer);
console.log("Create innerDiv")
// End parent Div here (parent of video div/tag)
// Video Player Below
// Create the video tag for html video player
console.log("Video Creation Started");
var video = document.createElement('video');
video.id = 'vid2';
video.width = 300;
video.height = 250;
video.class = 'video-js vjs-default-skin';
video.autoplay = true;
video.controls = true;
video.muted = true;
video.preload = 'auto';
video.poster = "http://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg";
//video.data-setup = '{}';
// Function to create sources for video
function addSourceToVideo(element, src, type) {
var source = document.createElement('source');
source.src = src;
source.type = type;
element.appendChild(source);
}
addSourceToVideo(video, 'http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4', 'video/mp4');
addSourceToVideo(video, 'http://video-js.zencoder.com/oceans-clip.mp4', 'video/webm');
addSourceToVideo(video, 'http://video-js.zencoder.com/oceans-clip.mp4', 'video/ogg');
console.log("Video Creation End");
console.log("Para Started");
var paragraph = document.createElement('p');
paragraph.innerHTML = "Video PlayBack Not Supported";
video.appendChild(paragraph);
video.load();
//video.play();
divContainer.appendChild(video);
console.log("Para end");
// Video player creation ends here
console.log("Before calling videojs");
var vid2 = videojs('vid2');
console.log("After calling videojs");
vid2.muted(true);
vid2.ads({
timeout: 5000
});
vid2.vast({
url: 'vast_tag_url'
});
vid2.on('readyforpreroll', function() {
vid2.ads.startLinearAdMode();
vid2.one('ended', function() {
vid2.ads.endLinearAdMode();
console.log("ad finished");
document.getElementById('adPlacement').innerHTML="<img src='https://wallazee.global.ssl.fastly.net/images/variant/20140109-11d5e6789afea899c324f5d4cbfa00eca24c58c8b790e1d6305c36e-1024.png' width=300 height=250 border=0/>";
});
});
vid2.on('adtimeout', function() {
console.log("timout happened")
document.getElementById('adPlacement').innerHTML="<img src='https://wallazee.global.ssl.fastly.net/images/variant/20140109-11d5e6789afea899c324f5d4cbfa00eca24c58c8b790e1d6305c36e-1024.png' width=300 height=250 border=0/>";
});
console.log("End of file");
})();
So i am getting video.js not defined error when i include this file in html page. Need a javascript solution. (I can't use jquery)
Where am i wrong.it works on normal html page when we have css and js in head then a div with video and js functions in body.
when i created a js and imported then its a problem
I'm trying to run a bit of code to flash the favicon back and forth between 2 .ico's indefinitely every second. So far I've got this code which changes it once, but not again;
var favUrl = "favicon.ico";
var flashFavIco = function() {
if(favUrl == "favicon.ico") {
favUrl = "favicon-white.ico";
} else {
favUrl = "favicon.ico";
}
console.log(favUrl);
var link = document.createElement('link');
link.type = 'image/x-icon';
link.rel = 'shortcut icon';
link.href = 'http://www.mysite.com/' + favUrl;
document.getElementsByTagName('head')[0].appendChild(link);
};
setInterval(flashFavIco, 1000);
I tested adding console.log()s in the if/else sections to check that favURL was being set each second, which it was indeed. So I'm a little stuck as to why the favicon only changes once. Is this a browser issue?
Edit: I do realise this continually adds new <link ... tags to the head, and I'm working on writing that appendChild part differently, this does not affect my original question
I re-wrote part of it and now have it working;
var favUrl = "favicon.ico";
var link = document.createElement('link');
link.type = 'image/x-icon';
link.rel = 'shortcut icon';
link.href = 'http://www.mysite.com/' + favUrl;
link.id = "favico";
document.getElementsByTagName('head')[0].appendChild(link);
var flashFavIco = function() {
if(favUrl == "favicon.ico") {
favUrl = "favicon-white.ico";
} else {
favUrl = "favicon.ico";
}
$('#favico').prop('href', 'http://www.mysite.com/' + favUrl);
};
setInterval(flashFavIco, 1000);
Rewrote it for you.
// Edit these
var faviconNormal = "/faviconNormal.ico";
var faviconActive = "/faviconActive.ico";
var faviconID = "#myfavicon"; // CSS selector for your <link> element
// Declarations
var faviconElement = document.querySelector(faviconID);
var faviconIsActive = false;
function flashFavicon() {
if (faviconIsActive == false) {
changeFavicon(faviconActive);
faviconIsActive = true;
}
else {
changeFavicon(faviconNormal);
faviconIsActive = false;
}
}
function changeFavicon(src) {
faviconElement.href = src;
}
// Run
var initFlashing = setInterval(flashFavicon, 1000);