I have a main page and a canvas element under it (like in agar.io) and I hide my interface and show the canvas when the game begins:
const mainpage = document.getElementById('mainpageID');
const mainpage_elems = mainpage.getElementsByTagName("*");
for (let i = 0; i < mainpage_elems.length; i++) {
const element = mainpage_elems[i];
element.style.display = "none";
}
Will this also help optimize my website so that browser will be running my game faster? Because it knows that all of my other elements are hidden so it can focus on painting canvas. Is that true?
Related
When exporting a Premiere sequence with warp stabilizer applied, which is not analysed, Premiere will show a big banner across the video.
Therefore I'm trying to write a script, what tells Premiere to analyse a clip, that has warp stabilizer applied.
So far I can get Premiere to give me information about the effects of a clip, but I can't find a way to trigger the "Analyse" button inside the warp stabilizer. Also ExtendedScript Toolkit documentation isn't very helpful at this.
How can I tell Premiere to analyse the clip?
Thats my script so far:
// get active sequence
var seq = app.project.activeSequence;
if (seq) {
// get first video layer
var firstVideoTrack = seq.videoTracks[0];
if (firstVideoTrack) {
// get first video clip
var firstClip = firstVideoTrack.clips[0];
if (firstClip) {
// get effects applied to clip
var clipComponents = firstClip.components;
if (clipComponents) {
// loop through effects to find match
for (var i = 0; i < clipComponents.numItems; ++i) {
if (clipComponents[i].matchName == "AE.ADBE SubspaceStabilizer") {
var stabProps = clipComponents[i].properties;
?????????
break;
}
}
}
}
}
}
I'm creating an HTML5 video player, and want a button that turns subtitles on and off. To switch them off, I'm setting the default track's "mode" attribute to "hidden", but they're not disappearing in Chrome 66.
Here's the line of jQuery that should turn subtitles off (the player's id is "player"):
$"#player track").eq(0).attr("mode", "hidden");
The "mode" attribute changes to "hidden" in the DOM, but the subtitles are still visible. Any idea why that would be?
Expanding upon my comment; what you should try is disable the subtitles on all tracks (in case you have more than one).
There might be an easier way using jQuery, however I have never worked with html5 player using jQuery hence my answer.
var video = document.querySelector('#player');
for (var i = 0; i < video.textTracks.length; i++) {
video.textTracks[i].mode = 'hidden';
}
$(".ccbutton").click(function(){
var video = document.querySelector('#video');
for (var i = 0; i < video.textTracks.length; i++) {
if(video.textTracks[i].mode == 'hidden')
video.textTracks[i].mode = 'showing';
else
video.textTracks[i].mode = 'hidden';
}
});
So i am trying to figure out how to render images to the browser, without crashing it or making the UI unresponsive. I'm using this code to load (a lot) of thumbnails to the screen, and the goal is to keep the spinner gif spinning in every LI, without glitches, while the images render one by one, inside each LI.
This is the approach i am testing now, but i need some help in simulating expensive operations, like in the commented for loop; this for loop is, i think, too expensive; the setTimeout works fine (emulating the job of a web worker), but i would like to test with some expensive synchronous task;
the for loop totally freezes the app; do you have any other suggestions?
renderThumbnail = function(imageObj){
var li = document.createElement('li');
li.className = 'photo-list-item loading-spinner';
photoList.appendChild(li);
thumbnailListItems.push(li);
imageObj.load().then(function(){
thumbnailRenderQueue.push(imageObj);
if(!renderingThumbnails){
renderQueue();
}
});
};
var renderQueue = function(){
renderingThumbnails = true;
(function renderOne(){
var li = thumbnailListItems.shift();
var imageObj = thumbnailRenderQueue.shift();
var canvas = document.createElement('canvas');
canvas.width = 120;
canvas.height = 80;
// setTimeout(function(){
// for(var i = 0; i < 9999999; i++){ 10000*10000; }
var ctx = canvas.getContext('2d');
li.appendChild(canvas);
li.classList.remove('loading-spinner');
ctx.drawImage(imageObj.image, 0, 0, 120, 80);
if(thumbnailRenderQueue.length > 0){
renderOne();
} else {
renderingThumbnails = false;
}
// }, 1000);
})();
I need to include some sound files on a website, i recorded them and used the super complicated:
<a href="seo.html" onmouseover="new Audio('sounds/seo.mp3').play()">
to play them when the user scrolls over with the mouse. There are a total of four links on the website.
The problem is, when i mouse over one of them it starts playing, and then if i mouse over another it plays that one as well. If i move the mouse really fast accross the links i end up getting Giberish because all files are being played at the same time. How do i stop this ??
Ideal would be that the others CANNOT be played until the current playing is finished :)
An approch below.
Note, untested ;-)
HTML
a sound link -
a sound link -
a sound link -
a sound link
JS
var links = document.querySelectorAll('a.onmousesound');
var currentPlayedAudioInstance = null;
var onHoverPlaySound = function(element) {
if (currentPlayedAudioInstance &&
currentPlayedAudioInstance instanceof Audio) {
// is playing ?
// http://stackoverflow.com/questions/8029391/how-can-i-tell-if-an-html5-audio-element-is-playing-with-javascript
if (!currentPlayedAudioInstance.paused && !currentPlayedAudioInstance.ended && 0 < currentPlayedAudioInstance.currentTime) {
return false;
}
}
var file = element.getAttribute('data-file');
currentPlayedAudioInstance = new Audio(file);
currentPlayedAudioInstance.play();
};
for (var i = 0; i < links.length; i++) {
link.addEventListene('onmouseover', function() {
onHoverPlaySound(links[i]);
});
};
This code is meant for a real estate website I am updating for my company. Basically, There is a table with the property name, address, etc, and an image. Originally, I was coding this website in ASP.net switch over to regular Javascript for a few reasons (hosting overhead etc).
Sections of this code are from a few different tutorials out there, one of which is an ASP.net modal div image "enlarger" tutorial, which is sort of the basis combined with a few other sites. I have yet to comment in their names etc, but I plan on giving them credit in the code. Thier links are below before I post my code.
http://archive.aspsnippets.com/post/2009/07/06/Image-Gallery-using-ASPNet-GridView-control.aspx
My code is essentially as follows (I will trim the fat and excess line breaks in the style section):
First are the modal style tags from that tutorial by Mudassar Khan (partially relevant):
<style>
body {margin:0;padding:0;height:100%;}
.modal {display: none;position: absolute;top: 0px;left: 0px;background-color:black;z-index:100;opacity: 0.8; filter: alpha(opacity=60);-moz-opacity:0.8;min-height: 100%;}
&#divImage{display: none;z-index: 1000;position: fixed;top: 0;left: 0;background-color:White;height: 550px;width: 600px;padding: 3px;border: solid 1px black;}
<style>
Then comes his script, which I may have tweaked here and there:
<script type="text/javascript">
function LoadDiv(url) {
var img = new Image();
var bcgDiv = document.getElementById("divBackground");
var imgDiv = document.getElementById("divImage");
var imgFull = document.getElementById("imgFull");
var imgLoader = document.getElementById("imgLoader");
img.src = url;
var tcopy = img.src.slice(0,(img.src.length-4)) + "_big.png";
img.src = tcopy;
img.onload = function () {
imgFull.src = tcopy
imgFull.style.display = "block";
imgLoader.style.display = "none";
};
var width = document.body.clientWidth;
if (document.body.clientHeight > document.body.scrollHeight) {
bcgDiv.style.height = document.body.clientHeight + "px";
}
else {
bcgDiv.style.height = document.body.scrollHeight + "px";
}
imgDiv.style.left = (width - 650) / 2 + "px";
imgDiv.style.top = "20px";
bcgDiv.style.width = "100%";
bcgDiv.style.display = "block";
imgDiv.style.display = "block";
return false;
}
function HideDiv() {
var bcgDiv = document.getElementById("divBackground");
var imgDiv = document.getElementById("divImage");
var imgFull = document.getElementById("imgFull");
imgLoader.style.display = "block"; // I added as it seems to bring back the loader gif
if (bcgDiv != null) {
bcgDiv.style.display = "none";
imgDiv.style.display = "none";
imgFull.style.display = "none";
}
}
</script>
Now All this above script gets called upon a onClick Event Handler on an image of each of the real estate companies properties. This will work well to both preload images with the little animated gif and the close button works fine. It works on more than one image, BUT if the image is already preloaded, I cant think of a way to force the redisplay of an already preloaded image if a user clicks on the photo, then clicks close to hide the div tag and then clicks on the same preloaded image.
That event handler looks like this:
img onClick="return LoadDiv(this.src);" src="http://www.ourcompany.com/images/prop_thumbs/Some_plaza.png" style="min-width:200 px;max-height:150 px;max-width:200 px;"
I thought global booleans would work, but then I realized, theres no telling which and what is preloaded, so the boolean might not help if you can't pass something meaningful back and forth.
I'm not asking any one to do my work for me, however I would appreciate suggestions in the right direction.
Regards and TIA!
You could make a array of all of the images with key values of loaded. For instance.
image_list = {image1:false,image2:true,image3:false};
true and false being loaded or not loaded. When an image is clicked just update the array.
image_list[image1] = true;
Did this really quick, so my syntax might be off, feel free to correct me or berate me...
Yay!!! Figured it out with the help of both jhanifen and the guy who did the tutorial I used (he actually emailed me). My code is below (its an excerpt, but you'll get the idea):
images = new Array(30);
//need to define each image to be in array
images[0]="website/images/prop_thumbs/property1_big.png";
images[1]="website/images/prop_thumbs/property2_big.png";
images[2]="website/images/prop_thumbs/property3_big.png";
//This continues for some time
imagesLoaded = new Array(30);
// per stack overflow person suggestion make array of bool values; initialize them all to false on page load
function onLoadScript() {
for (i = 0; i < imagesLoaded.length; ++ i)
{
imagesLoaded [i] = false;
}
}
// the above is called onLoad in body tag
// Changes the script for Loading the Div tag are below:
function LoadDiv(imgNum) {
var img = new Image();
var bcgDiv = document.getElementById("divBackground");
var imgDiv = document.getElementById("divImage");
var imgFull = document.getElementById("imgFull");
var imgLoader = document.getElementById("imgLoader");
img.src = images[imgNum];
if(imagesLoaded[imgNum] = true)
{ // this statement triggers same as onload below!
imgFull.src = img.src
imgFull.style.display = "block";
imgLoader.style.display = "none";
}
img.onload = function () {
imgFull.src = img.src
imgFull.style.display = "block";
imgLoader.style.display = "none";
imagesLoaded[imgNum] = true;
};
The rest of the document is the same except I changed the onClick event handler for the property images to LoadDiv(and some sequential number);
Thanks to all for your help! Particular props to both Mudassar Khan and jhanifen!