Question

I am kinda new to Twitter’s Bootstrap framework. I have a lot coding already covered, but I’m stuck with something.

I have login form placed in my ‘navbar’ like so:

<div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
      <div class="container">
        <div id="login-div">
          <form class="navbar-form pull-left" id="login-form">
            <input type="text" class="input-block-level" id="login-username" placeholder="gebruikersnaam">              
            <input type="password"  class="input-block-level" id="login-password" placeholder="wachtwoord">
          </form>
          <img src="img/button_ledensite_50.png" id="login-button" class="pull-left">
        </div>

        <img src="img/button_zoeken_50.png" class="pull-right" id="btn-search">
        <a class="btn btn-navbar" id="btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </a>
        <div class="nav-collapse collapse">
          <ul class="nav pull-right">
            <li class=""><a href="#">informatie</a></li>
            <li><a href="#about">groepen</a></li>
            <li><a href="#contact">nieuws</a></li>
            <li><a href="#contact">agenda</a></li>
            <li><a href="#contact">multimedia</a></li>
            <li><a href="#contact">shop</a></li>
          </ul>
          <div><input type="text" placeholder="Zoeken.." id="resp-search"></div>
        </div><!--/.nav-collapse -->
      </div>
    </div>
  </div>

What I want it to do is, when I click on this image:

<img src="img/button_ledensite_50.png" id="login-button" class="pull-left">

I want to slide the form to the right and so push the image away, but the form may not break out of the screen in responsive mode or break the line and push the image to a second line within the navbar. I have tried various thing with jQuery and I succeeded in sliding the form, but I always get the problem discribed above.

Sorry for my bad English, but I can’t explain it any other way..

I hope some one can help me, because I searched everywhere on Google, but did not find anything.

Kind regards!

Answer 1

Take a look at this: http://darcyclarke.me/development/animate-float-positions-in-jquery-1-5/

Maybe you can animate your float to right position and animate the width of the image to 0px