A lot of topics on this... but not getting the point how to do it.
I have my JQM Header and Footer. I want the content area to fill the 100% height in between head and foot.
Thats my code, how is it possible?
<body>
<div data-role="page" id="entryPage" data-theme="d">
<div data-role="header" id="header" data-position="fixed" data-theme="d">
<h1>Page Title</h1>
</div><!-- /header -->
<div data-role="content" id="content" data-theme="d">
<div id="columnwrapper">
<div id="leftcolumn">
<div class="innertube">
Point 1
</div>
<div class="innertube">
Point 1
</div>
</div>
</div>
<div id="rightcolumn">
<div class="innertube">
<div id="switch1">
test
</div>
</div>
<div class="innertube">
test2
</div>
</div>
<div id="contentcolumn">
<div class="innertube">Content</div>
<div class="innertube">Content</div>
</div>
</div><!-- /content -->
<div data-role="footer" id="footer" data-position="fixed" data-theme="d">
<div id="switch2">
Expand main menu
</div>
</div><!-- /footer -->
</div><!-- /page -->
</body>
CSS:
#columnwrapper{
float: left;
width: 100%;
margin-left: -75%; /*Set left margin to -(contentcolumnWidth)*/
background-color: #C8FC98;
}
#leftcolumn{
margin: 0 40px 0 75%; /*Set margin to 0 (rightcolumnWidth) 0 (contentcolumnWidth)*/
background: #C8FC98;
}
#rightcolumn{
float: left;
width: 40px; /*Width of right column*/
margin-left: -40px; /*Set left margin to -(RightColumnWidth)*/
background: yellowgreen;
}
#contentcolumn{
float: left;
width: 75%; /*Width of content column*/
background-color: blue;
}
.innertube{
margin: 0px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}
Actually the inner area only fills the height depending on the content... means 2 divs 2 rows, but not 100%..
Thanks
The CSS position: fixed doesn't work correctly in mobile browsers. My experience is with Android and iOS browsers and none of them impliment position: fixed properly (the exception is the iOS 5 browser but it's still in beta).
Rather than fixing an element to the screen and not moving it when the user scrolls in mobile browsers it tends to be treated like position: absolute and it moves when the page scrolls.
Also using the CSS overflow property won't allow scrolling on most mobile devices (iOS supports it but the user has to know to use two fingers while scrolling in a scrollable-div).
You can however use CSS but be aware you will need to use position: absolute or you can use JavaScript to set the heights on the elements.
Here is a jQuery Mobile solution using JavaScript to set the heights of the pseudo-page elements:
$(document).delegate('#page_name', 'pageshow', function () {
var the_height = ($(window).height() - $(this).find('[data-role="header"]').height() - $(this).find('[data-role="footer"]').height());
$(this).height($(window).height()).find('[data-role="content"]').height(the_height);
});
To get a flawless finish you need to take into consideration the behavior of the target device's address bar because if you want a fullscreen webpage then you have to add the height of the address bar to the height of the page.
Thanks, Jasper! That helped me a lot.
I had to mess around a lot to get this to work with multiple headers/footers, and to account for the url bar in ios. I thought I would share my solution for any one else having this issue.
This is working for me so far in ios simulator, but I would be eager to hear how it works on other devices.
/* detect device */
var ua = navigator.userAgent,
iphone = ~ua.indexOf('iPhone') || ~ua.indexOf('iPod'),
ipad = ~ua.indexOf('iPad'),
ios = iphone || ipad,
android = ~ua.indexOf('Android');
$(document).delegate('#the_page', 'pageshow', function () {
var $page = $(this),
$target = $(this).find('.fullHeight'),
t_padding = parseInt($target.css('padding-top'))
+ parseInt($target.css('padding-bottom')),
w_height = (ios)? screen.height-65: $(window).height(); // "-65" is to compensate for url bar. Any better ideas?
headFootHeight = 0;
// Get total height for all headers and footers on page
$page.find('[data-role="footer"], [data-role="header"]').each(function() {
var myTotalHeight = $(this).height()
+ parseInt( $(this).css('padding-top') )
+ parseInt( $(this).css('padding-bottom') );
headFootHeight += myTotalHeight;
});
var the_height = (w_height - headFootHeight);
$page
.height(w_height)
.find('.fullHeight')
.height(the_height - t_padding);
});
This script is setting a 100% height on '.fullHeight', instead of [data-role=content] to give more flexibility, but you can just add the fullHeight class to your [data-role=content] element.
One issue I'm still having is compensating for the url bar in ios, and finding a window height that works across devices. Any ideas on that?
the CSS:
footer {
display: block;
position: fixed;
left: 0;
bottom: 0;
right: 0;
height: 50px;
background-color: #333;
overflow: hidden;
z-index:1000;
-webkit-transform: translateZ(0);
opacity:.9;
}
header{
display:block;
position: fixed;
left:0;
right:0;
top:0;
height:50px;
overflow: hidden;
}
section{
display:block;
position:fixed;
left:0;
top:50px;
bottom:50px;
right:0;
overflow-y: auto;
}
nav{
display:block;
height:100%;
-webkit-backface-visibility: hidden;
}
.body{
overflow-y: hidden;
}
.bar {
border: 1px solid #2A2A2A;
background: #111111;
color: #ffffff;
font-weight: bold;
text-shadow: 0 -1px 1px #000000;
background-image: -webkit-gradient(linear, left top, left bottom, from(#3c3c3c), to(#111)); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient(top, #3c3c3c, #111); /* Chrome 10+, Saf5.1+ */
background-image: -moz-linear-gradient(top, #3c3c3c, #111); /* FF3.6 */
background-image: -ms-linear-gradient(top, #3c3c3c, #111); /* IE10 */
background-image: -o-linear-gradient(top, #3c3c3c, #111); /* Opera 11.10+ */
background-image: linear-gradient(top, #3c3c3c, #111);
}
the only html needed:
<header class="bar" id="AllHead"></header>
<div data-role="content" class="content" id="home"><section><nav></nav></section></div><!-- /content -->
<footer class="bar" id="allFoot"></footer>
</div><!-- /page -->
you can then set whatever items you want inside the footer and the bottom nav bar
this will always look right, no matter what happens, also this wont flash on and off everytime you touch something. hope it helps
Related
You know how we make code like below to make an overlay for the background image or color.
HTML
<section id="hero">
<div class="hero container">
<div>
<h1>Hello, My Name is </h1>
Porfolio
</div>
</div>
</section>
CSS
.container {
background-image: url(./img/someimg.jpg);
background-size: cover;
background-position: top center;
position: relative;
z-index: 1;
}
.container::after {
content: '';
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background-color: black;
opacity: .7;
z-index: -1
}
I understand that I have to put z-index to make the anchor tags clickable on the container. But also confused that why the overlay is still showing over the container while we put the z-index to -1.
How come the overlay is visible while the z-index is -1? How come only the text and anchor tag are getting z-index of 1?
Edit: I think i got your idea.
As mentioned here by Sir Praveen Kumar , dont use negative z-index, use only positive one i.e z-index:1 and z-index:2 .
.container {
background-image: url(./img/someimg.jpg);
background-size: cover;
background-position: top center;
position: relative;
z-index: 2;
}
.container::after {
content: '';
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background-color: black;
opacity: 0.7;
z-index: 1;
}
<section id="hero">
<div class="hero container">
<div>
<h1>Hello, My Name is </h1>
Porfolio
</div>
</div>
</section>
The reason why pseudo element wasn't entirely under the parent div was because it is a descendants of their associated element. So if you ever want to put the pseudo elements under the parent element, you will have to consider making another div on top of the parent element. Here is the post that I referred to figure my question.
I'm using Nuxt.js and Bulma. I'm making navigation using Bulma tabs(https://bulma.io/documentation/components/tabs/).
I wanna insert Bulma dropdown(https://bulma.io/documentation/components/dropdown/#hoverable-or-toggable). But it doesn't work in middle of Tabs.
I know who wanna use Bulma dropdown needs to use javascript, so I use it. But it doesn't work.
How can i fix it?
To get a dropdown working inside Bulma's tabs, you need to adjust the overflow CSS in the tabs div. I'm not sure why I had to set overflow-x and overflow-y to get this working properly, but I did.
When the dropdown is active:
overflow-x : visible;
overflow-y : visible;
When the dropdown is not active, reset to their defaults:
overflow-y : hidden;
overflow-x : auto;
Yes you can with a little amount of fiddling
There are mainly 2 problems :-
Problem 1
As bulma tabs container is flexbox, and the list of tabs are child of this flexbox, the dropdown will not be visible as it overflows out of flexbox container.
If you add overflow-y:visible to tabs container div, scrolling will happen which is not the behaviour we need
Solution
To fix this, the contents to be shown on tab selection should also come inside the tabs container as second child, so that dropdown button/link in list of
tabs has the space to show the dropdown when clicked/hovered.
#tab-container {
flex-direction: column;
height: 500px;
width: 100%
}
#content-child {
flex-grow: 1;
width: 100%
}
#list-child {
flex-grow: 0; //should be set to 0 as it will take up vertical space (it is set to 1 in bulma)
width: 100%;
}
Problem 2
When dropdown is used within bulma tabs, the anchor tags in dropdown gets styled by those specified for anchor tags in tabs.This is one of the main issue.
The dropdown shown thus will be styled very differently.
Solution
Bulma dropdown also allows us to insert div inside.
We can make use of this to overcome problem 1.
Just add this css for divs inside dropdown so as to make it behave like links.
div.dropdown-item.is-active {
background-color: rgba(55, 122, 195, 0.95);
color: #fff;
}
div.dropdown-item {
padding-right: 3rem;
text-align: left;
white-space: nowrap;
width: 100%;
cursor: pointer;
text-decoration: none;
}
div.dropdown-item:hover {
background-color: whitesmoke;
color: #0a0a0a;
}
Complete solution can be seen below and you can change as required for your use case.
div.dropdown-item.is-active {
background-color: rgba(55, 122, 195, 0.95);
color: #fff;
}
div.dropdown-item {
padding-right: 3rem;
text-align: left;
white-space: nowrap;
width: 100%;
cursor: pointer;
text-decoration: none;
}
div.dropdown-item:hover {
background-color: whitesmoke;
color: #0a0a0a;
}
#content-child {
flex-grow: 1;
width: 100%
}
#tab-container {
flex-direction: column;
height: 500px;
width: 100%
}
#list-child {
flex-grow: 0;
width: 100%;
}
<link href="https://cdn.jsdelivr.net/npm/bulma#0.8.1/css/bulma.min.css" rel="stylesheet" />
<div class="tabs is-boxed" id="tab-container">
<ul id="list-child">
<li><a>Pictures</a></li>
<li><a>Music</a></li>
<li><a>Videos</a></li>
<li><a>Documents</a></li>
<li class="dropdown is-active">
<div class="dropdown-trigger">
<a class="has-text-right custom-padding" aria-haspopup="true" aria-controls="dropdown-menu">
Drop Down
</a>
</div>
<div class="dropdown-menu" id="dropdown-menu" role="menu">
<div class="dropdown-content">
<div class="dropdown-item">Dropdown item</div>
<div class=" dropdown-item">Other dropdown item</div>
<div class=" dropdown-item is-active">Active dropdown item</div>
<div class=" dropdown-item">Other dropdown item</div>
<hr class="dropdown-divider" />
<div class=" dropdown-item">With a divider</div>
</div>
</div>
</li>
</ul>
<div id="content-child">
content
</div>
</div>
I'm looking to maintain fixed navbar irregardless of sidebar with it appearing under the navbar as in here with attached top/bottom:
http://codepen.io/redshift7/pen/VaKmjq
<div class="ui bottom attached segment">
<div class="ui inverted labeled icon left inline vertical demo sidebar menu">
Attached segment won't work with fixed navbar where it will stretch through the page. I'd rather see the answer in vue.js.
You need to make following CSS changes for this to work:
.menu {
position: fixed;
top: 0px;
z-index: 10001;
width: 100%;
}
.pusher {
margin-top: 36px;
}
.pushable {
margin-top: 0px !important;
}
Working codepen: here
I tried to place an h1 element above a div element using the css property z-index, but it's not working!
Here's my html:
<div id="header">
<div id="headerblock">
</div>
<h1>This is my header text</h1>
</div>
The #headerblock has a black surface including some transparency.
I want the h1 to be appearing above the #headerblock. As I mentioned the z-index property isn't working. Does someone have a solution for this? Or at least a reason why it's not working?
Thanks.
Gotta have a position on the h1.
h1 {
position:relative;
z-index: 500;
}
#header{
background-image: url(img/head.jpg);
background-size: 100%;
height: 520px;
width: 100%;
top:49px;
position: absolute;
margin:0 auto;
text-align:center;
}
#headerblock{
background-color:#444444;
opacity:0.7;
filter:alpha(opacity=70);
width:100%;
position:absolute;
height:200px;
}
<div id="header">
<div id="headerblock"></div>
<h1 style="color:white">This is my header text</h1>
</div>
I'd like to ask if it's possible to keep the same background image while sliding on my webpage (using the image icons).
I wanted to keep the background from the mainpage (somehow fix it there) and just make the content 'slide on it'. I used this jquery - javascript method to make the slides.
Used these old jquery function for the sliding:
/* jQuery.ScrollTo
/* jQuery.LocalScroll
/* Fire Horizontal Scroll */
(full code is on the linked page)
The 9 'slides' are put in a wrap. The first one is the mainpage.
<body>
<div id="wrap">
<div id="one"><p>ONE</p></div>
<div id="two"><p>TWO</p> « HOME </div>
<div id="three"><p>THREE</p> « HOME </div>
<div id="four"><p>FOUR</p> « HOME </div>
<div id="five"><p>FIVE</p> « HOME </div>
<div id="six"><p>SIX</p> « HOME </div>
<div id="seven"><p>SEVEN</p> « HOME </div>
<div id="eight"><p>EIGHT</p> « HOME </div>
<div id="nine"><p>NINE</p> « HOME </div>
</div>
Here is the interesting part of the css
#wrap {
min-height: 100%;
width: 900%;
overflow: hidden;
}
#one, #two, #three, #four, #five, #six, #seven, #eight, #nine {
width: 11.1%;
float: left;
text-align: center;
}
* html {background:url(images/mainfull.jpg)}
* html #full {height:100%;}
Thanks for help
[SOLVED] All you have to do is change the background position to fixed instead of absolute.
.background-image {
background: url(images/mainfull.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0;
-webkit-animation-name: fade-in;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: ease-in;
-webkit-animation-iteration-count: 1;
-webkit-animation-delay: 3s;
-moz-animation-name: fade-in;
-moz-animation-duration: 1s;
-moz-animation-timing-function: ease-in;
-moz-animation-iteration-count: 1;
-moz-animation-delay: 3s;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-animation-fill-mode: forwards;
background-image: url('images/mainfull.jpg');
background-position: center center fixed;
background-repeat: no-repeat;
}