I am trying to help a graphic designer with her website http://designingforgood.tumblr.com/
She wanted the SnapWidget which is the grid of six photos on the bottom left so I placed it there. My concern is that it gets cut off in smaller windows which may mean that on smaller screens it will also not be displayed properly.
Also, in different browsers the distance from the blue box above the photo grid changes. It looks further away in firefox than in chrome. I worry that in some other browser it may even end up overlapping.
I searched for an answer on w3schools but didn't find what I was looking for. I also searched for similar questions here on stackoverflow.
Well you have inline styles on the div containing your photos that is settings its position as fixed. Your sidebar is also set to fixed. The only way to make sure that section is scrollable is by removing both of those values and fixing it up from there.
Remove position fixed from all divs inside the sidebar.
Wrap both sidebar and thumbnails inside another div and give an id sidebar-container to this div. You should end up with this main structure for your sidebar:
<div id="sidebar-container">
<div id="blue-box">...</div>
<div id="photo-grid">...</div>
</div>
Fix any css problems you have. Make sure website looks good in both situations, when sidebar has fixed position and when it hasn't. Maybe you want to float the sidebar to work well in both cases.
Use jQuery (I see you load it anyways) to determine if the height of the #sidebar-container is less than the height of the window and only then, we add position:fixed;.
The jQuery code might be like this:
function checkHeight() {
var sidebarHeight = jQuery("#sidebar-container").height();
var windowHeight = jQuery(window).height();
if( sidebarHeight <= windowHeight ) {
jQuery("#sidebar-container").css({ 'position' : 'fixed' });
} else {
jQuery("#sidebar-container").removeAttr("style");
}
}
jQuery(document).ready(checkHeight);
jQuery(window).resize(checkHeight);
So, users with big screens will benefit from the fixed sidebar and users with small screens will have the ability to view the whole sidebar by scrolling down.
Related
I'm using Astra template with Elementor plugin.
I've set up my navbar to be fixed - to scroll alongside the webpage, but now my items are appearing under it. And i'm not talking about the z-index issue, but the first thing that comes after navbar - breadcrumbs + title are both under navbar.
.main-header-bar-wrap{
position:fixed;
top:0;
width:100%;
}
I solved the issue using --
padding-top:100px;
But i don't really think that's the best practice.
Is there any better solution?
Thank you!
There's not really one foolproof way of doing this unfortunately. Fixed elements are taken completely out of the flow of the page and how it renders so don't take up any space. https://developer.mozilla.org/en-US/docs/web/css/position#fixed
The way you've done it is one option, another is to change the padding to match the height on resizing the window (to make sure the height is always correct).
e.g. something like:
$(window).resize(function () {
$(".main").css("padding-top",$(".main-header-bar-wrap").outerHeight());
})
The other option is to create a hidden duplicate of the header, with position: relative and visibility: hidden, which will take up the required space but not be visible. Just make sure to add the aria-hidden="true" property so people with screen readers don't end up with a duplicate menu.
You could do this with js as follows:
$( ".main-header-bar-wrap" ).after(
$(".main-header-bar-wrap").clone().addClass("spacer").attr("aria-hidden","true")
);
This will duplicate the header and add the class spacer to the second version so you can style it separately with the visibility and position properties, along with the aria-hidden attribute.
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");
}
}
});
});
This probably was answered somewhere, but I can't find it :s
My question is about dynamic resizing of divs based in percentages.
Please look at code example below for the examples and possible solutions I made.
I ask if there is a better way to do resizing?
More detailed explanation:
Say I am writing a plugin that people can insert in their pages. (Imagine login form).
I go ahead and design the plugin's divs. I use media queries to achieve desired look for different devices. I work on a div straight inside of a 'body' element.
I use percentages for design (I like percentages). Say I set div to 80% width.
Now I give this plugin to the user. User goes ahead and puts the plugin's div inside of another
div that is 100px in width. Now everything looks awful. (80% of 100px is not a lot [80px]).
And of course I want user to put my plugin inside of whatever small-width divs that he have.
The solutions I saw so far to this problem was to create a holder div of certain width - say hardcode 300px. (ex - jQuery UI's Datepicker div; Meteor's login widget div). And then code to it always knowing the 300px width that I set before is not going to change.
But I don't know how good of a solution this is.
Moreover if I decide to go with hard-coding width, my plugin would need width of ~ 1000px. Because I want div to resize with media queries.
And if I go with hard-coding width (say holder div of 1000px width) and put it on a page, the page will have horizontal scrolling. And you cannot simply hide holder div (parent div) and have child to show at the same time. So this requires setting position:relative for holder (parent) div, putting it outside of window, and use same for child div - position:relative with same offset in opposite direction of parent offset.
I hope I am being clear so far and have not confused you!
A code example to illustrate what I am talking about:
http://jsbin.com/ifawez/18/edit
#cimmanon's comment cleared things out for me.
The problem is with lack of HTML/CSS "tools" available at the moment. Since responsiveness came into play fairly recently there are not a lot of CSS-native tools to accommodate changes in dimensions.
For instance media-queries exclusively work with width of window/document and not of other elements such as divs.
The solution I currently employ is using Javascript to determine width of a div and resize accordingly.
What I resize is the number of columns I want to display (I use Multi-Column module as suggested by cimmanon) which is pretty stable on webkit browsers. Since it is all done in Javascript (and jQuery's Sizzle) I keep an array of sizes like so:
var widthArray = [
{min:0, max:250, columns:1, secondary:false},
{min:251, max:350, columns:1, secondary:true },
{min:351, max:479, columns:1, secondary:true },
//more div sizes
];
// more code here
$(element).css({
"column-count": object.columns,
"-moz-column-count": object.columns,
"-webkit-column-count": object.columns
});
This is sort of like media-queries, but allows to work with width of html elements, not screen size alone.
Additionally I follow the way jQuery UI displays its components: using position relative/absolute.
.outer_div {
position: relative;
}
.inner_div_with_elements {
position: absolute;
z-index: 1010;
width: 99%;
float: left;
overflow: hidden;
...
}
.inner_components_displayable {
position: relative;
display: block;
}
.inner_components_hidden {
display: none;
}
So in Summary:
Media queries alone work with size of screen, and resizing of any inner element can be done in percentages to the screen size. They can be of huge help, but you turn into making your components work either with percentages based off screen, or specifying something like min-height and !important (as suggested by #Octavian)
Javascript manipulation of elements is currently easier, but is a costlier alternative (jQuery SIzzle is pretty slow)
A lot of libraries (ex. jQuery UI) use Javascript together with position relative/absolute to make sure their components/plug-ins will work nicely on all users' screen sizes.
I ended up combining position with javascript to emulate media-queries and multi-column design at the same time for responsiveness.
Thanks everyone who participated!
If I am reading this correctly, the main issue here is that it can potentially become too small based on where the code is located.
So why not just add a min-width property with !important? That way you can still base the size off of the parent container, but be sure that it doesn't get too small and ugly.
Potentially, you could even have a script to base the width off of the parent div and the min-width off of the screen size.
So I can't get the footer on this page: http://hiddenhillsweddings.com/ to extend to the bottom of the browser window. I've tried all of the different positional attributes (absolute, relative, etc..) and I've tried all kinds of different combinations with minimum and maximum height at 100% and other values. I have read many threads on this forum about this topic but haven't found a solution. I'm pretty sure what I need is a position: absolute; and a height of 100% but for some reason when I do this the footer extends way past the bottom of the browser and I can't hide the overflow to get rid of the scroll bar. Someone please help me.
You have just found one of web developers' most usual problems... There are many solutions to this, some pure CSS, other with JavaScript. There are some good tutorials on this subject already written:
http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
http://fortysevenmedia.com/blog/archives/making_your_footer_stay_put_with_css/
I personally do it via jQuery, I find it to be more reliable. I place the footer below everything, with display:block and normal position. Then I check if the content is smaller than the page, in which case I change the position to absolute and bottom:0;
Once that is done, I check on window resize in case the scenario changes. It's probably not optimal, but it works great:
function footer(){
var offset = $('#footer').offset();
var footerHeight = $('#footer').height();
var height = window.innerHeight;
if(height-offset.top-footerHeight>0)
$('#footer').css({'position':'absolute', 'bottom':0, 'width':'100%'});
else
$('#footer').css({'position':'static'});
}
Just make sure you change #footer for the ID of your footer element.
As you can see if you go to the link below in IE7/AOL, the layout breaks if you resize the window. However, click the products menu tab and it rights itself. I haven't a clue why or how to fix it, and it looks sloppy. On resizing the page, the logo and breadcrumb trail div stay where they ought to be, but my horizontal nav menu and everything below the breadcrumb div end up about 20-30 pixels off to the right. On refreshing the page, changing page, or opening a pull down menu item, it all falls back into the correct alignment.
link text
It is working as it should. The li elements in the menu are all floating to the available space. If the window does not have enough space they will float to the next available line. Nothing to see here.
Just use the CSS min-width to stop the DIV from becoming too small for the menu. Or consider a rigid layout (as oposed to a flexible one).
Add the following line to your div to make it work.
#outer {
min-width:790px;
}
To fix incorrectly rendered (in ie7) divs, which correct themselves after hovering over something else, mousing out, or any other weird event, use the below jQuery:
if ($("html").hasClass("ie7")){
var tempHolder = $("#ajaxresults").html();
$("#ajaxresults").html(tempHolder);
}
The logic is pretty simple, and I'm imagine you could do it just as easily with javascript's "innerHTML". Just rewrite the html contents of the div that's misbehaving, and this'll cause it to recompute the styles.
As for giving the html or body tag the ie7 class, I recommend taking a look at html5boilerplate.com. If for some reason you can't use their solution, the jquery for it is:
if ($.browser.msie){
if ($.browser.version < 8){
$("html").addClass("ie ie7");
}
else {
$("html").addClass("ie");
}
}