Quite likely I just need the right terms to find the answer; however, I imagine someone else has already encountered this problem and knows right away how to solve it.
I'm using Brightcove's services and their Smart Player. I've configured a Chromeless player and tried to eliminate ALL controls because my page's controls will use their API to play, pause, etc. On desktop, this works just ok. On mobile devices (iOS7 Safari) there is a play button overlay on the video player that I'd like to replace with my own graphic.
I'd like to turn this:
into this:
Anyone know how to do this? I can't just reach into the player with JavaScript because it's in an iframe filled by Brightcove services.
You can do this with a javascript player plugin, which runs inside the player iframe. Use the overlay API to create your custom play button and playOverlayCallbacks() to prevent the default play overlay from being displayed.
Something like this would work in a plugin:
(function() {
function addPlayOverlay() {
var overlay = videoPlayer.overlay();
$(overlay).css('background', 'transparent url("http://example.com/playbutton.png") no-repeat center center')
.width($(document).width())
.height($(document).height())
.css("-webkit-box-shadow","inset 0 0 150px rgba(0,0,0,0.9)")
;
$(overlay).click(function(){
// Play when custom overlay is clicked
videoPlayer.play();
});
videoPlayer.playOverlayCallbacks({
show: function() {
// Show custom overlay
$(overlay).fadeIn();
// Prevent standard play overlay
return false;
},
hide: function() {
// Hide play overlay
$(overlay).fadeOut();
return false;
}
});
}
var
bcplayer = brightcove.api.getExperience(),
videoPlayer = bcplayer.getModule(brightcove.api.modules.APIModules.VIDEO_PLAYER),
experience = bcplayer.getModule(brightcove.api.modules.APIModules.EXPERIENCE);;
if (experience.getReady()) {
addPlayOverlay();
} else {
experience.addEventListener(brightcove.player.events.ExperienceEvent.TEMPLATE_READY, addPlayOverlay);
}
}());
Related
I have 4 main components for my React portfolio site called Home, Portfolio, About, Contact. The components are linked in Navigation. If I click on those link, Component appears. But the problem is if I scroll the Portfolio page 50% and click on About. The About page stay automatically scrolled top by 50%. I don't want an automated scroll. Rather I want the component will start from top 0;
I have tried "css-snap-type" but it doesn't work.
How can I solve the problem?
you could solve this using a react component that will scroll the window up everytime you click on a different link.
checkout this documentation is pretty straight forward https://reactrouter.com/web/guides/scroll-restoration
If you are using gatsby it comes with and API called called shouldUpdateScroll you could implement it on the gatsby.browser.js
const transitionDelay= 500
exports.shouldUpdateScroll = ({
routerProps: { location }, //location
getSavedScrollPosition, //last position on the previous page
}) => {
if(location.action === 'PUSH'){
window.setTimeout(()=> window.scrollTo (0,0), transitionDelay)
}
else {
const savedPosition = getSavedScrollPosition(location)
window.setTimeout(
()=> window.scrollTo((savedPosition || [0,0])),
transitionDelay
)
}
return false
}
U need to set window.scrollTo(0, 0) when u click on link so it would start on top of page.
I have managed to use the position:fixed setting of CSS/CSS3 before and worked quite well!
I saw this a few days ago and was wondering how did they achieve the effect that happens when you scroll down, where the menu bar is in one position before you scroll and then goes to the top where it locks itself down.
See link - http://www.cssportal.com/ < scroll down on any page and observe the top blue menu.
I have tried to look in the source of the page but I cant make head or tails.
Does anyone know what this effect is called?
It's done with javascript, to add a css class that contains position:fixed and other positioning styles to achieve what you want.
It's not complicated. Here is a jquery plugin: http://stickyjs.com/
This is how I did it a few years ago:
var menu_bar = $("#menu");
var top = menu_bar.offset().top;
var detached = false;
$(window).scroll(function (e) {
if ($(this).scrollTop() >= top) {
if (!detached) {
detached = true;
menu_bar.addClass('fixed');
}
} else {
if (detached) {
detached = false;
menu_bar.removeClass('fixed');
}
}
});
Working on a Google Map app built with AngularJS.
Currently deployed sandbox: http://of.xchg.com/
Click Map link and you will notice only ONE tile IF ANY are rendered.
If you then RESIZE the browser window, THEN the rest of the map tiles will render completely.
Here is the git project: https://github.com/LarryEitel/of4
Why are not all Google Map Tiles rendered?
Is there a way to test for complete rendering of tiles?
Is there a way to force re-rendering of all map tiles?
Call this function in your map controller:
google.maps.event.trigger(map, 'resize');
That should do the trick.
I found this problem when trying to re-center the map after the view loaded. There would be a single tile in the top left corner.
I noticed that it was centering the map at the topleft of the div (0,0), and figured that it must be measuring the div before it was visible. This would mean the dimensions were 0px, 0px and so to center the map would mean placing a single tile at (0,0).
I tried the solution of triggering the resize event
google.maps.event.trigger(map, 'resize');
and that almost worked - it filled the div with tiles, but it was still centered at (0,0).
What worked was to wrap the re-center code in a $timeout(). This ensures that the div is fully loaded and correctly sized before the code runs. Now it works perfectly.
$timeout(function() {
// still need this.
google.maps.event.trigger(map, 'resize');
map.setCenter(53, -6);
});
After a lot of trial and error, I found a workaround. By merely injecting the GoogleMap Service into the app run command, it successfully rendered the complete map. I ALSO had to make the default '/' route show the map page. Anything else I would do that involved trying to switch from a home (non-map) page to the map page would result in a partially rendered map. :(
Perhaps I or someone will suggest a more elegant solution. :)
// Generated by CoffeeScript 1.6.1
(function() {
'use strict';
angular.module('of4App', []).config(function($routeProvider) {
return $routeProvider.when('/menu', {
templateUrl: 'views/menu.html',
controller: 'MainCtrl'
}).when('/list', {
templateUrl: 'views/list.html',
controller: 'MainCtrl'
}).when('/map', {
templateUrl: 'views/map.html',
controller: 'MapCtrl'
}).when('/about', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
}).otherwise({
redirectTo: '/map'
});
}).run(function($rootScope, $location, GoogleMap) {
var rootScope;
rootScope = $rootScope;
rootScope.navBarHeight = 40;
return rootScope.mapShown = function() {
var mapShown;
mapShown = $location.path().indexOf('/map') > -1;
return mapShown;
};
});
}).call(this);
I'm using Drupal 6 + dialog.module, Ctools(Axaj), jQuery 1.3.2, jQuery UI
When i'm open a modal dialog window the scrollbar of the browser is locked. I can scroll that if i use mouse scroll-wheel, but not by clicking or key-up, key-down functions.
What is the trouble? I can't find any block function in code like this:
sites/all/modules/dialog/dialog.js
Drupal.CTools.AJAX.commands.dialog_display = function(command) {
var $el = Drupal.Dialog.dialog,
o = {},
overrides = {};
// Ensure that the dialog wasn't closed before the request completed.
if ($el) {
$el.html(command.output).dialog('show');
// Merge all of the options together: defaults, overrides, and options
// specified by the command, then apply them.
overrides = {
// Remove any previously added buttons.
'buttons': {},
'title': command.title,
//'maxHeight': Math.floor($(window).height() * .8), // HACK // DISABLED
'minHeight' : 700, // HACK // I've set it, and dialog window automagically adjusted - we need central part with content have height = auto, so there is no scroll bar, and hence no problems with autocomplete popups in dialog windows
};
o = $.extend({}, Drupal.settings.Dialog.defaults, overrides, command.options);
$.each(o, function (i, v) { $el.dialog('option', i, v); });
if ($el.height() > o.maxHeight) {
$el.dialog('option', 'height', o.maxHeight);
$el.dialog('option', 'position', o.position);
// This is really ugly, but dialog gives us no way to call _size() in a
// sane way!
$el.data('dialog')._size();
}
Drupal.attachBehaviors($el);
}
};
And i didn'y find anything interesting in css files. What's the trouble?
I have few pages that I show from my main page inside iframe.
I got a background image in the main page, when I click the button to change the page inside the frame the frame background color is becoming white somtimes until the page is visible.
I added background-color:transpert to the pages themselves and to the main page CSS.
I checked the site with FireFox and IE and it look fine (the background of the frame doesn't change) but with Chrome it somtimes rendering fine like I wanted it to be and other times the iframe background goes White.
Can i do anything that will fix that?
As this is browser behavior I doubt it can be really "fixed".
One workaround is to hide the frame while it's loading (only for Chrome) - here is the code:
var isChrome = (navigator.userAgent.indexOf("Chrome") >= 0);
function LoadFrame(url) {
var oFrame = document.getElementById("myframe");
if (isChrome) {
oFrame.style.visibility = "hidden";
oFrame.onload = function() {
oFrame.style.visibility = "visible";
};
}
oFrame.src = url;
}
Live test case. (Reloading same frame there but the concept is the same)
I used very similar attitude. This approach works only in case the page inside your iFrame is under your controll.
The change is that the page inside iframe finds the iframe in parent window and makes it visible again:
<iframe style="visibility: hidden;" id="iframe_id" src="my_page.html" />
// inside my_page.html:
window.onload = function() {
// make sure the parent iframe is visible
if (window.parent)
{
var nodeIframe = window.parent.document.getElementById(window.name);
if (nodeIframe)
{
nodeIframe.style.visibility = "visible";
}
}
};