I have a recursive ng-repeat for creating a branching mind map tree which may have child nodes indefinitely (run the code snippet below to get a better idea of what I mean).
I've got a remove() function in my $scope, which intends to remove itself. However, to do this, I need access to the parent. I tried achieving this by using ng-init to set the parent node in a variable called parent. The problem is, the parent variable seems to be referring to the node itself instead of its parent. How do I inject the parent into the loop instead?
Everything but the fore-mentioned $scope.remove() works in the snippet below:
(function(){
angular
.module('createTree',[])
.controller('CreateTreeController', function($scope){
$scope.tree=[{
title:'node 1',
subNodes:[
{
title:'node 1.1',
subNodes:[]
},
{
title:'node 1.2',
subNodes:[
{
title:'node 1.2.1',
subNodes:[]
},
{
title:'node 1.2.2',
subNodes:[]
}
]
},
{
title:'node 1.3',
subNodes:[]
}
]
}];
$scope.addTo=function(node){
node.subNodes.push({
title: node.title+"."+(node.subNodes.length+1),
subNodes:[]
});
}
$scope.remove=function(node,parent){
var index=parent.subNodes.indexOf(node)
if(index>-1) parent.subNodes.splice(index,1);
}
});
})();
*{
position: relative;
box-sizing: border-box;
}
.node{
padding: 1px 0;
}
.node>.subNodes{
margin-left: 10px;
}
.node>.subNodes::before{
content: '';
display: block;
width: 5px;
height: 1px;
background-color: black;
position: absolute;
top: 50%;
left: -10px;
}
.node>.subNodes::after{
content:'';
display: block;
width: 1px;
height: 100%;
background-color: black;
position: absolute;
top: 0;
left: -5px;
z-index: 1;
}
.node>.subNodes>.node::before{
content:'';
display: block;
width: 5px;
height: 1px;
background-color: black;
position: absolute;
top: 50%;
left:-5px;
z-index: 3;
}
.node>.subNodes>.node:first-child::after{
content:'';
display: block;
width: 1px;
height: 50%;
background-color: white;
position: absolute;
top: 0;
left:-5px;
z-index: 2;
}
.node>.subNodes>.node:last-child:not(:first-child)::after{
content:'';
display: block;
width: 1px;
height: calc(50% - 1px);
background-color: white;
position: absolute;
bottom: 0;
left:-5px;
z-index: 2;
}
.node>.subNodes>.node:only-child::after{
height: 100%;
}
.node>*{
display: inline-block;
vertical-align: middle;
}
.node [type=text]{
width: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<div ng-app="createTree" ng-controller="CreateTreeController as createTree">
<script type="text/ng-template" id="treeNode.html">
<span>
<input
type="button"
value="x"
ng-click="remove(node,parent)"
>
{{node.title}}, parent: {{parent.title}}
<input
type="button"
value="+"
ng-click="addTo(node)"
>
</span><div class="subNodes" ng-show="node.subNodes.length>0">
<div
class="node"
ng-init="parent=node"
ng-repeat="node in node.subNodes"
ng-include="'treeNode.html'"
></div>
</div>
</script>
<div
class="node"
ng-init="parent=tree"
ng-repeat="node in tree"
ng-include="'treeNode.html'"
></div>
</div>
There is an issue with the way you are updating your parent in every loop. Basically what is happening is that after the first level you parent's value is becoming same as that of node. This is actually an angular feature where the ng-init gets called again to update the value of parent because it sees that the value of node has changes in the ng-repeat. So the end result that the value of parent will always be the last element in node.subNodes. Hence when you call remove the parent of the node is not really being passed. To overcome this I have added a third variable which will hold the value of the parent (or rather the next parent). I have created a fiddler here.
I have only changed your HTML as below (the ng-init expression has been changed):
<div ng-controller="CreateTreeController">
<script type="text/ng-template" id="treeNode.html">
<span>
<input
type="button"
value="x"
ng-click="remove(node,parent)"
>
{{node.title}}, parent: {{parent.title}}
<input
type="button"
value="+"
ng-click="addTo(node)"
>
</span>
<div class="subNodes" ng-show="node.subNodes.length>0">
<div class="node" ng-init="parent=oldParent;oldParent=node;" ng-repeat="node in node.subNodes" ng-include="'treeNode.html'"></div>
</div>
</script>
<div class="node" ng-init="parent=tree;oldParent=parent[0];" ng-repeat="node in tree" ng-include="'treeNode.html'"></div>
</div>
The parent can't be the node, You need to set true parent for every node.
I made a solution
(function(){
angular
.module('createTree',[])
.controller('CreateTreeController', function($scope){
$scope.tree=[{
title:'node 1',
parent: null,
subNodes:[]
}];
$scope.addTo=function(node){
node.subNodes.push({
title: node.title+"."+(node.subNodes.length+1),
parent: node,
subNodes:[]
});
}
$scope.remove=function(node,parent){
var index=node.parent.subNodes.indexOf(node)
if(index>-1 && node.parent != null) node.parent.subNodes.splice(index,1);
}
});
})();
*{
position: relative;
box-sizing: border-box;
}
.node{
padding: 1px 0;
}
.node>.subNodes{
margin-left: 10px;
}
.node>.subNodes::before{
content: '';
display: block;
width: 5px;
height: 1px;
background-color: black;
position: absolute;
top: 50%;
left: -10px;
}
.node>.subNodes::after{
content:'';
display: block;
width: 1px;
height: 100%;
background-color: black;
position: absolute;
top: 0;
left: -5px;
z-index: 1;
}
.node>.subNodes>.node::before{
content:'';
display: block;
width: 5px;
height: 1px;
background-color: black;
position: absolute;
top: 50%;
left:-5px;
z-index: 3;
}
.node>.subNodes>.node:first-child::after{
content:'';
display: block;
width: 1px;
height: 50%;
background-color: white;
position: absolute;
top: 0;
left:-5px;
z-index: 2;
}
.node>.subNodes>.node:last-child:not(:first-child)::after{
content:'';
display: block;
width: 1px;
height: calc(50% - 1px);
background-color: white;
position: absolute;
bottom: 0;
left:-5px;
z-index: 2;
}
.node>.subNodes>.node:only-child::after{
height: 100%;
}
.node>*{
display: inline-block;
vertical-align: middle;
}
.node [type=text]{
width: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<div ng-app="createTree" ng-controller="CreateTreeController as createTree">
<script type="text/ng-template" id="treeNode.html">
<span>
<input
type="button"
value="x"
ng-click="remove(node)"
>
{{node.title}}, parent: {{node.parent.title}}
<input
type="button"
value="+"
ng-click="addTo(node)"
>
</span><div class="subNodes" ng-show="node.subNodes.length>0">
<div
class="node"
ng-repeat="node in node.subNodes"
ng-include="'treeNode.html'"
></div>
</div>
</script>
<div
class="node"
ng-repeat="node in tree"
ng-include="'treeNode.html'"
></div>
</div>
Related
My message display out of my DIV HTML
How do I resolve this?
I need to display this message within the div. If I repeat this code, it appears in the same place every time, I just want to display it in its own div and not invade others. My big problem it's the display message. Does anyone know how to resolve this?
<html>
<head>
</head>
<body>
jhadfjadfjasf
ajdfhkhasdjfas
ajdfhjadfa
ajdfhkajsdfh
<div class="sidney">
<img src="https://eitrawmaterials.eu/wp-content/uploads/2016/09/person-icon.png" width="220px" height="220px">
<div id="baselayer">
<input type="button" class="testx" value="SubLevel" onclick="showFrontLayer();" />
<input type="button" value="Job Description" onclick="showFrontLayers();"/>
<div id="bg_mask">
<div id="frontlayer">
<div class="containers">
<input type="button" value="X" onclick="hideFrontLayer();" style="position: absolute;top:5%;right:5%;"/>
O Product Owner é a pessoa que define os itens que compõem o Product Backlog e os prioriza nas Sprint Planning Meetings.
</div>
</div>
</div>
<div id="bg_masks">
<div id="frontlayers">
<input type="button" value="X" onclick="hideFrontLayers();" style="position: absolute;top:5%;right:5%;"/>
O Product Owner.
</div>
</div>
</div>
</div>
<style>
.sidney{
width: 250px;
height: 250px;
background-color: black;
border:20px;
}
</style>
<img src="https://eitrawmaterials.eu/wp-content/uploads/2016/09/person-icon.png" width="170px" height="150px">
<style>
#testx{
position: absolute;
top: 0px;
left: 0px%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #555;
color: white;
font-size: 16px;
padding: 12px 24px;
border: none;
cursor: pointer;
border-radius: 5px;
text-align: center;}
#bg_mask{
position: absolute;
top: 0px;
right: 0;
bottom: 0;
left: 0;
margin: auto;
margin-top: 0px;
width: 981px;
height: 610px;
background : url("img_dot_white.jpg") center;
z-index: 0;
visibility: hidden;
}
#frontlayer{
position: absolute;
top: 0px;
right: 0;
bottom: 0;
left: 0;
margin: 10px 10px 10px 10px;
padding : 30px;
width: 180px;
height: 100px;
background-color: orange;
visibility: hidden;
border: 1px solid black;
z-index: 1;
}
#bg_masks {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
margin-top: 0px;
width: 981px;
height: 610px;
background : url("img_dot_white.jpg") center;
z-index: 0;
visibility: hidden;
}
#frontlayers {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: 10px 10px 10px 10px;
padding : 30px;
width: 180px;
height: 100px;
background-color: orange;
visibility: hidden;
border: 1px solid black;
z-index: 1;
}
</style>
<script>
function showFrontLayer() {
document.getElementById('bg_mask').style.visibility='visible';
document.getElementById('frontlayer').style.visibility='visible';
}
function hideFrontLayer() {
document.getElementById('bg_mask').style.visibility='hidden';
document.getElementById('frontlayer').style.visibility='hidden';
}
</script>
<script>
function showFrontLayers() {
document.getElementById('bg_masks').style.visibility='visible';
document.getElementById('frontlayers').style.visibility='visible';
}
function hideFrontLayers() {
document.getElementById('bg_masks').style.visibility='hidden';
document.getElementById('frontlayers').style.visibility='hidden';
}
</script>
</body>
</html>
How do I resolve this?
add position: relative; to this class .sidney (you can find it on line 31)
I'm trying to make the left arrow in my page change the background color of the container on click, but whenever I click it I get this error: (index):147 Uncaught ReferenceError: slide is not defined I've tried every solution available here and still no luck. Here's the jsfiddle: https://jsfiddle.net/mLr6oax0/
I would do the following:
use element.style.backgroundColor instead of your intended element.setAttribute('style', 'background-color: 'orange')
use of addEventListener with id or class hooks over HTML's onclick
Test the solution below:
var container = document.getElementById("container");
var clickable = document.getElementById('clickable');
clickable.addEventListener('click', function () {
container.style.backgroundColor = 'orange';
});
html, body {
overflow: hidden;
margin: 0;
}
.wrapper {
margin: 0;
overflow: hidden;
}
#container {
background-color: blue;
}
.container {
position: absolute;
overflow: hidden;
margin: 0;
width: 300%;
height: 520px;
display: flex;
background-color: #ccc;
}
.flex-item {
margin-top: 10px;;
margin-right: auto;
width: 500px;
height: 500px;
background-color: #fff;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
list-style: none;
}
.flex-item:first-child {
position: absolute;
left: 0px;
margin-left: 15px;
}
.flex-item:nth-child(2) {
position: absolute;
left: 500px;
margin-left: 20px;
}
.flex-item:nth-child(3) {
position: absolute;
left: 1000px;
margin-left: 20px;
}
.flex-item:nth-child(4) {
position: absolute;
left: 1500px;
margin-left: 20px;
}
li {
display: flex;
}
.left-arrow {
position: absolute;
top: 250px;
font-size: 50px !important;
}
.right-arrow {
position: absolute;
top: 250px;
right: 0px;
font-size: 50px !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<title>Flex</title>
<body>
<div class="wrapper">
<ul class="container" id="container">
<li class="flex-item"></li>
<li class="flex-item"></li>
<li class="flex-item"></li>
<li class="flex-item"></li>
</ul>
<i id='clickable' class="left-arrow fa fa-chevron-left" aria-hidden="true"></i>
<i class="right-arrow fa fa-chevron-right" aria-hidden="true"></i>
</div>
</body>
I have a editor. I want to make it fullscreen on certain button click.
Actually I want to acheive CKEditor like maximize feature through jauery,
Please see this link:
http://ckeditor.com/demo
This demo maximize button is there. I want to achieve same using jquery.
Besides from appending (and removing) a CSS class on it when a button is clicked with JavaScript, you can also use a few CSS tricks:
#full-screen-toggler:checked ~ #youreditor {
z-index: 9999;
width: 100%;
position: fixed;
top: 0;
bottom: 0;
left: 0;
margin: 0px;
}
#youreditor #fslabel::after {
content: "enter fullscreen";
cursor: pointer; /* optional */
}
#full-screen-toggler:checked ~ #youreditor #fslabel::after {
content: "exit full screen";
}
/* Styles for preview */
#youreditor { background: green; padding: 10px; }
#youreditor #fslabel::after { color: white; padding: 3px 5px;
border-radius: 2px; border: 1px groove white; }
<input id="full-screen-toggler" type="checkbox" style="display: none;" />
<div id="youreditor">
<label id="fslabel" onclick="" for="full-screen-toggler" />
</div>
Assign the user window's dimension to container, by window.innerWidth and window.innerHeight
css:
.container { width:200px; height:100px; background:#ccc; }
html:
<div class='container'>
<button class='maximize'>Maximize</button>
<button class='minimize'>Minimize</button>
</div>
javascript:
$('.maximize').on('click', function(){
$('.container').css({'width': window.innerWidth, 'height': window.innerHeight});
});
$('.minimize').on('click', function(){
$('.container').css({'width':'200px' , 'height': '100px'});
});
working example
link: http://jsbin.com/raduqihibo/edit?html,css,js,output
Working Fiddle
You could acheive that using custom css class :
.full-screen{
z-index: 9999;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
padding: 0px;
margin: 0px;
overflow-x: hidden;
}
Hope this helps.
$('#maximize').on('click', function(){
$('#container').toggleClass('full-screen');
})
.full-screen{
z-index: 9999;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
padding: 0px;
margin: 0px;
overflow-x: hidden;
}
div{
width:100px;
height:100px;
background-color:green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='container'>
<button id='maximize'>[]</button>
</div>
so I am building a website, where users have their avatars loaded based on code that's given to JS function, it's 7 images all same size but different elements - Skin base, hair, eyes, mouth, shirt, shoes, pants.
They get loaded on page loading and they need to be stacked on top of each other.
Here is html:
<body onload="LoadCharDiv('codas', 'AvatarImgFrame');">
<div id="MainBody">
<div id="DataFrame">
<div class="DataObjects"><div class="InfoLabels">Account Level: </div><div class="InfoData" id="LevelData"><?php echo($row['level']); ?></div></div>
<div class="DataObjects"><div class="InfoLabels">Profile Views: </div><div class="InfoData" id="ProfileData"><?php echo(mysqli_num_rows($views)); ?></div></div>
<div class="DataObjects"><div class="InfoLabels">Messages: </div><div class="InfoData" id="MessageData">0</div></div>
</div>
<div id="AccountFrame">
<div id="AccountAvatar">
<div id="AvatarImgFrame"><img src="http://upload.wikimedia.org/wikipedia/commons/c/cd/Placeholder_male_superhero_c.png" id="Acc_img"/></div>
<input type="button" id="sendPm" value="Send Message" name="sendPm"/>
</div>
<div id="AccountInfo">
<div id="NameObject" class="DetailObjects"><div class="DetailLabel"><?php echo($row['first_name'] ." ". $row['last_name'] ." ". "(".$row['username'].")");?></div></div>
<div class="DetailObjects"><div class="DetailLabel">Age: </div><div class="DetailInput" id="DetailAge"><?php echo($age); ?></div></div>
<div class="DetailObjects"><div class="DetailLabel">Country: </div><div class="DetailInput" id="DetailCountry"><?php echo($row['country']); ?></div></div>
<div class="DetailObjects"><div class="DetailLabel">Registered: </div><div class="DetailInput" id="DetailReg"><?php echo($timeon." Days Ago"); ?></div></div>
<div class="DetailObjects"><div class="DetailLabel">About Me: </div><div class="DetailInput" id="DetailAbout"><?php echo($row['about']);?></div></div>
</div>
</div>
</div>
</body>
"LoadCharDiv()" is a JS function which just places images into div based on character code provided, don't think it's related but here it is anyway:
function LoadCharDiv(codas, div){
var code = "1c0c1c0c1c2c1";
var data = code.split("c");
var skins2 = [skins[data[0]], eyes[data[1]], hair[data[2]], mouth[data[3]], pants[data[4]], shoes[data[5]], torso[data[6]]];
var inhtml = "";
for(var d = 0; d < skins2.length; d++){
inhtml = inhtml + "<img src='"+skins2[d]+"'/>";
}
document.getElementById(div).innerHTML = inhtml;
}
And here is my CSS on page:
*{
margin: 0px;
padding: 0px;
font-family: 'Ubuntu', sans-serif;
}
body{
background-color: #111111;
margin: 1%;
}
#MainBody{
width: 60%;
margin-left: auto;
margin-right: auto;
height: 800px;
}
#AccountFrame{
width: 100%;
padding: 15px;
height: 100%;
background-color: #eeeeee;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
display: inline-block;
}
#DataFrame{
font-size: 2.0vh;
padding: 15px;
background-color: #eeeeee;
border-radius-top: 4px;
width: 100%;
text-align: right;
border-top-right-radius: 4px;
border-top-left-radius: 4px;
}
#DataFrame ,.InfoLabels, .InfoData{
display: inline-block;
}
#AccountAvatar{
float: left;
width: 30%;
}
#AccountAvatar img{
width: 10%;
position: absolute;
left: 0;
right: 0;
}
#sendPm{
width: 100%;
height: 5.0vh;
background-color: #0071ff;
border: 0px;
text-align: center;
margin-left: auto;
margin-right: auto;
color: #1A1A1A;
font-size: 2.0vh;
}
#sendPm:hover{
background-color: #308CFF;
}
.DetailLabel{
display: inline-block;
width: 9.7vh;
color: #0071ff;
}
.DetailInput{
width: 40%;
display: inline;
}
.DetailObjects{
width: 100%;
display: inline-block;
padding: 1vh;
}
#AccountName{
color: #0071ff;
}
#AccountInfo{
width: 68%;
float: left;
font-size: 1.7vh;
padding: 1vh;
height: 100%;
}
#NameObject{
font-size: 3vh;
padding: 0px;
padding-left: 1vh;
}
As you can see in image, with current
#AccountAvatar img{
width: 10%;
position: absolute;
left: 0;
right: 0;
}
Character is placed on side of page, I want it to be placed right above Send Message button, and stay there without floating around screen if page gets resized.
Here is what it should be like:
I am thinking perhaps there is a way to layer images on top of each other without position: absolute?
Thanks.
Tried setting Parent position to relative.
#AccountAvatar{
float: left;
height: 500px;
position: relative;
width: 30%;
}
#AccountAvatar img{
width: 60%;
height: 500px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin-right: auto;
margin-left: auto;
}
Character appears below button.
Any way to adjust him to be above button?
Your absolute positioning is fine however, absolute elements are not in the normal content flow so you need to add a height to the container of the absolute elements.
http://jsfiddle.net/rwh3emp2/1/
#AvatarImgFrame is the container of the image
#AvatarImgFrame {
height: 230px;
}
You can remove the height from #AccountAvatar
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.