Question

How to create an HTML element that's always on screen

Posted January 7, 2020 344 views
JavaScript

I’m trying to create an HTML, maybe a div to behave like the following:

  • Resize automatically his height to be 100% based on your window
  • Adjust it’s width to maintain constant proportions - example width would be always equal to 4/5 of his height.

I’ve been trying to configure it with css however I might need to use JavaScript. If you guys have any other solutions not in JavaScript but anything else like jQuery, I would be happy to use it as well.

Add a comment
fkutev22
By:
fkutev22
Add a comment

These answers are provided by our Community. If you find them useful, show some love by clicking the heart. If you run into issues leave a comment, or add your own answer to help others.

×
1 answer
KDSys January 7, 2020

Hi @fkutev22,

I’m not really into plain JavaScript so I’ll give you an example using jQuery.

$(window).resize(function(){
    $('#resizeWindow').width($('#resizeWindow').height()*4/5);
});

$(window).trigger('resize');

I’ll recommend using the above code with a div. Here is an example

<div id="resizeWindow"> </div>

Regards,
KDSys

Reply Report
  • fkutev22 January 7, 2020

    I’ve been trying to implement it however nothing has been happening.
    The div is just like a plain element.

    Reply Report
    • KDSys January 7, 2020

      Hi @fkutev22,

      Have you added jQuery to your website?

      If you haven’t just add this in the footer of your HTML page

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

      Regards,
      KDSys

      Reply Report
      • fkutev22 January 8, 2020

        If I wish to use the above query on other HTML elements how should I proceed?

        Reply Report
        • KDSys January 8, 2020

          To use jQuery on your elements you have two options, either use it with the ID of the element or with a class.

          If you wish to bind your jQuery with an ID you can do the following :

          $('#IdOfTheElement').val();

          If you wish to bind your jQuery with a class, you can do the following:

          $('.nameOfClass').val();

          Regards,
          KDSys

          Reply Report
Submit an Answer

Related

Looking for something else?

Ask a new question Search for more help