Solved

Hide/show span element with Javascript on page resize

Posted on 2013-06-17
4
769 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
4 Comments
 
LVL 29

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 29

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 29

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

The Orion Papers

Are you interested in becoming an AWS Certified Solutions Architect?

Discover a new interactive way of training for the exam.

Question has a verified solution.

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

Because your company can’t afford for you to make SEO mistakes, you’ll want to ensure you’re taking the right steps each and every time you post a new piece of content. This list of optimization do’s and don’ts can help you become an SEO wizard.
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 …
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
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…

724 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