Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

Hide/show span element with Javascript on page resize

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

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Question has a verified solution.

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

A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
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…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

564 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