I just noticed that the gMap view tools are displaying…rather unusually. Their regions still seem to be properly defined—I can interact with them just fine, it's just their appearance that looks messed up.
I haven't applied any CSS to any of the map pieces, and the only css I've applied to the map container is width:100%; height:100%; z-index:0; (which I normally do).
I do have other elements on the page which have position:absolute; and position:fixed; and some high z-indexs (500 & 1000). Is it possible they are causing the visual distortion of the Map's tools?
I see the same weird visual distortion in the latest versions of Chrome, Chrome Canary, Ffx, Safari, and Opera (on Mac OSX).
I checked dev tools / firebug, and no unexpected CSS is being applied to the map's container or directly to its tools.
Here is the exact HTML (I stripped out the other elements and css and the weirdness still happens):
<html style="width:100%;height:100%;">
<head>
<link rel="stylesheet" href="shared/bootstrap/css/foundation.min.css">
<link rel="stylesheet" href="shared/bootstrap/css/v2.2.2.min.css">
<script
type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=...">
</script>
<script type="text/javascript">
function ginit() {
var vancouver = new google.maps.LatLng(49.285415,-123.114982);
var mapOptions = {
center: vancouver,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(
document.getElementById("map"),
mapOptions
);
var infowindow = new google.maps.InfoWindow(),
marker;
}//ginit()
</script>
</head>
<body onload="ginit();" style="width:100%;height:100%;">
<div id="map" style="width:100%;height:100%;"></div>
</body>
</html>
EDIT: It appears the issue is coming from the combination of Foundation and Bootstrap: removing either one fixes the issue. Also it doesn't matter that no elements on the page reference classes from the libs, it causes the distortion all the same.
I tried to put this up in a fiddle, but I couldn't get jsfiddle.net to load.
For the future users who face same problem, here is the fix.
#map img{max-width: inherit;}
Like other answers said it is problem with max-width.
Bootstrap and Foundation set { img max-width:100% } for Google Maps canvases. This causes the Maps controls to appear distored. Alter the css to be max-width:none;. [source]
Caveat: Apparently img { max-width: 100% … } is integral for images auto-resizes for responsive layouts, so use with caution. [source]
Foundation 5 no only breaks gmap, it also breaks MapQuest. Luckily both Goomap & Quest have class to allow us to overload F5 behavious only for maps display.
.google-map {
height: 400px; // no default height
color: #191970; // default color for both text and background is white !!!
}
.quest-map {
height:400px;
color: #191970;
}
// Fix Foundation bug with MapQuest
.mqa-display {
img {max-width: none;}
label { width: auto; display: inline; }
}
// Fix Foundation bug with GoogleMap
.gm-style {
img { max-width: none; }
label { width: auto; display: inline; }
}
Related
The following problem occurs for my <audio> tag with iOS Safari, Firefox and Dolphin browsers, but not on any OS browser = the audio control moves up with zooming+ and ultimately overlaps the object above it.
The static layout, no zooming, is great ... zooming throws everything over the cliff.
FWIW, I did mess with the meta "viewport" tag, but no luck.
<audio> object is at the bottom of the layout. It obeys my css code, except when I zoom. When I zoom via pinching out, the object moves up and overlaps the <section> above it.
html {
font-size: 20px; /* baseline for all descendants */
font-size: 2.5vw;
}
.caroler {
text-align: center;
font-size: 1.70em;
color: blue;
padding-bottom: 1.0em;
}
.aSongControl {
display: block; /* center ... */
margin: 0 auto;
width: 90%; /* squeeze width because of .content's rounded corners */
font-size: 120%; /* for non-support text ... */
color: #990099;
}
/*
This is the audio control-specific Selector.
Other Selectors handle position and sizing.
*/
audio {
background-color: white;
}
#theSong {
/*
deliberately empty just to initialize
certain <audio> parms, e.g., the volume
*/
}
<meta name="viewport" content="width=device-width, initial-scale=1">
Inside <body>
<section class="caroler">
as sung by an unknown Caroler<br>
in front of the White House<br>
on December 24th, 2018
</section>
<audio id="theSong" class="aSongControl" controls preload="auto">
<source src="audio/Lafayette_Square.m4a" type="audio/mp4">
<a href='http://www.apple.com/quicktime/download/' title='Get Quicktime' onclick='window.open(this.href); return false'>
Install Quicktime to hear this awesome Hymn
</a><br>
</audio>
<audio>
As General Custer probably yelled "HAALP!"
NEW ADDITIONS TO OP:
1) a reader below strongly urged to disable zooming via a small change to the <meta> tag. Easy enough, but I can only echo what another member of STO said "It's just not nice to disable zooming, especially for those who depend on this feature".
2) Anyway, let's press on. I have 'regressed' to using JS and ditched the Viewport units, vw and vh:
document.body.setScaledFont = function(f) {
var s = this.offsetWidth, fs = s * f;
this.style.fontSize = fs + '%';
return this
};
document.body.setScaledFont(0.10);
window.onresize = function() {
document.body.setScaledFont(0.10);
}
Guess what? The <audio> STILL MOVES UP and eventually covers the <div> immediately prior to the <audio>. This undeniably means that the use of vw, vh units are not the problem.
Here is a repeat of the code for the <audio> above:
<audio id="theSong" class="aSongControl" controls preload="auto">
<source src="audio/Lafayette_Square.m4a" type="audio/mp4">
<a href='http://www.apple.com/quicktime/download/' title='Get Quicktime' onclick='window.open(this.href); return false'>
Install Quicktime to hear this awesome Hymn
</a><br>
</audio>
<audio>
with:
.aSongControl {
display: block; /* center ... */
margin: 0 auto;
width: 90%;
font-size: 120%; /* for non-support text ... */
color: #990099;
}
audio {
background-color: white;
}
At this point, I do not understand why I have to place the class="aSongControl" inside the <audio> tag in order to get the <audio> to fill the window's width via width: 80%
If I try:
<section class="aSongControl">
<audio id="theSong" controls preload="auto">
...
</audio>
</section>
there is no block centering and no window-filling, both of which are called for within .aSongControl.
I wish I knew the answer because just maybe this answer holds a clue as to why the <audio> control exhibits a mind of its own by mysteriously moving up and covering the <div> above the <audio>.
Again, no problem on OS browsers ... just the iOS browsers.
It's New Year's folks, take pity on me!
Try using this, Hope it will help.
<meta
name='viewport'
content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0'
/>
This will prevent user from zooming
I'm using the following technique to pre-load images that are applied as CSS background images when hovering buttons:
#preload_area {
background-image:
url(../images/image1.svg),
url(../images/image2.svg);
width: 0px;
height: 0px;
display: inline;
}
Also tried to pre-load just one image, this way:
#preload_area {
background: url(../images/image1.svg) -9999px -9999px no-repeat;
}
None of this works: after hard refresh, when hovering my button the first time, I still see a blink (corresponding to loading the hover image). Obviously after that first time there's no blink any more.
Why is not working on Chrome? (it does work on Firefox)
Why is it not working on Chrome? Because all browser vendors want the fastest browser. They will not load unnessecary assets.
You want a cross browser way to preload? Use a sprite, as [CBroe] suggested. This solution has been around for ages and is rock solid. Any other trick, rendering the image invisible, can work today but be broken tomorrow.
Preloading in CSS doesn't actually mean that the file is loaded before everything else it just means it's the first resource to queue for download from your CSS file.
This means that your HTML has already been retrieved from the server and has probably already queued up or downloaded other resources before the CSS. It's not uncommon for CSS preloaded images to load after all of the HTML content.
Now while the image will be earlier in the queue than other resources referenced in the CSS it doesn't mean that it returns before those other resources. If the size of the file is larger than the other files being queued up it may take longer to be downloaded than those other files which are being downloaded at the same time.
One way to see what is happening with Chrome is to go to your webpage and navigate to the "Network" tab in the Chrome Devtools then refresh the page. It will show you the details of when each item is being loaded and how long that item takes to be received from the server.
Depending what image you're loading and your use case there are several other options.
1) If the file size is large and taking too long to download figure out how to reduce the file size.
2) If you have control of the page the user is navigating from you could prefetch the image for the cache in the prior page.
3) You could also try using HTML preload in addition to the CSS. HTML preloading I believe is only supported by Chrome at the moment so it might be perfect for this scenario. Add the following to the head of your html.
<link rel="preload" as="image" href="image1.svg">
<link rel="preload" as="image" href="image2.svg">
Live Demo:
http://blackmiaool.com/soa/43093224/
No one promise that invisible images will be loaded. Browsers have right to not preload your invisible images, so the css approach in your question may not work in some browsers. The demo above is written by myself. It actually renders image on the screen to guarantee the image is loaded.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>test</title>
</head>
<body>
<h1 style="color:white;text-align:center;">Try to hover</h1>
<div class="show-area"></div>
<link rel="stylesheet" href="style.css">
<script src="../js/jquery.min.js"></script>
<script>
function preloadImage(src, cb) {
//create a image
const $dom = $("<img />", {
src: src
});
//check whether the image is already loaded
if ($dom[0].naturalWidth) {
cb && cb();
return;
}
//Put the image at the left bottom of the screen, and set its opacity to 0.01 to keep it from people eyes.
//Since it's actually rendered on the screen, the browser must load the image
$dom.css({
opacity: 0.01,
position: 'fixed',
bottom: 0,
left: 0,
height: 1,
width: 1,
'z-index': 10000,
'pointer-events': 'none',
});
$(document.body).append($dom);
//listen its `load` event to remove it and invoke callback
$dom.on("load", function() {
$dom.remove();
cb && cb();
});
}
//try to get the urls in the css file, and preload them
$("link").each(function() {
const href = $(this).attr("href");
$.get(href, function(style) {
const urls = [];
let match = style.match(/url\([\s\S]+?\)/g);
match.forEach(function(str) {
str = str.replace(/\s/g, "")
.replace(/^url\(/, "")
.replace(/\)$/, "");
let url = str.match(/^["']?([\S]+?)["']?$/);
if (!url || !url[1]) {
console.warn("Can't find url of " + str);
} else {
url = url[1];
preloadImage(url);
}
});
});
});
</script>
</body>
</html>
css:
body{
margin: 0;
background-color: black;
}
.show-area {
height: 100px;
width: 300px;
margin: auto;
margin-top: 100px;
background: url( ./1.jpg) no-repeat center;
background-size: contain;
}
.show-area:hover {
background-image: url("./2.jpg ");
}
Made a test with chrome, it seams that the image is loaded. The blink is due to place the image i think. To beter understand take a look at this test.
A test with a very big image
div#preload_area::before {
content: " ";
background: url(http://gfsnt.no/oen/foto/Haegefjell_Jan_2013_Large.jpg) no-repeat;
}
div#preload_area {
width: 50%;
height:100vh;
}
div#preload_area:hover {
background: url(http://gfsnt.no/oen/foto/Haegefjell_Jan_2013_Large.jpg);
background-repeat:no-repeat;
background-size:100% auto;
}
IMHO, this is no preloading. It's just loading, and you use a trick to display the right image when you hover the button.
If you really want to preload, or, as I understand your need, "you want the image already there, when you try to hover the button", then you have different options:
prefetch:
<link rel="prefetch" href="image1.svg">
<link rel="prefetch" href="image2.svg">
A nice thing to add for this is that "there's no same-origin restriction for link prefetching".
preload:
<link rel="preload" href="image1.svg">
<link rel="preload" href="image2.svg">
With "preload", the resources must be downloaded, whereas it's not always the case with prefetch.
Preload is supported by Chrome, Opera, Android browser and some more, but no Firefox & others. More details here
These techniques are described in more depth on css-tricks.com
Hope this helps you.
If you don´t want loading-gaps, you could use a sprite-image, or you can set the background image as base64 encoded image. In this case, the images are always loaded when the css file is loaded.
.myImg {
background-image: url(data:image/svg+xml;base64,PD9...);
}
Here you can convert your svg images to base64: http://b64.io
I recently use this for "back to top" button in my blog http://anggit.com.
Will it works for you?
CSS:
<style>
#to_top {
display: block;
width: 48px;
height: 48px;
overflow: hidden;
}
#to_top img { /* in case the actual image size is over 48px */
width: 48px;
height: 48px;
}
#to_top:hover #image-1 { /* hover will remove the 1st image, the 2nd image will appear */
display: none;
}
</style>
HTML:
<a id="to_top" href="#">
<img id="image-1" src="image48x48.png" alt="Top" />
<img id="image-2" src="image48x48-hover.png" alt="Top" />
</a>
I am currently hitting an issue in IE 10 and 11 where the browser tab is hanging every now and then on Layout in the UI Responsiveness tool. I am part of a team writing a fairly large knockout.js web app, so nailing down the exact condition that is creating this issue has been extremely difficult. From what I can tell, the browser tab hangs when Layout is performed when the removal of loading indicator HTML is removed from the page and some divs plus an empty SVG tag is appended to the DOM in its place.
I have been able to nail down that the empty SVG tag is the culprit, but I do not know why and I cannot remove that tag from the page is it is an important element to a D# data visualization that I am trying to create.
Here is the US Responsiveness report that IE 11 has provided me. I have zoomed in on the problematic area, and as you can see in the picture, the Layout thread spikes the CPU to 100%.
Before I get into the code samples my question is:
Why would the browser tab intermittently freeze/hang from adding an empty SVG element to the page?
The HTML gets appended to the DOM via javascript in as minimal of a way as possible from my research on reducing reflow in the browser:
var contentHTML = "";
contentHTML += '<div class="axis-title y-axis-title">' + renderString(bindingData.yAxis.title) + "</div>";
contentHTML += '<div class="' + CANVAS_CLASS + '"></div>';
contentHTML += '<svg class="x-axis"></svg>'; // The problematic element
element.innerHTML = contentHTML;
This results in the following HTML (note: all of the data-bind stuff is for knockout.js binding handlers, which triggers the JS above):
<div class="chart" data-bind="
barChart: {
data: rowData,
categoryTextKey: 'label',
valueKey: 'keyOnObject',
xAxis: {
title: 'xAxisTitle',
domain: [-1, 1]
},
yAxis: {
title: 'yAxisTitle'
},
onClick: onLabelClick,
formatValueText: formatPercentage
}
"></div>
<div class="axis-title y-axis-title">Y Title</div>
<div class="chart-canvas"></div>
<svg xmlns="http://www.w3.org/2000/svg" class="x-axis" />
<div class="axis-title x-axis-title">X Title</div>
</div>
Lastly, I also am using flexbox CSS rules to lay out my HTML. I am not sure if that is affecting this issue, but here is the CSS in case it helps:
.chart {
.flexbox();
.flex-direction(column);
height: 100%;
width: 100%;
.chart-label-click {
cursor: pointer;
}
.chart-header,
.axis-title,
.x-axis {
.flex-grow(0);
.flex-shrink(0);
}
.chart-canvas {
.flex-grow(1);
.flex-shrink(1);
overflow-x: hidden;
overflow-y: auto;
width: 100%;
}
.chart-canvas svg {
display: block;
width: 100%;
}
.axis-title {
font-weight: bold;
}
.x-axis {
.flexbox();
.flex-grow(0);
.flex-basis(20px);
margin-bottom: 5px;
overflow: visible;
width: 100%;
}
.x-axis line,
.x-axis path {
fill: none;
stroke: #d1d1d1;
stroke-width: 1px;
shape-rendering: crispEdges;
}
}
Thank you for any help you may have. I am not sure how to nail this down is it is intermittent in one section of our app and our codebase is pretty big to figure out the exact combination of code in other files that may also be contributing to this issue.
The described issue seems to be this bug:
https://connect.microsoft.com/IE/feedback/details/796745/mouse-events-are-not-delivered-at-all-anymore-when-inside-an-svg-a-use-is-removed-from-the-dom
In the comments is a workaround described which at least worked for us:
You have to set style="pointer-events: none;" on the use elements.
Or simply add this to your css:
svg use { pointer-events:none; }
But be aware that this also disables any mouse events triggered on the use element.
The way I ultimately fixed this issue was to remove the use of display:flex on the .chart element. In its place, I used a fixed height and display:block. It looks like this is ultimately a bug w/ IE when mixing SVG and flexbox together.
Make sure your code isn't setting a value in JavaScript (or other language) without even the quotes such as the following...
var a = ;//[var][space][a][space][=][space][;]
That will freeze up IE11 (not sure about 10 offhand).
After many days of searching I decided to solve the problem in addressing this:
svg use { pointer-events:none; }
Seems to be CSS related because initializing the map in a simple HTML page works just fine. I have added suggested CSS to fix known issues (below), but can't seem to get rid of this.
#map {
*, *:before, *:after {
-moz-box-sizing: content-box!important;
-webkit-box-sizing: content-box!important;
box-sizing: content-box!important;
}
img {
max-width: none;
height: auto;
}
label {
width: auto;
display: inline;
}
}
For anyone else looking for a temp solution for this bug:
CSS
.map *, .map *:before, .map *:after {
-webkit-transform: none !important;
}
SASS
.map {
*, *:before, *:after {
-webkit-transform: none!important;
}
}
It seems to be a rendering bug with Chrome (I can replicate it in v 34.0.1847.131), rather than with your CSS. It's been fixed in Canary (v 36.0.1973.2 canary).
According to this bug thread on gmaps-api-issues:
The fix is in Chrome 35, which is currently scheduled for release in mid-May (you can switch to the beta channel to get the fix now or verify it in a Canary build - http://www.chromium.org/getting-involved/dev-channel).
Until then, like #user699242 suggested, removing any heading tags (h1, h2, etc.) in your page seems to fix it. Of course, that's semantically unappealing though, might be better just to wait.
.gm-style div div *{
-webkit-transform: none !important;
}
Note: Does the same as Nathans solutions, but also guarantees that the maps is still dragable. However it's just a temporary solution.
Seems like it has something to do with the following which is added inline to images by Google:
-webkit-transform: translateZ(0px)
Finally narrowed it down to h tags. If I removed all the h tags (h1, h2, etc.), the gray line disappears. So, seems like a Chrome bug (v 34.0.1847.116).
It is happening for me on my site http://www.shortwave.am/ as well, but only in the newest version of Chrome (I had Version 33.x before which was for some reason not updating and the problem was not there, but since I changed to the newest I have the issue).
It is fine on Firefox though.
Can you post a link to your site as an example please?
I encountered this problem but with a vertical gray line, and it was a rounding issue.
This was due to the fact that the div containing the map canvas was set to fluid-width (50% in my case) and more often than not did lead to a subpixel width.
To fix my problem, I had to listen to the map canvas resize event, retrieve and round the inner width of the container of the canvas (the one with width set to 50%) and set the rounded width back to map canvas - all of this in JavaScript of course.
Here is my HTML markup :
<div id="mapContainer">
<div id="mapCanvas"></div>
</div>
Here are my CSS rules :
#mapContainer {
width: 50%;
}
#mapCanvas {
height: 100%;
width: 100%;
float: right;
}
Here is the JavaScript fix :
var isResizing = false;
var fixMapCanvasRoundingIssue = function () {
if (isResizing == false) {
isResizing = true;
var width = Math.floor(document.getElementById("mapContainer").getBoundingClientRect().width);
$("#mapCanvas").width(width);
// is this needed ?
google.maps.event.trigger(map, "resize");
isResizing = false;
}
}
And here is the Google Map initialization :
var mapCanvas = document.getElementById("mapCanvas");
google.maps.event.addDomListener(mapCanvas, "resize", function () {
fixMapCanvasRoundingIssue();
});
map = new google.maps.Map(mapCanvas , {
...
});
fixMapCanvasRoundingIssue();
Note that I set the map canvas to float to the right to prevent any tearing issue on resize. This may not be needed in your case.
.gmap-container,
.gmap-container > div.gm-style,
.gmap-container > div.gm-style > div:first-child,
.gmap-container > div.gm-style > div:first-child > div > div:last-child,
.gmap-container > div.gm-style > div:first-child > div > div:last-child * {
-webkit-transform: none!important;
}
If -webkit-transform: none !important; doesn't work make sure your browser isn't zoomed in. Having it zoomed into 110% causes the same grey line.
Simply switch onto newer version of API:
<script src="http://maps.googleapis.com/maps/api/js?v=3.14&sensor=false"></script>
it worked for me!
The solution suggested by Optimiertes seems to be unfairly marked down as it worked for me.
I'd suggest caution as there may be cases when something on that level needs to be transformed, but I did the following and it worked great.
#map .gm-style div div *:not(.something-that-needs-transforming){
-webkit-transform: none !important;
}
I'm sure in time it'll be fixed in Chrome, but annoyed me enough for now to want to fix it.
Other solutions I tried didn't allow the map to pan.
In my case, I needed a simple way showing the location for a restaurant. All solutions didn't work for me and so I went for the following solution, using a iFrame, with the dimensions specified in my css class:
<div class="fluid google_maps">
<iframe
width="100%"
height="100%"
frameborder="0" style="border:0"
src="https://www.google.com/maps/embed/v1/place?key=PLACE_APIKEY_HERE
&q=eiffel tower">
</iframe>
</div>
Thats all to it, no javascript or anything, just a few lines of html.
Since I don't expect over 2kk visitors a day (google's free limit), it's perfect for me.
You do need to create a google API key, but that 1 minute work.
The eiffel tower, can be any address or known location, you normally fill in the google maps website.
#map *, #map *:before, #map *:after {
-webkit-transform: none !important;
}
it's right way if you don't use parallax effect, but if you want to hide horizontal line with parallax effect, here is fix:
.gm-style > div:first-child {
background-color: #000000;
}
color #000000 if your google map background color is black, if is other - change this color.
work fine with google maps parallax effect
My ultimate goal right now is to have a link appear on top of video when the video has reached the end. Using the JW Players functionality I have determined how to have the link appear when the video is complete but only in standard view. If the user views the video in fullscreen the link does not appear. I have done extensive reading and understand that when it is in fullscreen mode the video is in flash and I cannot override the flash functions without integrating the link into the swf file, which I do not want to do.
What I have done is to remove the fullscreen button in the JW Player video player using a skin. Then I created a button to display the video in fullscreen using the HTML5 fullscreen functionality. (I understand that IE will not work with this...that is fine for now). I am also able to create a fullscreen state change event listener so that my link will appear on top of the video. But it does not work.
No matter how I style the DIV which holds the link it does not appear on top of the video.
Can someone point me in the right direction?
Thank you for any help that anyone can give me.
Code example:
#container{
position:relative;
z-index:0;
}
#overlay {
visibility:hidden;
width: 700px;
height:50px;
color:#FFF;
position: absolute;
top: 532px;
margin:8px;
padding:5px;
background-color:#000;
text-align:center;
}
#overlayfullscreen{
visibility:hidden;
text-align:center;
color:#FFF;
font-size:26px;
z-index: 1000;
position: absolute;
top: 800px;
margin:8px;
padding:5px;
overlay:hidden;
}
<div id="container">
Loading the player, if not working please update your browser.
</div>
<button onClick="goFullscreen('container'); return false">Click for Fullscreen</button>
var path = '<?php echo $video_path ?>';
jwplayer("container").setup(
{
autostart: <?php echo $autostart ?>,
file: "<?php echo $full_video_path ?>",
height: <?php echo $height ?>,
width: <?php echo $width ?>,
skin: '<?php echo $skin ?>',
events: {
onComplete: function(){
document.getElementById('overlay').style.visibility = 'visible';
}
}
});
document.addEventListener("mozfullscreenchange", function ()
{
document.getElementById('overlayfullscreen').style.visibility = 'visible';
}, false);
It's a simple trick, you need to add the maximum value of z-index which is (z-index: 2147483647;) in to the overlay element. That trick will solve your issue.
z-index: 2147483647;
Here is your updated fiddle:
http://jsfiddle.net/TcpX5/36/
HTML:
<div id="wrapper">
<a>element I want to be visible in full screen mode</a>
<video ...>
</div>
JS:
const wrapper = this.document.getElementById('wrapper')
wrapper.requestFullscreen()
This code will typically be executed within a button click. All elements inside the wrapper will now be visible in full screen mode. You may need to apply different styling to your elements in full screen mode. e.g. you may want to make the video width or height 100%
Use this to know whether you are in full screen mode or not:
document.onfullscreenchange = () => {
this.isFullScreen = !!document.fullscreenElement
}
Use this to exit fullscreen mode:
document.exitFullscreen()
The problem is that the video is being displayed absolutely. You can make your link have position: absolute and that should do it.
I've set up a small demo, I'm using an HTML5 video, not a Flash Player, but the behaviour should be the same: http://jsfiddle.net/sandro_paganotti/TcpX5/
To toggle fullscreen I suggest using screenfull (https://github.com/sindresorhus/screenfull.js) that basically handles the small differences between Firefox and Chrome.
Here's the code, just substitute the <video> element with your JW Player implementation:
HTML
<div id="video">
<video width="100%" src="yourmovie.webm" controls></video><br/>
<button>go full screen</button>
Special link
</div>
CSS
#video{ position: relative; }
a{ position: absolute; top: 10px; right: 10px;
border: 1px solid red; display: block; background: #FFF }
Javascript
$('button').click(function(){
screenfull.request();
});
A final note: jsfiddle disallow the fullscreen mode (source: https://webapps.stackexchange.com/questions/26730/can-full-screen-mode-be-activated-in-jsfiddle) to see the demo you have to manually tweak jsfiddle iframe using chrome devtools or firebug as specified in the link above.