[Last Call] Learn about multicloud storage options and how to improve your company's cloud strategy. Register Now

x
?
Solved

Hide/show span element with Javascript on page resize

Posted on 2013-06-17
4
Medium Priority
?
785 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: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say 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

This article was originally published on Monitis Blog, you can check it here . Today it’s fairly well known that high-performing websites and applications bring in more visitors, higher SEO, and ultimately more sales. By the same token, downtime…
CTAs encourage people to do something specific to show interest in your company, product or service. Keep reading to learn why CTAs should always be thought of as extremely important, albeit small, sections of websites.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

650 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