Twitter Bootstrap – Improved Carousels

Code

Twitter Bootstrap is great but their carousels always bugged me.  They don’t work well with images that are not the exact same size and clients uploading their own graphics you end up with a slider that resizes depending on the current image that is loaded.

My solution (using Bootstrap 3):

• Replace the image with a container div using the image file as a background.
• Set width to 100% so it will expand to fill it’s container.  Set the height of the slider so it will have a consistent display regardless of the image size.
• Win

Here is the sample page comparing the two:
https://parkhurstdesign.com/sites/bootstrapsandbox/slider-fixed.php

Sample Code from the Twitter Bootstrap website:

<div id="carousel-example" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example" data-slide-to="1"></li>
    <li data-target="#carousel-example" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#carousel-example" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div>

The only change is the “item” divs. I am using this in a CMS so I use inline styles for the background divs so I can set the background image files within the loop.  Just easier for my purposes.  Change the img tag to a div as follows:

<div class="item active">
  <img src="/path/image.jpg" alt="blah">
  <div style="background:url(/path/image.jpg) center center; 
          background-size:cover;" class="slider-size">
    <div class="carousel-caption">
      <h2>Headline</h2>
      <p>Content text to go here. </p>
    </div>
  </div>
</div>

The CSS:

.slider-size {
height: 400px; /* This is your slider height */
}
.carousel {
width:100%; 
margin:0 auto; /* center your carousel if other than 100% */ 
}

One more thing.  The damn sample script navigation doesn’t work on the Bootstrap website for some CMS themes.  Code changes in bold.  Here is how you fix it:

<!-- Controls -->
<a class="left carousel-control" href="javascript:void(0)" 
     data-slide="prev" data-target="#carousel-example">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="javascript:void(0)" 
     data-slide="next" data-target="#carousel-example">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>

 Accessibility concerns: with an img tag you include alt text for accessibility.  Divs unfortunately do not allow you this option.  It is a trade-off but you do include caption text within the div which helps but I am sure it is weighted differently.

Return hours using PHP DateTime

Code

There are a number of ways to find the difference between two time stamps in PHP.  I needed to find the number of hours for a project with a time clock.  Here is an example you can test using the DateTime class.

		$date1 = new DateTime('2004-03-01T01:30:00');
		$date2 = new DateTime('2004-03-02T02:30:00');
		
		$diff = $date2->diff($date1);
		
		$hours = $diff->h;
		$hours = $hours + ($diff->format('%d')*24);
		$hours = $hours + ($diff->format('%i')/60); 
		
                // output our result with 2 decimal places
		printf('Hours: %s',number_format($hours,2));

You can edit the date values to test the result.  It will also take into account leap years if you want to be assured of the results.

PHP rawurlencode()

Code

Probably a silly mistake that I had to deal with… but if your clients upload image files with spaces in the file name you will end up with broken image links.  When returning filenames or paths from the database you want to replace spaces with the HTML entities.  But using urlencode() or  htmlentities() will not work for this purpose.

Instead use:

  rawurlencode()

Offset #anchor link

Code

Use this to offset anchor links.  Reasons for this might include using a fixed navigation bar that will cover part of the section you are loading.

Add a class to your anchor.

‹a class="anchor" id="top"›‹/a›

Now apply the offset script.

a.anchor {
  display: block; 
  position: relative; 
  top: -90px; 
  visibility: hidden; }

Dangerous Bullets

Code

Because sometimes default bullets are boring…. Some dangerous bullets!

ul {
  list-style-type: none;
  padding: 0px;
  margin: 0px; }
  
ul li {
  background-image: url(custom-bullet.gif);
  background-repeat: no-repeat;
  background-position: 0px 5px; 
  padding-left: 14px; }