openlayers map with sidebar problem

Discussion in 'Javascript' started by Jedrin, Feb 25, 2010.

  1. Jedrin

    Jedrin Guest

    I am displaying a map using openlayers, on the left I have a sidebar
    which I can show/hide through ruby on rails/ajax. The problem is that
    when my sidebar appears, the map pushes out to the right and causes a
    slider to appear at the bottom. I want it to work the same way that
    google maps works where the map resizes and no slider appears at the
    bottom.

    Any advice on the general direction, what approach or API to look
    into would be appreciated.

    The general layout I use is with the sidebar is below


    =====================

    <style type='text/css'>
    <!--

    #sidebar {
    background-color: #999999;
    margin: 0px;
    padding: 5px;
    border-right-width: thin;
    border-top-style: none;
    border-right-style: dotted;
    border-bottom-style: none;
    border-left-style: none;
    border-right-color: #990000;
    overflow: auto;
    float: left;
    width: 150px;
    height: 100%;
    }


    -->
    </style>

    <span id='sidebar' style='display:none'>
    <%= link_to_remote '<<<<', :url => {:action => 'hide_sidebar'} %>

    <%= render :partial => 'map/georec_form',
    :locals => {:recs => @recs} %>

    </span>


    <div id='main_content'>
    <div> &nbsp
    <span id='sidebar_button'>
    <%= link_to_remote '>>>>', :url => {:action => 'show_sidebar'} %>
    </span>
    </div>

    <%= yield %>

    </div>
    Jedrin, Feb 25, 2010
    #1
    1. Advertising

  2. Jedrin

    Scott Sauyet Guest

    On Feb 25, 5:49 pm, Jedrin <> wrote:
    > I am displaying a map using openlayers, on the left I have a sidebar
    > which I can show/hide through ruby on rails/ajax. The problem is that
    > when my sidebar appears, the map pushes out to the right and causes a
    > slider to appear at the bottom.  I want it to work the same way that
    > google maps works where the map resizes and no slider appears at the
    > bottom.


    Are you referring to the scroll-bar by "slider"?

    >  Any advice on the general direction, what approach or API to look
    > into would be appreciated.


    It's probably easiest to set the style of the DIV, IFRAME, or whatever
    box holds the map. You'll need to find the width of the sidebar, the
    width of the container which holds both the sidebar and that map
    (possibly the BODY), and then set the width of the map holder with
    something like:

    myBox.style.width = (widthOfContainer - widthOfSidebar - padding)
    + "px";

    This should be inside a function that is called when the sidebar is
    hidden or shown and when the window is resized.


    >  The general layout I use is with the sidebar is below


    As this is a Javascript group, HTML, CSS, and JS code are all quite
    relevant. But server-side markup (RHTML?) is not very helpful.
    Please, if you're still looking for help with this, supply the
    *output* from your server-side code (from "View Source" or similar in
    your browser.)

    Good luck,

    -- Scott
    Scott Sauyet, Feb 26, 2010
    #2
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Rutger Claes
    Replies:
    1
    Views:
    6,631
    spaghetti
    Jul 7, 2003
  2. JR
    Replies:
    0
    Views:
    781
  3. John
    Replies:
    2
    Views:
    480
  4. Will

    Missing sidebar

    Will, Feb 24, 2006, in forum: HTML
    Replies:
    14
    Views:
    848
  5. Rudra Banerjee

    navigation sidebar problem

    Rudra Banerjee, May 28, 2011, in forum: HTML
    Replies:
    5
    Views:
    438
    Jonathan N. Little
    May 31, 2011
Loading...

Share This Page