.leavesbg {
background: #f7fff7 url(/images/leaves4.png) repeat-y fixed 480px top;
}
So if the page is being viewed at greater than 800px wide, I'd like to move the bg image half that much further to the right. That is to say, if they were viewing it in 1024x640 for example, I'd like to add 112 ((1024-800)/2) to the width (so ... fixed 592px top;
Here's my jquery attempt to move it
function moveBG() {
var bgoffset =480;
var pagewidth = $('body').width();
if (pagewidth>800) {
bgoffset=pagewidth-bgoffset;
bgoffset=bgoffset/2;
}
$('.leavesbg').css(background-position: bgoffset +'px top');
}
$(document).ready(function(){
moveBG();
$(window).resize(moveBG);
});
I expect I'm just forgetting something simple, but I'm still relatively new to jQuery.
bgoffset=bgoffset+'px top';
$('.leavesbg').css('background-position', bgoffset );
So I was doing some of the original math wrong (but that's not terribly relevant to the actual question), but as far as I can tell the actual error in my code was the "change the css" line, and I think this works. There's probably a better and more efficient way to to this then the cobble I have have above, so I'd still welcome suggestions for how to code it better.
Thanks.
I answered this in a similar question with this fiddle:
http://jsfiddle.net/9ZgWg/26/
Here's the original question: centering an img within a div - both being resized
Good, you caught the syntax error in .css(attr,value) assignment. However if your pagewidet <= 800 the background-position is "480" not "480px top;" which I think is what you want. Also remember the common gotcha with css, if your element with a class of '.leavesbg' has a style attribute after the class attribute, and the style has 'background-position', it wins.
Related
I am working on a site where certain sections have 100% height. To achieve this I am using the new css3 unit vh as a min-height (100vh).
In each section there is also a element which is absolute positioned and aligned with the bottom of the page. You can see an example of it here.
The problem which occurs is that on a smaller screen the button shows up upon the text.
I know that I could e.g. let the button disappear on smaller screens with #media; instead I would like to know if there is a css3 possibility in doing something like this:
.element {
min-height: 100vh && 200px;
}
Any other css tricks too achieve this are also appreciated (I can change the markup).
No, it makes no sense to use like that. You must use media query.
If it was to be added like you mentioned it would just sense if vh is undefined px would take.
But to say, it would never be applied like so.
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.
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();
});
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.
Basically I'm a tad confused. You'll see at http://furnace.howcode.com , in the second column, the bottom scrollbar button is extended slightly beyond the end of the viewport. I'm pretty confused as I've been examining the CSS and can't find anything that's causing this.
Can you have a look? It's probably something simple that I've just missed! :)
Screenshot:
(source: droplr.com)
It's because you have used a fixed pixel height on #tabscontainer but a percentage on #ajaxresults. Resizing the window will show (or cut) more of the scrollbar since 90px won't always be 10% of the viewport.
The easiest way to fix this is to set #tabscontainer to have height:10%.
EDIT: Just noticed your comment about the tabs being a fixed height. Looking for an alternative fix.
Okay, found a fix though I haven't tested this in IE so you may want to have a look at that ;)
Give #col2 a position:relative
Remove height:90%, min-height:90% and max-height:90% from #ajaxresults.
Give #ajaxresults: position:absolute, top:90px and bottom:0.
Try that out and it should work as intended, but like I said I haven't checked IE so you may need to do a little more hacking to get it to work there.
Height on #tabscontainer element.
#tabscontainer {
background-color:black;
height:90px;
max-width:529px;
min-width:326px;
overflow-x:hidden !important;
width:100%;
}
Try:
#tabscontainer {
height:30px;
...
}
Follow-up on comment:
Decrease the #ajaxresults height then:
#ajaxresults {
height:70%;
max-height:70%
...
}