When my mobile menu opens, I would love the rest of the visible background (other than the menu itself) to 'dim.' (Both my pages and menu background are very white in general).
There is a plugin that offers this functionality but in trying to keep the website light, am trying to see if this is possible with just some lines of code?
Googling for quite a while came up with nothing other than the app which is a surprise... maybe I searched the wrong keywords?
Any ideas?
Here is my full code (not my original code, can link various parts to their respective Authors).
/*Change hamburger menu colour*/
span.mobile_menu_bar:before{
color:#D7AF39;
}
/*Remove shading of top menu to match sub menu*/
.et_mobile_menu .menu-item-has-children a {
background-color:#FFFFFF;
}
/** Divi Space slide in mobile edits**/
#mobile_menu { display: block !important; min-height: 100vh; top: 0; border-top: none; padding-top: 80px; z-index: 9998; }
.mobile_nav.closed #mobile_menu {
transform: rotateY(90deg); -webkit-transform: rotateY(90deg);
transform-origin: right; -webkit-transform-origin: right;
background: #fff; transition: .8s ease-in-out !important; }
.mobile_nav.opened #mobile_menu {
transform: rotateY(0deg); -webkit-transform: rotateY(0deg);
transform-origin: right; -webkit-transform-origin: right;
background: #fff; transition: .8s ease-in-out; }
.mobile_nav.opened .mobile_menu_bar:before {
content: "\4d"; color: #D7AF39; }
.et_mobile_menu li a, .et_mobile_menu .menu-item-has-children>a {
font-weight: 600;
font-family: open sans;
font-size: large;
}
#media(max-width: 980px) {
.et_header_style_split .mobile_menu_bar, .et_header_style_left .mobile_menu_bar { z-index: 9999; }
#main-header .container.clearfix.et_menu_container { width: 100%; }
.logo_container { padding-left: 30px; }
#et-top-navigation { padding-right: 30px; }
}
#media(min-width: 341px) {
#mobile_menu { width: 340px; margin-left: calc(100% - 340px); }
}
One way of doing this is to assert a blanket div over the entire page, beginning just below the menu bar, then setting that div's opacity to the desired level of dimming.
I have thrown together a very simple proof of concept. Hover the dummy Menu button to observe the effect. Take it onwards from there.
body {
--menu-height: 50px;
}
#page {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: yellow;
}
#menu_bar {
position: absolute;
width: 100%;
height: var( --menu-height);
background-color: blue;
}
#menu_item {
position: absolute;
top: 10px;
left: 10px;
width: 50px;
height: 30px;
background-color: white;
line-height: 30px;
text-align: center;
}
#menu_item:hover:after {
content: '';
position: fixed;
top: var( --menu-height);
left: 0;
height: 100vh;
width: 100vw;
background-color: black;
opacity: 0.5;
/* Ensure z-index is higher than page's content/data items */
z-index: 2
}
#data {
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
background-color: white;
border: 2px solid black;
padding: 10px;
z-index: 1;
}
#text {
display: inline-block;
width: 100%;
text-align: center;
font-weight: bold;
}
<div id="page">
<div id="menu_bar">
<div id="menu_item">Menu</div>
</div>
<div id="data">
<span id="text">Hover the "Menu" button...</span><br><br> Lorem ipsum dolor etc
</div>
</div>
My aim is to display a different image or video displayed within a div, which changes when other elements are hovered over.
I think I have this working with just an image by checking what image file is specified in a data-src and loading that into an img tag on the page. However I need to change the markup from img to video when a movie file is specifed - that's what I need help with.
You can see the 'working' image version here (not the 3rd item has a placeholder video in the data-src so won't show):
https://codepen.io/moy/pen/BaNxzdL
So currently on the page I have this empty image tag:
<div class="carousel__bg">
<img src="" />
</div>
Image files are specified on multiple carousel items in a data-src like the example below:
<div class="carousel__item" data-src="img/content/1-wide.jpg">
<div class="carousel__content">
<h4 class="carousel__title">Behind The Scenes</h4>
<span class="carousel__flag">// Featured</span>
<h2 class="carousel__subtitle">Denim Cox in Fuck Yes Dude!</h2>
Read the Article
</div>
<img src="img/content/1.jpg" class="carousel__image" />
</div>
And the javascript that gets the image URL and adds it to the page is this:
$(function() {
var overlay = $('.carousel__bg img'), cached = {};
$('.carousel__item').mouseenter(function() {
var item = $(this),
spot = $(this).index('.carousel__item'),
value = item.attr('data-src');
overlay.fadeTo(0,0).attr('src', value);
if (!overlay[0].complete && !cached[spot]) {
cached[spot] = true;
$('.carousel__bg').addClass('loading');
overlay.one('load', function() {
$('.carousel__bg').removeClass('loading');
overlay.fadeTo(300,1);
});
}
else overlay.fadeTo(300,1);
})
.mouseleave(function() {
overlay.finish();
});
});
Obviously the problem is if I specify data-src="video/safari.mp4" it isn't going to work as it's currently trying to add the video into an img element. So how would I go about switching between img/video tags? A related issue would be to be able to load both an mp4 + webm/ogg versions of the file?
So would it need to be reworked to 'inject' an img or video element onto the page depending on the extension? I tried using an if/else statement to check if the data-src contained the .mp4 extension and just hardcoded a video element on the page to text but couldn't get that to work. :/
These files can be quite large which is why I'm not loading them until they're needed.
Edit
As a bit of an aside, I decided to put these items in a carousel to see if this effect would work - and it pretty much does!
However, I noticed the way that I fade out the images in the CSS (fade all of them out when the .carousel is hovered but then target the individual item and overwrite) is now a problem when you hover over the prev/next buttons as the images don't fade back in.
Anyone got a better way of handling this? I tried a 100% CSS method but maybe added a class would be better?
Slick carousel example: https://codepen.io/moy/pen/JjdvRyG
The video element part is not two hard, the important part is getting the mime type of the video to add to the source element.
The data-src takes an array of video urls (of different types) and adds the different sources to the element after finding the type.
I updated your codepen
As for the buttons, they are inside the .carousel element so the will bubble the hover to all the elements styled based on that. I made some elements more specific so they will only change style when the list of items is hovered.
Finally, in order for the listeners to apply to the slick element, I changed them to .on.
var VIDEO_TYPES = {
'mp4': 'video/mp4',
'webm': 'video/webm',
'ogv': 'video/ogg',
}
/**
* Slick
*/
$(document).ready(function() {
$('.slick-carousel').slick({
//centerMode: true,
centerPadding: '0',
slidesToShow: 3,
arrows: true,
dots: false,
prevArrow: '<a class="slick-arrow slick-arrow--prev"><span>←</span></a>',
nextArrow: '<a class="slick-arrow slick-arrow--next"><span>→</span></a>',
responsive: [{
breakpoint: 960,
settings: {
centerMode: true,
slidesToShow: 1
}
},
{
breakpoint: 600,
settings: {
centerMode: true,
slidesToShow: 1
}
},
{
breakpoint: 480,
settings: {
centerMode: true,
slidesToShow: 1
}
}
]
})
.on('setPosition', function(event, slick) {
slick.$slider.find(".slick-slide .tile:not(.position-set)").addClass('position-set').css('height', slick.$slideTrack.height() - 30 + 'px');
});
/**
* Image Swap
*/
var cached = {};
var overlay_video = $(".carousel__bg video");
var overlay_img = $(".carousel__bg img");
var overlay = $(".carousel__bg");
$(".carousel__item")
.on('mouseenter', function() {
var item = $(this),
spot = $(this).index(".carousel__item"),
value = item.data("src");
overlay_video.empty();
var overlay_item;
overlay.fadeTo(0, 0);
//videos will have an array ur urls
var is_video = value instanceof Array;
if(is_video) {
overlay_item = overlay_video;
overlay_img.attr("src", '');
overlay_video.append(value.map((url) => {
var extension = url.split('.').pop();
var type = VIDEO_TYPES[extension];
return `<source src="${url}" type="${type}">`
}));
} else {
overlay_item = overlay_img;
overlay_img.attr("src", value);
}
//force the video element to reload
overlay_video.get(0).load();
if (!overlay_item.complete && !cached[spot]) {
cached[spot] = true;
overlay.addClass("loading");
overlay_item.one(is_video ? "loadeddata" : "load", function() {
overlay.removeClass("loading");
overlay.fadeTo(300, 1);
});
} else overlay.fadeTo(300, 1);
})
.on('mouseleave', function() {
overlay.finish();
});
});
/**
* Base styling.
*/
html {
background: rgb(255,255,255);
font-size: 62.5%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-overflow-scrolling: touch;
-webkit-text-size-adjust: 100%;
}
body {
background-color: transparent;
color: rgb(0,0,0);
font-variant-ligatures: common-ligatures discretionary-ligatures historical-ligatures;
font-family: 'Roboto', sans-serif;
font-size: 1.6rem;
font-weight: 400;
line-height: 1.6rem;
margin: 0;
padding: 30px 0 0;
text-rendering: optimizeLegibility;
}
/**
* Carousel
*/
.carousel {
background: rgb(0,0,0);
color: rgb(255,255,255);
height: 640px;
margin: 0 auto;
overflow: hidden;
position: relative;
width: 100%;
max-width: 1200px;
}
.carousel:before,
.carousel:after {
background: rgba(255,255,255,.25);
content: "";
height: 100%;
position: absolute;
top: 0;
left: 33.33333%;
width: 1px;
z-index: 30;
}
.carousel:after {
left: 66.66666%;
}
/**
* Background (fullwidth) image
*/
.carousel__bg {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
width: 100%;
}
.carousel__bg.loading {
background: url(../img/interface/loading.gif) no-repeat center center;
}
.carousel__bg img, .carousel__bg video {
display: block;
height: 640px;
object-fit: cover;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
}
/**
* Individual carousel item
*/
.carousel__item {
box-sizing: border-box;
float: left;
height: 640px;
position: relative;
width: 33.33333%;
}
.carousel__item:hover {
cursor: pointer;
}
/* Text Content */
.carousel__content {
background: rgba(0,0,0,.45);
box-sizing: border-box;
color: rgb(255,255,255);
height: 100%;
min-height: 100%;
padding: 30px;
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 15;
}
.carousel__title,
.carousel__subtitle,
.carousel__flag {
color: rgb(255,255,255);
letter-spacing: 1px;
font-family: 'Anton', sans-serif;
font-weight: 400;
line-height: 1;
margin: 0 0 5px;
padding: 0;
text-transform: uppercase;
}
.carousel__title {
font-size: 20px;
transition: all .25s;
}
.carousel__subtitle {
display: none;
font-size: 48px;
}
.carousel__flag {
color: rgb(45,190,193);
font-size: 14px;
}
/* Button */
.carousel__btn {
background: transparent;
border: 1px solid rgb(255,255,255);
box-sizing: border-box;
color: rgb(255,255,255);
display: block;
font-family: 'Anton', sans-serif;
font-size: 12px;
font-weight: 400;
height: 45px;
line-height: 45px;
letter-spacing: 1px;
opacity: 0;
position: absolute;
padding: 0 30px;
bottom: 30px;
left: 30px;
right: 30px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
transition: all .15s;
-webkit-backface-visibility: hidden;
}
.carousel__btn:visited {
background: transparent;
}
.carousel__btn:focus,
.carousel__btn:hover {
background: rgb(45,190,193);
border-color: rgb(45,190,193);
}
/* Image */
.carousel__image {
display: block;
height: 100%;
opacity: 1;
object-fit: cover;
transition: all .30s;
position: relative;
width: 100%;
max-width: 100%;
-webkit-backface-visibility: hidden;
}
/* When hovering over the carousel, fade all the titles out */
.carousel>.slick-carousel>.slick-list:hover .carousel__title {
opacity: .30;
}
/* But not the one contained without the 'item' you're hovering over */
.carousel:hover .carousel__item:hover .carousel__title {
opacity: 1;
}
/* Fade all images out so the fullwidth background image is visble */
.carousel>.slick-carousel>.slick-list:hover .carousel__image {
opacity: 0;
}
/* Hide the flag element */
.carousel>.slick-carousel>.slick-list:hover .carousel__flag {
display: none;
}
/* Show the subtitle */
.carousel:hover .carousel__item:hover .carousel__subtitle {
display: block;
}
/* Display the CTA of the active item */
.carousel:hover .carousel__item:hover .carousel__btn {
opacity: 1;
}
/* Slick Prev/Next */
.slick-carousel,
.slick-list,
.slick-track {
height: 100%;
min-height: 100%;
}
.slick-arrow {
background: transparent;
border: 1px solid rgb(255,255,255);
color: rgb(255,255,255);
display: block;
font-family: 'Anton', sans-serif;
font-size: 24px;
height: 45px;
line-height: 45px;
margin-top: -30px;
overflow: hidden;
position: absolute;
top: 50%;
left: 30px;
text-align: center;
transform: rotate(45deg);
transition: all .15s;
width: 45px;
z-index: 60;
}
.slick-arrow:hover {
background: rgb(255,255,255);
color: rgb(0,0,0);
}
.slick-arrow span {
display: block;
transform: rotate(-45deg);
}
.slick-arrow--next {
left: auto;
right: 30px;
}
/* Slick Core */
.slick-slider
{
position: relative;
display: block;
box-sizing: border-box;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-khtml-user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}
.slick-list
{
position: relative;
display: block;
overflow: hidden;
margin: 0;
padding: 0;
}
.slick-list:focus
{
outline: none;
}
.slick-list.dragging
{
cursor: pointer;
cursor: hand;
}
.slick-slider .slick-track,
.slick-slider .slick-list
{
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.slick-track
{
position: relative;
top: 0;
left: 0;
display: block;
margin-left: auto;
margin-right: auto;
}
.slick-track:before,
.slick-track:after
{
display: table;
content: '';
}
.slick-track:after
{
clear: both;
}
.slick-loading .slick-track
{
visibility: hidden;
}
.slick-slide
{
display: none;
float: left;
height: 100%;
min-height: 1px;
}
[dir='rtl'] .slick-slide
{
float: right;
}
.slick-slide img
{
display: block;
}
.slick-slide.slick-loading img
{
display: none;
}
.slick-slide.dragging img
{
pointer-events: none;
}
.slick-initialized .slick-slide
{
display: block;
}
.slick-loading .slick-slide
{
visibility: hidden;
}
.slick-vertical .slick-slide
{
display: block;
height: auto;
border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<div class="carousel">
<div class="carousel__bg">
<img src="" />
<video autoplay muted loop></video>
</div>
<div class="slick-carousel">
<div class="carousel__item" data-src="https://www.fillmurray.com/750/550">
<div class="carousel__content">
<h4 class="carousel__title">Behind The Scenes</h4>
<span class="carousel__flag">// Featured</span>
<h2 class="carousel__subtitle">Lorem ipsum dolor</h2>
Read the Article
</div>
<img src="https://www.fillmurray.com/g/400/600" class="carousel__image" />
</div>
<div class="carousel__item" data-src="https://www.fillmurray.com/800/600">
<div class="carousel__content">
<h4 class="carousel__title">Reed Stark</h4>
<span class="carousel__flag">// Featured</span>
<h2 class="carousel__subtitle">Lorem ipsum dolor</h2>
Watch the Video
</div>
<img src="https://www.fillmurray.com/g/450/650" class="carousel__image" />
</div>
<div class="carousel__item" data-src='[ "https://www.w3schools.com/tags/movie.mp4", "https://www.w3schools.com/tags/movie.ogg"]'>
<div class="carousel__content">
<h4 class="carousel__title">Fresh Drops</h4>
<span class="carousel__flag">// Featured</span>
<h2 class="carousel__subtitle">Lorem ipsum dolor</h2>
See The Collection
</div>
<img src="https://www.fillmurray.com/g/350/550" class="carousel__image" />
</div>
<div class="carousel__item" data-src='[ "https://www.w3schools.com/tags/movie.mp4", "https://www.w3schools.com/tags/movie.ogg"]'>
<div class="carousel__content">
<h4 class="carousel__title">Fresh Drops</h4>
<span class="carousel__flag">// Featured</span>
<h2 class="carousel__subtitle">Lorem ipsum dolor</h2>
See The Collection
</div>
<img src="https://www.fillmurray.com/g/300/500" class="carousel__image" />
</div>
</div>
</div>
enter image description hereI have made a text as a button and want to create a menu with that. What I am trying to do is to change the text. When I click the button, it works as a circular menu and shows me options.
For example, it was L(litter) = 1, when I click the button it shows me other parameters such as mL, gallon, ounce. If I click mL, the text will change from L = 1000 to mL = 1000.
Could you help with me actual coding if possible? This is what I currently have. When I click, I can type a value and it changes the value. I don't need to type the value but it should display one of the values I already stored in depending on what I click on the menu.
var para = document.querySelector('button');
para.addEventListener('click', updateValue);
function updateValue() {
var value = prompt('Enter a new value');
para.textContent = value;
}
If I get you clear so this example is what you need
body {
font-family: Alegreya Sans;
background: #feeded;
}
.menu {
position: relative;
background: #cd3e3d;
width: 3em;
height: 3em;
border-radius: 5em;
margin: auto;
margin-top: 5em;
margin-bottom: 5em;
cursor: pointer;
border: 1em solid #fdaead;
}
.menu:after {
content: "";
position: absolute;
top: 1em;
left: 1em;
width: 1em;
height: 0.2em;
border-top: 0.6em double #fff;
border-bottom: 0.2em solid #fff;
}
.menu ul {
list-style: none;
padding: 0;
}
.menu li {
width: 5em;
height: 1.4em;
padding: 0.2em;
margin-top: 0.2em;
text-align: center;
border-top-right-radius: 0.5em;
border-bottom-right-radius: 0.5em;
transition: all 1s;
background: #fdaead;
opacity: 0;
z-index: -1;
}
.menu:hover li {
opacity: 1;
}
/**
* Add a pseudo element to cover the space
* between the links. This is so the menu
* does not lose :hover focus and disappear
*/
.menu:hover ul::before {
position: absolute;
content: "";
width: 0;
height: 0;
display: block;
left: 50%;
top: -5.0em;
/**
* The pseudo-element is a semi-circle
* created with CSS. Top, bottom, and right
* borders are 6.5em (left being 0), and then
* a border-radius is added to the two corners
* on the right.
*/
border-width: 6.5em;
border-radius: 0 7.5em 7.5em 0;
border-left: 0;
border-style: solid;
/**
* Have to have a border color for the border
* to be hoverable. I'm using a very light one
* so that it looks invisible.
*/
border-color: rgba(0, 0, 0, 0.01);
/**
* Put the psuedo-element behind the links
* (So they can be clicked on)
*/
z-index: -1;
/**
* Make the cursor default so it looks like
* nothing is there
*/
cursor: default;
}
.menu a {
color: white;
text-decoration: none;
/**
* This is to vertically center the text on the
* little tab-like things that the text is on.
*/
line-height: 1.5em;
}
.menu a {
color: white;
text-decoration: none;
}
.menu ul {
transform: rotate(180deg) translateY(-2em);
transition: 1s all;
}
.menu:hover ul {
transform: rotate(0deg) translateY(-1em);
}
.menu li:hover {
background: #cd3e3d;
z-index: 10;
}
.menu li:nth-of-type(1) {
transform: rotate(-90deg);
position: absolute;
left: -1.2em;
top: -4.2em;
}
.menu li:nth-of-type(2) {
transform: rotate(-45deg);
position: absolute;
left: 2em;
top: -3em;
}
.menu li:nth-of-type(3) {
position: absolute;
left: 3.4em;
top: 0.3em;
}
.menu li:nth-of-type(4) {
transform: rotate(45deg);
position: absolute;
left: 2em;
top: 3.7em;
}
.menu li:nth-of-type(5) {
transform: rotate(90deg);
position: absolute;
left: -1.2em;
top: 5em;
}
.hint {
text-align: center;
}
<link href='https://fonts.googleapis.com/css?family=Alegreya+Sans:400,800' rel='stylesheet' type='text/css'>
<nav class="menu">
<ul>
<li>Products</li>
<li>Services</li>
<li>Careers</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
I am trying to use this tutorial (http://coolcarousels.frebsite.nl/c/23/) to create a carousel with products from my company. However, each product has a website that I would like to lead it to.
When I add a tag to any of the parts of this code, it works fine until only a few are links. But with all of it, it breaks and does not load sometimes for a few mins, or sometimes not at all. It sometimes requires to be refreshed before a user can see it.
<div>
<a href="http://minhasbrewery.com/lazymutt">
<img src="images/lazymutt/lazymutt_albertawheatale_02.png" alt="Lazy Mutt Alberta Wheat Ale" />
<span>Lazy Mutt Alberta Wheat Ale</span>
</a>
</div>
This is all I am changing and it seems to slow down the plugin.
/*=========================
CAROUSEL
==========================*/
.ourproducts{width:100%;
margin:0 auto;
overflow:hidden;
position:relative;
background:url(../images/pattern_bg.jpg);
}
#wrapper {
border-top: 1px solid #ccc;
width: 100% !important;
height: 50%;
margin-top: -1px;
position: static;
left: 0;
top: 50%;
}
.caroufredsel_wrapper{position:relative; z-index:400 !important; width:100% !important;}
#carousel {
margin-top: -100px;
background:inherit;
}
#carousel div {
text-align: center;
width: 2%;
max-width:200px;
height:auto;
float: left;
position: relative;
margin:0 0.5%;
margin-top:5%;
}
#carousel div img {
border: none;
width:100%;
display:block;
margin:0 auto;
margin-bottom:0;
}
#carousel div span {
display: none;
}
#carousel div:hover span {
background-color: #333;
color: #fff;
font-family:'hattori_hanzolight', sans-serif;
letter-spacing:1px;
font-size: 90%;
line-height: 110%;
display: inline-block;
width:auto;
min-width:200px;
padding: 5%;
margin: 0 0 0 -50px;
position: absolute;
top: -30px;
left: 50%;
border-radius: 2px;
}
and the Js is
<script src="js/jquery.carouFredSel-6.2.1.js"></script>
<script>
$(function() {
var $c = $('#carousel'),
$w = $(window);
$c.carouFredSel({
align: false,
items: 21,
scroll: {
items: 1,
duration: 2000,
timeoutDuration: 0,
easing: 'linear',
pauseOnHover: 'immediate'
}
});
$w.bind('resize.example', function() {
var nw = $w.width();
if (nw < 990) {
nw = 990;
}
$c.width(nw * 3);
$c.parent().width(nw);
}).trigger('resize.example');
});
</script>
I am not able to understand why this is breaking or disrupting the plugin, its simply a link so how does it after the load of this plugin and what would fix it?
So I used percentage(%) to make the width of each item resize with the window size and that was breaking it. The moment I changed it to and exact pixel amount it worked fine.
#carousel div {width:17px;}
I cannot position info-pop-title on top of bar-header as you can see from my current code the text "TEST----" is visible but under the bar-header element.
http://jsfiddle.net/uvh4ymh9/
Could you point me out what am I doing wrong and how to fix it
PS: I cannot change structure for the HTML, only CSS solution
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
.bar-header, .bar-footer {
position: fixed;
left: 0px;
width: 1280px;
z-index: 1;
background-color: rgba(50,50,50,0.5);
text-align: center;
}
.bar-header {
top: 0px;
height: 60px; /* safearea top 25 + content 20 + space bottom 15*/
}
.bar-header h1 {
position: fixed;
top: 25px; /* safearea top 25 */
left: 25px; /* safearea left */
font-size: 20px; /* content */
}
.bar-footer {
top: 670px;
height: 50px; /* safearea bottom 20 + content 20 + space top 10 */
font-size: 20px; /* content */
}
.bar-footer > ul {
position: fixed;
top: 680px; /* footer top 670 + space top 10*/
left: 1150px;
}
.bar-footer > ul li {
float: left;
}
.bar-footer li:nth-child(1) span {
color: blue;
}
#scene-main {
position: fixed;
top: 0px;
left: 0px;
width: 1280px;
height: 720px;
/*background: #ffffff url("/auth/assets/tv-safearea-transparent.png") no-repeat left;*/
background-color: darkgrey;
}
#btn-up, #btn-down {
position: fixed;
left: 1230px;
width: 50px;
height: 50px;
background-color: yellow;
outline: 1px solid black;
z-index: 200;
}
#btn-up {
top: 0px;
}
#btn-down {
top: 50px;
}
#content {
position: fixed;
top: 0px; /* header */
}
.content-section:first-child {
margin-top: 60px; /* header height content does not go under header */
}
.content-section {
background-color: lightgray;
outline: 1px solid black;
width: 1280px;
}
/* Content sizes */
.content-snippet {
height: 360px; /* 1 slots */
width: 1280px;
background-color: lightblue;
outline: 1px solid green;
}
.content-snippet:nth-child(even) {
background-color: lightcoral;
}
.content-section h2 {
position: relative;
top: 30px; /**avoid to go under the header bar*/
}
.active {
background-color: violet !important;
}
.snippet-pop-info {
position: fixed;
top: 640px; /*430 = final position as visible / 670 = final position as not visible */
width: 1280px;
height: 240px;
background-color: darkblue;
opacity: 1;
color: white;
}
.snippet-pop-info ul {
position: absolute;
top: 0px;
left: 1155px;
width: 100px;
}
.snippet-pop-info ul li {
width: 100px;
}
.snippet-pop-info .rating {
position: absolute;
top: 65px;
left: 25px;
unicode-bidi: bidi-override;
direction: rtl;
}
.snippet-pop-info .rating > span {
display: inline-block;
position: relative;
width: 20px;
}
.snippet-pop-info .rating > span:hover:before,
.snippet-pop-info .rating > span:hover ~ span:before {
content: "\2605";
position: absolute;
}
#info-pop-title {
position: fixed;
top: 0px;
left: 250px;
z-index: 1;
font-size: 30px;
color: white;
font-weight: bold;
}
#info-pop-description {
position: absolute;
overflow: hidden; /* hide content that does not fit in the columns*/
top: 25px;
left: 300px; /* TEST */
height: 80px;
width: 800px;
font-size: 20px;
-webkit-column-count: 2;
-webkit-column-gap: 10px;
column-count: 2;
column-gap: 10px;
}
</style>
</head>
<body>
<div id="viewport">
<div id="scene-main" class="scene" style="">
<div class="bar-header"><h1>ChannelLive logo</h1></div>
<div id="page">
<div id="content">
<div id="snippet-cnt-0" class="content-snippet">
0
<div class="snippet-pop-info" style="top: 720px;">
<h1 id="info-pop-title" style="word-wrap: break-word;">TEST-----------------</h1>
<div class="rating"><span>☆</span><span>☆</span><span>☆</span><span>☆</span><span>☆</span></div>
<div id="info-pop-description" style="word-wrap: break-word;">null</div>
<ul>
<li class="focusable" data-href="movie-play">Play</li>
<li class="focusable" data-href="movie-details">Details</li>
</ul>
</div>
</div>
</div>
</body>
</html>
It's not clear what you're trying to accomplish, but I can make Chrome work like Firefox by getting rid of the
position: fixed;
style from #content. Whether that will work in the larger context of your layout, I don't know, but the problem is that the way z-index works is weird and complicated, and involves not just individual fixed elements but also any fixed parents they might have.
edit — oh also, set the z-index of .snippet-pop-info to 2. Here is an updated version of your fiddle.
Make your
.bar-header, .bar-footer{
z-index:0;
}
This will do the trick. Since your z-index for .bar-header and .info-pop-title are the same.
Add z-index in your content div
#content
{
position:fixed;
top:0;
z-index:1;
}
I'm afraid you can't make it work with the way your html is nested.
The element you want to pull on top to cover the rest is located in the main container while your second element is isolated in the header. If you want to bring your info-pop-title there you'll have to change the z-index of your #page element, which will cover everything.
The only thing I see you can achieve with this structure would be to position your diverse containers relatively and change the css of your info-pop-title with a negative margin, position absolutely this time.