Solved

Hide/show span element with Javascript on page resize

Posted on 2013-06-17
4
760 Views
Last Modified: 2013-11-19
In my HTML I have:
<span name="manual_icons_portrait" align="center" style="display:none;">
html...
</span>

and

<span name="manual_icons_landscape" align="center" style="display:block;">
html...
</span>

I then use Javascript to detect the page size to then show or hide the appropriate span element:
//alert(browser_width);
if ((window.innerWidth || document.documentElement.clientWidth) < 1500)
{
      document.getElementsByName('manual_icons_portrait').style.display = 'block';
      document.getElementsByName('manual_icons_landscape').style.display = 'none';
}
else
{
      document.getElementsByName('manual_icons_portrait').style.display = 'none';
      document.getElementsByName('manual_icons_landscape').style.display = 'block';
}

Although it does not work and in my Firefox JS debugger it always says getElementsByName(...) is null or undefined.

So I thought it was because the JS was called before the HTML was rendered therefore not referring it to anything i.e. no CSS to change with the function as the CSS does not exist yet. I put the JS after the HTML - after the closing body tag - still to no avail.

Please say how this would work and switch between the span elements.
0
Comment
Question by:Johny_Brav0
  • 3
4 Comments
 
LVL 28

Accepted Solution

by:
Pravin Asar earned 500 total points
ID: 39254626
window.onresize = function(event) {
   // Your Code
}

The onresize event occurs when the size of an window has changed

Look at the implementation at

http://www.javascriptjournal.com/tutorials/windetails.htm
0
 
LVL 28

Assisted Solution

by:Pravin Asar
Pravin Asar earned 500 total points
ID: 39254631
Also use getElementById  instead of   getElementsByName

Assign the id="ElementID"
0
 

Author Comment

by:Johny_Brav0
ID: 39259888
Code that works - off of Google then Stack Overflow.

Thanks for the help.

// Detect whether device supports orientationchange event, otherwise fall back to
// the resize event.
var supportsOrientationChange = "onorientationchange" in window,
      orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";

window.addEventListener(orientationEvent, function()
{
      //alert('screen:' + window.orientation + " " + screen.width);
      
      var manual_icon_portrait_var = document.getElementById('manual_icons_portrait');
      var manual_icon_landscape_var = document.getElementById('manual_icons_landscape');

      if ((manual_icon_portrait_var.style.display == 'none') && (screen.width == 800))
      {
            manual_icon_portrait_var.style.display = 'block';
            manual_icon_landscape_var.style.display = 'none';
      }
      else
      {
            manual_icon_portrait_var.style.display = 'none';
            manual_icon_landscape_var.style.display = 'block';
      }

}, false);
0
 
LVL 28

Expert Comment

by:Pravin Asar
ID: 39260993
Here is a simple code.

<html>
      <head>
<script>          
  function doOnOrientationChange()
  {
        // Look the orientation
    switch(window.orientation)
    {  
      case -90:
      case 90:
        alert('landscape');
        break;
      default:
        alert('portrait');
        break;
    }
    // Alternate way
    if (screen.height > screen.width){
          alert("Portrait!");
      }
      else {
        alert('Landscape');            
      }
  }
  window.addEventListener('onorientationchange', doOnOrientationChange);

  // Initial execution if needed
  doOnOrientationChange();
</script>
            
      </head>
      <body onload="doOnOrientationChange()">
<h1>Simple code</h1>
            
      </body>
</html>
0

Featured Post

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
youtube blocking politics 4 55
jQuery Dialog Autoresize Bug 2 24
Start Auto-download of File when page loads? 1 20
Why is initialize not a function? 8 18
Learn by example how to specify CSS selectors for Selenium WebDriver test automation software.
Does your audience prefer people in photos or no people? How can you best highlight what you’re selling? What are your competitors doing, and what can you do that is different and unique from them?  Continue reading to learn how to make your images …
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

809 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question