full width footer

full width footer using javascript

by Usman Khan

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">

      <!-- The justified navigation menu is meant for single line per list item.
           Multiple lines will require custom code not provided by Bootstrap. -->
      <div class="masthead">
        <h3 class="text-muted">Project name</h3>
        <nav>
          <ul class="nav nav-justified">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Projects</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Downloads</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
        </nav>
      </div>

      <!-- Jumbotron -->
      
      <!-- Example row of columns -->
      <div class="row">
        <div class="col-sm-4">
          <h2>Safari bug warning!</h2>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
          <p><a class="btn btn-primary" href="#" role="button">View details »</a></p>
        </div>
        <div class="col-sm-4">
          <h2>Heading</h2>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
          <p><a class="btn btn-primary" href="#" role="button">View details »</a></p>
       </div>
        <div class="col-sm-4">
          <h2>Heading</h2>
          <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac...

CSS

.footer{background-color:red}

JavaScript

function strechElem(className){
  var docWidth = document.body.clientWidth;
  var elem = document.getElementsByClassName(className);
  marginVal = (docWidth - elem[0].offsetWidth)/2
  var cssString = "margin-left:-"+marginVal+"px; margin-right:-"+marginVal+"px; padding-left:"+marginVal+ "px; padding-right"+marginVal+ "px; background-color:blue";
  elem[0].style.cssText = cssString;


}

//strechElem('footer');
var timout 
window.onresize = function(event) {
strechElem('footer');
  /*clearTimeout(timout)  
    timout = setTimeout(function() {

    strechElem('footer');
            
  }, 1000);
  */
};