SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2006
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question How to achieve this affect

    I like the way this site has a map utility that splits the whole page horizontally. A nice div but what is the javascript that can achieve this. I looked at the source but need a bit more help to get something similar.

    http://www.lonelyplanet.com/cayman-islands

  2. #2
    SitePoint Enthusiast
    Join Date
    Jun 2006
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <!DOCTYPE HTML>
    <html class="no-js" xmlns:fb="http://www.facebook.com/2008/fbml">
        <head>
    
            
            <link rel="stylesheet" href="http://static.lonelyplanet.com/static-ui/style/destinations_compressed.css" type="text/css" media="screen"/>
            <link rel="stylesheet" href="http://static.lonelyplanet.com/static-ui/style/print.css" type="text/css" media="print"/>
    
    <link rel="stylesheet" href="http://static.lonelyplanet.com/static-ui/style/global.css" type="text/css" media="screen,projection"/>
    
    <script type="text/javascript" src="http://static.lonelyplanet.com/static-ui/js/lp-js-library.js"></script>
           
    
    <script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAADUr8Vd6I7bfZ5k4c27F7KxR5cxXriAJsP5a75Cx4cnHTXGWMNxQxhFddQkNg7EBCllU86qgA_ugglg"></script>
    <script type="text/javascript" src="http://static.lonelyplanet.com/static-ui/js/lpmaps-destinations.js"></script>
    
           
        </head>
    
    <body id="destinations" class="country mls green">
    
            
    <div id="pageTitleWrap" class="redPadding">
      <div id="gradient"></div>
            </div>
        
        <div id="mapWrap">
            <div id="map">
            </div>
        </div>
    
        <div id="mapTab">
                
                <a href="#" id="tabToggleMap" class="toggleMap closed">
                <span class="hidden">Open Map</span>
                </a>
    
         <script type="text/javascript">
                // <![CDATA[
                lp_init_map_toggle ($('#tabToggleMap'), 'map') ;  
                $(function() {
                    if (jQuery.cookies.get('lpmaps') == 'open') {  
                      show_map('map');
                    }
                });
                // ]]>
                </script>
        </div>
        
    
    </body>
    </html>
    I cant locate the functions lp_init_map_toggle(); but I think its just css that is changing the background value of y.
    Still I need to learn to be able to implement this myself clearly.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •