Как менять стили блока после нажатия на ссылку?

Question

[Andrey_nk]

У меня после нажатия на ссылку появляется блок (1) в нужном месте, там же висит второй блок (2), который центрируется по середине. После того как появляется (1) второй (2) сдвигается влево, но корректно он работает только в мозилле и ie , в остальных браузерах иногда происходят зависания на неопределённый срок.

По моим предположениям нужно менять стиль (2) блока после нажатия на кнопку. Может будут другие предложения.

spirulina-pacifica.ru/site

<div class="header-right">
       <a id="open-close" href="#">Вход</a> | <a id="open-close1" href="#">Регистрация</a>
       </div>      
    
      </div>
    </div> 
    
   <div id='site'>
      
     <div id="block-links" class="bar">    
    <a id="close" href="#" title="Закрыть">х</a> 
      <br/>
          <form class="form-wrapper cf">
	         <input type="text" placeholder="Логин" required>
	         <input type="text" placeholder="Пароль" required>
	         <br>
	         <button type="submit"></button>
         </form>
      </div>
       
      <div id="block-links1" class="bar1">
      <a id="close1" href="#" title="Закрыть">х</a> 
      <br/>
          <form class="form-wrapper-registration">
	         <input type="text" placeholder="Ваше имя" required>
	         <input type="text" placeholder="Логин" required>
	         <input type="text" placeholder="E-mail" required>
	         <input type="text" placeholder="Пароль" required>
	         <input type="text" placeholder="Повторите пароль" required>
	         <br>
	         <button type="submit"></button>
         </form>
      </div>    
          
      <div class="box-languages">
      <div class="languages"><img src="images/english.png" alt="Английский" width="100%" height="97px"/></div>
      <div class="languages"><img src="images/german.png" alt="Немецкий" width="100%" height="97px"/></div>
      <div class="languages"><img src="images/italian.png" alt="Итальянский" width="100%" height="97px"/></div>
      <div class="languages"><img src="images/russian.png" alt="Русский" width="100%" height="97px"/></div>
      <div class="languages"><img src="images/spanish.png" alt="Испанский" width="100%" height="97px"/></div>
      <div class="languages"><img src="images/france.png" alt="Французский" width="100%" height="97px"/></div>
      <div class="languages"><img src="images/polski.png" alt="Кольский" width="100%" height="97px"/></div>
      <div class="languages"><img src="images/arabic.png" alt="Арабский" width="100%" height="97px"/></div>
      <div class="languages"><img src="images/china.png" alt="Китайский" width="100%" height="97px"/></div>
      </div>

$(document).ready(function() {
  $('#open-close').show();
  $('#block-links').hide();

  $('#open-close').click(function(event) {
    event.preventDefault(); // Для того чтобы при нажатии на ссылку не кидало вверх
    $('#block-links').show();
    $('#block-links1').hide();
  });
  $('#close').click(function(event) {
    event.preventDefault();
    $('#block-links').hide();
  });
   
  // второй блок
  $('#open-close1').show();
  $('#block-links1').hide();

  $('#open-close1').click(function(event) {
    event.preventDefault(); // Для того чтобы при нажатии на ссылку не кидало вверх
    $('#block-links1').show();
    $('#block-links').hide();
  });
  $('#close1').click(function(event) {
    event.preventDefault();
    $('#block-links1').hide();
  }); 
});

.box-languages {
   width: 750px;
   height: 330px; 
   overflow: hidden;
   margin-left: auto;
   margin-right: auto;
}

.bar{
    float:right; 
    width: 220px; 
    height: 325px; 
    margin: 3px 10px 0 10px; 
    background:url('images/enter.png') top center no-repeat;
    z-index: 2;
    position: relative;

}

.bar1{
    float:right; 
    width: 220px; 
    height: 325px; 
    margin: 3px 10px; 
    background:url('images/registration.png') top center no-repeat;
    z-index: 2;
    position: relative;
}

Answer 1

[Владлен Грачев]

Хм, по какой-то причине в браузерах на WebKit положение блока пересчитывается только после наведения курсора на него.

Добавьте в стили какой-нибудь класс вроде следующего:

.float-left {
  float: left;
}

А в функциях открытия-закрытия форм добавляйте/удаляйте этот класс для .box-languages. Используйте то, что больше подходит: toggleClass(), addClass(), removeClass().

Comments

[Andrey_nk]

Благодарю за помощь!