Related

Product App Platform: Run Node apps without managing servers Product
SSO Authentication for javascript applications Question Question
How would i make my discord bot run forever using java script in visual studio code? Question Question

Question

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

Posted January 7, 2020 907 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

Related

Product App Platform: Run Node apps without managing servers Product
SSO Authentication for javascript applications Question Question
How would i make my discord bot run forever using java script in visual studio code? Question Question

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.

×
Submit an Answer
1 answer
KFSys 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
    • KFSys 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
        • KFSys 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

Related

Looking for something else?

Ask a new question Search for more help