I'm having some trouble getting a website to look the way I want it to. I have a footer that I want to have at the bottom of the page (but does not stick to the bottom of the viewport if the content is large). The current situation is almost fine, though I want the body and html tag to take up 100% of the viewport if the content is small. If I add height: 100%; to the html and body tags, the home page looks fine but the members page displays the footer somewhere in the middle of the page as the height of the html and body tags somehow seems to match the size of my viewport instead of the content. The footer has the color-footer class (you can verify this yourself by dynamically changing the css rules through your browser's developer tools).
OAS: this site was developed by an external and runs on Joomla. I'm not a web developer and I'm just getting a headache from trying to get this to work. I've gone through a dozen of guides but it looks like this time Google couldn't give me the simple solution. After hours of meddling in the developer mode with chrome I can't get it to work so I was wondering if anyone could figure out the correct css rules to add to my stylesheet so I get the desired behaviour.
A JavaScript/jQuery solution:
function CheckFooterPos() {
var Footer = $('.color-footer');
var BottomOfScroll = $('html').scrollTop() + $(window).height();
var BottomOfFooter = Footer.offset().top + Footer.height();
if (BottomOfFooter < BottomOfScroll) {
Footer.css('bottom', '-' + (BottomOfScroll - BottomOfFooter) + 'px');
} else {
Footer.css('bottom', '0px');
}
}
$(document).ready(function() {
$(window).scroll(function(){
CheckFooterPos();
});
$(window).resize(function(){
CheckFooterPos();
});
CheckFooterPos();
});
Because it's position:absolute so, it will so in the middle of the screen.
Just remove position: absolute; from .color-footer { will solved your issue.
.color-footer {
bottom: 0;
height: 66px;
margin-top: 50px;
padding-top: 0;
width: 100%;
// position: absolute; //remove it.
}
Hope it helps.
You can set footer position using javascript if you are not able to fix its position through css, though its possible through CSS too.
http://josephfitzsimmons.com/simple-sticky-footer-using-jquery/
and I guesss
How to keep footer at the bottom even with dynamic height website
this can also help you.
Related
I have a website that looks something like this:
http://illandril.net/outer.html
(Warning: AngularJS site on a server not setup to serve it properly - you'll need to go back to http://illandril.net/outer.html directly instead of using the browser reload.)
I seem to have two conflicting requirements though...
The images need to scale down when viewed on small screens (or in narrow browser windows)
There is a link that takes the user to the page already scrolled down to the "HEADER" section
My solution to #1 was simple...
img {
max-width: 100%;
}
But scrolling down to the HEADER area doesn't work, because the browser doesn't know how tall any of the images are (at least not on first view). "Easy", I thought... and I added width and height attributes to all my images.
Unfortunately, this made the images squished on narrow screens. So I adjust my CSS some more...
img {
max-width: 100%;
height: auto;
}
That fixed the squished image problem, but now the browser doesn't know how tall the images are again and scrolls to the wrong area when the page loads.
Is there some way I'm not aware of to tell the browser that images too wide to fit in their containers should be scaled down, but with a known aspect ratio so the image placeholders are all the right size before the image loads?
If it were a normal page, using window.onload for to trigger the scroll would work (See http://jsfiddle.net/nbS3F/1/), since that waits for all the images to load... but the site I'm working on is a single-page app using AngularJS, so the load event has long since fired by the time these new images are starting to load.
You must be doing the scrolling wrong. Use:
element.scrollIntoView(true);
With:
img {
max-width: 100%;
}
Fiddle
There is no such thing as "I want a max-width of 100%, but without a max-width of 100%".
I advise you to use css3 with responsive theme technique, you have to use different parameters in each screen size by applying :
#media only screen and
search google for responsive theme with jquery plug-in , this will help you a lot to design your website in professional way.
I've found a solution (though I'd prefer a nicer one still if anybody has one)... manually checking every single image to see if it is loaded or not, and listening to the onload and onerror events of the images not yet ready, scrolling only after all images have either loaded or failed.
var target = document.getElementById(targetID);
if (target) {
var scroll = function() {
target.scrollIntoView();
};
var toLoad = 0;
var onload = function() {
toLoad--;
if (toLoad === 0) {
scroll();
} else {
console.log('Waiting on ' + toLoad + ' images');
}
};
var images = document.querySelectorAll('img');
for (var i = 0; i < images.length; i++) {
if (!images[i].complete) {
toLoad++;
images[i].onload = onload;
images[i].onerror = onload;
}
}
if (toLoad === 0) {
scroll();
}
}
I am trying to create an html page which will be used for printing data using browser. I need to include a footer with it which will show up in every page at the bottom when printed and I have developed the following code for implementing this.
The following code is working fine, but the problem is when my contents inside the div content gets long enough to make users scroll down the page, that time if I go to the print option of Google Chrome and see the print preview, I can see the footer shows up in the first page, but not in the rest of the pages. But this same code works in firefox and the footer shows up in all the printed pages(and even shows up in the print preview).
Could you please help me to show up the footer in every pages when printed using Google chrome?
Thanks :)
<html>
<head>
<style type="text/css">
html {margin:0;padding:0;border:0; overflow-y: scroll;}
body { font-size:75%;color:#222; font-family: Geneva, Arial, Helvetica, sans-serif;}
#container {margin:0 auto; height:100%; }
#content{}
#footer {position: fixed ; left: 0px; bottom: 0px; right: 0px; font-size:10px; }
</style>
</head>
<body>
<div id="container">
<div id="content">
My Contents
</div>
<div id="footer">This is my Footer</div>
</div>
</body>
</html>
Should have position: relative to parent element of footer
and it's parent element is body so give it to body or container
http://jsfiddle.net/jXujq/ See the CSS code...
For anyone still facing this issue, I've created an open-source library that could solve it. It allows printing repeated headers and footers from Chrome, depending on the structure of your html. See this answer:
https://stackoverflow.com/a/34444930/2196424
I've spent a lot of time on this footer thing, I was able to do it on IE using position: fixed and bottom 0, with some body margins to avoid the content from overlapping with the footer.
But with chrome, the only way I was able to do something similar was by using javascript to calculate the white space required to push the footer to the bottom (by assigning that value to an empty div): -
var printPageHeight = 1900; //(have to test this value)
var mFooter = $("#footer");
var bottomPos = mFooter.position().top + mFooter.height();
var remainingGap = (bottomPos <printPageHeight ) ? (printPageHeight -bottomPos) : printPageHeight - (bottomPos % printPageHeight );
$("#whiteSpaceToPositionFooter").css("height", remainingGap+"px");
However, getting the size/height of the print page right is very difficult and the height() method of jquery doesn't account for margins and heights.
You need to set in your footer:
position:fixed;
bottom:0;
Maybe this would help you?
CSS Sticky Footer
We are having a problem with our facebook like/send button, if you open: http://apps.facebook.com/bymii-test/products.php?pageid=216605071714962&prd_id=35&prd_name=Coalesce: - click facebook send, the box is behind the facebook sidebar. Is there any way to: change the z-index - or to make the window pop up on the left?
I FINALLY FOUND THE ANSWER!! 1 1/2 Hours searching later.. just enter this code into your CSS file:
.fb_edge_widget_with_comment span.fb_edge_comment_widget {
top: 15px !important;
left: -250px !important;}
Hope this is what you were looking for, because it was exactly what I was looking for!
Make sure the parent/container element has css value "overflow:visible". It happens when "overflow:hidden". Hope this helps.
The way for it to popup up and over all of it is to make the like button work in XFBML. The iframe implementation is limited and if you change the height and width of it to just fit the button, the window will appear hidden.
I found this to work:
/* the below allows the fb:like iframe to show entirely instead of getting cropped off */
.fb-like iframe {
max-width: inherit;
}
/* the same issue with the "send" button */
.fb-send iframe {
max-width: inherit;
}
As you can see, it's asking those elements to "inherit" the width attributes of its parent elements.
Hope that helps.
I modified Shane's excellent solution to focus specifically on z-index:
css:
.fb_edge_widget_with_comment span.fb_edge_comment_widget
{
z-index:8 !important;
}
The above css code shows the Facebook widget above everything else, without having to relocate or "overflow" anything.
This is a common problem all developers are facing. The popup has no way to detect its relative position on a page or in an iframe.
To get the desired results i always install my like, send buttons on the left side of my page.
I'm doing some documentation where I make heavy use of anchors for linking between pages on a wiki.
see here:
http://code.google.com/p/xcmetadataservicestoolkit/wiki/ServicesExplained#Platform_Data_Structures
The feature that really makes this work well is when the browser shows the anchor at the absolute top of the pane. When it gets confusing is when linking to an anchor shows the anchor half-way down the page since the page is scrolled down all the way
see here:
http://code.google.com/p/xcmetadataservicestoolkit/source/browse/trunk/mst-common/src/java/xc/mst/utils/Util.java#227
My solution in the wiki (first link) was to put a blank image at the bottom of the page simply to make the browser show the anchor right at the top. Is there a better way to do this? Is there a way to do it in the second link (in which I can't add a blank image)?
Putting a blank image at the bottom of your page is a bad idea, since it will expand your document to a unnecessary height.
You could throw in some javascript to apply an effect to the anchor you just travelled to, to highlight it wherever it is.
Without altering the height of your document (i.e. adding extra padding at bottom), you'll always have this issue.
However, using bit of JS/jQuery, the user experience can be improved considerably:
On clicking a named anchor:
Instead of jumping in a flash (broswer's default behavior), add a smooth scroll
add an highlight to indicate current selection (this helps tremendously in 2nd case as the user can clearly see what is current)
Created a demo to illustrate the concepts: http://jsfiddle.net/mrchief/PYsyN/9/
CSS
<style>
.current { font-weight: bold; }
</style>
JS
function smoothScroll(elemId) {
// remove existing highlights
$('.current').css({backgroundColor: "transparent"}).removeClass('current');
var top = $(elemId).offset().top;
// do a smooth scroll
$('html, body').animate({scrollTop:top}, 500, function(){
// add an highlight
$(elemId).animate({backgroundColor: "#68BFEF" }, 500, function () {
// keep tab of current so that style can be reset later
$(elemId).addClass('current');
});
});
}
// when landing directly
if (document.location.hash) {
smoothScroll(document.location.hash);
}
$('a[href*="#"]').click(function() {
// utilizing the fact that named anchor has a corresponding id element
var elemId = $(this).attr('href');
smoothScroll(elemId);
});
You can create a absolutre positioned pseudo-element with a great height to targeted block using just the following CSS (for the second link in your post:
#nums td:target a::before {
content: '';
position: absolute;
height: 700px;
}
The height must be around the height of the viewport, so the best solution is to create these styles on the fly using js. But if you don't wan't to use js, just use height: 1000px or more — if you don't mind a gap at the bottom of course.
The best part: it's only CSS and there would be no gap when no anchors are targeted.
Edit: just a sneak peek into the future: if the vw/vh units would come to other browsers (now it's only in IE9), this could be awesomely done with just CSS using height: 100vh :)
You could use Javascript / jQuery to create a white div that has the necessary height needed to put your element at the top of the browser window, and you could even remove this upon scrolling away.
However I would highly recommend against doing so as this will expand your page where it isn't needed. It's a lot smarter to simply style the tag upon going there (through Javascript / jQuery) so it pops out to the viewer, for instance by setting the font-weight to bold or changing the background-color.
I would probably use a combination of jQuery and PHP for this:
PHP(somewhere right after your <body> element):
<?php
$anchor = explode('#', $_SERVER['REQUEST_URI']);
$anchor = $anchor[1];
echo '<div id="selected-anchor" anchor="'.$anchor.'"></div>';
?>
And then the jQuery:
<script type="text/javascript">
$(function(){
$('#selected-anchor').css('background-color', '[Whatever highlight color you want]');
});
</script>
Hope this helps.
basically I have a little problem with a background I am using. I need it to resize based on what width the window is, because I work with a massive screen and it displays fine, however on 1024x768, it isn't exactly working right. I'll post some images below to show you all what I mean.
On my resolution:
http://imgur.com/Pl87L
On a 1024x768 screen:
http://imgur.com/l6CUe
Also, here is the CSS for my background:
html, body {
width: 100%;
position: absolute;
top: 0;
left: 0;
background: url(/../images/background10.jpg) fixed no-repeat;
}
I hope this helps :).
Ross.
There may be a better way, but I've used jquery before to change (onLoad) the background src based on browser width, something along the lines of ...
function browserSize() {
var bsr_w = $(window).width();
if (bsr_w <= 800) {
$('body').css("background-image", "url(background_small.jpg)");
} else if (bsr_w <= 1024) {
$('body').css("background-image", "url(background_medium.jpg)");
} else {
$('body').css("background-image", "url(background_large.jpg)");
}
}
In you could use the background-size property. Not full support yet but its nice - csspie might also help out on that (think its does as I kind of remember trying this a couple of months back)
There's a pretty useful jQuery plugin that handles this fairly gracefully for you: http://srobbin.com/blog/jquery-plugins/jquery-backstretch/
It might be a bit like using a sledgehammer to crack a hazelnut, but it might do what you need.