CA 2 - Javascript

We had to include some javascript in the project. This was my first time implementing any in a project I have done. 

The first bit of javascript I used was to check what browser was being used. If it was IE I would alert warning the user that the site requires an up to date browser to see the images. SVG's



var browser = navigator.appName;    //set a variable called browser to store the browser details

if (browser == "Microsoft Internet Explorer") // if browser is IE run code
{
alert("Yo people still use Internet Explorer. Well I'm afraid this site uses some of the newest technologies availble and of course Internet Explorer doesnt support these. To see this site as I attened you to please use either 'Chrome / Safari or Firefox'  ");


}


I also included a simple rollover to display a div using jquery. I used this on every page for the social icons and also the timeline. 



$('#timeline-name').on('mouseenter',function(){

$('.timeline-desc').show();

});

When mouse leaves element hide the element selected. 

$('#timeline-name').on('mouseleave',function(){

$('.timeline-desc').hide();

});


My last bit of javascript/jQuery checks to see how far the user has scrolled down the page. If the scroll is greater then 2000px then the next button slides out. The else statement then hides this if the user scrolls less then 2000px


$(document).scroll(function(){


if($(document).scrollTop()>2000)
{

$('.portfolio-nav-inner').show("slow");

}
else{
$('.portfolio-nav-inner').hide("slow");
}

});

Responsive Video

Part of the brief was to include a video we had made edited ourselves. I filmed and edited a video for a DMPT CA. Because this was relevant to my "Make It Stop", site I included it in that page. I uploaded the video to youtube and embedded it. Problem was that it was an iFrame and they have to have a specific width and height to work. So responsive was going to be a problem, but I found a little beaut of a javascript file that does this automatically.

http://fitvidsjs.com 


This was simple to implement in the  code.  




$(document).ready(function(){

        // the container the video is in
        $(".big-image").fitVids();

  });


nice and easy . . . . .