Question

How to centre the div on the website? ive such script:

$(document).ready( function(){    

    $('.cod').click(function() {
    var div_name = $(this).attr('id');

    $('#overlay_window').load('/templates/' + div_name + '_template.php', function(){
    var div_width = $('#'+div_name+'-overlay').width();
    var div_height = $('#'+div_name+'-overlay').height();
    $('#overlay_window').css("width", ""+div_width+"px")
    $('#overlay_window').css("height", ""+div_height+"px")
    var div2_width = $('#overlay_window').width();
    var div2_height = $('#overlay_window').height();
    var window_width = $(window).width();
    var window_height = $(window).height();

    var widthoffset = (window_width - div2_width) / 2;  
    var heightoffset = (window_height - div2_height) / 2;   
    $('#overlay_window').css("left", "" + (widthoffset) + "px");
    $('#overlay_window').css("top", "" + (heightoffset + 750) + "px");
    $('#overlay_background').fadeIn(800);
    $('#overlay_window').fadeIn(800);
    });
    });




    });

but it centres the div from top of page and if its scrolled down it appears on top not there where ive scrolled, can someone help?

Answer 1

Why not just mark it position: fixed and keep it there regardless of where the user scrolls? Then you don’t need any form of js trickery.

However, to answer your current problem, it seems you provide the centering once, you you never react to the scroll event of the window:

 $(window).scroll(function() { $('#divID').center(); });