Twitter Bootstrap responsive design footer with floats above WordPress

Lawrence Krubner comments:

Even when I apply "clear:both;" to the footer, it still slides up the page, covering the material beneath it. And I've added your styles, but I'm still have the same problem.

Dbranes comments:

ok, do you have this site live or is it local?

Lawrence Krubner comments:

This is not something that will ever go on the web. It is being embedded into a physical device. But it using HTML and CSS as the presentation layer.

Lawrence Krubner comments:

If I go to openlastminute in FireFox, and open it in FireBug, and delete all of this:

.container:after {
clear: both;
}

That does not break the design, therefore I suspect that is not important.

Christianto made the point that some Javascript is resizing some of the page elements, which might explain everything I'm seeing, though I can not figure out how the Javascript is triggered, or even where it lives.

Dbranes comments:

Christianto is right about the masonry calculations, the code seems to be minified here:

http://openlastminute.it/assets/application-0be3001f7a2b37860a676d77ae4d9bb6.js

Dbranes comments:

if you use the Chrome "pretty print" on this file, you can see this calculation function:

function t() {
w = e("#contentbody").width(), spacer = 17, border = 0, w >= 1170 ? col = 4 : w == 940 ? col = 3 : w == 724 ? col = 2 : col = 1, glutter = col - 1, item_width = (w - glutter * spacer) / col, li_width = item_width - border * 2, e("#itemlist li.item").width(li_width), e("#itemlist li.item").css("margin-bottom", spacer);
var t = e("#masonry");
t.masonry({itemSelector: ".item",columnWidth: item_width,gutterWidth: spacer})
}


Lawrence Krubner comments:

Huh. Okay, I did not know about "pretty print" in Chrome. I did try to look at the scripts in FireBug, but Firebug only showed me the minified version, from which I could not get any info. I'll try "pretty print".

Lawrence Krubner comments:

So, this is tied into the other problem, with Masonry? Interesting. I'll install that and see how much it helps.

Lawrence Krubner comments:

Why do you think Masonry is in use on the openlastminute site? I looked in the source code and did not see any mention of masonry. I looked it in the included files and still saw nothing.

Christianto comments:

sorry for the late reply, need to sleep..

As Dbranes mentioned, all js function is minified on as file "application-0be3001f7a2b37860a676d77ae4d9bb6.js"
I check this include masonry, infinite scroll, and bootstrap javascript function like carousel, dropdown etc.

Christianto comments:

and sorry for the typo, I hope its clear enough..

Lawrence Krubner comments:

Hmm, okay. I used to do a lot of front end work, but that was years ago. Now I work on the backend only. I suppose I am out-of-touch when it comes to the newest tools. I was unaware of a good way of "seeing into" the minified Javascript and figuring out what was there.

I will install masonry, infinite scroll, and bootstrap javascript function like carousel. I will see if that gets my own design to work.

Other than the one Javascript function that you posted in the other thread, is there any other initialization that I need I need to do? Anything that I need to put inside of:

$(document).ready(function() {
jQuery(window).bind("resize", function () {
onScreenResize();
});
});

Lawrence Krubner comments:

I guess we are talking about this version of infinite scroll? https://github.com/paulirish/infinite-scroll

It does an Ajax call to get more info when I reach the end of a page? Where do I set the URL for that Ajax call?

Christianto comments:

yes Lawrence, that's correct.
Basically there are 2 main function that I could see on the site, that is related to layout and fetch content through ajax,
inifine-scroll and masonry.

there are other script like [[LINK href="https://github.com/desandro/imagesloaded"]]imagesloaded plugin[[/LINK]] inside the callback but its not too necessary if you don't need to preload image before content added to dom.

<blockquote>It does an Ajax call to get more info when I reach the end of a page? Where do I set the URL for that Ajax call?</blockquote>
you can set a url to second page (next pagination) as a source, the option is "nextSelector" on infinite-scroll,
for example on openlastminute.it it use:
<div class="pagination" style="display: none;"><a rel="next" href="/?page=2">2</a></div>
and it will search for ".item" on that page to fetched and added,
we can change it on "itemSelector" option to search for other element to fetched.

this is the option parameter for infinite scroll on the site:
{
navSelector: ".pagination",
nextSelector: '.pagination a[rel="next"]',
itemSelector: ".item",
animate: !1,
loading: {finishedMsg: "Message if no other post found..",
img: "/images/ajax-loader.gif",
msgText: "<em>Caricamento</em>"}
}

and js code on the site similar with this:
<script type="text/javascript">
// jQuery imagesLoaded function
(function(c,q){var m="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";c.fn.imagesLoaded=function(f){function n(){var b=c(j),a=c(h);d&&(h.length?d.reject(e,b,a):d.resolve(e));c.isFunction(f)&&f.call(g,e,b,a)}function p(b){k(b.target,"error"===b.type)}function k(b,a){b.src===m||-1!==c.inArray(b,l)||(l.push(b),a?h.push(b):j.push(b),c.data(b,"imagesLoaded",{isBroken:a,src:b.src}),r&&d.notifyWith(c(b),[a,e,c(j),c(h)]),e.length===l.length&&(setTimeout(n),e.unbind(".imagesLoaded",
p)))}var g=this,d=c.isFunction(c.Deferred)?c.Deferred():0,r=c.isFunction(d.notify),e=g.find("img").add(g.filter("img")),l=[],j=[],h=[];c.isPlainObject(f)&&c.each(f,function(b,a){if("callback"===b)f=a;else if(d)d[b](a)});e.length?e.bind("load.imagesLoaded error.imagesLoaded",p).each(function(b,a){var d=a.src,e=c.data(a,"imagesLoaded");if(e&&e.src===d)k(a,e.isBroken);else if(a.complete&&a.naturalWidth!==q)k(a,0===a.naturalWidth||0===a.naturalHeight);else if(a.readyState||a.complete)a.src=m,a.src=d}):
n();return d?d.promise(g):g}})(jQuery);

function onScreenResize() {
var w = jQuery("#contentbody").width(),
spacer = 17,
border = 0,
w >= 1170 ? col = 4 : w == 940 ? col = 3 : w == 724 ? col = 2 : col = 1,
glutter = col - 1,
item_width = (w - glutter * spacer) / col,
li_width = item_width - border * 2,
jQuery("#itemlist li.item").width(li_width),
jQuery("#itemlist li.item").css("margin-bottom", spacer);

var t = jQuery("#masonry");
t.masonry({
itemSelector: ".item",
columnWidth: item_width,
gutterWidth: spacer
});
}

function init_infinite_scroll(n) {
n.infinitescroll(
{
navSelector: ".pagination",
nextSelector: '.pagination a[rel="next"]',
itemSelector: ".item",
animate: !1,
loading: {finishedMsg: "Message if no other post found..",
img: "/images/ajax-loader.gif",
msgText: "<em>Caricamento</em>"}
},
function(r) {
var s = jQuery(r).css({opacity: 0});
s.imagesLoaded(function() {
s.animate({opacity: 1});
n.masonry("appended", s, !0);
onScreenResize();
})
}
)
}

jQuery(window).bind("resize", function () {
onScreenResize();
});

jQuery(window).load(function() {
onScreenResize(),
init_infinite_scroll(jQuery("#masonry"));
})
</script>

Lawrence Krubner comments:

Sorry if I was unclear. I do not want the footer to float upwards. I want it to stay at the bottom of the page. My problem is that, in my design, it is slides up to the top of the page. I was unable to figure out how openlastminute managed to keep it at the bottom of the page.

Rowela Alzona comments:

Hello Lawrence,

I am not sure but what I understand with your problem is you want to stick your footer on the bottom of the page
and it will not be scrolled like the content?

Try creating another stylesheet and try to add and play around with :


* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 142px; /* .push must be the same height as .footer */
}


The scripts above are originally from Ryan Fait.

On your HTML try to refer:


<div class='wrapper'>
body goes here
<div class='push'></div>
<div>
<div class='footer'>Footer!</div>


I hope this will give you an Idea or can help you with your problem.

Rowela Alzona comments:

Referrimg im my script above, try changing the "wrapper" with "container" class.