Currently I'm having issues with Twitch's iframe stream video. When I select full screen, the z-index is no longer active. It is hidden under an iframe. Please guide everyone how to fix. Thanks for reading.
https://codepen.io/pobby/pen/bKbNZo
<div id="twitch-embed">
<div class="cr_display_logo">TEST</div></div>
<!-- Load the Twitch embed script -->
<script src="https://embed.twitch.tv/embed/v1.js"></script>
<script type="text/javascript">
var embed = new Twitch.Embed("twitch-embed", {
width: 854,
height: 480,
channel: "tonyteo2018",
layout: "video",
autoplay: false
});
embed.addEventListener(Twitch.Embed.VIDEO_READY, () => {
var player = embed.getPlayer();
player.play();
});
</script>
Related
Is there a way how can I display top banner (marked red) always visible and never display bottom translate option?
Or opposite way. Show only bottom options with possibility to reset language choice.
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement(
{
pageLanguage: 'en',
includedLanguages: 'ar',
layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL
}, 'google_translate_element');
}
</script>
Thank you.
I have a dashboard in Google Analytics.
I want to only capture a certain part of the dashboard using CasperJS.
No matter what I've tried it captures the entire page.
What I'm I doing wrong here?
This is the HTML hierarchy that I find when I inspect the Google Analytics dashboard:
<div id="ID-view">
<div class="_GAeH" id="ID-dashboard">
<div id="ID-layout">
<div class="_GARW ">
<div class="_GAoA">
<!-- more <div>s with the content -->
</div>
</div>
</div>
</div>
</div>
CasperJS code snippet:
var casper = require('casper').create();
casper.start('https://www.google.com/analytics/web/the/rest/of/the/url/', function() {
this.fill('form#gaia_loginform', { 'Email': 'user', 'Passwd':'pass' }, true);
});
casper.waitForSelector('.ID-row-4-0-0', function() {
casper.page.paperSize = {
height: '11in',
width: '8.5in',
orientation:'portrait',
border: '0.4in'
};
// NONE of these work the way I think they should
// this.captureSelector('ga.pdf','#ID-view');
// this.captureSelector('ga.pdf','#ID-dashboard');
// this.captureSelector('ga.pdf','#ID-layout');
this.captureSelector('ga.pdf','._GAoA');
// this.captureSelector('ga.pdf','._GARW'); // <-- this one fails, capture height is messed up
},
function() {
this.echo("Timeout reached");
});
casper.run();
Try this:
this.captureSelector('ga.pdf','div._GAoA', {quality: 100});
If you cant take the screenshot of the element _GAoA please share the output of your casperjs scrpit.
Good luck.
I have a problem where my Google Maps is only showing top tiles (much like this issue PhoneGap + JQuery Mobile + Google Maps v3: map shows Top Left tiles?) but in iOS and with jQuery UI Map.
However this only occurs after I play around with the app for some time switching tabs (it works fine on a Desktop Browser, only fails on the Device App)
I've tried several solutions from other posts (as you can see from the code) but my problem is a bit different, as it doesn't happen at first
Here is my HTML
<div data-role="page" id="page3" data-url="page3" tabindex="0" style="padding-bottom:19px">
....
<div data-role="content" id="ct">
<div id="map_canvas" style="height:100%"></div>
</div>
....
</div>
And JS
$(document).bind('pagechange', function () {
if ($.mobile.activePage.attr('id') === 'page3') {
if (!mapInited) {
mapInited = true;
$('#map_canvas').gmap().bind('init', function () {
var bounds = new google.maps.LatLngBounds();
navigator.geolocation.getCurrentPosition(locSuccess, locError);
$.each(markers, function (i, marker) {
var latlong = new google.maps.LatLng(marker.latitude, marker.longitude);
bounds.extend(latlong);
$('#map_canvas').gmap('addMarker', {
'position': latlong,
'bounds': true,
'primaryColor': "#0000FF",
'icon': './img/train.png'
}).click(function () {
$('#map_canvas').gmap('openInfoWindow', {
'content': marker.content
}, this);
});
});
$('#map_canvas').css('height', getRealContentHeight());
$('#map_canvas').css('width', '100%');
google.maps.event.trigger($('#map_canvas'), "resize");
setTimeout(function () {
google.maps.event.trigger($('#map_canvas'), 'resize');
}, 500);
});
}
}
});
}
Thanks in advance for any thoughts
"Fixed" the issue with a very ugly work around
Basically I recreate the Map everytime the page is loaded, like this
if (!mapInited) mapInited = true;
else { $('#map_canvas').remove(); $('#ct').append('<div id="map_canvas" style="height:100%"></div>'); }
You trigger the resize-event for a jQuery-object, what will not have any effect, because you must trigger the event for the google.maps.Map-instance:
google.maps.event.trigger($('#map_canvas').gmap('get','map'),'resize');
You may also use the plugin-method triggerEvent to trigger the event:
$('#map_canvas').gmap().triggerEvent('resize');
If you are using jquery-ui-map, why are you using the native google maps api instead of the gmap functions?
Why not call the $('#map_canvas').gmap('refresh');
EDIT: Solved:
var opt = { minZoom: 6, maxZoom: 9 };
map.setOptions(opt);
I'm a cut-and-paste coder and while I intend on learning the syntax better, I'm on a deadline for now so I'm asking for help. I have googled extensively and while there are solutions to my problem, I haven't found one that works for me. My KML file is hosted on Google Drive so instead of a file url there is a driveFileId.
If you want to preserveViewport, you normally just add it to the layer object and set it to 'true'. However my KML file won't let me override its default zoom level where the bounds fit the screen no matter how I write it. Can someone help? This is the working object:
var layer = new google.maps.KmlLayer({
driveFileId: "0Bexampleg"});
layer.setMap(map);
EDIT: Here's the whole thing. Perhaps you can see if there are redundancies or contradictions that are causing this.
<!DOCTYPE html>
<html<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=Aexamplekey0&sensor=true"></script>
<style>
#map {
width: 310px;
height: 410px;
}
</style>
<script>
window.onload = function () {
var latlng = new google.maps.LatLng(53.385873, -1.471471);
var styles = [
{
//whatever
}
]
var myOptions = {
zoom: 15,
disableDefaultUI: false,
styles: styles
},
map = new google.maps.Map(document.getElementById('map'), myOptions);
var layer = new google.maps.KmlLayer({
driveFileId: "0Bexampleg"});
layer.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
Based on the current release API documentation, you should be able to set the preserveViewport option in the object you instantiate:
var layer = new google.maps.KmlLayer({
driveFileId: "0Bexampleg",
preserveViewport: true});
layer.setMap(map);
Without further information, such as a URL to your KML data, information about your map center and zoom, there's not much further that can be said.
GOT IT!
Here it is:
var opt = { minZoom: 11, maxZoom: 15 };
map.setOptions(opt);
And then in your the myOptions object you set your default zoom. Solution found here: Google Maps v3 - limit viewable area and zoom level
thanks to #ChrisV. I don't know why but the KML Layer won't allow any permutation of the original preserveViewport code.
I'd like to display a Google Map overlaid with two Fusion Tables layers. The code below works perfectly if I just copy it into a text editor, save the file as map.html, and open it in my browser. But when I put it in a post on my WordPress-themed site, the underlying map is hidden by the Fusion Tables layers. Those layers aren't totally opaque: I can see both of them at the same time. I just cannot see the underlying map.
Whenever I zoom or pan the map, the underlying map appears briefly before the Fusion Tables layers are drawn over it. I suspect that there is a style setting at fault. Do you know how to get the map to display properly?
I'm using WordPress version 3.0.4 with the Gazette theme by woothemes; the site is http://www.wisconsinwatch.org.
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div id="gmap" style="width:590px; padding-top:40px;height: 550px;">
<script type="text/javascript">
var fracmap = new google.maps.Map(document.getElementById('gmap'), {
center: new google.maps.LatLng(44.797709533120106, -90.43712582444374),
zoom: 7,
mapTypeId: 'hybrid'
});
var layer0 = new google.maps.FusionTablesLayer({
query: {
select: 'geometry',
from: 2695847
},
});
layer0.setMap(fracmap);
var layer1 = new google.maps.FusionTablesLayer({
query: {
select: 'geometry',
from: 2695779
},
});
layer1.setMap(fracmap);
</script>
</div>
Thanks!
Wordpress wraps the content of your post in a <div class="entry"> block, which your theme uses to provide the proper styling. Since the javascript that prepares the Google map for display returns an image, the relevant part of the Gazette style sheet is:
.entry img {
padding: 4px;
border: 1px solid #dddddd;
background-color: #FFFFFF;
}
Specifically, the background-color setting causes the overlaid Fusion Tables layers to be drawn with an opaque background, which then hides the underlying map. You need to define a new class in your style sheet (let's call it "map") that draws images with a transparent background:
.map img {
background-color: transparent;
}
And then wrap your javascript in a <div class="map"> block, like so:
<div class="map">
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div id="gmap" style="width:590px; padding-top:40px;height: 550px;">
<script type="text/javascript">
var fracmap = new google.maps.Map(document.getElementById('gmap'),
center: new google.maps.LatLng(44.797709533120106, -90.43712582444374),
zoom: 7,
mapTypeId: 'hybrid'
});
var layer0 = new google.maps.FusionTablesLayer({
query: {
select: 'geometry',
from: 2695847
},
});
layer0.setMap(fracmap);
var layer1 = new google.maps.FusionTablesLayer({
query: {
select: 'geometry',
from: 2695779
},
});
layer1.setMap(fracmap);
</script>
</div>
</div>