Develop Reference

Sticky block on JS

helloi want to make a sticky block using this script
$(window).scroll(function() {
var sb_m = 80; /* top and bottom padding */
var mb = 300; /* footer height with a margin */
var st = $(window).scrollTop();
var sb = $(".loginform");
var sbi = $(".loginform #loginform");
var sb_ot = sb.offset().top;
var sbi_ot = sbi.offset().top;
var sb_h = sb.height();
if(sb_h + $(document).scrollTop() + sb_m + mb < $(document).height()) {
if(st > sb_ot) {
var h = Math.round(st - sb_ot) + sb_m;
sb.css({"paddingTop" : h});
}
else {
sb.css({"paddingTop" : 0});
}
}
});
on naked HTML all work fine
if add a script to site (use wordpress) appears an infinite scroll
here can see problem
problem appears if add an element to footer through widgets
please tell me what is problem?

Honestly it's not ideal to work with padding-top, you should use top (with the element set as position:relative or absolute);
If you don't care about supporting IE, the easiest way is to use position:sticky; which does all the work for you: https://developer.mozilla.org/en-US/docs/Web/CSS/position
If you prefer to do it yourself, I'd suggest working this way:
store in variables the current offset().top and .left of the soon-to-be sticky element, outside any onScroll handlers.
When this condition is true:
$(window.scrollTop() >= theElementOffsetTopValueYouStored)
set the element as position: fixed and set the left: and top: properties of the element that should become sticky with the values you stored before. Then add your condition to make sure it stops when it reaches the end of the document, checking if element.offset().top + element.height > document.height
Please consider this is from memory, you might need to tweak a few things here and there to make it work properly.

need 100% div without setting a fixed height on container div

Here is a link to a JSFiddle http://jsfiddle.net/9NYcn/11/ i put together with what i would like to do, but i need to do this with pure css.
function expand(){
var sect = document.getElementById("sect");
var body = document.getElementById("main");
var panes = document.getElementById("panes");
var newHeight = 40 + "px";
var newHeight2 = 120 + "px";
var topVal = 120 + "px";
sect.style.display = "block";
sect.style.height = newHeight;
body.style.height = newHeight2;
panes.style.top = topVal;
}
In the above function i had to set the "top" property of panes in order to get this to work. i need to get it so that the panes section will work like it currently does without using javascript to change the "top" property of "panes". When the user clicks the "expand" button the div with the class "body" will expand and not stick behind or overlap the "panes" div.
I know im doing a terrible job explaining i apologize for that.

Remove the absolute positioning of .panes: http://jsfiddle.net/rHTM8/
It will make it naturally flow after the middle div.

Slow scrolling background in Javascript or CSS?

I'm trying to figure out how to make a background image scroll slower than the page contents. I haven't got a clue how it's done. The perfect example of what I'm trying to do is here
Is this done in CSS or jQuery/Javascript?

This is made by javascript (jQuery):
(function () {
var a = document.body,
e = document.documentElement;
$(window).unbind("scroll").scroll(function () {
a.style.backgroundPosition = "0px " + -(Math.max(e.scrollTop, a.scrollTop) / 8) + "px";
});
})();

The effect on the link you posted is done in Javascript using jQuery.
If you examine the code of a script of the site here, you can find:
.style.backgroundPosition="0px "+-(Math.max(e.scrollTop,a.scrollTop)/8)+"px"
Practically, the background-position CSS property is modified on page scrolling calculating Y-axis depending on page scroll position. If you have some knowledge of Javascript, jQuery or Mootools, you can reproduce the effect very easily.
I think it's impossible to do it using only CSS.

This one works for high bg images.
(function () {
var body = document.body,
e = document.documentElement,
scrollPercent;
$(window).unbind("scroll").scroll(function () {
scrollPercent = 100 * $(window).scrollTop() / ($(document).height() - $(window).height());
body.style.backgroundPosition = "0px " + scrollPercent + "%";
});
})();

how do i get the x and y position directly under the left bottom side of the input rectangle?

I'm thinking of implementing a custom auto-complete feature so basically my idea now is that i will make an abs positioned div and give it the position here:
(image) http://i.stack.imgur.com/3c5BH.gif
So my question is with a variable referencing the textbox, how do i get the x and y position directly under the left bottom side of the input rectangle?
My script must work in latest versions of IE / FF / Safari / Opera / Chrome
I know i can use a library to do it, but no i'm interested in learning how do they do it (or maybe better ways)?

This question is a lot more complicated than it seems and involves getting the position of the element relative to the document. The code to do so can be pulled from the jquery source (http://code.jquery.com/jquery-1.6.1.js -- search for "jQuery.fn.offset")
in jQuery:
var node = $('#textbox'),
pos = box.offset(); // the complicated piece I'm using jQuery for
node.top += node.height(); // node.offsetHeight without jQuery
node.left += node.width(); // node.offsetWidth without jQuery
The answer can be extremely simplified if you don't care about FF2 or Safari3:
var box = document.getElementById('yourTextBox').getBoundingClientRect(),
left = box.left,
bottom = box.bottom;

x = x offset
y = y offset - ( textbox height +
padding-top + padding-bottom )

Good comments! For my scenario, there is always an offset parent (which is why I use position - http://api.jquery.com/position/). In hopes that it might help someone else wanting a quick fix, here's the code:
// I have a parent item (item) and a div (detail)
// that pops up at the bottom left corner of the parent:
var jItem = $(item);
var pos = jItem.position();
var marginTop = parseInt(jItem.css('margin-top'));
if (isNaN(marginTop)) {
marginTop = 0;
}
$(detail).css("top", pos.top + jItem.outerHeight() + marginTop)
.css("left", pos.left);
$(detail).show();

Just give the box a defined width and height. Then, get its top and left property and add it with the width and height. Simple. I am gonna give you Pseodocode.
<STYLE>
object{width: 100px; height: 20px;}
</STYLE>
<SCRIPT>
x = object.left;
y = object.top;
x = x + object.width;
y = y + object.height;
</SCRIPT>

Javascript for preventing "burn-in" problem on lcd screen

I'm building a non-public web app that will be used as info-monitor. As such, it will be running 24/7 on one LCD TV display.
Since this could produce a "burn-in color" error on the LCD I'm looking for a Javascript that will prevent/reduce this problem. I want to use something similar to those they use on airport displays (a line periodically moving from left to right and top to bottom and switching color).
Do you know any Javascript doing this? Thank you!

In case you were still interested: (uses jQuery)
var $burnGuard = $('<div>').attr('id','burnGuard').css({
'background-color':'#FF00FF',
'width':'1px',
'height':$(document).height()+'px',
'position':'absolute',
'top':'0px',
'left':'0px',
'display':'none'
}).appendTo('body');
var colors = ['#FF0000','#00FF00','#0000FF'], color = 0, delay = 5000, scrollDelay = 1000;
function burnGuardAnimate()
{
color = ++color % 3;
var rColor = colors[color];
$burnGuard.css({
'left':'0px',
'background-color':rColor,
}).show().animate({
'left':$(window).width()+'px'
},scrollDelay,function(){
$(this).hide();
});
setTimeout(burnGuardAnimate,delay);
}
setTimeout(burnGuardAnimate,delay);
Working example found here: http://www.jsfiddle.net/bradchristie/4w2K3/3/ (or full screen version)

I used Brad's script but unfortunately my page had a large HTMl table that extend outside the parent container. This made it so the pixel bar would only travel part way across the screen. Instead of altering my table I added a bounding box script to find the actual width of the html table and then used that to set the width in Brad's script.
var div = document.getElementById ("HtmlTable-ID");
if (div.getBoundingClientRect) {
var rect = div.getBoundingClientRect ();
w = rect.right - rect.left;
// alert (" Width: " + w );
}
var $burnGuard = $('<div>').attr('id','burnGuard').css({
'background-color':'#FF00FF',
'width':'1px',
'height':$(document).height()+'px',
'position':'absolute',
'top':'0px',
'left':'0px',
'display':'none'
}).appendTo('body');
var colors = ['#FF0000','#00FF00','#0000FF'], color = 0, delay = 5000, scrollDelay = 1000;
function burnGuardAnimate()
{
color = ++color % 3;
var rColor = colors[color];
$burnGuard.css({
'left':'0px',
'background-color':rColor,
}).show().animate({
'left': w +'px'
},scrollDelay,function(){
$(this).hide();
});
setTimeout(burnGuardAnimate,delay);
}
setTimeout(burnGuardAnimate,delay);