I'm attempting to create a column in css that is 100% height of the page. Specificially the left column with the background transparency.
I've tried to make the contain use the overflow: hidden, but it doesn't seem to be working. I know I'm targeting the issue incorrectly and and I think that the header and footer are messing the columns up.
You could set the height with javascript ( using jQuery in this case) at page load :
$(function () {
$('.left_col').height($(document).height());
});
and just in case the user resizes the window :
$(window).resize( function () {
$('.left_col').height($(document).height());
});
For this idea you want to apply the Faux Column technique. This is how a 100% sidebar is done. You have a repeating image that extends to the bottom of the page, making it appear as it is an actual sidebar.
Related
I want to create a div with CSS (preferably without any library) whose contents can be slided right/left on mouse-click if the content of the div is larger than the div width. Like below:
I tried with overflow-scroll but that gives a scroll-bar which is not what I want. Is it possible to create this with CSS and JavaScript (AngularJS, which I am using in my app) combination, without using any other library? I can use jQuery if it can done using that.
Update: Created a working demo after #Shnibble's answer.
$("#left").mousedown(function() {
var y = $("#content").offset();
$("#content").animate({
left: 0
}, function callback() {
$("#left").fadeOut();
});
});
$("#right").mousedown(function() {
var y = $("#content").offset();
$("#left").show();
$("#content").animate({
left: y.left - 200
});
$("#info").text(y.left - 100);
});
I'm not sure I know exactly what you want, do you want the <> arrows to scroll the content or do you want to click+drag the content left and right? Both can be accomplished with JQuery.
The former can be done by having the parent container positioned as relative and the content within positioned as absolute. Then you can use JQuery to alter the left offset of the content +/- depending on which arrow is clicked.
For the latter, you would do the same setup but check the mouse coordinates on click and apply the difference to the content left attribute until the mouse button is released.
As for making all of this only happen if the content overflows, you will need to do some checking with JQuery again to measure the width of the content and compare it to the parent container and only allow one of the above functions to run if the content is wider.
Alternatively, you co use overflow-x: auto and then style the scrollbar to fit in with your theme better? See here: https://css-tricks.com/custom-scrollbars-in-webkit/.
I'm currently working on a CSS-based 3-column layout that has the following requirements:
On the desktop…
…all columns are shown.
On mobile devices…
…only the middle column is shown.
…the left column can slide in from the left, triggered by a swipe or a tap on a button.
…the right column can slide in from the right, triggered by a swipe or a tap on a button.
Independent of the device…
…the middle column contains three rows: The main header, a sub header, and the actual content.
…the main header scrolls away when scrolling down.
…the subheader is sticky on the top of the screen when scrolling down.
Now I tried to implement this:
Creating a 3-column layout and hiding the left and right columns is easy, using Bootstrap.
Having three rows in the middle column is easy, too.
To make the subheader sticky, I have two options:
Use position: sticky (best solution in technical terms, but not supported by any browser).
Use a script, attach to the scroll event and change to position: fixed on demand. This is what Bootstrap offers OOTB with its affix plugin. Using this plugin, it's an easy task, too.
Creating two sidebars and sliding them in is easy as well, using something such as Snap.js.
Problems start when I want to combine the sticky subheader with the sliding sidebars: The affix plugin simply stops working, and the subheader is not sticky any more. Basically, the problem comes down to issues with CSS transform and position: fixed, see Eric Meyer's awesome blog post on this and this answer.
One option to solve this could be to put the headers above the area where the sidebars slide in, so that they are not affected, but this is not what I want: I want the sidebar to push away everything.
How can I solve this? Is this possible at all?
Consider this post:
Applying snap.js to my main content wrapper seems to break *some* of my jQuery functions
Bootstraps affix.js listens to the $(window).on('scroll'... event. Snap.js seems to change the scrollable element from the "window" element to the element where you added the "snap-content" class. I dont see any other solution as to write the sticky functionality provided by bootstrap yourself.
Use this as a reference. Based on your current scroll position (in pixels) you can add css attributes or even whole css classes to the element you want to make sticky:
jQuery(document).ready(function ($) {
$('.snap-content').scroll(function () {
if ($(this).scrollTop() > 140) {
if ($("#navbar").css('position') !== 'fixed') {
$("#navbar").css("position", "fixed");
}
} else {
if ($("#navbar").css('position') !== 'static') {
$("#navbar").css("position", "static");
}
}
});
});
I've been looking around and I can not find anything that solve this problem.
I have a container div, inside this one, I have few floated div, their content is generated dynamically and can vary from few words to almost a page. this basically create a line of a table (I do not want to use table layout for some reasons).
I successfully made the container expand to the bigger of the content using overflow:hidden;
Now I would like all my divs to adapt to the container height.
you can set a class to all the div's inside the container ... let's say class="contained"
then you can add a js function to run when the document is generated that finds the max-height of all the contained div's and sets the same height to all the others.
$(function() {
var maxheight=0;
$(".contained").each( function () {
if (maxheight<$(this).height()
maxheight=$(this).height();
});
$(".contained").each( function () {
$(this).height(maxheight);
});
}
I have a header that is 100% of the page and should have a background-color.
Then I have my content div centered and along width that an extra div to the right for ads.
When shrinking the window so that all content + ads doesn't show I have a horizontal scroll which works great except for that the header looses the background-color for the part which was outside the viewport. How can I get the background-color to run all the way?
A simple solution is to set the top background-color on body instead but we'll want the same design on a future footer. We can't use multiple backgrounds because of browser support issues.
Example page: http://niklasholmberg.se/test.html
As others have pointed out, the problematic thing here is that your "right" column is taken out of normal flow and is therefore not actually part of the "page". Browsers are (IMO) correct in not painting the background all the way to the right in the "head"... but (again IMO) wrong in even allowing you to scroll to see the right column when it is outside the page bounds.
If you set overflow on the boby to hidden you solve the problem of the background... but of-course you don't make advertisers happy that way :)
Suggestion
Maybe it is enough to get what you need:
#fakebg {
position:absolute;
top:0;
width:1102px;
background:#000;
margin:0;
z-index:-1;
}
http://jsfiddle.net/Mfsx6/1/
In summary: I added a dummy div to the head with the same offset placement as the right column. This gives us a surface there to add a background to.
I think the problem you're having is not that the background doesn't run all the way. It's that the content DIV is being resized by your use of right:-200px; That essentially makes the content DIV 200px larger than it should be, pushing it outside of the BODY.
If you set #right to use right:0px; the problem no longer exists.
I'm not sure if that renders correctly for your needs though.
V.
Set the min-width value for the #head. For my resolution it is working perfectly with min-width:1102px.
try this out.
Going further on #Martin Westin's answer, to make it work for any size window dynamically:
I added a div with id = "full-width-bg" to the header where I needed the background to stretch all the way across. Custom.Toolbox.getFullWidth() gets the actual size of the DOM whether it is in the viewport or not, so it includes overflow and the entire width of the page. Then we set the width of #full-width-bg to the full width.
window.Custom = window.Custom || {};
Custom.Toolbox = {
init: function(){
Custom.Toolbox.fixBG('#full-width-bg');
jQuery( window ).resize(function() {
Custom.Toolbox.fixBG('#full-width-bg');
});
},
getFullWidth : function(){
return Math.max(document.documentElement["clientWidth"], document.body["scrollWidth"], document.documentElement["scrollWidth"], document.body["offsetWidth"], document.documentElement["offsetWidth"]);
},
fixBG : function(selector){
jQuery(selector).css('width', Custom.Toolbox.getFullWidth() + 'px');
}
}
jQuery(function(){
Custom.Toolbox.init();
});
My jQuery UI dialog contains two div elements. One has a fixed height and should be aligned at the bottom of the dialog at all times. The other one should take up the remaining space.
Basically I’d like all the dimensions highlighted in blue to remain unchanged on resize. Or, in other words, the red div resizes in both dimensions but the green div keeps its height.
What’s the easiest way to do this in jQuery UI or even just plain CSS?
I’ve found a way to do this that doesn’t use any JavaScript. It doesn’t even involve any hacks; just plain normal CSS3. Fiddle here: http://jsfiddle.net/nty5K/16/
Basically, both divs are position: absolute, and each of the sides is anchored individually using the top, bottom, left and right properties. The top div has all four positions specified, making it resize with the container while preserving the exact distance to each edge of the container. The bottom div has three of the positions fixed, whereas the top is defined only indirectly, via a fixed height.
In practice, the divs will need to be placed into a wrapper div that has position: relative, otherwise the top/bottom divs will be positioned relative to the body element.
Not sure about browser compatibility yet, but this worked fine in Firefox 10, IE9 and Chrome 17. Didn’t test this in earlier versions.
Corporate firewall is blocking images, so I am guessing what you are after based on other comments.
EDIT:
Now that I can see what you are after, I have updated my fiddle accordingly. Including the code below for completeness.
I would write a function to calculate the size of the dialog, subtract the height of the fixed div and set the height of the dynamic div to this calculated value. I would then bind a call to this function to the resize event of the dialog. Here is a fiddle, may need some tweaking for your exact layout but should be close.
One gotcha worth noting is that some browsers may not calculate correctly while they are in the middle of a scroll/resize event, queing the calculations to occur after the resize event completes with setTimeout resolves the issues, though it does make the change a bit jumpy while the resize is in progress. See this question and answer for details.
function SetDivHeight() {
var $DynamicDiv = $('div.dynamic');
var $FixedDiv = $('div.fixed');
var $Container = $(window); //Update for containing element
/*Calculate the adjustment needed to account for the margin and
border of the dynamic div.*/
var HeightAdjustment = $DynamicDiv.outerHeight(true) - $DynamicDiv.height();
/*Get the values of the top and bottom margins which overlap
between the two divs.*/
var DynamicBottomMargin = parseInt($DynamicDiv.css('marginBottom'));
var FixedTopMargin = parseInt($FixedDiv.css('marginTop'));
/*Adjust for the overlapping top/bottom margin by subtracting
which ever is smaller from the adjustment value.*/
if (DynamicBottomMargin >= FixedTopMargin) {
HeightAdjustment -= FixedTopMargin;
} else {
HeightAdjustment -= DynamicBottomMargin;
}
/*subtract the height of the fixed div from the height of the
container, subtract the calculated height adjustment from that
value, and set the result as the height of the dynamic div.*/
$DynamicDiv.height(($Container.height() - $FixedDiv.outerHeight(true)) -
HeightAdjustment);
/*May need to use $Container.innerHeight instead, if container
is not a window element.*/
}
var t;
function QueueSetDivHeight() {
if (t) {
clearTimeout(t);
}
t = setTimeout(function() {
SetDivHeight();
}, 0);
}
$(document).ready(function() {
SetDivHeight();
$(window).resize(QueueSetDivHeight);
//Bind to resize of container element instead/as well
});
Just CSS... check it out!
Set a margin to the container and a margin-top to the bottom fixed div. No jQuery required.