[jQuery] Re: Refactoring Functions
PS: The thing is with fixed positioning you get a *much better*
experience in browsers that support it, e.g. smoother, no jumping
elements/flickering. Using a resize handler is just clumsy.
IE6 can be hacked away to support it, see link above.
--Klaus
On 5 Jun., 08:52, Javier Martínez <[EMAIL PROTECTED]> wrote:
> I think that position:fixed is not supported on IE6.
>
> Klaus Hartl escribió:
>
> > On 5 Jun., 06:22, Karl Swedberg <[EMAIL PROTECTED]> wrote:
>
> >> or this ...
>
> >> $(document).ready(function() {
> >> stickyFooter();
>
> >> $(window).resize(stickyFooter);
>
> >> });
>
> > How about:
>
> > $(function() {
> > $(window).resize(stickyFooter).trigger('resize');
> > });
>
> > You wouldn't need a named function here anymore:
>
> > $(function() {
> > $(window).
> > resize(function() {
> > var height = $(document).height() - 341;
> > $('#footer').css('margin-top', height);
> > }).
> > trigger('resize');
> > });
>
> > But do you really need JavaScript at all and can't let CSS do its job?
>
> > #footer {
> > position: fixed;
> > bottom: 0;
> > }
>
> > --Klaus
[jQuery] Re: Refactoring Functions
http://www.howtocreate.co.uk/fixedPosition.html
On 5 Jun., 08:52, Javier Martínez <[EMAIL PROTECTED]> wrote:
> I think that position:fixed is not supported on IE6.
>
> Klaus Hartl escribió:
>
> > On 5 Jun., 06:22, Karl Swedberg <[EMAIL PROTECTED]> wrote:
>
> >> or this ...
>
> >> $(document).ready(function() {
> >> stickyFooter();
>
> >> $(window).resize(stickyFooter);
>
> >> });
>
> > How about:
>
> > $(function() {
> > $(window).resize(stickyFooter).trigger('resize');
> > });
>
> > You wouldn't need a named function here anymore:
>
> > $(function() {
> > $(window).
> > resize(function() {
> > var height = $(document).height() - 341;
> > $('#footer').css('margin-top', height);
> > }).
> > trigger('resize');
> > });
>
> > But do you really need JavaScript at all and can't let CSS do its job?
>
> > #footer {
> > position: fixed;
> > bottom: 0;
> > }
>
> > --Klaus
[jQuery] Re: Refactoring Functions
I think that position:fixed is not supported on IE6.
Klaus Hartl escribió:
> On 5 Jun., 06:22, Karl Swedberg <[EMAIL PROTECTED]> wrote:
>
>> or this ...
>>
>> $(document).ready(function() {
>> stickyFooter();
>>
>> $(window).resize(stickyFooter);
>>
>> });
>>
>
> How about:
>
> $(function() {
> $(window).resize(stickyFooter).trigger('resize');
> });
>
> You wouldn't need a named function here anymore:
>
> $(function() {
> $(window).
> resize(function() {
> var height = $(document).height() - 341;
> $('#footer').css('margin-top', height);
> }).
> trigger('resize');
> });
>
> But do you really need JavaScript at all and can't let CSS do its job?
>
> #footer {
> position: fixed;
> bottom: 0;
> }
>
>
> --Klaus
>
[jQuery] Re: Refactoring Functions
On 5 Jun., 06:22, Karl Swedberg <[EMAIL PROTECTED]> wrote:
> or this ...
>
> $(document).ready(function() {
> stickyFooter();
>
> $(window).resize(stickyFooter);
>
> });
How about:
$(function() {
$(window).resize(stickyFooter).trigger('resize');
});
You wouldn't need a named function here anymore:
$(function() {
$(window).
resize(function() {
var height = $(document).height() - 341;
$('#footer').css('margin-top', height);
}).
trigger('resize');
});
But do you really need JavaScript at all and can't let CSS do its job?
#footer {
position: fixed;
bottom: 0;
}
--Klaus
[jQuery] Re: Refactoring Functions
Hi Chris,
Looks like the problem lies with the lines where the function is being
called. Either put it inside an anonymous function or use a named
reference to the function instead. Try something like this.
$(document).ready(function() {
stickyFooter();
$(window).resize(function() {
stickyFooter();
});
});
or this ...
$(document).ready(function() {
stickyFooter();
$(window).resize(stickyFooter);
});
--Karl
Karl Swedberg
www.englishrules.com
www.learningjquery.com
On Jun 4, 2008, at 8:51 PM, Chris P wrote:
Better yet, change line second line of stickFooter function to:
var height = $(document).height() - 341;
And remove the third line entirely.
Carl
Thanks for responding Carl. This is what I ended up using as you
prescribed.
var stickyFooter = function() {
var height = $(document).height() - 341;
$('#footer').css('margin-top', height);
}
$(document).ready(
stickyFooter()
);
$(window).resize(
stickyFooter()
);
But Firebug tells me "document.body has no properties" with the error
seemingly in the jQuery library.
Thanks!
[jQuery] Re: Refactoring Functions
> Better yet, change line second line of stickFooter function to:
>
> var height = $(document).height() - 341;
>
> And remove the third line entirely.
>
> Carl
Thanks for responding Carl. This is what I ended up using as you
prescribed.
var stickyFooter = function() {
var height = $(document).height() - 341;
$('#footer').css('margin-top', height);
}
$(document).ready(
stickyFooter()
);
$(window).resize(
stickyFooter()
);
But Firebug tells me "document.body has no properties" with the error
seemingly in the jQuery library.
Thanks!
[jQuery] Re: Refactoring Functions
Better yet, change line second line of stickFooter function to:
var height = $(document).height() - 341;
And remove the third line entirely.
Carl
Carl Von Stetten wrote:
> How about this (untested):
>
> var stickyFooter = function() {
> var height = $(document).height();
> var height = height - 341;
> $('#footer').css('margin-top', height);
> }
>
> $(document).ready(
> stickyFooter();
> );
>
> $(window).resize(
> stickyFooter()
> );
>
> HTH,
> Carl
>
> Chris P wrote:
>
>> I wanted a script that would make a sticky footer, and it worked
>> perfectly with this (where 341 is the elements to offset).
>>
>> var height = $(document).height();
>> var height = height - 341;
>> $('#footer').css('margin-top', height);
>>
>> Then I want this code to re-run on browser resize. I also want to
>> refactor the code above to use a second time. The problem is that (1)
>> it doesn't re-run on browser resize and (2) I don't want to duplicate
>> code. How can I refactor?
>>
>> var height = $(document).height();
>> var height = height - 341;
>> $('#footer').css('margin-top', height);
>>
>> $(window).resize(function(){
>> var height = $(document).height();
>> var height = height - 341;
>> $('#footer').css('margin-top', height);
>> });
>>
>>
>>
>>
>
>
>
[jQuery] Re: Refactoring Functions
How about this (untested):
var stickyFooter = function() {
var height = $(document).height();
var height = height - 341;
$('#footer').css('margin-top', height);
}
$(document).ready(
stickyFooter();
);
$(window).resize(
stickyFooter()
);
HTH,
Carl
Chris P wrote:
> I wanted a script that would make a sticky footer, and it worked
> perfectly with this (where 341 is the elements to offset).
>
> var height = $(document).height();
> var height = height - 341;
> $('#footer').css('margin-top', height);
>
> Then I want this code to re-run on browser resize. I also want to
> refactor the code above to use a second time. The problem is that (1)
> it doesn't re-run on browser resize and (2) I don't want to duplicate
> code. How can I refactor?
>
> var height = $(document).height();
> var height = height - 341;
> $('#footer').css('margin-top', height);
>
> $(window).resize(function(){
> var height = $(document).height();
> var height = height - 341;
> $('#footer').css('margin-top', height);
> });
>
>
>
