Member Avatar for turpentyne

I have a page that is centered both vertically and horizontally. I've got a snippet of javascript that reorients the page if the user repositions their ipad. If they start in horizontal, and go vertical, everything loads fine. My problem is that, if they start in vertical and go horizontal, the page resizes width fine, but positions a little too low on the page: the bottom of the site, is off the edge, and they have to scroll to see the bottom part - when they shouldn't have to.

Here's the javascript snippet

<script>
    // adjust page size for ipad orientation 

    $(window).bind('orientationchange', function(event) {
    if (window.orientation == 90 || window.orientation == -90 || window.orientation == 270) {
        $('meta[name="viewport"]').attr('content', 'height=device-width,width=device-height,initial-scale=1.0,maximum-scale=1.0');
        $(window).resize();
    } else {
        $('meta[name="viewport"]').attr('content', 'height=device-height,width=device-width,initial-scale=1.0,maximum-scale=1.0');
        $(window).resize();
    }
    }).trigger('orientationchange');  

</script>

and the html:
<body>   


<div id="allbut" style="display:none;opacity:0;"> 
<div id="music">
    <audio id="song" autoplay loop> 
        <source src="/music/12_full_prom_night_0132.ogg" type="audio/ogg" />
        <source src="/music/12_full_prom-night_0132.mp3" type="audio/mpeg" />
        Your browser does not support the audio element.
        </audio>
</div>
<div id="testit" class="main_page"></div>


<div id="content" style="">
  <div class="container">
    <div class="header">
        <div class="navbox" style="position:absolute;top:-7px;">
        <!-- later this nav will be separated out as an include -->
        <ul class="main-nav" >
            <li id="sp_x" style="height:20px;"><a href="#" class="main ee" id="link_xt" style=""><img src="images/transp.gif" style="width:65px;height:20px; border:0px;"></a></li>

            <li id="sp_x" style="height:20px;"><a href="#" class="main bb" id="link_x" style=""><img src="images/transp.gif" style="width:140px;height:20px; border:0px;"></a></li>

            <li id="sp_x"  style="height:20px;"><a href="#" class="main cc" id="link_x" style=""><img src="images/transp.gif" style="width:130px;height:20px; border:0px;"></a></li>

            <li id="sp_early" ><a href="#" class="main dd" id="link_early"><img src="images/transp.gif" style="height:20px;width:170px;"></a>
                 <ul id="sub-nav">
                    <li class="subnav"> <span class="subnav-separators">: :</span> </li>
                    <li class="subnav"><a href="#" class="main ff" id="link_x"><img src="images/transp.gif" style="width:73px;height:20px; border:0px;"></a></li>   
                    <li class="subnav"><span class="subnav-separators">|</span></li>  
                    <li class="subnav"><a href="#"class="main gg" id="link_xx"><img src="images/transp.gif" style="width:47px;height:20px; border:0px;"></a></li>  
                    <li class="subnav"><span class="subnav-separators">|</span></li> 
                    <li class="subnav"><a href="#" class="main hh" id="link_xxx"><img src="images/transp.gif" style="width:60px;height:20px; border:0px;"></a></li>
                    </ul>
            </li>
            <li id="sp_contact"  style="height:20px;"><a href="#" class="main contact" id="link_contact" style=""><img src="images/transp.gif" style="width:65px;border: 0px;height:20px;"><!--<span id="sp_contact">CONTACT</span>--></a></li>
            </ul>
            </div>

            <div class="logo-main">
                <ul class="main-nav">
                    <li><a href="#" class="main aa"><img src="images/logo.png"></a></li>
                </ul>
            </div>
        </div>


    <div id="map_on" style="">
    <a href="javascript:void();" onclick="document.getElementById('underlay').style.display='block'; document.getElementById('mapBox').style.display='block';" class="main map" title="map" id="mappit"><img src="images/gallery/thumb1.jpg" id="mappits" class="mappits"></a>
    </div>

    <div class="square-container" > 

        <div class="square one" id="sq1" style="overflow:hidden;">
            <div id="square_caption1" class="square_captions"><span class="sq_capt">The xxxxx</span></div>
            <div id="cf" style="overflow:hidden;height:100%;width:100%;">
                <img class="bottom" style="width:100%;" src="images/the_residences_1_color.jpg">
                <img id="pic_1_color" class="top" style="width:100%;" src="images/the_residences_1.jpg">
            </div>


        </div>
        <div id="switch_gallery" class="gallery-subs" style="height:0px;overflow:visible; position:relative; top:340px;left:65px;z-index:40; display:none;opacity:0;">
            <div id="map_off" style="height:30px;width:30px;float:left;margin-right:20px;">
                <a href="images/examples/image-1.jpg" rel="lightbox[plants]" title="" id="thumb_url_1"><img src="images/gallery/thumb1.jpg" id="thumbs_1" class="gallery_thumbs"></a>
            </div>
            <div style="height:30px;width:30px;float:left;margin-right:20px;">
                <a href="images/examples/image-2.jpg" rel="lightbox[plants]" title="" id="thumb_url_2"><img src="images/gallery/thumb2.jpg" id="thumbs_2" class="gallery_thumbs"></a>
            </div>
            <div style="height:30px;width:30px;float:left;margin-right:20px;">
                <a href="images/examples/image-3.jpg" rel="lightbox[plants]" title="" id="thumb_url_3"><img src="images/gallery/thumb3.jpg" id="thumbs_3" class="gallery_thumbs"></a>
            </div>
            <div id="bigthumb" style="height:30px;width:30px;position:absolute;left:8px;top:-190px;z-index:top;">
                <a href="images/examples/image-16.jpg" rel="lightbox[plants]" title="" id="thumb_url_4"><img src="images/gallery/thumb16.jpg" id="thumbs_4" class="gallery_thumbs"></a>
            </div>
            <div id="bigthumb2" style="height:30px;width:30px;position:absolute;left:1px;top:-325px;z-index:top;display:none;">
                <a href="images/examples/image-16.jpg" rel="lightbox[plants]" title="" id="thumb_url_5"><img src="images/gallery/thumb16.jpg" id="thumbs_5" class="gallery_thumbs"></a>
            </div>
        </div>


            <div id="underlay"></div>

            <div id="mapBox"style="display:none; height:0px; overflow:visible; position:relative; z-index:9999999;width:100%; background-color:#000; *opacity:0.1;">
                <div id="" style="position:relative;top:-100px;">
                    <div style="height:0px;overflow:visible;z-index:300;position:relative;top:274px;left:-19px;">
                        <img id="hotspot1" class="hotspots" src="images/transp.gif">
                        <div id="hotspot_details1" class="hotspot_details" style="">
                            <div style="position:absolute; height:16px; width:16px; margin-top:10px; margin-left:10px;">
                            <img id="closer" src="images/closer.png">
                            </div>
                            <div class="popup_copy" style="background-color:white;">
                            <img style="margin-top:-112px;" src="images/MapImage.jpg">
                            </div>
                        </div>
                    </div>
                    <div style="height:0px;overflow:visible;font-size:1em;color:red;z-index:300;position:relative;top:550px;">
                        <a href="javascript:void();" id="mapcloser" style="padding-left:30px;" onclick="document.getElementById('underlay').style.display='none'; document.getElementById('mapBox').style.display='none';"> <img src="close.png" border="0"></a>
                    </div>
                    <div style="">
                        logo
                    </div>
                </div>
            </div>

            <div class="square two" id="sq2" style="">
                <div id="square_caption2" class="square_captions"><span class="sq_capt">text</span></div>

            </div>

            <div class="square three" id="sq3" style="left-margin:20px;">
                <div id="square_caption3" class="square_captions"><span class="sq_capt">Text</span></div>

                </div>

                <div class="square four" id="sq4" style="">
                    <div id="square_caption4" class="square_captions"><span class="sq_capt">Early Registration</span></div>

                </div>

                <div class="home-register">
                    <p class="reg1">asdfasdf</p>
                    <p class="reg2">asdfasdfasdf</p>
                    <p class="reg3"><a href="#" class="main dd"><span id="regfont">Click to Register</span></a></p>   
                </div>
            </div>

            <div class="details">
                <h1>Title</h1>
                <div class="article">
                </div>
            </div>



            <div class="foot-container"> 
                <div class="foot-logo">footer logo<br/>
                </div>

                <div class="foot-nav" style="">

                    footer content
                </div>

            </div>       
        </div>
    </div>
 </div> <!-- allbut div -->   




<div id="slidestart" style="display:block;opacity:1;">

<div id="content" style="">
<div class="container">
<div id='slideshowHolder' style="position:relative;top:-19px;left:2px;">
    <img src="images/ImageZ_Intro1.jpg" />
    <img src='images/ImageZ_Intro2.jpg' />
    <img src='images/ImageZ_Intro3.jpg' />
    <img src='images/Image_Intro4.jpg' />
</div>
<div class="foot-nav" style="position:absolute;top:500px;left:228px;">
        <!-- later this nav will be separated out as an include -->
        <a href="#" id="music_control2" class="">MUSIC OFF</a> | <a href="#" id="skip_intro" class="">SKIP INTRO</a>
    </div>


</div>

</div>



</div>

</body>
  • 2 Contributors
  • 1 Reply
  • 225 Views
  • 2 Hours Discussion Span
  • Latest Post Latest Post by LastMitch
Member Avatar for LastMitch 
<script>
// adjust page size for ipad orientation
$(window).bind('orientationchange', function(event) {
if (window.orientation == 90 || window.orientation == -90 || window.orientation == 270) {
$('meta[name="viewport"]').attr('content', 'height=device-width,width=device-height,initial-scale=1.0,maximum-scale=1.0');
$(window).resize();
} else {
$('meta[name="viewport"]').attr('content', 'height=device-height,width=device-width,initial-scale=1.0,maximum-scale=1.0');
$(window).resize();
}
}).trigger('orientationchange');
</script>

I never seen something like before. It looks nice.

It usually just a tags.

but positions a little too low on the page: the bottom of the site, is off the edge, and they have to scroll to see the bottom part - when they shouldn't have to.

Can you post an image on how it looks like on the bottom?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.