Showing posts with label twitter. Show all posts
Showing posts with label twitter. Show all posts

Monday 17 February 2014

Twitter Bootstrap single page website without the need for yet another plugin

The code below creates a page using Twitter Bootstrap. It contains one of those fashionable single page navigations. I needed to create one for a site I was developing for a client recently. When I started to look into it all the examples seemed to use a plugin. For performance purposes, I didn't want to use another plugin. Especially since jQuery already comes with the 'animate' class. See code below for solution.

<!DOCTYPE html>
<html>
  <head>
    <title>Single page website</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <style>  
    #about, #contact
    {
      padding-top:4em;
    }
    #contact
    {
      margin-bottom:40em;
    }
    </style>
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>        
        </div>
        <div class="navbar-collapse collapse">        
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#home">Home</a></li>
            <li ><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div><!-- nav-collapse -->
      </div><!-- container -->
    </div><!-- navbar -->

    <div id="home">
      <div class="row">
        <div class="container">
          <article class="col-md-4">
            <h2>Header 2</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quid ad utilitatem tantae pecuniae? Age, inquies, ista parva sunt. Quibus ego vehementer assentior. Quae cum essent dicta, discessimus.</p>    
            <p>Invidiosum nomen est, infame, suspectum. Duo Reges: constructio interrete. Quibus ego vehementer assentior. Non igitur bene.</p>
          </article>
          <article class="col-md-4">
            <h2>Header 2</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quid ad utilitatem tantae pecuniae? Age, inquies, ista parva sunt. Quibus ego vehementer assentior. Quae cum essent dicta, discessimus.</p>    
            <p>Invidiosum nomen est, infame, suspectum. Duo Reges: constructio interrete. Quibus ego vehementer assentior. Non igitur bene.</p>
          </article>
          <article class="col-md-4">
            <h2>Header 2</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quid ad utilitatem tantae pecuniae? Age, inquies, ista parva sunt. Quibus ego vehementer assentior. Quae cum essent dicta, discessimus.</p>    
            <p>Invidiosum nomen est, infame, suspectum. Duo Reges: constructio interrete. Quibus ego vehementer assentior. Non igitur bene.</p>
          </article>
        </div><!-- container -->
      </div><!-- row -->
    </div><!-- section -->

    <div id="about">
      <div class="row">
        <div class="container">
          <figure class="col-md-4">    
            <img src="http://lorempixel.com/400/200/sports" alt="sports" class="img-responsive" />
            <figcaption>Invidiosum nomen est, infame, suspectum. Duo Reges: constructio interrete. Quibus ego vehementer assentior. Non igitur bene.</figcaption>
          </figure>
          <figure class="col-md-4">    
            <img src="http://lorempixel.com/400/200/sports" alt="sports" class="img-responsive" />
            <figcaption>Invidiosum nomen est, infame, suspectum. Duo Reges: constructio interrete. Quibus ego vehementer assentior. Non igitur bene.</figcaption>
          </figure>
          <figure class="col-md-4">    
            <img src="http://lorempixel.com/400/200/sports" alt="sports" class="img-responsive" />
            <figcaption>Invidiosum nomen est, infame, suspectum. Duo Reges: constructio interrete. Quibus ego vehementer assentior. Non igitur bene.</figcaption>
          </figure>
        </div><!-- container -->
      </div><!-- row -->
    </div><!-- section -->

    <div id="contact">
      <div class="row">
        <div class="container">
          <article class="col-md-6">
            <h2>Header 2</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quid ad utilitatem tantae pecuniae? Age, inquies, ista parva sunt. Quibus ego vehementer assentior. Quae cum essent dicta, discessimus.</p>    
            <p>Invidiosum nomen est, infame, suspectum. Duo Reges: constructio interrete. Quibus ego vehementer assentior. Non igitur bene.</p>
          </article>
          <aside class="col-md-6">
            <h2>Header 2</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quid ad utilitatem tantae pecuniae? Age, inquies, ista parva sunt. Quibus ego vehementer assentior. Quae cum essent dicta, discessimus.</p>    
            <p>Invidiosum nomen est, infame, suspectum. Duo Reges: constructio interrete. Quibus ego vehementer assentior. Non igitur bene.</p>
          </aside>
        </div><!-- container -->
      </div><!-- row -->
    </div><!-- section -->
    <footer class="navbar-default navbar-fixed-bottom">
      <div class="container">
        <a href="#home">Back to top</a>
      </div>
    </footer>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://code.jquery.com/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>  
    <script>
    (function()
    {
      $('.nav a, footer a').click(function()
      {
        var target = $(this).attr('href');
        var targetLoc = $(target).offset().top;      
        $('html, body').stop().animate(
        {
          scrollTop:targetLoc,
          easing:'swing'
        }, 1000);
        return false;
      });
    })();
    </script>
  </body>
</html>

Twitter Bootstrap CSS snippets

When creating a website using Twitter Bootstrap you often find yourself using the same CSS code snippets. Below are some of mine.

/*Standard bootstrap colour palette*/
.gray-darker
{
  background:#222222;
  color:white;
}
.gray-dark
{
  background:#333333;
  color:white;
}
.gray
{
  background:#555555;
  color:white;
}
.gray-light
{
  background:#999999;
  color:white;
}
.gray-lighter
{
  background:#EEEEEE;
  color:#222222;
}
.brand-primary
{
  background:#428BCA;
  color:white;
}
.brand-success
{
  background:#5CB85C;
  color:white;
}
.brand-info
{
  background:#5BC0DE;
  color:white;
}
.brand-warning
{
  background:#F0AD4E;
  color:white;
}
.brand-danger
{
  background:#D9534F;
  color:white;
}

/* Remove colours of navigation bar */
.navbar-default, .navbar-inverse
{
        background-image:none;
background-color:white;
border-color:white;
box-shadow:none;
}

/* Set default colour for inactive navigation items in inverse bar */
.navbar-inverse .navbar-nav > li > a
{
  background:#222222;
  color:white;
}

/* Set hover colour for inactive navigation items in inverse bar */
.navbar-inverse .navbar-nav > li > a:hover
{
  background:#333333;
  color:white;
}

/* Set default colour for active navigation items in inverse bar */
.navbar-inverse .navbar-nav > li.active > a
{
  background:#555555;
  color:white;
}

/* Set hover colour for active navigation items in inverse bar */
.navbar-inverse .navbar-nav > li.active > a:hover
{
  background:#999999;
  color:white;
}

/* Set default colour for inactive navigation items in default bar */
.navbar-default .navbar-nav > li > a
{
  background:#222222;
  color:white;
}

/* Set hover colour for inactive navigation items in default bar */
.navbar-default .navbar-nav > li > a:hover
{
  background:#333333;
  color:white;
}

/* Set default colour for active navigation items in default bar */
.navbar-default .navbar-nav > li.active > a
{
  background:#555555;
  color:white;
}

/* Set hover colour for active navigation items in default bar */
.navbar-default .navbar-nav > li.active > a:hover
{
  background:#999999;
  color:white;
}

/* Align figure text to centre */
figure
{
  text-align:center;
}

/* Align figure images to centre */
figure img
{
  margin:0 auto;
}

/* Change size and colour of glyph icons */
span.glyphicon
{
  font-size:6em;
  color:#222222;
}

/* Make the carousel images centre and take up the whole carousel */
.carousel > .carousel-inner > .item > img
{
  margin:0 auto;
  width:100%;
}

/* Lift the arrows a little higher to vertical middle and dim */
.carousel-control > .icon-prev, .carousel-control > .icon-next, .carousel-control > .glyphicon-chevron-left, .carousel-control > .glyphicon-chevron-right
{
  top:40%;
  opacity:0.5;
}

/* Remove the awful background gradient */
.carousel-control.right, .carousel-control.left
{
  background-image:none;
}

/* Take the right arrow closer to the edge */
.carousel-control .icon-next, .carousel-control .glyphicon-chevron-right
{
  right:20%;
}

/* Take the left arrow closer to the edge */
.carousel-control .icon-prev, .carousel-control .glyphicon-chevron-left
{
  left:20%;
}

Monday 27 January 2014

Twitter Bootstrap sticky footer (without the pain)

Strangely enough, the sticky footer examples which I've seen for Twitter Bootstrap 3 seem to ignore the fact that there is now a class which takes all the pain away. It's called 'navbar-fixed-bottom', and it is usually used to create a bottom up navigation bar. However, if you add it to your footer code, it works better than any other sticky footer examples. Here's how it works:
Create a footer thus:
<footer class="navbar-default navbar-fixed-bottom">
      <div class="container">
        <p>Hello world!</p>
      </div>
</footer>
Then style it using CSS thus:
footer.navbar-default.navbar-fixed-bottom
 {
      background:red;
      color:white;
      padding:1em 0;
 }
 footer.navbar-default.navbar-fixed-bottom p
 {
      margin:0;
 }
Easy! Sticky footers all the way for me now. They're really useful for mobile web apps.

Wednesday 11 December 2013

Dynamic progress bar for Twitter Bootstrap using PHP

Twitter Bootstrap offers some very useful progress bars. See http://getbootstrap.com/components/#progress
They are based on percentages, so you need to get the length of the shaded bar as a percentage of the whole bar for them to be accurate.

Below is a small example of how to do this with PHP.

<?php
$currentVal = 10;
$maxVal = 20;
$percentageVal = ($currentVal/$maxVal)*100;
?>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="<?php echo $currentVal ?>" aria-valuemin="0" aria-valuemax="<?php echo $maxVal ?>"  style="width:<?php echo $percentageVal ?>%;">
    <span class="sr-only"><?php echo $percentageVal ?> Complete</span>
  </div>
</div>

Wednesday 12 June 2013

Removing Twitter Bootstrap modal link outlines

Developers who use Twitter Bootstrap may have noticed a problem when they use the navigation controls to launch a modal. This could be a link at the top which launches a contact form for example. The problem is, that an outline to the link is left behind. I've seen a few 'solutions' to this on the web. None of which worked for me, because they were CSS solutions and the outline is created using JavaScript. So, here's what a link required to launch a modal looks like:
<a href="#myModal" data-toggle="modal">Launch modal</a>
And here is some coding for the modal:

<div id="myModal" class="modal hide fade" role="dialog">
  <p>Hello</p>
    <button class="btn btn-primary">Save</button>
  </div>
</div>
Now, at last is the solution. Because, JavaScript creates the problem, it's a good idea to use JavaScript (in my case jQuery) to resolve it. The code should look like this:

(function()
{
    $('a').data('toggle','modal').click(function()
    {
        $(this).css(
        {
            'outline':'none'
        });
    });
})();
Good luck.


Monday 21 January 2013

Combining Twitter Bootstrap with Moodle

Moodle is an excellent LMS and Twitter Bootstrap an excellent page design framework so why not put them both together. Here's how.


Create a new theme location on your moodle installation by following these instructions. http://docs.moodle.org/24/en/Themes_FAQ#Why_is_the_new_theme_I_uploaded_not_showing_up_in_Theme_Selector.3F
You may suffer your new theme appearing with the name [[pluginname]]. If so, follow these instructions http://docs.moodle.org/dev/Themes#Getting_Your_Theme_to_Appear_Correctly_in_Theme_Selector
Download the Twitter Bootstrap theme from http://theming.sonsbeekmedia.nl/
Copy the contents of your downloaded theme into this directory.
Finally, you want to be in a situation where you can make your own small tweaks.
Open /theme/bootstrap/config.php
Add 'user_styles' to the end of the '$THEME->sheets' array.
Now create a file called /theme/bootstrap/style/user_styles.css. You can now put your tweaks in there such as:

p
{
font-family:Georgia,Serif;
}

Tuesday 4 December 2012

Fullscreen presentations using twitter bootstrap and the HTML5 API

I can't take all the credit for this. I have to acknowledge the great work done by HTML5 Demos. What I did was, simplify some of the JavaScript and CSS. I then used Twitter Bootstrap as a template, so to make this work, you'll have to make that download. I also made use of the carousel library which came with Twitter Bootstrap. You'll also have to download jQuery and refer to it as I have.

Here's how it works. You load put the page in your browser. When loaded, you press the 'f' jey to make the page full screen. Press the 'enter' key to move forward through the slideshow. Press the backspace key to move back. Press the 'Esc' key when you've done.

I've tested it on Chrome and Firefox. I believe there's another popular browser, but it's not installed on my computer.

Anyway. Here's the code.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Fullscreen demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <!-- CSS -->
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/bootstrap-responsive.css" rel="stylesheet">
    <!-- <link href="application/application.css" rel="stylesheet"> -->
    <style>
    ::-webkit-scrollbar
    {
      width:15px;
      background:white;
    }
    ::-webkit-scrollbar-thumb
    {
      box-shadow:inset 0 0 99px rgba(0,0,0,.2);
      border:solid transparent;
      border-width:6px 4px;
    }
    html, body
    {
      height:100%;
      background:white;
      overflow-y:auto;
      overflow-x:hidden;
    }
    :-webkit-full-screen-document
    {
     
    }
    :-webkit-full-screen:not(:root)
    {
      width:100% !important;
      float:none !important;
    }
    :-moz-full-screen:not(:root)
    {
      width:100% !important;
      float:none !important;
    }
    #fs:-webkit-full-screen
    {
      width:98%;
      height:98%;
      background-color:white;
    }
    .carousel-inner .item
    {
      margin-left:80px;
    }
    </style>
    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->  
  </head>
  <body>
    <div id="fs">        
      <div class="container">
        <div class="page-header">
          <h1>f for full screen, Esc for quit.</h1>
        </div>
        <div id="myCarousel" class="carousel slide">
          <!-- Carousel items -->
          <div class="carousel-inner">
            <div class="active item">
              <ul>
                <li>First bullet</li>
                <li>Second</li>
                <li>Third</li>
              </ul>
            </div>
            <div class="item">
              <ul>
                <li>Fourth bullet</li>
                <li>Fifth</li>
                <li>Sixth</li>
              </ul>
            </div>
            <div class="item">
              <ul>
                <li>Seventh bullet</li>
                <li>Eighth</li>
                <li>Ninth</li>
              </ul>
            </div>
          </div>
          <!-- Carousel nav -->
          <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
          <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
        </div>
      </div>
    </div>
    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>  
    <script>
    $(document).keyup(function(event)
    {
      $('.carousel').carousel('pause');
      if (event.keyCode === 13)
      {
        $('a.carousel-control.right').trigger('click');
      }    
      if (event.keyCode === 8)
      {
        $('a.carousel-control.left').trigger('click');
      }
    });

    var elem = document.querySelector(document.webkitExitFullscreen ? '#fs' : 'body');  
    document.addEventListener('keydown', function(e)
    {
      switch (e.keyCode)
      {
        case 70:
          enterFullscreen();
          break;
      }
    }, false);  

    function enterFullscreen()
    {
      if (elem.webkitRequestFullscreen)
      {
        elem.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
      }
      else
      {
        if (elem.mozRequestFullScreen)
        {
          elem.mozRequestFullScreen();
        }
        else
        {
          elem.requestFullscreen();
        }
      }    
    }
    </script>
  </body>
</html>

Monday 28 May 2012

Tabs using Twitter Bootstrap


I had been trying to search out a real world example of how tabs worked in Twitter Bootstrap and found that, by far, most examples missed some crucial elements. Below, I have supplied some code to paste into your Twitter Bootstrap site which you can play with.

<div class="row">
<div class="span16">
 <div class="tabbable" id="usernav">
 <ul class="nav nav-tabs">
<li class="active"><a href="#home" data-toggle="tab">Home</a></li>
<li><a href="#jobs" data-toggle="tab">Jobs</a></li>
 </ul>
 <div class="tab-content">
<div class="tab-pane active" id="home">
This is my home content.
</div>
<div class="tab-pane" id="jobs">
This is the jobs section.
</div>
 </div>
</div>
</div>
</div>