Change Bootstrap navbar collapse breakpoint

What to do if you need to change the point at which the Bootstrap menu bar changes to the mobile state.

I recently found that I needed the Bootstrap navbar to collapse to its mobile state at a different width to the default Bootstrap 768px width. I found that the menu didn’t fit the width of 768 px and that I needed the mobile state to kick in at a wider width than the default. So with a bit of searching I found the answer.

Just copy the CSS media query below and set the max-width value to the width you need it to be.
@media (max-width: 840px) {
.navbar-header {
float: none;
}
.navbar-left,.navbar-right {
float: none !important;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin-top: 7.5px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.collapse.in{
display:block !important;
}
}

CSS Child Adjacent and General sibling combinator

Just what is the difference between the Child , Adjacent and General sibling combinator in CSS.

I found a great article about this here css-tricks.com

These images are a really handy way to visualise the difference between how these CSS selectors work.

ul li { } Selects all li elements within the initial ul (even if you nest a ul within a ul)

ul > li { } Selects only the li elements within the top level (it ignores any li’s within a nested ul)

child-combinator-selector-example

p + p { } Selects any paragraph directly after a first paragraph.

div + p { } Selects any paragraph that comes directly after a div.

adjacent-selector-example

p ~ p { } Selects all the paragraphs that follow the initial paragraph.

div ~ p { } Selects all paragraphs that follow after a div.

general-sibling-example

For a more in depth look at how these selectors work visit css-tricks.com

Animate a background image with CSS

Check this link to see demo

First thing to do is copy and paste this into your CSS code.

@keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: 100% 0; }
}

Then add this final line any place you want to create a scrolling background image.

.jumbotron{
background-color:#65a7d7;
margin-bottom:0;
background-image:url(../images/cloudsBG.png);
background-repeat: repeat-x;
background-position: center top;
animation: animatedBackground 50s linear infinite;
}

How to make a custom 404 page

How do I create a custom 404 error page?

First thing you need to do is create a web page just like you normally would. Name it something like”404page.html” or something like that.

Then you will need to add a text file into your websites folder. Save the file with this exact name .htaccess

The text file should have no name just .htaccess

Then copy this line below into this new text file.

ErrorDocument 404 http://www.domain.com/404page.html

Replace the web address with the web address that points to your 404 page. And that is it. You should now have a custom 404 page that your visitors will see if they land on a page that does not exist.

Stop a youtube video playing when modal closes

How to stop a youtube video playing when you close the modal window in bootstrap

When you embed a youtube video into a Bootstrap Modal it wont stop playing when you close the modal window. To solve this issue I used this code snippet below.

<script>
$(document).ready(function(){

$(“.modal”).on(‘hidden.bs.modal’, function(e) {
$iframe = $(this).find( “iframe” );
$iframe.attr(“src”, $iframe.attr(“src”));
});

</script>

Make a div clickable

Use this snippet of JQuery to turn a div into a clickable button.

$(“.buttonDiv”).click(function() {
window.location = $(this).find(“a”).attr(“href”);
return false;
});

This piece of code checks to find a div with the class name of .buttonDiv. It then looks inside the div for a link inside an <a> tag. Then it takes the user to the address inside the link when the user clicks anywhere on the div.

 

Here is the HTML

<div class=”buttonDiv“>
<h3>Heading</h3>
<p>Some paragraph text</p>
<a href=”google.com”>Find Out More</a>
</div>

Remove the .PHP extention from your links

Create a “Clean URL” that doesn’t show the .php extention.

Allow visitors to your site to access any page on your site by simply typing  – “yourwebsite/anypage” rather than the full link – “yourwebsite/anypage.php”

To create a clean URL

You need to open up Notepad then copy the following

RewriteEngine On
RewriteCond %{SCRIPT_FILENAME} !-d
RewriteRule ^([^.]+)$ $1.php [NC,L]

Now save this file with the file extension .htaccess

Dont give the file any other name before the dot just – .htaccess

Copy this file into the root folder of your website and now you can type into your browser address window “mywebsite/anypage” without having to put in the .php file extension.

PHP include files using a relative path

If you create a folder and use it to contain all your include files you might run into problems when it comes to including those files from other folders that are not on the same level.

Using this script below you can be sure that no matter where you place your include script it will always look in your include folder no matter what depth you are calling it from.

<?php
$path = $_SERVER[‘DOCUMENT_ROOT’].’/your_website_folder’;
$path .= “/inc/inc_head.php”;
include_once($path);
?>

Let me explain the above code.

The first part defines the root of your website. (I have a folder called “public.html” this is the DOCUMENT ROOT – and then inside this root I have a folder called “myWebsite”). If you do not have a folder inside the root you can leave out the “your_website_folder” bit.

The next line $path .= “/inc/inc_head.php”; this is the path to your include folder and the file you want to include.

The next line include_once($path); this just tells PHP to include the path that you defined above.

 

 

Mouse Look C# script Unity 5

I have used this Mouse Look C# script and attached to the main camera in my game (see code below).
Then to get this Mouse Look behavior to work on my Game Controllers Right Joystick this is what I did.

Go to Edit >Project Settings > Input

mouselook script for joystick

 

You should see a list like this one below appear in the Inspector Panel. (Note: you wont see Stick X and Stick Y. I have already went through this process so the list below is not exactly what you will see)

To make this MouseLook script work on your Game Controller Right stick you need to right-click on Mouse X and Mouse Y and select “Duplicate”.

mouselook-script-unity-02

You can then rename the copied Inputs to something like Stick X and Stick Y. Then set the Type to Joystick Axis and select 4th axis for the X and 5th Axis for the Y.

mouselook-script-unity-03

 

MouseLook script in C# for Unity


using UnityEngine;
using System.Collections;
using System.Collections.Generic;

[AddComponentMenu(“Camera-Control/Smooth Mouse Look”)]
public class mouseLook : MonoBehaviour {

public enum RotationAxes { MouseXAndY = 0, MouseX = 1, MouseY = 2 }
public RotationAxes axes = RotationAxes.MouseXAndY;
public float sensitivityX = 15F;
public float sensitivityY = 15F;

public float minimumX = -360F;
public float maximumX = 360F;

public float minimumY = -60F;
public float maximumY = 60F;

float rotationX = 0F;
float rotationY = 0F;

private List rotArrayX = new List();
float rotAverageX = 0F;

private List rotArrayY = new List();
float rotAverageY = 0F;

public float frameCounter = 20;

Quaternion originalRotation;

void Update ()
{
if (axes == RotationAxes.MouseXAndY)
{
rotAverageY = 0f;
rotAverageX = 0f;

rotationY += Input.GetAxis(“Mouse Y”) * sensitivityY;
rotationX += Input.GetAxis(“Mouse X”) * sensitivityX;

rotArrayY.Add(rotationY);
rotArrayX.Add(rotationX);

if (rotArrayY.Count >= frameCounter) {
rotArrayY.RemoveAt(0);
}
if (rotArrayX.Count >= frameCounter) {
rotArrayX.RemoveAt(0);
}

for(int j = 0; j < rotArrayY.Count; j++) {
rotAverageY += rotArrayY[j];
}
for(int i = 0; i < rotArrayX.Count; i++) { rotAverageX += rotArrayX[i]; } rotAverageY /= rotArrayY.Count; rotAverageX /= rotArrayX.Count; rotAverageY = ClampAngle (rotAverageY, minimumY, maximumY); rotAverageX = ClampAngle (rotAverageX, minimumX, maximumX); Quaternion yQuaternion = Quaternion.AngleAxis (rotAverageY, Vector3.left); Quaternion xQuaternion = Quaternion.AngleAxis (rotAverageX, Vector3.up); transform.localRotation = originalRotation * xQuaternion * yQuaternion; } else if (axes == RotationAxes.MouseX) { rotAverageX = 0f; rotationX += Input.GetAxis(“Mouse X”) * sensitivityX; rotArrayX.Add(rotationX); if (rotArrayX.Count >= frameCounter) {
rotArrayX.RemoveAt(0);
}
for(int i = 0; i < rotArrayX.Count; i++) { rotAverageX += rotArrayX[i]; } rotAverageX /= rotArrayX.Count; rotAverageX = ClampAngle (rotAverageX, minimumX, maximumX); Quaternion xQuaternion = Quaternion.AngleAxis (rotAverageX, Vector3.up); transform.localRotation = originalRotation * xQuaternion; } else { rotAverageY = 0f; rotationY += Input.GetAxis(“Mouse Y”) * sensitivityY; rotArrayY.Add(rotationY); if (rotArrayY.Count >= frameCounter) {
rotArrayY.RemoveAt(0);
}
for(int j = 0; j < rotArrayY.Count; j++) {
rotAverageY += rotArrayY[j];
}
rotAverageY /= rotArrayY.Count;

rotAverageY = ClampAngle (rotAverageY, minimumY, maximumY);

Quaternion yQuaternion = Quaternion.AngleAxis (rotAverageY, Vector3.left);
transform.localRotation = originalRotation * yQuaternion;
}
}

void Start ()
{
Rigidbody rb = GetComponent();
if (rb)
rb.freezeRotation = true;
originalRotation = transform.localRotation;
}

public static float ClampAngle (float angle, float min, float max)
{
angle = angle % 360;
if ((angle >= -360F) && (angle <= 360F)) {
if (angle < -360F) { angle += 360F; } if (angle > 360F) {
angle -= 360F;
}
}
return Mathf.Clamp (angle, min, max);
}
}

Sass Button Styles with @Mixin

Use this HTML code to create some buttons.

<a href=”#” class=”btn btn-green”>Green Button</a>
<a href=”#” class=”btn btn-blue”>Blue Button</a>
<a href=”#” class=”btn btn-yellow”>Yellow Button</a>
<a href=”#” class=”btn btn-red”>Red Button</a>

 

Then use this Sass code to style the buttons
@import url(http://fonts.googleapis.com/css?family=Poiret+One);

@mixin button-bg($bg) {
background: $bg;
&:hover {
background:darken($bg,8%);
transition: all 0.3s ease;
}
&:active {
background:darken($bg,25%);
}
}

.btn {
color:white;
text-decoration:none;
padding:5px 10px;
border-radius:3px;
font-family: ‘Poiret One’, cursive;
font-size:2em;
}

.btn-green {
@include button-bg(#2ecc71);
}

.btn-blue {
@include button-bg(#3498db);
}

.btn-yellow{
@include button-bg(#f1c40f);
}

.btn-red {
@include button-bg(#e74c3c);
}

Checkout this link to see these buttons in action