Question

I found a bit of code to run a tool bar and need a bit of help converting it to jquery so I can use my existing code with it.

scroll_final=document.body.scrollTop;
scroll_final=document.documentElement.scrollTop;


var toolbarid=document.getElementById('toolbar');
toolbarid.style.visibility='hidden';


toolbarid.style.opacity='1.00';
toolbarid.style.filter='alpha(opacity=100)';
toolbarid.style.visibility='visible';

As always…thank you for your help,
Todd

Answer 1

If you look at the doco for the jQuery .scrollTop() method, at the bottom there are some comments about it working differently in different browsers if you’re trying to get the top of the whole document. So depending on your browser try:

scroll_final = $("body").scrollTop();
scroll_final = $(document).scrollTop();
scroll_final = $(window).scrollTop();
scroll_final = $("html").scrollTop();

For your other code, something like this:

var $toolbar = $('#toolbar');
$toolbar.css("visibility", "hidden");

$toolbar.css({
    opacity : '1.00',
    filter : 'alpha(opacity=100)',
    visibility : 'visible'
});

I assume the part where you set it to hidden and the part where you set the other properties and make it visible are within different event handlers or something, because if that’s all in the same block of code it will all run before the browser repaints.

Rather than setting the “visibility” property you can use:

$toolbar.hide();
// OR
$toolbar.fadeOut();

// and then
$toolbar.show();
// OR
$toolbar.fadeIn();

But note that .hide() is the equivalent of .css('display', 'none').