Как сдвинуть всю страницу справа от вставленной боковой панели?

Question

Я пытаюсь ввести боковую панель на текущую страницу (для создания букмарклета). Однако, похоже, это просто перекрывает левую часть страницы, на что я нацелился, это перемещение всей страницы справа от этой вставленной панели.

//initilaize 
    var sidebar; 
    $('body').css({ 
    'padding-right': '350px' 
    }); 
    sidebar = $("<div id='sidebar'></div>"); 
    sidebar.css({ 
    'position': 'fixed', 
    'left': '0px', 
    'top': '0px', 
    'z-index': 9999, 
    'width': '290px', 
    'height': '100%', 
    'background-color': 'blue' // Confirm it shows up 
    }); 
    $('body').append(sidebar); 

Вот jsfiddle того, что происходит, он прикрывает страницу, мне нужно для того, чтобы сдвинуть, чтобы разместить на Sidepanel.

http://jsfiddle.net/DT3k7/

Answer 1

Измените css тела на padding-left или margin-left вместо правого.

$('body').css({ 
    'padding-left': '350px' 
}); 

Answer 2

Попробуйте добавить margin-left к телу, когда вы добавите врезку. Не знаю, откуда исходит padding-right. Это работало на jsfiddle для меня.

$('body').ready(function(){ 
    $('body').append(sidebar) 
    $('body').css({ 
     'margin-left':'290px' 
    }); 
    }); 

Вы также можете добавить эффект холодного слайдера с помощью JQuery UI!