Johny_Brav0
asked on
Hide/show span element with Javascript on page resize
In my HTML I have:
<span name="manual_icons_portrai
html...
</span>
and
<span name="manual_icons_landsca
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.c
{
document.getElementsByName
document.getElementsByName
}
else
{
document.getElementsByName
document.getElementsByName
}
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.
<span name="manual_icons_portrai
html...
</span>
and
<span name="manual_icons_landsca
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.c
{
document.getElementsByName
document.getElementsByName
}
else
{
document.getElementsByName
document.getElementsByName
}
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.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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('o
// Initial execution if needed
doOnOrientationChange();
</script>
</head>
<body onload="doOnOrientationCha
<h1>Simple code</h1>
</body>
</html>
<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('o
// Initial execution if needed
doOnOrientationChange();
</script>
</head>
<body onload="doOnOrientationCha
<h1>Simple code</h1>
</body>
</html>
ASKER
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(or
{
//alert('screen:' + window.orientation + " " + screen.width);
var manual_icon_portrait_var = document.getElementById('m
var manual_icon_landscape_var = document.getElementById('m
if ((manual_icon_portrait_var
{
manual_icon_portrait_var.s
manual_icon_landscape_var.
}
else
{
manual_icon_portrait_var.s
manual_icon_landscape_var.
}
}, false);