Use Sticky-Kit to make elements stick.

Sticky-Kit is a jQuery plugin for making sticky elements.
If you have a sidebar menu you might want to find a way to keep it in view even as the user scrolls down the page.

How is this done? It is done with a jQuery plugin called Sticky-Kit. Sticky-Kit will help you keep the shorter column stuck to the top of its parent container.

Look at the image below. There is a div (the parent) with two other divs inside.With Sticky-Kit you can keep the shorter div in view as the user scrolls down the page.

 

sticky_kit01
How do you use Sticky-Kit?
Visit this link to download the jQuery file.

sticky_kit02

When you visit the Sticky-Kit webpage, Right-click on Full Source and select Save link as… Save the file to your computer and call it “jquery.sticky-kit.js”

Now that you have your jQuery file, what do you do with it? In the root folder of your website create a folder called “js” (there is a good chance you already have a folder with this name). This folder is where you can put all your jQuery script files. Copy the “jquery.sticky-kit.js” file you just downloaded to your “js” folder.

Tell your webpage where to find the jQuery file. Scroll down to the bottom of your HTML code and just before the closing <body> tag type in the “script src” as shown below.

<script src="/js/jquery.sticky-kit.js"></script>
</body>
</html>

Give your side menu the id “#sidebar”. Use this id to allow you to target the div you want to make sticky. Now you need to add one more line of code to the bottom of your HTML.

<script src="/js/jquery.sticky-kit.js"></script>
<script>$("#sidebar").stick_in_parent();</script>
</body>
</html>

For more details on how to use Sticky-Kit visit the website

Highlight currently active menu item.

How do I show the user what page they are on.?
If you want to show your user which page is currently active you may want to highlight an item in your menu.

It is quite simple to highlight the currently active link in your menu. It is done with two very simple lines of php.
But first you will need a menu to work with…like this…

<ul>
<li><a href="link1.html">1</a></li>
<li><a href="link2.html">2</a></li>
<li><a href="link3.html">3</a></li>
</ul>

We have a simple menu that you can apply styles to. We won’t go into that just now. Let’s concentrate on the php for now. So now we add a simple line of php to each of our menu links.
Here is the php you’ll need to add…

<?php if($current == '1') {echo 'class="current"';} ?>

Look at the line of php above. See where it says $current == ‘1’. You can replace the ‘1’ with any name you like. For example $current == ‘home’.
Add the line of php to your menu inside the <li> tag like this…

<ul>
<li<?php if($current == '1') {echo 'class="current"';} ?> ><a href="link1.html">1</a></li>
<li><a href="link2.html">2</a></li>
<li><a href="link3.html">3</a></li>
</ul>

You will need to add the same line of php to each menu item inside the <li> tags. Remember to change the $current == ‘1’ to something unique for each link.

<ul>
<li<?php if($current == '1') {echo 'class="current"';} ?> ><a href="link1.html">1</a></li>
<li<?php if($current == '2') {echo 'class="current"';} ?> ><a href="link2.html">2</a></li>
<li<?php if($current == '3') {echo 'class="current"';} ?> ><a href="link3.html">3</a></li>
</ul>

Look at the code above. Do you see where it says class=”current”. You can change the word “current” to anything you want. This name will be the class name that you create in your css file. This class is what you will use to change the appearance of your menu item.
Final step
You should now have a menu like the one above and a new class in your css file that you will use to style the currently active link.

The final step is to add one more line of code to each of your pages that will tell your menu which item should be highlighted.
Add the following line of code just after the <body> tag.

<body>
<?php $current = '1';?>

Look at the code above. Where it says $current = ‘1’. Make sure you match the ‘1’ with what you have in your menu. So, for example, if you have chosen to use $current == ‘home’ for the first item in your menu then on your “home” page you would also have $current = ‘home’.

Add space above your anchor tag.

How to add some extra space above your anchor tag.
If you have a fixed header (eg. like the site you are looking at right now), then you will probably have come across the problem of using anchor links. Whenever you link to an anchor the position of the anchor becomes hidden behind the header.

The method I have found to solve this problem is a simple block of CSS without any need to use JavaScript.

:target:before { content:""; display:block; height:90px; /* fixed header height*/ margin:-90px 0 0; /* negative fixed header height */ }

Copy and paste the code above into your stylesheet and adjust the “height:90px” and “margin:-90px” to suit the height of your fixed header. That’s it! Now when you click on a link that takes you to an anchor further down the page, you can control how much space to add above the anchor so that it is no longer hidden behind the header.

Responsive wrapper for you tube and vimeo embeded videos

This is a quick piece of css code that you can use to create a responsive youtube or vimeo video.

<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; height: auto; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style>

<div class=’embed-container’> <iframe src=”https://player.vimeo.com/video/unique_link_here” frameborder=”0″ webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>

Include HTML files into your web page

How to include HTML snippets in HTML.

In the past I have used PHP include to include things like menus and footers into my web pages. But there is another way to do it that does not require a PHP server.

http://www.w3schools.com/howto/howto_html_include.asp

<!DOCTYPE html>
<html>
<script src=”http://www.w3schools.com/lib/w3data.js”></script>

<body>

<div w3-include-html=”content.html”></div>

<script>
w3IncludeHTML();
</script>

</body>
</html>

Ordering your bootstrap columns

How do you make the bootstrap column on the right stack on top of the column on the left in mobile view?

eg01

When you view this layout on a mobile – the bootstrap columns will rearrange to look like this.

eg02

But how do you make it look like this?
With the image that is in the right side col on top of the text that is in the left side col.

eg3

The trick is to put whatever you want to be on top first in the code – like this.
<div class=”row”>
<div class=”col-md-6″>IMAGE GOES HERE</div>
<div class=”col-md-6″>TEXT GOES HERE</div>
</div>

Then you use –
col-md-push-6
and
col-md-pull-6

So your final code would be

<div class="row">
  <div class="col-md-6 col-md-push-6">IMAGE GOES HERE</div>
  <div class="col-md-6 col-md-pull-6">TEXT GOES HERE</div>
</div>