?
Solved

Hide/show span element with Javascript on page resize

Posted on 2013-06-17
4
Medium Priority
?
775 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 2000 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 2000 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

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Although a lot of people devote their energy toward marketing for specific industries, there are some basic principles that can be applied to any sector imaginable. We’ll look at four steps to take and examine how those steps were put into action fo…
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses

801 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