I am trying to create a layered div using z-index and one of the layers have to contain a flowplayer. Once layer is created properly I will update div's z-index value based on program's logic. Following code works in Chrome but not in Firefox and IE.
Problem: In IE and firefox div containing flowplayer does not hide.
<div id="dvd_supplement" style="height:200px;width:300px;">
<!-- this A tag is where your Flowplayer will be placed. it can be anywhere -->
<div style="z-index:11;position:relative;top:0px;">
<a id="player"
href="barsandtone.flv"
style="width:300px;height:200px"
>
</a>
</div>
<div style="z-index:2;position:relative;top:-200px;">
<img id="player_laptop_screen" src="images/laptop_screen.jpg" width="300px" height="200px"/>
</div>
<div style="z-index:3;position:relative;top:-400px;">
<img id="player_img" src="images/blank_screen.jpg" width="300px" height="200px"/>
</div>
</div>
I have resolved this issue by using wmode option in flowplayer() i.e.
flowplayer(
"player", {src: "../flowplayer/flowplayer-3.2.16.swf", wmode: "opaque"}, {
clip: {
autoPlay: false,
autoBuffering: true
}
}
);
Flowplayer configuration has a zIndex attribute
So consider using
$f("selector","path-to-your-swf",{
option 1:...,
option 2:...,
option 3:...,
zIndex: value,
...,
...,
});
Related
I've tried appending "group-hover" to the P tag to get the red text to hover on devices that allow for hover states but with no success. The basic markup for my problem looks like this...
<div id="card" class="group">
<p class="text-blue-400 [#media(hover:hover){&:hover}]:text-red-400">
Here is placeholder text.
</p>
</div>
How can I use "group-hover" so the red text will show on the hover state on devices that allow for hover?
<div id="card" class="group">
<p class="text-blue-400 group-hover:text-red-400">
Here is placeholder text.
</p>
</div>
More info: Tailwind CSS Handling Hover
Update
Be aware that Tailwind 3.1+ is required to use inline media queries
You have 3 options:
1. Allow future flag
Since version 4, this behavior you want to achieve will be default, but you can enable it already:
module.exports = {
future: {
hoverOnlyWhenSupported: true,
},
}
2. Inline
This is tricky one, since you can't use whitespace inline media query, so you probably have to use group-hover anyway (because [#media(hover:hover){.group:hover}]:text-red-400 will not apply to all cases); version 3.1+ needed:
<div id="card" class="group">
<p class="text-blue-400 group-hover:[#media(hover:hover)]:text-red-400">
Here is placeholder text.
</p>
</div>
3. Theme Extend
This is also not best solution, because there is no way to select the parent of an element, but it some cases it would work) - highly not recommend this
module.exports = {
theme: {
extend: {
screens: {
'mygroup-hover': { 'raw': '(hover: hover) {.group :hover}' },
},
},
}
}
<div id="card" class="group">
<p class="text-blue-400 mygroup-hover:text-red-400">
Here is placeholder text.
</p>
</div>
I need to hide the icon encircled on the picture below? How can I hide it? I'm using react-player.
Pls check this codesandbox
CLICK HERE
<ReactPlayer
url="https://bitdash-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8"
playing={true}
volume={1}
width="100%"
height="100%"
controls
/>
The HTML5 <Video /> tag supports disabling this feature via the disablepictureinpicture attribute. This is still an experimental feature, and might not work in all browsers.
Pass the disablePictureInPicture html attribute via the ReactPlayer's config. If the Picture in Picture control doesn't disappear try setting controlsList: 'nodownload' as well.
const config = {
attributes: {
disablePictureInPicture: true,
controlsList: 'nodownload'
}
};
const App = () => (
<div style={styles}>
<ReactPlayer
url="https://bitdash-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8"
playing={true}
volume={1}
width="100%"
height="100%"
config={config}
controls
/>
<h2>Start editing to see some magic happen {'\u2728'}</h2>
</div>
);
After over 2h trying to troubleshoot this myself, here I am - a newbie!
Issue: I'm trying to create a MAGNIFIC LIGHTBOX GALLERY (just like the example: http://dimsemenov.com/plugins/magnific-popup/) but when you click on an image, it opens into a new page (so gallery doesn't work - see what's happening life here).
Here's my HTML:
<div class="grid gallery popup-gallery" id="portfolio-grid">
<div class="col-4_sm-6_xs-12">
</div>
<div class="col-4_sm-6_xs-12">
</div>
<div class="col-4_sm-6_xs-12">
</div>
<div class="col-4_sm-6_xs-12">
</div>
</div>
And my Javascript:
$(document).ready(function() {
$('.popup-gallery').each(function() { // the containers for all your galleries
$(this).magnificPopup({
delegate: 'a', // the selector for gallery item
type: 'image',
gallery: {
enabled:true
}
});
});
});
Side notes/Requirements: I'm using Gridlex Flexbox for wrapping images in a grid and it's a dynamic website so images are uploaded via Jekyll.
Any clues?
Thank you!
For some reason vue is removing both the style attribute and the background image. This tag
<section style="background:
url(images/banners/profiles/profile-banner-1.png);" class="profile-banner flex items-end md:items-end md:justify-center p-8">
</section>
The background image will flash when I reload the page, but then be removed.
I commented all of my components out and it seems that it's the Vue root instance.
const app = new Vue({
el: '#app',
/*data() {
return {
modal: false,
content_type: ''
}
},
methods: {
openModal: function(content_type){
this.modal = !this.modal;
}
} */
});
The stranger thing is that it seems to just have a problem with the background: url property since when I use something like this it works perfectly fine:
<section style="background: black;" class="profile-banner flex items-end md:items-end md:justify-center p-8">
</section>
I'm wondering if this is a bug, or maybe Vue has reserved url?
Maybe it's because :url() ?
If so how do I escape this?
The style attribute should not have any newline characters. This works just fine
<section style="background: url(images/banners/profiles/profile-banner-1.png);" .../>
Demos:
Working ~ http://jsfiddle.net/krz1gvqt/
Not working ~ http://jsfiddle.net/krz1gvqt/2/
But with what I have done, if I make the display mode : none or block then I cant make it shown on click.
Also when I click on the show/hide image it scrolls at the beginning of the page, instead of staying at the same place and showing the iframe.
Any help for that?
With that below I made the show/hide function
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#on").click(function(){
$("map").show();
});
$("#off").click(function(){
$("map").show();
});
});
</script>
I frame and image are:
<div id="show/hide" align="center">
<a href="#" id="on">
<img src="http://icons.iconarchive.com/icons/double-j-design/apple-festival/256/app-map-icon.png" width="80" height="80">
</a>
<div id="map" style="display:block ;">
<iframe src="https://mapsengine.google.com/map/embed?mid=zkhFhUgoi5X4.kL86cmKz_OL8" height="300px" width=" 100%" ></iframe>
</div>
Your page is scrolling because display:none actually "deletes" the iframe from the DOM, which using a CSS style of visibility: hidden; would leave the iframe in place, but just hide it.
If that's what you would like to do then use the following (notice the visibility:hidden style):
HTML
<div id="map" style="display:block; visibility:hidden">
<iframe src="https://mapsengine.google.com/map/embed?mid=zkhFhUgoi5X4.kL86cmKz_OL8" height="300px" width=" 100%" ></iframe>
</div>
You can choose to use display: block, or any other display style you want -- just DO NOT use display: none, as it will act as if it REMOVES the object from the DOM.
JavaScript:
$(document).ready(function(){
$("#on").click(function(){
if ( $("map").css('visibility') = 'hidden') {
$("map").css('visibility') = 'visible';
}
else {
$("map").css('visibility') = 'hidden';
}
});
});
If you call preventDefault(); on a clicked a tag, you can cancel the "scroll event". Implementation can look something like this. Demo.
$(document).ready(function () {
$('#button').click(function (e) {
$('.map').fadeToggle();
});
});
I believe this will fork for you if you place the # in front of the id in your jquery command:
$("#map").show() and $("#map").hide()
Also, you have called .show() on both functions. I would assume on your second you would like to call .hide()