Add div every time the height is greater then 11.5in

Question

How can i add div every time when height of page becomes greater than 11.5in? I need to copy same div every time that happens.

<div class="logo-etm">
     <img src="/img/etm-logo.png" class="etm">
</div>

I have this code,but it wont work like i want it to:

$( document ).ready( function(){
    var e = $( '.logo-etm' );
    if( $("body").height() > 11.5 ){        
        e.clone().insertAfter( e ); 
    }
});

it puts all divs one across the other... i need them below. Can someone help? and this is css:

$('.logo-etm').css('display','block').css('margin-top','-1.5in').css('width','100%');
$('.etm').css('position','fixed').css('z-index','-1').css('width','30%');

Your css is not css is JS so you have to apply it to the new cloned node ! — Anonymous0day, Oct 15 '15 at 11:16

Anonymous0day · Answer 1 · 2015-10-15T11:57:41.600

0

Your css is not css is JS so you have to apply it to the new cloned node !
Try to apply it after node cloning !

$(document).ready(function() {
    var e = $('.logo-etm');
    if($("body").height() > 11.5){      
        e.clone().insertAfter(e);   
       
       }
  
  $('button').click(function(){
    // $('.logo-etm').css('display','block').css('margin-top','-1.5in').css('width','100%');
    // $('.etm').css('position','fixed').css('z-index','-1').css('width','30%');
    $('.logo-etm').css({
      'display'    :'block' ,
      'margin-top' :'1100px' ,
      'width'      :'100%'
    });
    $('.etm').css({
      'position'  :'realtive' ,
      'z-index'   :'-1' ,
      'width'     :'30%'
    });
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="logo-etm">
    <img src="https://openclipart.org/image/100px/svg_to_png/220732/Tribal-Kitten.png&disposition=attachment" alt="Tribal Kitten" title="Tribal Kitten by  GDJ ( https://openclipart.org/user-detail/GDJ )" class="etm"/>
</div>
<button>click to apply css</button>

edited Oct 15 '15 at 11:57

answered Oct 15 '15 at 11:17

Anonymous0day

3,012
1
14
16

still the same result. – Dejan Jankov Oct 15 '15 at 11:21
your .etm seem to have a fixed position ! – Anonymous0day Oct 15 '15 at 11:24
and how can i put clones below each other for 11.5in? – Dejan Jankov Oct 15 '15 at 11:30
modify you css ! i ve updated my answer to hilights this ! with and without your css – Anonymous0day Oct 15 '15 at 11:35
@DejanJankov I have updated the css in my answer see it, and tell me if it fit your needs – Anonymous0day Oct 15 '15 at 11:46
I just need them to bee at distance for 11in or 1100px. – Dejan Jankov Oct 15 '15 at 11:55
at distance each other ? – Anonymous0day Oct 15 '15 at 11:56
That is it... but it wont work for me... can it be its not working because i am using this in print preview? – Dejan Jankov Oct 15 '15 at 12:01
what is "print preview" ? – Anonymous0day Oct 15 '15 at 12:03
printed page.... i am using print preview to print some documents, and i need that div to appear on every page of a printed document. – Dejan Jankov Oct 15 '15 at 12:06
This is very different you have to provide `` maybe some readings for you [from mozilla](https://developer.mozilla.org/en-US/docs/Printing). tell me if can help again. – Anonymous0day Oct 15 '15 at 12:09
yea but that is my problem.. i need it to work in Chrome. I know how can i make it work on mozilla. – Dejan Jankov Oct 15 '15 at 12:16
it is the same for chrome or firefox, if you do it for one you've done it for the other ! – Anonymous0day Oct 15 '15 at 12:30
See [this](http://stackoverflow.com/questions/1360869/how-to-use-html-to-print-header-and-footer-on-every-printed-page). Chrome has a bug for this. – Dejan Jankov Oct 15 '15 at 12:34

Jason · Answer 2 · 2015-10-15T14:39:57.420

11.5 in is not a unit jQuery can work with. $('body').height() returns a unitless value based on pixels, as is stated in the documentation of the height() method. May I ask why you opted to using inches?

Would swapping the inches for its equivalent in pixels be an option? The element is properly inserted if so, see the attached example. If the body height is bigger than 500 px the element will be cloned and inserted after the first element.

To make sure that the body's (viewport) height is returned properly in this case, I have given the html and body tags height: 100%.

$(document).ready(function() {

  // What is the original logo?
  var logo = $('.logo');

  // Where should the duplicated logo go to?
  var target = $('.body');

  // What should the min-height be before inserting the duplicated logo?

  if ($("body").height() > 50) {
    logo.clone().css({
      'position': 'fixed',
      'background': 'red',
      'z-index': '-1',
      'width': '75px',
      'top': '0px',
      'left': '0px',
    }).insertAfter(logo);

    logo.css({
      'margin-top': '1100px',
      'display': 'block'
    });

  }

});

html,
body {
  margin: 0;
  padding: 0;
}
body {
  font: bold 2em sans-serif;
  color: #fff;
  border: 1px solid #000;
}
.logo {
  position: relative;
  background: #7A59A5;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="logo">elem</div>

Update

The following code will copy and insert the copied logo every amount of pixels defined in var size

$(document).ready(function() {

  // What is the original logo?
  var logo = $('.logo');
  
  // At what size should a new logo be inserted?
  var size = 1100; 

  if($('body').height() > size) {
    
    for(var i = (size * 2); i < ($('body').height()); i += size) {
      
      logo.clone().css({
        'position': 'absolute',
        'background': 'red',
        'z-index': '-1',
        'width': '100px',
        'top': i + 'px'
      }).insertAfter(logo);
      
    }

    logo.css({
      'margin-top': '1100px',
      'display': 'block'
    });

  }

});

html,
body {
  margin: 0;
  padding: 0;
}
body {
  font: bold 2em sans-serif;
  color: #fff;
  height: 6000px;
}
.logo {
  position: relative;
  background: #7A59A5;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <div class="logo">logo</div>

can you give me example where this if is true? It wont work for me, but i want to see if this can be an option for me. — Dejan Jankov, Oct 15 '15 at 11:38
Sure, I'll edit the answer, I'll add some interactivity that'll demonstrate it better. — Jason, Oct 15 '15 at 11:41
@DejanJankov I changed the code sample, when clicking **Run code snippet** it returns a random height for the `body` that ranges from 100-500. Clicking it a couple of times should display the behavior you're looking for I think? — Jason, Oct 15 '15 at 11:51
Yes that is it... but it wont work in print preview if i put margin-top. the style only forks on first div. — Dejan Jankov, Oct 15 '15 at 12:03
@DejanJankov Ah, we're on the right track then. What exactly do you mean with print preview and to what element does `margin-top` need to be applied and with what value? — Jason, Oct 15 '15 at 12:07
First div needs to be behind all elements on page and to have margin-top of 1100px appliead on top of a page. The same goes for second div, but the margine-top needs to be appliead on the first div. Hope you understand me. — Dejan Jankov, Oct 15 '15 at 12:13
@DejanJankov I have changed the code sample. Change the pixels to what suits your needs in `$("body").height() > **px**` If you want to change the CSS properties for both logo's you can now easily do so, even where you want the second logo to be inserted in. — Jason, Oct 15 '15 at 12:32
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/92384/discussion-between-jason-and-dejan-jankov). — Jason, Oct 15 '15 at 12:33

Add div every time the height is greater then 11.5in

2 Answers2

Update