I am trying to build step component with arrow button to scroll through left and right using bulma, angularjs, jquery. My requirement is,
only five elements will be seen inside the visible part of the component.
As soon as the element moves in the left arrow it fade out.
As soon as the element moves out the left arrow it fade in.
As soon as the element moves in the right arrow it fade out.
As soon as the element moves out the right arrow it fade in.
Also, same with the mouse scroll
https://codepen.io/singhrhi/pen/ZEYNWQM
;'use strict';
angular.module("app.fcrs")
.controller("ProjectProgressWorkflowViewController", ["$scope",function($scope) {
angular.extend($scope, {
test: function() {
// console.log("TEEEST");
},
test1: function(){
// console.dir($('.left-paddle').position().left);
// $('.menu').animate({"scrollLeft": '+=190px'}, 300 );
$('.menu').animate({"scrollLeft": '+=200px'}, 300 );
// $('.menu').on('scroll', function() {
// // console.log($(this))
// // console.log($(this.children[0]))
// $scope.oscrl($(this.children));
// });
},
test2: function(){
// console.dir($('.right-paddle').position().left);
$('.menu').animate({"scrollLeft": '-=200px'}, 300 );
// $('.menu').on('scroll', function() {
// // console.log($(this.children))
// $scope.oscrl($(this.children));
// });
}
});
}]);
#media screen and (min-width: 769px), print{
.steps.is-small:not(.is-vertical) .steps-segment:not(:last-child):after {
height: .16em;
}
}
.steps.is-hollow .steps-marker, .steps-marker.is-hollow {
border: .2em solid #23d160;
}
.steps-marker{
margin-right: 11rem;
}
.TeSEST{
background: #23d160;
width:90px;
position: absolute;
top: 1px;
}
.TeST{
background: repeating-linear-gradient(90deg, #dbdbdb, #dbdbdb 10px, transparent 10px, transparent 20px);
width:84px;
position: absolute;
right:0px;
top:2px;
}
#media screen and (min-width: 769px), print {
.steps.is-small:not(.is-vertical).has-content-centered .steps-segment:not(:last-child):after {
left: 55%;
right: -45%;
}
}
.menu-wrapper {
padding:4px;
position: relative;
max-width: 1100px;
height: 100px; // hide the scroll bar
margin: 9em;
overflow-x: hidden;
overflow-y: hidden;
}
.menu{
height: 120px; // hide the scroll bar
box-sizing: border-box;
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
opacity:1;
}
.paddles {
}
.paddle {
z-index: 10;
position: absolute;
top: 0;
bottom: 0;
width: 3em;
}
.left-paddle {
left: 0em;
}
.right-paddle {
right: 0em;
}
.hidden {
display: none;
}
<div ng-controller="ProjectProgressWorkflowViewController">
<div class="menu-wrapper">
<ul class="steps is-small has-content-centered menu">
<li class="steps-segment item" id="dd">
<hr class="TeSEST"></hr>
<a href="#" class="steps-marker has-text-weight-normal" id="ddd">
1
</a>
<div class="steps-content" style="width:16em">
<div>Project</div>
<div>Establishment</div>
</div>
</li>
<li class="steps-segment item">
2
<div class="steps-content" style="width:16em">
<div>Functional Design</div>
<div>&</div>
<div>Master Planning</div>
</div>
</li>
<li class="steps-segment item">
3
<div class="steps-content" style="width:16em">
<div>Concept Design</div>
</div>
</li>
<li class="steps-segment item">
4
<div class="steps-content" style="width:16em">
<div>Schematic Design</div>
</div>
</li>
<li class="steps-segment item">
5
<div class="steps-content" style="width:16em">
<div>Detailed Design</div>
<div>&</div>
<div>Documentation</div>
</div>
</li>
<li class="steps-segment item">
6
<div class="steps-content" style="width:16em">
<div>Construction</div>
<div>&</div>
<div>Completion</div>
</div>
</li>
<li class="steps-segment item">
7
<div class="steps-content" style="width:16em">
<div>Commissioning</div>
</div>
</li>
<li class="steps-segment item">
8
<div class="steps-content" style="width:16em">
<div>Construction</div>
<div>Certification</div>
</div>
</li>
<li class="steps-segment item">
9
<div class="steps-content" style="width:16em">
<div>Handover</div>
</div>
</li>
<li id="hey" class="steps-segment is-active is-dashed item">
10
<div class="steps-content" style="width:16em">
<div>Post Construction </div>
<div>& </div>
<div>Post Occupation </div>
<div>Evaluation</div>
</div>
</li>
<li class="steps-segment item">
11
<div class="steps-content" style="width:16em">
<div>Financial </div>
<div>Completion</div>
</div>
<hr class="TeST"></hr>
</li>
</ul>
<button class="button is-rounded left-paddle paddle" ng-click="test1()">
<div class="step-scroller-text"><<div>
</button>
<button class="button is-rounded right-paddle paddle" ng-click="test2()">
<div class="step-scroller-text">><div>
</button>
</div>
</div>
I am able to scroll the elements with buttons. However not able to achieve fade in fade out effects.
Please help.
Thanks !!
Related
2 problems when trying to implement this:
Putting it in the body breaks the sticky nav.
Scroll bar on div.
If i try to do http://keithclark.co.uk/articles/pure-css-parallax-websites/ in a div. It causes a scrollbar in that div.
Trying to counter it by putting it in the body directly breaks the sticky nav (made using bootstrap).
Here is the pen http://codepen.io/dam0/pen/zviHr that I tried to do also. Similar concept.
I only need a parallax on a div. The different element speed type. Any help?
Here's the html structure i have. Please take a look. I already some put comments there.
I'm trying to make it Pure CSS as long as possible. But if it can't be done, help me with js.
EDIT: Added a Pen
http://codepen.io/anon/pen/qZVEgM
Adding the .parallax to the div i want to have a parallax effect causes it to have scrollbar. Putting the parallax class to the body will break the position:fixed of the sticky nav.
EDIT 2: Moved the pen code here
HTML:
<div class="parallax holder">
<div id="carousel" class="parallax__layer parallax__back carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<li data-target="#carousel" data-slide-to="1"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://loremflickr.com/1920/1080/vegetable,healthy,plate" class="img-responsive center-block">
</div>
<div class="item">
<img src="http://loremflickr.com/1920/1080/vegetable,healthy,plate" class="img-responsive center-block">
</div>
</div>
</div>
<div id="headerCaption" class="parallax__layer parallax__layer--base">
<img src="http://healthyaxcess.ph/img/CaptionBg.png" id="curve" class="img-responsive center-block">
</div>
</div>
<div id="nav-wrapper">
<nav class="navbar navbar-inverse navbar-static-top" id="navbar-main">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="http://healthyaxcess.ph/img/logo.png"></a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-shopping-cart"></i> Cart</li>
<li><i class="fa fa-user"></i> Sign Up/Login</li>
</ul>
<!-- Nav links -->
<div class="collapse navbar-collapse navbar-right" id="navbar-collapse">
<ul class="nav navbar-nav" id="nav-section">
<li class="current active">
First Section
</li>
<li>
Second Section
</li>
<li>
Third Section
</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Dropdown link 1</li>
<li>Dropdown link 2</li>
<li>Dropdown link 3</li>
</ul>
</li>
</ul>
</div><!-- End of navbar collapse -->
</div><!-- End of Container Fluid -->
</nav>
</div>
<div class="container main">
<div class="text-center" id="section-2">
<h1>Sample Title</h1>
<p>The sample title's description here.</p>
</div>
CSS:
.navbar-inverse {
background: #303030;
}
#navbar-main {
margin: 0;
}
/* To override the static-top */
#navbar-main.affix {
position: fixed;
top: 0;
width: 100%;
}
#media (min-width: 992px) {
#navbar-main .navbar-nav {
position: relative;
margin-top: 16px;
}
}
.main {
/* for example only */
min-height: 200px;
}
.navbar-brand {
padding: 0;
/* firefox bug fix */
height: 80px;
}
.navbar-brand>img {
height: 100%;
padding: 8px;
/* firefox bug fix */
width: auto;
position: relative;
}
#footerBox {
background-color: #303030;
color: #FAFAFA;
}
.holder {
display: none;
}
#headerCaption {
position: relative;
}
#headerCaption img {
z-index: 3;
position: absolute;
width: 100%;
}
.carousel {
position: relative;
}
.parallax {
perspective: 1px;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
}
.parallax__layer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.parallax__layer--base {
transform: translateZ(0);
}
.parallax__layer--back {
transform: translateZ(-1px);
}
JS:
$('#carousel img').on("load", function(){
$('body').scrollspy({ target: '#navbar-collapse' });
$('.holder').css('display', 'block');
$('#nav-wrapper').height($("#navbar-main").height());
$('#navbar-main').affix( { offset:{ top:$('#navbar-main').offset().top } } );
$('.carousel').carousel({pause: false});
})
Here is a JSfiddle with the code to my problem:
https://jsfiddle.net/367v2n1q/14/
On the right you will see a red bar which has a fixed position. I'm trying to get the body to have a min width of 808 pixels, but it is letting me re-size the body to smaller than 808.
The center div stops shrinking when it hits 808 pixels wide, but then the fixed div on the right keeps on going and envelops the rest of the content.
CSS
body.total{
background-color: black;
position: relative;
min-width: 808px;
}
.rightSidePane {
position: absolute;
background-color: red;
clear: both;
top: 0;
right: 0;
}
HTML snippet
<!DOCTYPE html>
<html>
<head>
<!-- head stuff here -->
</head>
<body class="total">
<div id="wrapper" class="leftSidePane">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">
</li>
<li>
</li>
<li>
</li>
</ul>
</div>
</div>
<div class="content">
<div class="mainContent">
<h1>
WWW.SITE.COM
</h1>
<h2>dedicated to stuff</h2>
<p style="text-align: center;
color: #5D5D5D;">last updated: 01.01.2016</p>
<br>
<p style="
font-family: 'Times New Roman';
color: #C1C1C1;
font-weight: bold;
font-size: 20px;
text-align: center;
">Site visited 27 times</p>
<br><br>
<hr>
</div>
</div>
<div class="rightSidePane">
<!-- Side bar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand-right">
</li>
<li>
<a href="#">
</a>
</li>
<li>
<div class="barfix"></div>
</li>
<li class="board">
</li>
<li class="nextBar">
</li>
<li>
<div class="tileRightInit" id="bs">
<div class="barTextRight">MAIN</div>
</div>
</li>
<li>
<div class="tileRight" id="bs">
<div class="barTextRight">News</div>
</div>
</li>
<li>
<div class="tileRight" id="bs">
<div class="barTextRight">Links</div>
</div>
</li>
<li>
<div class="tileRight" id="bs">
<div class="barTextRight">Credits</div>
</div>
</li>
<li>
<div class="tileRight" id="bs">
<div class="barTextRight">About</div>
</div>
</li>
<li class="bottomRight">
</li>
</ul>
</div>
</div>
</body>
</html>
I figured out the problem. I needed to be using absolute positioning for the div on the right. Here is the fixed JS fiddle: https://jsfiddle.net/367v2n1q/15/
Here is the fixed CSS:
body.total{
background-color: black;
position: relative;
min-width: 840px;
}
.rightSidePane {
position: absolute;
background-color: red;
clear: both;
top: 0;
right: 0;
}
The HTML remained the same. Thanks #Roope for pointing out that the body never fell below 808px width, I don't know why I didn't catch that but you pointed me in the right direction.
I have panel content (not an accordian) setup to be hidden on page load. When a user clicks on one of the tabs, a "hidden" class is removed thus showing the panel content. Then I want to hide the content if the user clicks the tab for the open panel:
$('#section-navigation a').click(function (e) {
e.preventDefault()
if ($(this).closest("li").hasClass("active")) {
$('#section-navigation li.active').removeClass("active");
$(".tab-content").addClass("tab-content-hidden");
} else {
$(".tab-content").removeClass("tab-content-hidden");
$(this).tab('show');
}
});
This does show the panel content on first click, hide the panel content on second click of the same tab but it does not remove the "active" class from the panel content "li", and a third click on the same tab does nothing. Example here (coloured panels):
http://hawk.cloudlevel.me/
Fiddle: https://jsfiddle.net/uvvnpp0s/3/
How can I achieve my goal? I appreciate I might have gone about things in completely the wrong way, as I'm inexperienced with JS / jQuery.
Your custom tabs is conflicting with the bootstrap tabs implementation. Best would be have a custom tab implementation.
Here's a quick custom implementation - https://jsfiddle.net/nitincool4urchat/uvvnpp0s/9/
$("a[role=tab]").click(function() {
if ($(this).parent('li').hasClass('active')) {
$(this).parent('li').removeClass('active');
$(".tab-content").addClass('tab-content-hidden');
} else {
$("#section-navigation li").removeClass('active');
$(this).parent('li').addClass('active');
$(".tab-content").removeClass('tab-content-hidden');
$(".tab-content .tab-pane").hide(); //hide all
$($(this).attr('href')).show(); //show the selected one;
}
});
ul#section-navigation {
list-style-type: none;
padding: 0;
}
ul#section-navigation li {
position: relative;
float: left;
width: 25%;
padding-bottom: 15%;
overflow: hidden;
}
ul#section-navigation li > a {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
text-align: center;
border: 0;
color: #0e034f;
}
ul#section-navigation li > a,
ul#section-navigation li.active > a,
ul#section-navigation li a:hover,
ul#section-navigation li a:focus {
background: 0;
border: 0;
margin: 0;
outline: 0;
}
ul#section-navigation li > a h2 {
font-size: 24px;
margin-top: 1vw;
}
ul#section-navigation li > a p {
display: none;
}
ul#section-navigation li a div div {
position: absolute;
bottom: 0;
right: 0;
width: 15%;
}
ul#section-navigation li a div div:after {
content: "";
display: block;
padding-top: 100%;
}
ul#section-navigation li a div div div {
display: block;
width: 100%;
height: 100%;
}
ul#section-navigation li a div div div span {
display: block;
line-height: 100%;
color: #fff;
transition: 0.2s all;
font-size: 12vw;
}
ul#section-navigation li.active a div div span {
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
transform-origin: 48% 48%;
}
.tab-content {
overflow: hidden;
max-height: 4000px;
transition: max-height .5s cubic-bezier(1, 0, .7, 1);
}
.tab-content .panel-padding {
padding-top: 2%;
}
.tab-content-close {
float: right;
font-size: 30px;
width: 30px;
text-align: center;
margin-left: 100%;
}
.learn-more-1,
.learn-more-2,
.learn-more-3,
.learn-more-4 {
overflow: hidden;
max-height: 4000px;
padding-top: 60px;
padding-bottom: 60px;
}
.tab-content-hidden,
.learn-more-hidden,
.bar-hidden {
max-height: 0;
padding-top: 0;
padding-bottom: 0;
}
#link-learn-more-1,
#link-learn-more-2,
#link-learn-more-3,
#link-learn-more-4 {
position: relative;
top: -50px;
}
.learn-more .tab-content img {
width: 100%;
}
.panel-padding {
padding: 5%;
}
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<ul class="nav nav-tabs" role="tablist" id="section-navigation">
<li role="presentation" class="gradient-white">
<a href="#panel-1" aria-controls="panel-1" role="tab">
<h2>Apprenticeships</h2>
<p>Learn more about the great opportunities apprenticeships offer</p>
<div>
<div>
<div class="bkg-blue"><span class="icon-plus"></span>
</div>
</div>
</div>
</a>
</li>
<li role="presentation" class="gradient-pink">
<a href="#panel-2" aria-controls="panel-2" role="tab">
<h2>Management</h2>
<p>Developing the next generation of leaders and managers</p>
<div>
<div>
<div class="bkg-pink"><span class="icon-plus"></span>
</div>
</div>
</div>
</a>
</li>
<li role="presentation" class="gradient-yellow">
<a href="#panel-3" aria-controls="panel-3" role="tab">
<h2>FE Teacher Training</h2>
<p>Get qualified to train and teach in the FE sector</p>
<div>
<div>
<div class="bkg-yellow"><span class="icon-plus"></span>
</div>
</div>
</div>
</a>
</li>
<li role="presentation" class="gradient-green">
<a href="#panel-4" aria-controls="panel-4" role="tab">
<h2>Learning Zone</h2>
<p>e-Learning on demand 24/7</p>
<div>
<div>
<div class="bkg-green"><span class="icon-plus"></span>
</div>
</div>
</div>
</a>
</li>
</ul>
<div class="tab-content tab-content-hidden">
<div role="tabpanel" class="tab-pane fade in active" id="panel-1">
<div class="row">
<div class="col-sm-6">
<img src="http://hawk.cloudlevel.me/images/uploads/apprenticeshipsbanner.png" class="img-responsive" title="" alt="" />
</div>
<div class="col-sm-6 panel-padding">
<div class="stat color-blue"><span class="stat-number">95%</span><span class="stat-desc">of apprentices would recommend us</span>
</div>
<h2>Learn more about the great opportunities apprenticeships offer</h2>
<p>
<br />Earn and learn across a variety of exciting sectors and jobs, improving your skills, gaining valuable experience and boosting your career from the very beginning.</p>
Learn more
Current vacancies
</div>
</div>
<span class="bar bkg-blue"></span>
</div>
<div role="tabpanel" class="tab-pane fade in" id="panel-2">
<div class="row">
<div class="col-sm-6">
<img src="http://hawk.cloudlevel.me/images/uploads/managementsmall.png" class="img-responsive" title="" alt="" />
</div>
<div class="col-sm-6 panel-padding">
<div class="stat color-pink"><span class="stat-number">88%</span><span class="stat-desc">increased employee satisfaction</span>
</div>
<h2>Developing the next generation of leaders and managers</h2>
<p>
<br />Enjoy progressive, flexible learning that improves prospects, boosts careers and brings immediate value to your organisation.</p>
Learn more
</div>
</div>
<span class="bar bkg-pink"></span>
</div>
<div role="tabpanel" class="tab-pane fade in" id="panel-3">
<div class="row">
<div class="col-sm-6">
<img src="http://hawk.cloudlevel.me/images/uploads/tutortraining.png" class="img-responsive" title="" alt="" />
</div>
<div class="col-sm-6 panel-padding">
<div class="stat color-yellow"><span class="stat-number">95%</span><span class="stat-desc">had a positive impact on their career</span>
</div>
<h2>Inspiring training for aspiring teachers and assessors</h2>
<p>
<br />Take advantage of our accredited Level 3 and 4 qualifications for those who want to get into teaching, external assessing or internal quality control for assessments. Flexible, relevant and giving you the practical skills you need, our
courses are designed to be easy to access, and help you take the next step in your career.</p>
Learn more
</div>
</div>
<span class="bar bkg-yellow"></span>
</div>
<div role="tabpanel" class="tab-pane fade in" id="panel-4">
<div class="row">
<div class="col-sm-6">
<img src="http://hawk.cloudlevel.me/images/uploads/1.png" class="img-responsive" title="" alt="" />
</div>
<div class="col-sm-6 panel-padding">
<div class="stat color-green"><span class="stat-number">93%</span><span class="stat-desc">would recommend to a friend</span>
</div>
<h2>Take the first steps towards being an outstanding apprentice</h2>
<p>
<br />Earn and learn across a variety of exciting sectors and jobs, improving your skills, gaining valuable experience and boosting your career from the very beginning.</p>
Learn more
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Since I do want to use the same panel on every page in a jQuery multipage html file, I'm interested in using the same code for every page.
This should work with external panels. However, I do have a problem with the positioning: As far as I can see, an external panel always opens on the full page height. What I want to have is instead the same behavior as the panel in the jQuery mobile demo page:
always visible on big screens (e.g. desktop browser) and,
when always visible, "inside" the page (e.g. below the header).
All in all: I wan't to create an external panel with the exact behavior of the (internal) panel on the demo page.
My first thought was to include an external html file on every page, so I can at least only edit this single file to save it everywhere. This looks great at first, but doesn't work at all because then the elements would have the same id (e.g. using forms in the panel).
Is there a clean solution for this problem?
The exact CSS and HTML from the JQM Demo Page is (see below). The JQM Demo page shows the panel below the header if the browser window is larger than 60em --- 960px and in my demo i set it 40em
External Panels go at end of data role page(s).
Demo expand the window to reveal the panel
https://jsfiddle.net/jag6ose3/
Html
<div data-role="page">
<div data-role="header">
<h1>External panels</h1>
Opanel
</div>
<div role="main" class="ui-content my-content">
<h1>Content Area</h1>
</div>
</div>
<div data-role="panel" id="my-panel" data-position="left" data-display="overlay" data-theme="a">
<br>
<ul data-role="listview">
<li>The Panel</li>
<li>option A</li>
<li>option B</li>
<li>option C</li>
<li>option D</li>
</ul>
</div>
Css
#media (min-width: 40em) {
#my-panel {
visibility: visible;
position: relative;
left: 0;
clip: initial;
float: left;
width: 25%;
background: none;
-webkit-transition: none !important;
-moz-transition: none !important;
transition: none !important;
-webkit-transform: none !important;
-moz-transform: none !important;
transform: none !important;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.my-content {
width: 67%;
padding-top: 2em;
padding-left: 5%;
padding-right: 3%;
float: right;
}
.opanel {
visibility:hidden;
}
}
Code
$(function () {
$("body>[data-role='panel']").panel(); //initialize the external panel
$(document).on("click", ".opanel", function () {
$("#my-panel").panel("open")
});
});
There is a more complex example. Width of panel is 300px and window is less then 900px, icon .opanel will be displayed.
<script id="panel-init">
function resizeP() {
var cw = $("body").prop("clientWidth");
var padding2x = 32;
if (cw > 900) {
$(".my-content").width(cw - 300 - padding2x);
}
else
$(".my-content").width(cw - padding2x);
}
$(function () {
$("body>[data-role='panel']").panel(); //initialize the external panel
$(document).on("click", ".opanel", function () {
$("#my-panel").panel("open");
});
});
$(document).ready(function () {
resizeP();
});
$(window).resize(function () {
resizeP();
});
</script>
<style>
##media screen and (min-width: 900px) {
#my-panel {
visibility: visible;
position: relative;
left: 0;
clip: initial;
float: left;
width: 300px;
background: none;
-webkit-transition: none !important;
-moz-transition: none !important;
transition: none !important;
-webkit-transform: none !important;
-moz-transform: none !important;
transform: none !important;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.my-content {
width: 300px;
/*padding-top: 2em;
padding-left: 5%;
padding-right: 3%;*/
float: right;
}
.opanel {
visibility: hidden;
}
}
.ui-content {
padding: 16px;
}
.countBubl {
float: left;
margin-top: -30px;
margin-left: 35px;
background: #ed1d24;
color: #fff;
padding: 2px;
}
.ui-li-static.ui-collapsible > .ui-collapsible-heading {
margin: 0;
}
.ui-li-static.ui-collapsible {
padding: 0;
}
.ui-li-static.ui-collapsible > .ui-collapsible-heading > .ui-btn {
border-top-width: 0;
}
.ui-li-static.ui-collapsible > .ui-collapsible-heading.ui-collapsible-heading-collapsed > .ui-btn,
.ui-li-static.ui-collapsible > .ui-collapsible-content {
border-bottom-width: 0;
}
</style>
<div data-role="page">
<div data-role="header">
<h1>External panels</h1>
Opanel
</div>
<div role="main" class="ui-content my-content">
<h1>Content Area</h1>
<button>dds</button>
<p>A paragraph with a tooltip. Learn more</p>
<div data-role="popup" id="popupInfo" class="ui-content" data-theme="a" style="max-width:350px;">
<p>Here is a <strong>tiny popup</strong> being used like a tooltip. The text will wrap to multiple lines as needed.</p>
</div>
<ul data-role="listview" data-inset="true" data-divider-theme="a">
<li data-role="list-divider">Mail</li>
<li>Inbox</li>
<li>Outbox</li>
<li data-role="list-divider">Contacts</li>
<li>Friends</li>
<li>Work</li>
</ul>
<div data-role="footer">
<div data-role="navbar">
<ul>
<li>Summary <span class="ui-li-count ui-btn-corner-all countBubl">12</span></li>
<li>Favs</li>
<li>Setup</li>
</ul>
</div><!-- /navbar -->
</div>
</div>
<div data-role="panel" id="my-panel" data-position="left" data-display="overlay" data-theme="a">
<div data-role="collapsibleset" data-theme="a" data-inset="false">
<div data-role="collapsible">
<h2>Mailbox</h2>
<ul data-role="listview">
<li>Inbox <span class="ui-li-count">12</span></li>
<li>Outbox <span class="ui-li-count">0</span></li>
<li>Drafts <span class="ui-li-count">4</span></li>
<li>Sent <span class="ui-li-count">328</span></li>
<li>Trash <span class="ui-li-count">62</span></li>
</ul>
</div>
<div data-role="collapsible">
<h2>Calendar</h2>
<ul data-role="listview" data-theme="a" data-divider-theme="b">
<li data-role="list-divider">Friday, October 8, 2010 <span class="ui-li-count">2</span></li>
<li>
<a href="index.html">
<h3>Stephen Weber</h3>
<p><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p>
<p>Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p>
<p class="ui-li-aside"><strong>6:24</strong>PM</p>
</a>
</li>
<li>
<a href="index.html">
<h3>jQuery Team</h3>
<p><strong>Boston Conference Planning</strong></p>
<p>In preparation for the upcoming conference in Boston, we need to start gathering a list of sponsors and speakers.</p>
<p class="ui-li-aside"><strong>9:18</strong>AM</p>
</a>
</li>
<li data-role="list-divider">Thursday, October 7, 2010 <span class="ui-li-count">1</span></li>
<li>
<a href="index.html">
<h3>Avery Walker</h3>
<p><strong>Re: Dinner Tonight</strong></p>
<p>Sure, let's plan on meeting at Highland Kitchen at 8:00 tonight. Can't wait! </p>
<p class="ui-li-aside"><strong>4:48</strong>PM</p>
</a>
</li>
<li data-role="list-divider">Wednesday, October 6, 2010 <span class="ui-li-count">3</span></li>
<li>
<a href="index.html">
<h3>Amazon.com</h3>
<p><strong>4-for-3 Books for Kids</strong></p>
<p>As someone who has purchased children's books from our 4-for-3 Store, you may be interested in these featured books.</p>
<p class="ui-li-aside"><strong>12:47</strong>PM</p>
</a>
</li>
</ul>
</div>
<div data-role="collapsible">
<h2>Contacts</h2>
<ul data-role="listview" data-autodividers="true" data-theme="a" data-divider-theme="b">
<li>Adam Kinkaid</li>
<li>Alex Wickerham</li>
<li>Avery Johnson</li>
<li>Bob Cabot</li>
<li>Caleb Booth</li>
<li>Christopher Adams</li>
<li>Culver James</li>
</ul>
</div>
</div>
#*<br>
<ul data-role="listview">
<li>The Panel</li>
<li>option A</li>
<li>option B</li>
<li>option C</li>
<li>option D</li>
</ul>*#
</div>
</div>
I have this div and I have set its z-index : 99999, its working fine on firefox and safari, but when I ma testing it on chrome , the footer is not the top element,
What else should I do to make it topmost element
<div id="footer" style="z-index: 99999 !important; width: 100%; height: 65px; position: fixed; bottom: 0px; ">
<div class="container">
<div class="footer-nav">
<ul>
<li>Team</li>
</ul>
<ul>
<li>Jobs</li>
</ul>
<ul>
<li><Twitter></li>
</ul>
</div>
<hr>
</div>
</div>
http://jsfiddle.net/A5jcT/2/
<div id="footer">
<div class="container">
<div class="footer-nav">
<ul>
<li>Team</li>
</ul>
<ul>
<li>Jobs</li>
</ul>
<ul>
<li><Twitter></li>
</ul>
</div>
<hr>
</div>
</div>
#footer
{
border:1px solid blue; z-index: 9999;width: 100%;
height: 65px;position: ; bottom: 0px;
}
.container
{
border:1px solid red;position:relative;z-index: -10
}
.footer-nav
{
border:1px solid green;position:relative;z-index: -20
}
it looks like you have to make other elements also positioned. Now you have the footer on top.