Is there any method to get html tag on specific height?

Question

I can get height of entire container using jQuery, I want to add H1 tag after 500px height inside the container.

var height = $("body").find(".container"). innerHeight();
if(height > 800){
 //Get here div on height 600 and insertAfter('<h1>New Heading</h1>') after that element on height 600, and insert H1 tag after closing that specific element  
}

var height = $("body").find(".container"). innerHeight();
if(height > 800){
 //Get here div on height 600 and insertAfter('<h1>New Heading</h1>') after that element on height 600, insert H1 tag right after specific element  
}

You can achieve this with css just put a margin-top of 500px in h1 — Ace, Nov 10 '19 at 11:33
What do you mean by "get html tag on specific height"? Do you want the h1 to be placed inside the container and 500px space between the top of the container and the h1? Please post some html and css so we can help you better. — Artur Noetzel, Nov 10 '19 at 13:11
@Whoami-github I don't need to put margin of 500px, I want to add h1 tag after 500px. — web dev, Nov 10 '19 at 14:47
@ArturNoetzel I want to know the the element inside container from the top of 500px, then add h1 tag. — web dev, Nov 10 '19 at 14:48
sir I have a table inside container , there are many rows in that table, and I want to print that table, I have fixed header and footer for that too, now I just want page break if the container have more than 800px height, there should be h1 tag added after 500px from the top, then I'll apply page break for that. content inside container is generating dynamically, I want to use a logic to check which is on 500px from the top , rest of the logic I can apply. I hope you understood the question, thanks — web dev, Nov 10 '19 at 14:53

score 0 · Answer 1 · answered Nov 10 '19 at 11:07

0

If I understood you correctly you can accomplish this with some styles:

HTML:

<div class="container">
   <h3 class="customTag">Im Your H3</h3>
</div>

CSS:

.container{
    position: relative;
    height: 800px;
    width: 600px;
    background-color: red;
}
.customTag{
    position: absolute;
    bottom: 500px;
    background-color: yellow;
    }

Here is demo for you: https://codepen.io/init1/pen/ExxpxoM

answered Nov 10 '19 at 11:07

Gortis

1
3

sir I have a table inside container , there are many rows in that table, and I want to print that table, I have fixed header and footer for that too, now I just want page break if the container have more than 800px height, there should be h1 tag added after 500px from the top, then I'll apply page break for that. content inside container is generating dynamically, I want to use a logic to check which is on 500px from the top , rest of the logic I can apply. I hope you understood the question, thanks – web dev Nov 10 '19 at 14:52
Have you got the answer? – VishnuKumar ps Aug 15 '22 at 06:24

score 0 · Answer 2 · edited Nov 10 '19 at 13:37

0

$(document).ready(function(){ 
  $(window).bind('scroll', function() { 
    var navHeight = $( window ).height() - 600; 
    if ($(window).scrollTop() > navHeight){
      $('.header').addClass('headcolor'); $('.nave_stickey_text').fadeIn(); 
    } else { 
      $('.header').removeClass('headcolor'); 
      $('.nave_stickey_text').fadeOut(); 
    }
  });
});

edited Nov 10 '19 at 13:37

Pouria Moosavi

662
7
22

answered Nov 10 '19 at 12:01

ChandanKr

76
7

1

sir I have a table inside container , there are many rows in that table, and I want to print that table, I have fixed header and footer for that too, now I just want page break if the container have more than 800px height, there should be h1 tag added after 500px from the top, then I'll apply page break for that. content inside container is generating dynamically, I want to use a logic to check which is on 500px from the top , rest of the logic I can apply. I hope you understood the question, thanks – web dev Nov 10 '19 at 14:52

Is there any method to get html tag on specific height?

2 Answers2