I'm building a website in Joomla 3.x. My index.php looks like this:
<body>
<div id="wrapper">
<div id="inner_wrapper">
<div id="header"></div>
<div id="content" class="<?php echo $active->alias; ?>">
<div id="content_inside">
<div id="user1"></div>
<div id="user2"></div>
<div id="component"></div>
<div id="user3"></div>
<div id="user4"></div>
</div>
</div>
<div id="footer"></div>
</div>
</div>
So, #header and #footer have fixed height, #content doesn't. I'm trying to get #component fill the rest of available space (or to push the #footer down to the bottom of the page when there is not enough content to push it down). I tried that with min-height in css using the calc function, but it doesn't work.
Also, note that #user1, #user2 and #user3 are used only on the home page and are not displayed on other pages. #component has fixed height one the home page.
My current CSS is:
body {background-color:#FAFAFA; margin: 0; padding:0; min-height:100%;}
html {min-height:100%;}
#wrapper {min-height:100%;}
#inner_wrapper {min-height:100%;}
#header {background-color: #E0E0E0; margin:0 0 0 0; height:90px;}
#user4 {background-color: #E1E1E1; margin: 0; /*height: 126px; ----> not really here, but is generated by modules and is always like this*/}
div#footer {background-color: #151C1B; margin: 0 0 0 0; width: 100%; /*height: 430px; ----> not really here, but is generated by the module and is always like this*/}
So, I applied this code to the #component:
#component {
min-height: -moz-calc(100% - 646px);
min-height: -webkit-calc(100% - 646px);
min-height: calc(100% - 646px);
}
It doesn't work. Also, I checked and nothing overrides the min-height property.
What should I do? Any other options to achieve this effect?
Thanks!
Personally I would not used CSS33 for this as you have to manually define the height of the header and footer to then be able to set the height for the content. Yes, this is feasible, however it's not a dynamic way of doing it.
For this, I would use jQuery which gets shipped with your Joomla package. To import jQuery, simply include the following in your index.php:
JHtml::_('jquery.framework');
Then, you can use the following jQuery:
$doc = JFactory::getDocument();
$js = "
jQuery(document).ready(function($){
var viewportHeight = $(window).height(); /* Get viewport height */
var headerHeight = $('#header').height(); /* Get header height */
var footerHeight = $('#footer').height(); /* Get footer height */
/* Calculate the height */
var calculate = viewportHeight - parseInt(headerHeight + footerHeight);
/* Apply the calculate height to the component element */
$('#component').height(calculate);
});
";
$doc->addScriptDeclaration($js);
All of the above code needs to be added to your index.php at the top within <?php ?> tags
Hope this helps
Related
I have the following configuration in a simple html file:
* {
box-sizing: border-box;
}
html, body {
height: 100%;
min-height: 100%;
margin: 0;
}
section {
display: block;
width: 100%;
min-height: 100%;
padding: 1em
}
.b1 {
background: #2AC56D
}
.b2 {
background: #fae10c
}
.b3 {
background: #03a9f4
}
<section class="b1">1
</section>
<section class="b2">2
</section>
<section class="b3">3
</section>
Then I try to use AngularJS Routing in the following way: the section elements go into a template called template.html like this:
<section class="b1">1
</section>
<section class="b2">2
</section>
<section class="b3">3
</section>
And I add to the main file the AngularJS, the ng-route dependencies and the following script like this:
<script src="js/angular.min.js"></script>
<script src="js/angular-route.min.js"></script>
<script>
var app = angular.module('app', ['ngRoute']);
app.config(function($routeProvider, $locationProvider) {
$routeProvider.when('/', {
templateUrl: 'template.html'
}).otherwise({
redirectTo: '/'
});
});
</script>
</head>
<body data-ng-app="app">
<div data-ng-view>
</div>
</body>
It is working on the scripting part, but the section elements are no longer full height and look like this.
What is really the issue and, more important, how can I correct it? What I really need is to have some div's or section's at least full screen height.
Thank you.
Hmmm, To make height: 100%; work properly, you need to set in its parent div too.
Suppose this html:
<div id="main">
<section>1</section>
</div>
Then just applying 100% height in section won't work. You need to set fixed height for the parent element. So, use:
#main{
height: 100%;
}
You already set 100% height in html,body tag that's good.
So, in your case, apply like this:
div[data-ng-view]{
height: 100%;
}
I'm doing some customizations to a shopify theme for a client, and I've included a simple snippet that is just a grid of three images with a description beneath each one. The containing div of each image/description set is floated.
It renders perfectly fine on every browser except IE, which is adding some several hundred pixels of space beneath the grid. When I comment out the images, and leave everything else, the space disappears. I've tried all sorts of things, and am really at a loss on this one.
Here's my code (I took out img src and hrefs to keep it clean):
<style>
.homePageGrid {
margin-top: 125px;
margin-bottom: 125px;
}
.homePageImageGrid {
float: left;
width: 33%;
box-sizing: border-box;
padding-left: 2%;
padding-right: 2%;
}
.homePageImageGrid img {
border-radius: 10px 10px 0px 0px;
width: 100%;
}
</style>
<div class="homePageGrid">
<div class="homePageImageGrid">
<img src = "#" width = "100%">
<div class = "homePageImageLinkBox">
Cook with xx
</div>
</div>
<div class="homePageImageGrid">
<img src = "#" width = "100%">
<div class = "homePageImageLinkBox">
Shop with xx
</div>
</div>
<div class="homePageImageGrid">
<img src = "#" width = "100%">
<div class = "homePageImageLinkBox">
Give with xx
</div>
</div>
<div style = "clear:both"></div>
</div>
I've inspected the website HTML Code and find out why there is huge vertical space. Its happened because in body element display:flex property are added which I don't think is required there.
Remove display:flex property from the body element and it will perfectly work in IE as well.
I am displaying the wordpress posts on my blog index page in a masonry layout. I also have the masonry activated on footer, to display the wordpress footer widgets in a masonry layout.
So basically I have 2 masonry containers on the same page.
1. One for displaying the blog posts, and
2. Other for displaying the footer widgets.
The html markup for the page looks like this:
HTML
<!-- Posts -->
<main id="main">
<div class="testmason">
<article class="hentry">Post 1</article>
<article class="hentry">Post 2</article>
<article class="hentry">Post 3</article>
.....
.....
<article class="hentry">Post n</article>
</div>
</main>
<!-- Footer Widgets -->
<div id="footer-widgets" class="footer-widgets">
<aside class="widget">Widget 1</aside>
<aside class="widget">Widget 2</aside>
<aside class="widget">Widget 3</aside>
.....
.....
<aside class="widget">Widget n</aside>
</div>
Following is the url where I am trying to implement this layout. -- http://lanarratrice-al-rawiya.com/lanarratrice/blog/
I dont want the masonry to load on the mobile devices.
1. I want the masonry on Posts to work only when the min width of the document is 837px.
2. Also I want the masonry on Footer to work only when the min width of the document is 880px.
Any media query lower than the above width(s) will not trigger the masonry layout, and I will display all my posts and widgets in a full width (taking up the full space available). To implement this I am using enquire js, that will trigger the masonry layout if it matches the media query. Following is my javascript:
JAVASCRIPT
// Masonry settings to organize footer widgets and blog posts
jQuery(document).ready(function($){
var $container = $('#footer-widgets'),
$maincontent = $('.blog .testmason');
enquire.register("screen and (min-width:837px)", {
// Triggered when a media query matches.
match : function() {
$maincontent.masonry({
columnWidth: 200,
itemSelector: '.hentry',
isFitWidth: true,
isAnimated: true
});
},
// Triggered when the media query transitions
// from a matched state to an unmatched state.
unmatch : function() {
$maincontent.masonry('destroy');
}
});
enquire.register("screen and (min-width:880px)", {
// Triggered when a media query matches.
match : function() {
$container.masonry({
columnWidth: 400,
itemSelector: '.widget',
isFitWidth: true,
isAnimated: true
});
},
// Triggered when the media query transitions
// from a matched state to an unmatched state.
unmatch : function() {
$container.masonry('destroy');
}
});
});
And finally this is my css that is being applied on this page:
CSS
#main {
max-width: 100%;
width: 100%;
}
.testmason {
margin: 0 auto 35px;
}
#main article {
margin: 0 20px 35px;
width: 360px;
float: left;
}
#media screen and (max-width: 854px) {
#main { width: 100%; }
#main .testmason {
margin: 0 10px;
width: auto!important;
height: auto!important;
}
#main article {
float: none;
width: 100%;
margin: 0 0 35px;
}
#main .index-box {
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22);
margin: 0 auto 2em;
width: auto;
max-width: 780px;
max-width: 78rem;
}
#main .navigation {
width: auto;
max-width: 780px;
max-width: 78rem;
}
}
.index-box {
margin: 0;
}
nav.paging-navigation {
width: 90%;
position: static!important;
margin: 0 auto;
}
It seems that my javascript is working correctly, because the masonry layout is implemented. But as I resize my firefox browser window to about 846px (approx around this size), I see a broken layout. I see sometimes that the post is on top of footer. Please see this following picture attached.
To reproduce this bug you might have to shrink and expand your browser window (firefox) around 5-8 times. Sometimes if you shrink it very fast or very slow you might not see the broken layout. BTW I am using Firefox 35.0.1.
Please let me know what can I do to fix this issue. Thanks.
Add the $container.masonry() function on page load too.
The issue is, it registers the event on resize, but on load it fails to calculate the body heights to calculate the positions. As these post blocks are absolutely positioned, it bleeds over footer.
The bootstrap documentation on that topic is a little confusing to me. I want to achieve similar behaviour like in the docs with the affix navbar: The navbar is below a paragraph / page heading, and upon scrolling down it should first scroll along until reaching the top of the page, and then stick there fixed for further scrolldowns.
As jsFiddle does not work with the navbar concept, I've set up a separate page for usage as a minimal example: http://i08fs1.ira.uka.de/~s_drr/navbar.html
I use this as my navbar:
<div class="navbar affix-top" data-spy="affix" data-offset-top="50">
<div class="navbar-inner">
<div class="container">
<div class="span12">
<a class="brand" href="#">My Brand</a>
This is my navbar.
</div>
</div> <!-- container -->
</div> <!-- navbar-inner -->
</div> <!-- navbar -->
I thinkg i would want data-offset-top to be of value 0 (since the bar should "stick" to the very top" but with 50 there is at least some effect watchable.
If also put the javascript code in place:
<script>
$(document).ready (function (){
$(".navbar").affix ();
});
</script>
Any help appreciated.
I was having a similar problem, and I believe I found an improved solution.
Don't bother specifying data-offset-top in your HTML. Instead, specify it when you call .affix():
$('#nav').affix({
offset: { top: $('#nav').offset().top }
});
The advantage here is that you can change the layout of your site without needing to update the data-offset-top attribute. Since this uses the actual computed position of the element, it also prevents inconsistencies with browsers that render the element at a slightly different position.
You will still need to clamp the element to the top with CSS. Furthermore, I had to set width: 100% on the nav element since .nav elements with position: fixed misbehave for some reason:
#nav.affix {
position: fixed;
top: 0px;
width: 100%;
}
One last thing: When an affixed element becomes fixed, its element no longer takes up space on the page, resulting in the elements below it to "jump". To prevent this ugliness, I wrap the navbar in a div whose height I set to be equal to the navbar at runtime:
<div id="nav-wrapper">
<div id="nav" class="navbar">
<!-- ... -->
</div>
</div>
.
$('#nav-wrapper').height($("#nav").height());
Here's the obligatory jsFiddle to see it in action.
Just implemented this for the first time, and here's what I've found.
The data-offset-top value is the amount of pixels that you must scroll in order for the affixing effect to take place. In your case, once 50px is scrolled, the class on your item is changed from .affix-top to .affix. You'd probably want to set data-offset-top to about 130px in your use case.
Once this class change occurs, you must position your element in css by styling the positioning for class .affix. Bootstrap 2.1 already defines .affix as position: fixed; so all you need to do is add your own position values.
Example:
.affix {
position: fixed;
top: 20px;
left: 0px;
}
To fix this very issue I have modified the affix plugin to emit a jQuery event when an object is affixed or unaffixed.
Here is the pull request: https://github.com/twitter/bootstrap/pull/4712
And the code: https://github.com/corbinu/bootstrap/blob/master/js/bootstrap-affix.js
And then do this to attach the navbar:
<script type="text/javascript">
$(function(){
$('#navbar').on('affixed', function () {
$('#navbar').addClass('navbar-fixed-top')
});
$('#navbar').on('unaffixed', function () {
$('#navbar').removeClass('navbar-fixed-top')
});
});
</script>
You need to remove .affix() from your script.
Bootstrap gives the option of accomplishing things either via data-attributes or straight JavaScript most of the time.
I've got this from the twitterbootstrap's source code and it's working pretty well:
HTML:
<div class="row">
<div class="span3 bs-docs-sidebar">
<ul id="navbar" class="nav nav-list bs-docs-sidenav">
...
</ul>
</div>
</div>
CSS:
.bs-docs-sidenav {
max-height: 340px;
overflow-y: scroll;
}
.affix {
position: fixed;
top: 50px;
width: 240px;
}
JS:
$(document).ready(function(){
var $window = $(window);
setTimeout(function () {
$('.bs-docs-sidenav').affix({
offset: {
top: function (){
return $window.width() <= 980 ? 290 : 210
}
}
})
}, 100);
});
You just need to remove the script. Here is my example:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/js/bootstrap.min.js"></script>
<style>
#content {
width: 800px;
height: 2000px;
background: #f5f5f5;
margin: 0 auto;
}
.menu {
background: #ccc;
width: 200px;
height: 400px;
float: left;
}
.affix {
position: fixed;
top: 20px;
left: auto;
right: auto;
}
</style>
</head>
<body>
<div id="content">
<div style="height: 200px"></div>
<div class="affix-top" data-spy="affix" data-offset-top="180">
<div class="menu">AFFIX BAR</div>
</div>
</div>
</body>
</html>
Thanks to namuol and Dave Kiss for the solution.
In my case I had a tiny problem with navbar height and width when I used afflix and collapse plugins together. The problem with width can be easily solved inheriting it from parent element (container in my case). Also I could manage to make it collapsing smoothly with a bit of javascript (coffeescript actually). The trick is to set wrapper height to auto before collapse toggle occurs and fix it back after.
Markup (haml):
#wrapper
#navbar.navbar
.navbar-inner
%a.btn.btn-navbar.btn-collapse
%span.icon-bar
%span.icon-bar
%span.icon-bar
#menu.nav-collapse
-# Menu goes here
CSS:
#wrapper {
width: inherit;
}
#navbar {
&.affix {
top: 0;
width: inherit;
}
}
Coffeescript:
class Navigation
#initialize: ->
#navbar = $('#navbar')
#menu = $('#menu')
#wrapper = $('#wrapper')
#navbar.affix({offset: #navbar.position()})
#adjustWrapperHeight(#navbar.height())
#navbar.find('a.btn-collapse').on 'click', () => #collapse()
#menu.on 'shown', () => #adjustWrapperHeight(#navbar.height())
#menu.on 'hidden', () => #adjustWrapperHeight(#navbar.height())
#collapse: ->
#adjustWrapperHeight("auto")
#menu.collapse('toggle')
#adjustWrapperHeight: (height) ->
#wrapper.css("height", height)
$ ->
Navigation.initialize()
My solution for attach the navbar :
function affixnolag(){
$navbar = $('#navbar');
if($navbar.length < 1)
return false;
h_obj = $navbar.height();
$navbar
.on('affixed', function(){
$navbar.after('<div id="nvfix_tmp" style="height:'+h_obj+'px">');
})
.on('unaffixed', function(){
if($('#nvfix_tmp').length > 0)
$('#nvfix_tmp').remove();
});
}
Similar to the accepted answer, you can also do something like the following to do everything in one go:
$('#nav').affix({
offset: { top: $('#nav').offset().top }
}).wrap(function() {
return $('<div></div>', {
height: $(this).outerHeight()
});
});
This not only invokes the affix plugin, but will also wrap the affixed element in a div which will maintian the original height of the navbar.
I'm trying to get two Divs to sit side by side. I want one div to take up as much width as is needed and the other to to take up the remaining width so both divs span 100% width. Is this possible? I've tried floating and a bunch of different positioning settings but I can't find a solution that works. I naturally thought that adding a float: left to the left most element would work, however when you try to add padding/margin/border to the right element the browser wont apply it. Here is some code that I've extended (from an existing answer) to illustrate the problem.
<style>
#foo {
float: left;
background: red;
height: 100%;
padding: 5px;
}
#bar {
background: green;
border: solid 1px blue;
padding: 5px;
height: 100%;
}
</style>
<div>
<div id="foo">foo</div>
<div id="bar">bar</div>
</div>
If you open this code up in a browser you'll notice that the bar div isn't padded, and the border isn't applied to it... I have no idea why.
Thanks for any help.
This works:
<style>
#foo {
float: left;
background: red;
}
#bar {
background: green;
}
</style>
<div>
<div id="foo">foo</div>
<div id="bar">bar</div>
</div>
http://pastehtml.com/view/19ldeqq.html
why not use a table, set the whole table width to 100% and then each of the rows without a width, like so:
<table width="100%" border="0">
<tr>
<td><div>DIV INFO LEFT</div></td>
<td><div>DIV INFO RIGHT</div></td>
</tr>
</table>
This is using javascript, but it is the only way I have found to do this.
<script type="text/javascript">
window.onload = shouldNotBeThisHard;
window.onresize = shouldNotBeThisHard;
function shouldNotBeThisHard() {
var j = document.getElementById('divThatYouWantAllOf');
var k = document.getElementById('divForRestOfScreen');
var jh = 0;
if (j)
jh = j.clientWidth;
var h = (window.innerWidth - (jh + 30));
k.style.width= h + "px";
}
</script>
with the HTML looking like this:
<div id="divForRestOfScreen" style="float:left;overflow:auto;">
asdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsd
sdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsd
sdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsds
dsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsd
sdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsd
</div>
<div id="divThatYouWantAllOf" style="float:right" >
This is why I hate web programming.
</div>