Search code examples
javascriptjquerypositionr-markdownreveal.js

Position Content in a JS Reveal presentation using JQuery

I want to write a block of javascript or JQuery that will push all of my content 50 pixels to the right, if I set a variable, "tree," to true. So far, my R markdown document looks like this:

<script>
var tree = true;
if (tree===true){
$(document).ready(function(){

  $("body").css(position,absolute);
  $("body").css(left,left+50);
  $("html").css(position,absolute);
  $("html").css(left,left+50)
  $("div.reveal").css(position,absolute);
  $("div.reveal").css(left,left+50)
  $("div.slides").css(position,absolute);
  $("div.slides").css(left,left+50)


});
}
</script>

When I Knit the code, the content displays in the same position that it did without the javascript. Is it possible to push my content 50 pixels to the right using this method? If not, how else can I accomplish this? Any help will be very much appreciated!

Solution

  • If you want to stick to jQuery you could use margin-left:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
var tree = true;
if (tree===true){
$(document).ready(function(){
  $('.slides').css('margin-left', '50px');
});
}
</script>

    From the following screenshot you can derive that all of the content (all slides) is contained within the div element that carries the class .slides:

    enter image description here

    With the script provided above the content moves the desired 50 pixels to the right (yellow area is the margin-left):

    enter image description here