CODEWITHSUNDEEP
javascripthtmlcss
Criizly
Criizly

Reputation: 41

JavaScript to change div before rendering

I've got a webpage with a few divs on it, the first thing to happen is detect if scripts are enabled, if they are not the page can render as it is now, but if javascript is enabled i need to change the size of the divs

Is there anyway to hide a div before it's shown on screen so I can resize it with javascript then make it visible again?

So the goal:

  1. User clicks on page link
  2. If scripts are not enabled, do nothing
  3. If scripts are enabled, hide the div.
  4. Resize the div
  5. Show the div and show it on screen

How can i organize my 3 script calls to achieve this?

  1. Function-1: hideDiv()
  2. Function-2: changeDivSize()
  3. Function-3: showDiv()

EDIT: If by default I hide the div, then resize + unhide it with javascript i still need to unhide it for people who don't have scripts enabled

Upvotes: 1

Views: 4231

Answers (2)

mohamedrias
mohamedrias

Reputation: 18566

  1. User clicks on a page link:
  2. If scripts are enabled, hide the div.

This can be done in onload event as soon as the div is available. 

document.getElementById("divId").style.display = "none";

Instead better option is using css:

#divId {
   display : none;
}

4) Resize DIV()

document.getElementById("divId").style.width = "440px";

5) Showing the div again

document.getElementById("divId").style.display = "block";

So your final code:

in css hide the div.

window.onload =  function() {
      var divEle = document.getElementById("divId");
      divEle.style.width = "440px";
      divEle.style.display = "block";
}

If javascript is disabled:

<noscript> 
  <style>
    #divId { 
        display: block;
     }
  </style>
 </noscript>

Upvotes: 4

Guffa
Guffa

Reputation: 700562

You can use Javascript to hide the element before it is rendered by adding a class to the body element. First add a CSS rule that hides the div if the body has a specific class:

<style>
body.HideDiv #MyDiv { display: none; }
</style>

Then right after the body element exists add the class to it:

<body>
  <script>document.body.className='HideDiv';</script>

Once the div exists you can resize it and show it:

<div id="MyDiv"></div>
<script>
var div = document.getElementById('MyDiv');
div.style.width = '200px';
div.style.height = '200px';
div.style.display = 'block';
</script>

If Javascript isn't enabled, the body never gets the class that hides the div, so the div will just remain visible.

Upvotes: 0

Related Questions