I'm using the vimeo froogaloop API to control the videos from external buttons (It's a style thing.)
Here's a jsfiddle of progress so far: http://jsfiddle.net/andrewminton/H8ynJ/
What I'm trying to do is listen to the api for the playProgress event so that I can alter the css width in percentage of my .playhead div.
function onPlayProgress() {
froogaloop.addEvent('playProgress', function(data) {
var Playhead = (data.percent)*100;
var playheadBar = container.querySelector('div .progress .playhead');
playheadBar.css('width', Playhead+'%');
});
}
Any ideas why my playbar css width percentage isn't updating?
It's cool, I figured I'd add my own function an listen for the data.percent value.
I was thinking jquery syntax and not pure js:
function Progress(message){
playbar.style.width = message+'%';
}
style.width was the key here.
Related
I would like to hide an html Element (in my case a headline) only when the dynamic content of the site expands so far vertically that a scrollbar would appear. I am aware how to hide an element but I don't know how to trigger the event. I am searching for something like the #media rule in css, only that it shouldn't be triggered on the viewport resolution, but the size of the content (vertically).
Does anyone know a solution to this?
Thanks in advance!
Thanks to Nicks comment I figured out a solution.
If anyone is looking for the same thing, here is a working Javascript solution (no JQuery needed):
var callback = function(){
// Handler when the DOM is fully loaded
// Check if the body height is bigger than the clients viewport
if (document.body.scrollHeight > document.body.clientHeight) {
// Assign a class with display:none (in my case 'hide')
document.getElementById("headline").className = 'hide';
}
};
// This part ensures that the script will be loaded once the site is loaded
if (
document.readyState === "complete" ||
(document.readyState !== "loading" && !document.documentElement.doScroll)
) {
callback();
} else {
document.addEventListener("DOMContentLoaded", callback);
}
With help by https://www.sitepoint.com/jquery-document-ready-plain-javascript/
I'm trying to use https://github.com/mapsplugin/cordova-plugin-googlemaps in framework7 project
but I'm facing a problem
as i navigate to the map page The image is loaded but wasn't displayed
I think the issue is z-index
I tried that solution
https://github.com/mapsplugin/cordova-plugin-googlemaps/issues/2028
but doesn't work
this is the page before map page
the red div is the place where image should display
after functions run i see that instead of map
I use this code to navigate to the map page
success: function (response) {
var responseObj = JSON.parse(response)
console.log(responseObj);
this.$root.navigate("/theMapPage/")
}
I found the solution
as I posted in comment that the plugin make the map behind the application
so I hide all pages and show the current page only
map.one(plugin.google.maps.event.MAP_READY, function () {
$$('.page').hide()
$$('.page.page-current').show()
map.clear();
map.getMyLocation(onSuccess, onError);
});
at end just show all pages again
pageAfterOut: function () {
// page has left the view
$$('.page').show()
}
could someone please tell me how to turn on fullscreen mode when using video tag? I am using following typescript:
var vid = <HTMLVideoElement> document.getElementById('video1');
I would like to play video in fullscreen in window.onload event.
It seems typescript does not support requestFullscreen, or other "webkitFullscreen" mode. I search other questions on stackflow, and they seem bit outdated.
You can add those to the interface:
// Add the missing definitions:
interface HTMLVideoElement{
requestFullscreen();
webkitRequestFullscreen();
}
// now the following should work
var vid = <HTMLVideoElement> document.getElementById('video1');
if (vid.requestFullscreen){
vid.requestFullscreen();
}else if (vid.webkitRequestFullscreen){
vid.webkitRequestFullscreen();
}
I tried this but does not work.
I am looking to play fullscreen video from window.onload event. If I add a button on the page and add hook up the code you mentioned, then it works. code Click Me To Go Fullscreen!
Also, IE10 does not seem to support any of these modes. Is that expected?
Opening a video in full screen requires a synchronous user interaction, i.e. the user must click on a button, and only then the click handler can request full screen mode.
Please try this then
var elem = document.getElementById("myvideo");
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen();
}
For documentation Document
I have a full flash site which uses swfobject to embed it 100% height and width. I'm using swffit to force a browser scroll bar for pages with a large amount of content. This is all fine and works perfectly. I also have the content in HTML format, as alternative content and this also works apart from in order to get the flash swfobject to work I need to add the overflow = hidden in the CSS, like:
html{
height: 100%;
overflow:hidden;
}
#content{
height: 100%;
}
This then stops the scroll bar showing when the alternative content is shown.
Does anyone know how to fix this?
I don't know SWFFit but why do you need the overflow: hidden in the first place? Won't it work without?
The only workaround that comes to mind is to define two classes, one with, one without overflow: hidden, and change the class of the html element programmatically from within Flash by triggering some Javascript.
If you need to change a page's CSS or content based on the success of a SWFObject embed, use the callback function feature in SWFObject 2.2.
For dynamic publishing, it looks like this:
var flashvars = {};
var params = {};
var attributes = {};
var embedHandler = function (e){
};
swfobject.embedSWF("mymovie.swf", "targetID", "550", "400", "9.0.0", "expressInstall.swf", flashvars, params, attributes, embedHandler);
In your situation, if you needed to remove overflow:hidden from the HTML element, you could do this:
var flashvars = {};
var params = {};
var attributes = {};
var embedHandler = function (e){
//If embed fails
if(!e.success){
document.getElementsByTagName("html")[0].style.overflow = "auto";
}
};
swfobject.embedSWF("mymovie.swf", "targetID", "550", "400", "9.0.0", "expressInstall.swf", flashvars, params, attributes, embedHandler);
This callback function feature is only available in SWFObject 2.2.
I know that onload event waits for page resources to load before firing - images, stylesheets, etc.
But does this include IFrames inside the page? In other words, is it guaranteed that all the child Frames' onloads will always fire before the parent's does?
Also, please let me know if behavior varies between browsers.
No, it doesn't. If you want to do something like that, you'll need to add an onload handler for the iframe. You can do this nicely with jQuery:
<iframe src="http://digg.com"></iframe>
<script>
var count = $('iframe').length;
$(function() {
// alert('loaded'); // will show you when the regular body loads
$('iframe').load(function() {
count--;
if (count == 0)
alert('all frames loaded');
});
});
</script>
This would alert when all the frames are loaded.
See the example:
http://jsbin.com/azilo
Or plain javascript should work..
function checkIframes() {
if(!i) { i = 0; }
if(document.getElementsByTagName('iframe')[i]) {
document.getElementsByTagName('iframe')[i].onload = function () { i++; checkIframes(); }
}
else { yourFunctionInHere(); }
}
haven't really tested this, but should work... than refer to it with document.onload = function() { checkIframes(); }
I don't really like libraries like jQuery, because so far I found I can achieve more with less code, with regular javascript.
As I see on my pages, each iframe got independent onload, and top-frame onload doesn't wait for iframes to fire.
I got gif/png banners on my site that sometimes loads very slowly, so I put them into iframe and that made whole site and onload event to work faster.