How to leave a fullscreen div with CSS3 and scrollTo with jQuery

Navigation
2

I'm trying to create a responsive site with Twitter Bootstrap and I'd like to know how I could let div get fullscreen, ie that it takes up the entire screen and when press the button, the site will smoothly slide to the next div .

I tried to use fullPage.js but it ended up unconfiguring the whole site, leaving Portfolio above Contact . And also, the text was not centralized (horizontal and vertical).

    
asked by anonymous 02.11.2014 / 00:14

1 answer

4

Once you're using Bootstrap, I assume you have jQuery in use too. So here's a solution to give you a starting point:

Example in JSFiddle 

/* Retirar da tag "body" a altura que a barra de navegação consome
 * para que as "div" fiquem todas com o máximo de altura da tela.
 */
var navH = $('body > .nav').outerHeight(true);
$('body').css({
  "margin-top": navH + "px"
});

/* Anexar um evento de clique nos links de navegação
 */
$('body > .nav').on("click", 'a', function(e){
  e.preventDefault(); // cancela o scrollTo do navegador

  var target        = $(this).attr("href"),    // apanhar ID da "div" alvo
      elementOffset = $(target).offset().top,  // distancia do elemento alvo até ao topo
      distance      = (elementOffset - navH);  // distancia que é necessário percorrer

  /* Animar o ScrollTo do navegador
   */
  $("html, body").animate({scrollTop:distance}, '500', 'swing', function() { 
    /* Atualizar elemento ativo após animação concluída
     */
    $('body > .nav .active').removeClass("active");
    $('a[href="'+target+'"]').parent().addClass('active');
  });
});


$(function() {

  var navH = $('body > .nav').outerHeight(true);

  $('body').css({
    "margin-top": navH + "px"
  });

  $('body > .nav').on("click", 'a', function(e) {
    e.preventDefault();

    var target = $(this).attr("href"),
      elementOffset = $(target).offset().top,
      distance = (elementOffset - navH);

    $("html, body").stop(true, true).animate({
      scrollTop: distance
    }, '500', 'swing', function() {
      $('body > .nav .active').removeClass("active");
      $('a[href="' + target + '"]').parent().addClass('active');
    });
  });
});
html,
body {
  height: 100%;
}
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: black;
  color: #FFF;
}
#sections,
#sections > div {
  width: 100%;
  height: 100%;
}
#section_1 {
  background: green;
}
#section_2 {
  background: yellow;
}
#section_3 {
  background: white;
}
#section_4 {
  background: blue;
}
#section_5 {
  background: pink;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><ulclass="nav nav-pills" role="tablist">
  <li role="presentation" class="active"><a href="#section_1">Div 1</a>
  </li>
  <li role="presentation"><a href="#section_2">Div 2</a>
  </li>
  <li role="presentation"><a href="#section_3">Div 3</a>
  </li>
  <li role="presentation"><a href="#section_4">Div 4</a>
  </li>
  <li role="presentation"><a href="#section_5">Div 5</a>
  </li>
</ul>
<div id="sections">
  <div id="section_1">Olá 1</div>
  <div id="section_2">Olá 2</div>
  <div id="section_3">Olá 3</div>
  <div id="section_4">Olá 4</div>
  <div id="section_5">Olá 5</div>
</div>

The above solution works by using a markup and using some CSS properties. However, it is extremely flexible and quickly adaptable to different ( markup ) realities.

Refer to the examples to see the working solution and you can see the CSS in use whose relevant part is intended with the element height at 100% later adjusted in the <body/> tag via JavaScript.

Note: This suggestion will drop graciously when JavaScript is disabled because target elements are present in href of navigation, which corresponds to the "native" behavior for this type of scenario .

    
02.11.2014 / 02:36
Passing null parameter to a method How to leave current date in text field