I have a flowplayer that I am using with a few pictures below it. When you click on these pictures a dialog is created with an enlarged version of these pictures. The problem is the flowplayer will always be on top of the dialog.
I have tried setting the z-index of the dialog high and the flowplayer low, but it doesn't work.
Is there a method in flowplayer that will lower its z-index or allow for my dialog to be placed over it?
Edit Heres the flowplayer:
//Uses flowplayer to create player
$f('#rightVideoContent', "http://releases.flowplayer.org/swf/flowplayer-3.2.7.swf", {
//Creates a single clip for the flow player
clip: {
url: videoLocation,
autoPlay: true,
autoBuffering: true
},
plugins: {
controls: null
},
onLoad: function () {
//Do nothing here
}
});
And here is the div
<div id = "rightVideoContent" class = "VideoDiv"></div>
I use flowplayer-3.2.6.js as well
I think what you've missed is :
<param name="wmode" value="transparent" />
a bit more about wmode
edit: take a look at your code ... to embed a swf file you gotta have something like:
<object width="550" height="400">
<param name="movie" value="somefilename.swf" />
<embed src="somefilename.swf" width="550" height="400"></embed>
</object>
all you need to do is just add another <param ... after the first one
edit2: you should replace the second parameter ... instead of the url string put there
{src: 'http://releases.flowplayer.org/swf/flowplayer-3.2.7.swf', wmode: 'transparent'}
You probably need to embed the flash with wmode="transparent".
As in #locrizak's answer, you can also use wmode="opaque", which is better because it's less processor intensive.
These should help:
http://flowplayer.org/forum/2/10645
http://flowplayer.org/documentation/configuration/player.html#embedding
You need a wmode: "transparent/opaque" parameter on the flash object.
I had trouble with this and Flowplayer wouldn't add the wmode parameter no matter what i tried
I used this jQuery snippet and it solved it!
$('#videocontainerid object').prepend('<param name="wmode" value="opaque">');
or for every object:
$('object').prepend('<param name="wmode" value="opaque">');
see HTML Overlays in Flowplayer
example code:
flowplayer("player", {
src:"http://releases.flowplayer.org/swf/flowplayer-3.2.16.swf",
wmode: "opaque" // This allows the HTML to hide the flash content
}, {
clip: {
url: 'http://pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv'
}
});
Related
I'm getting two scrollbars on my page. I'm using sap.m.App and then sap.m.Page. I want to disable scrolling on my App. I tried searching online but couldn't find anything relevant.
The scrollbar (2) goes away if the root view (the view containing the <App> control) has the properties height="100%" and displayBlock="true" added.
Set (displayBlock) to true if the default display "inline-block" causes a vertical scrollbar with Views that are set to 100% height. (Source)
For example, in manifest.json:
{
"sap.ui5": {
"rootView": {
"...": "...",
"height": "100%",
"displayBlock": true,
"async": true
}
}
}
Or in the view definition itself:
<mvc:View xmlns:mvc="sap.ui.core.mvc" height="100%" displayBlock="true">
<App xmlns="sap.m"> <!-- root view -->
Try adding an enableScrolling="false" attribute to the <Page> controls in your views:
<Page
id="myPage"
enableScrolling="false"
>
I am using primeface for the UI components and I have to set the background of the layout unit temporary its done by using the css style,
.layoutCustomStyle.ui-layout-unit-content
{
background-image: url('resources/images/backgrnd.png');
}
The id of the layoutunit is "layoutId" and the styleclass used is "layoutCustomStyle"
in xhtml,
<p:layoutUnit position="top" id= "layoutId" styleClass ="layoutCustomStyle">
</p:layoutUnit>
But what I want is to add the background image dynamically. The image will be chosen by file browser so, I cannot add a separate class for that and use bean.
UIViewRoot view = FacesContext.getCurrentInstance().getViewRoot();
UIComponent comp= view.findComponent("layoutId");
Map<String, Object> attrMap = comp.getAttributes();
String className = (String)attrMap.get("styleClass");
using this I can set and get class names but how to change the attribute "background-image:" dynamically?
Hope the question is clear.Any help appreciated.
Thanks in advance,
Pegasus
Use style attribute instead of styleClass.
This is an old question but at this time has been viewed 10,354 times. I want to share the way i resolve 'add a css style property dynamically' in primefaces 6.2
In my layout i have a header that i need change dyamically the image every 10|20 secs.
<h:panelGrid id="cabecera" columns="2" cellpadding="1" columnClasses="..."
style="width:100%; background-size: cover; background-position: center; background-image: url('#{request.contextPath}/resources/images/header/Vignette/#{userSelected.headerFile}');">
<h:form id="...." >
I have a list with the names of all the images that i can use and userSelected.headerFile choose one randomly.
Three similar options:
1.- At first i Use p:poll directly to update the panelGrid id 'cabecera':
<p:poll interval="10" update="#([id$=cabecera])" autoStart="true"/>
Of course that works, on every update the background image change. That could be enough in some cases where the update and page blink don´t be problem.
2.- Using a little of JavaScript, a bean method in the listener of p:poll.
Declare a js function to change the background property (or any other):
<script>
function headerBackground(urlBG) {
var laUrl = (urlBG);
document.getElementById('cabecera').style.backgroundImage = laUrl;
}
</script>
In my Bean userSelected i declared a method to call the javascript function via RequestContext.getCurrentInstance().execute(...). I decided received the url only and add the rest of values in the function:
public void callJSheaderBackground(String url) {
String jsFunc="headerBackground(\"".concat(url.trim()).concat("\")");
try{
RequestContext requestContext = RequestContext.getCurrentInstance();
requestContext.execute(jsFunc);
}catch(Exception ex){
...
}
}
Finally the p:poll
<p:poll interval="20" listener="#{userSelected.callJSheaderBackground('url(\''.concat(request.contextPath).concat('/resources/images/header/Vignette/').concat(userSelected.headerFile).concat('\')'))}" autoStart="true"/>
3.- Calling directly a JS function
My JS function, reciving the contextPath and the image file name as parameters:
function setVignetteAsBackground(contextPath,vignetteName) {
var laUrl = "url('" + (contextPath)+'/resources/images/header/Vignette/'+(vignetteName)+"')";
document.getElementById('cabecera').style.backgroundImage = laUrl;
}
Then directly calling from p:poll on the onstart|oncomplete event:
<p:poll interval="20" onstart="setVignetteAsBackground('#{request.contextPath}','#{userSelected.headerFile}')" autoStart="true"/>
Hopefully be useful for somebody.
I am working with a client. Their webpage is using this DOCTYPE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
I need to deliver content to pages on their site. My content looks like this
<div style="height:1000px">
<iframe frameborder="0" src="..." width="550" height="220"></iframe>
<br/>
<br/>
<iframe frameborder="0" src="..." width="550" height="220"></iframe>
</div>
I can place the content on the clients page by giving them a couple of lines of css, and, currently, and iframe:
<style>
.iframecontent
{
background-color:blue;
position: relative;
height: 100%;
width: 100%
}
</style>
<iframe class="iframecontent" frameborder="0" src="..." width="100%" scrolling="no"> </iframe>
Because the height of the content is dynamic, I cannot provide a specific height to the client - instead I need it to stretch.
I've read many posts, but am still not sure of the best way to do this. Possibly CORS? Something else?
Here is one solution offered: http://sly777.github.com/Iframe-Height-Jquery-Plugin/ - it works on the same domain, but for cross-domain talk it relies on PostMessage which is an HTML 5 thing.
I've tried http://blog.johnmckerrell.com/2006/10/22/resizing-iframes-across-domains/ but have not be able to get it to work.
I might just get the client to set the frame to 1500px so that it should fit whatever I choose to be in the content and be done with it, but is there a better way?
Could you just set the html,body{height:100%;} then your iframe{height:100%}?
A percentage height is directly dependant on it's parent's height (of a block element). ie: iframe is 100% of what? In this case, it's parent is the body.
You may use the postMessage Plugin http://benalman.com/projects/jquery-postmessage-plugin/
It enables you to post messages from inside an iframe to the parent element. In combination the the setInterval javascript function you may send the current needed size to the parent element.
Inside the iframe
var currentIframeSize = 0;
window.setInterval(function() {
var size = $('body').outerHeight(true);
//just post, if the size has changed
if ( currentIframeSize != size ){
currentIframeSize = size;
$.postMessage({if_height : size}, source_url, parent);
}
}, 1000); //do that every second
In the head section of the parent element
id = "theIdOfYourIframe";
$.receiveMessage(function(e){
var rec_height = Number( e.data.replace( /.*if_height=(\d+)(?:&|$)/, '$1' ) );
if ( !isNaN( rec_height ) && rec_height > 0 && rec_height !== current_height ) {
current_height = rec_height;
$('#' + id).height(rec_height);
}
});
Based on those two snippets, you should get your problem solved
I updated my plugin that you tried (http://sly777.github.com/Iframe-Height-Jquery-Plugin/) and i added tutorial how to use this plugin for cross-domain fix. I hope it helps.
I've got a small problem - I have a HTML5 video om my site, it works fine in FF, Chrome, Safari. However, it only shows the video in IE if I set autoplay="autoplay". Somehow it doesn't show the poster img - You can see it here, http://test.jsworldmedia.com/ Just press See Video. Anyone know what is wrong?
The code is:
<video id="videoContainer" width="932" height="524" controls="controls" poster="/media/13037/big_buck_bunny_poster.jpg">
<source src="http://test.jsworldmedia.com/media/13010/big_buck_bunny.mp4" type="video/mp4" />
<source src="http://test.jsworldmedia.com/media/13555/big_buck_bunny.ogv" type="video/ogg" />
<source src="http://test.jsworldmedia.com/media/13034/big_buck_bunny.webm" type="video/webm" />
<object id="flash_fallback_1" class="vjs-flash-fallback" width="932" height="524" type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">
<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
<param name="allowfullscreen" value="true" />
<param name="flashvars" value="config={'playlist':['http://test.jsworldmedia.com/media/13037/big_buck_bunny_poster.jpg', {'url': 'http://test.jsworldmedia.com/media/13010/big_buck_bunny.mp4','autoPlay':false,'autoBuffering':true}]}" />
<img src="http://test.jsworldmedia.com/media/13037/big_buck_bunny_poster.jpg" width="932" height="542" alt="" title="No video playback capabilities." />
</object>
</video>
IE9 overwrites the poster image if some of the video is loaded, which is the default. If you add the attribute preload="none" the poster image will work in IE9.
Not ideal.
edit
I've written about this and have also filed a bug report with the W3C as I think that it needs to be changed.
I have found the poster attribute to be too inconsistent. For me, preload="none" only fixed the IE 9 problem.
You are better off editing your video so that the poster image is the first frame of your video.
I am a big fan of this Video for Everybody site which outlines exactly how one should implement the html5 <video> tag with fallbacks. The author talks specifically about the poster attribute, mentioning inconsistent support and a major bug in iOS 3.x as reasons to encode the poster image into the first frame of your video.
You can also check out VideoJs which will handle many of the cross browser issues.
EDIT (2012-11-04): VideoJs may not be a good option, major issues reported with IE 9.
I had the same issue. I did the following to have the poster working in IE8 and IE9.
In html file add an image bellow the video element with the poster as src:
<img id="video-poster" width="460px" height="260px" src="img/video_poster.jpg">
In css file add:
#video-poster {position: absolute; z-index: 600; display: none;}`
Note that the parent need to have in css position: relative
In JS file add:
/**
* fix the following issue: "video preview not showing properly on IE8 and IE9"
*/
(function ($) {
var browserIEInfo = navigator.userAgent.match(/MSIE (([0-9]+)(\.[0-9]+)?)/);
if (browserIEInfo === null || parseInt(browserIEInfo[2]) > 9){
return;
}
if (parseInt(browserIEInfo[2]) < 9 && !isFlashSupported()) {
return;
}
var video = $('video'); // use element id if there is more than 1 video
var videoPoster = $('#video-poster');
$( window ).resize(function() {
fixVideoCoverPosition();
});
fixVideoCoverPosition();
videoPoster.show();
videoPoster.click(function() {
video.get(0).play()
});
video.on('playing', function() {
videoPoster.hide();
});
video.on('ended', function() {
videoPoster.show();
});
function isFlashSupported() {
var hasFlash = false;
try {
new ActiveXObject('ShockwaveFlash.ShockwaveFlash');
} catch (e) {
var mimeTypes = navigator.mimeTypes;
if (mimeTypes
&& mimeTypes['application/x-shockwave-flash'] !== undefined
&& mimeTypes['application/x-shockwave-flash']['enabledPlugin']
) {
hasFlash = true;
}
}
return hasFlash;
}
function fixVideoCoverPosition() {
var videoPosition = video.position();
video.width();
$('#video-poster').css({
top: videoPosition.top,
left: videoPosition.left,
width: video.width(),
height: video.height()
});
}
}(jQuery));
I currently have an asp form that uses jquery for two elements: an image upload and a datapicker.
The code that implements the image upload is
$(function() {
$("#wcpImage").makeAsyncUploader({
upload_url: "/Business/ImageUpload",
flash_url: '../../Scripts/swfupload.swf',
button_image_url: '../../Content/images/blankButton.png',
disableDuringUpload: 'INPUT[type="submit"]'
});
});
With an input element <input type="file" id="wcpImage" name="wcpImage" />.
The code that implements the Datepicker using the JQueryUI DatePicker widget is
$().ready(function() {
$('#Business_Work_Cover_Expiry_Date').datepicker({ dateFormat: 'dd/mm/yy' });
});
With an input element generated by <%= Html.TextBoxFor(m => Model.Business.Liability_Expiry_Date) %>
The datepicker pops up when users enter the text box for the expiry date. The issue I'm having is that the buttons for the image upload are appearing over the top of the datepicker.
Can I use CSS z-index to fix this and how?
The use of the CSS z-index is most likely the only way to hand these types of issues.
This might do it:
<style type="text/css">
#ui-datepicker-div {
z-index: 9999999;
}
</style>
Turns out that it was because the buttons were flash objects being drawn with a wmode of Window, which means that z-index will have no effect as the button is rendered over the top of everything. Set the wmode to Transparent in the javascript and now it works.
Found the answer here.