Cliff Code Review - 03/06/2014
The need for a header styled consistant throughout site/different views with updated breadcrumbs according to the page/view currently on. In jade, I include a header file on a main template that every view uses. I needed the ability to update that breadcrumb specific to the page/view the user is on, and on certain pages add random content into the header.
header.jade // included in template main.jade header#header block randomContent #randomContent .contain block breadcrumb ul.breadcrumb li a(href="/",alt="default link 1") Home li a(href="#about", alt="default link 2") About ul.global_links li Constant Links li a(href="http://twitter.com") twitter li a(href="http://facebook.com") facebook .clearfix
The two blocks, randomContent / breadcrumb, allow me to call upon them when needed to change content without having to create a bunch of conditionals, or use javascript.
nameofdir/index.jade block randomContent #randomContent p I, Anya, promise to love you, to cherish you, to honor you, but not to obey you, of course, because thats anachronistic and misogynistic and who do you think you are, like a sea captain or something? Why cant you just masturbate like the rest of us? You havent seen my drawer of inappropriate starches? I mean, officially I deplore violence, but that was totally worth the loss of karma points! block breadcrumb ul.breadcrumb li a(href="/",alt="default link 1") Home li a(href="#about", alt="default link 2") About li a(href="#about", alt="default link 2") New Page
You can view a working model @ http://codepen.io/nomasgrim/pen/Kprne
a creative need for multi-hover states. On first hover shows one img, on second hover, show a different img. i didn't want this to be conditional to two items.
Previous lessons were learned having made enemies from people fixing IE bugs due to the overuse of the uncompatible background-size, thus leading to the decision of using inline images to allow for scaling and responsive design. IE supports img width percentage based. This decision added an additional level of difficulty, not being able to use sprites, and background images. Three inline-images. 1 default img, and 2 rollover instances.
Javascript baby. The markup is
.item-container .default-state .rollover-state .item.active .item .item
item-container has two children. default-state, which user sees before hover, and rollover-state, which the user will see on hover. In the rollover-state child, we have item. We can list as many items as desired that the hover will cycle through for the next hover. Additional to the item, we add a class active which will help us in the javascript determine which item to show as the hover is instantiated.
Without further ado, the javascript:
We begin by creating an event listener of hover to item-container which includes two functions functions, the on and out states.
$(".item-container").hover( // hover in function(){ }, // hover out function(){ });
The first function is going to show the active class and hide the default item. So we must find default-state, rollover-state, and the active state within rollover-state.
//hover in function(){ var container = $(this), defaultState = container.find('.default-state'), // find default-state rollover = container.find('.rollover-state'), // find rollover-state active = rollover.find('.active'); // find active state active.fadeIn(); defaultState.hide(); },
Then on the out function, we are going to again find the default-state, rollover-state, and active item but also going to group all the items together so we can find the index of the last item, so when cycling through the hovers we can add active class to the first item once we hit the last item within our rollover-state container. While we are doing all that, we are showing the default-item and placing the active class on the next item to show on hover.
// hover out function(){ var container = $(this), defaultState = container.find('.default-state'), rollover = $(this).find('.rollover-state'), items = rollover.find('.item'), active = rollover.find('.active'); // hide the active item active.hide(); // remove the current active class from item items.removeClass('active'); // condition to determine if we are on last item if(active.index() != items.last().index()) { //if not on last item, add active class to the next item active.next().addClass('active'); }else{ //if on last item, add active calss to the first item items.first().addClass('active'); } //show default-state defaultState.fadeIn(); }
Here's the javascript all together
$(".item-container").hover( // hover in function(){ var container = $(this), defaultState = container.find('.default-state'), // find default-state rollover = container.find('.rollover-state'), // find rollover-state active = rollover.find('.active'); // find active state //show active item active.fadeIn(); //hide default-state defaultState.hide(); }, // hover out function(){ var container = $(this), defaultState = container.find('.default-state'), rollover = $(this).find('.rollover-state'), items = rollover.find('.item'), active = rollover.find('.active'); // hide the active item active.hide(); // remove the current active class from item items.removeClass('active'); // condition to determine if we are on last item by // comparing active index to the items last index if(active.index() != items.last().index()) { //if not on last item, add active class to the next item active.next().addClass('active'); }else{ //if on last item, add active calss to the first item items.first().addClass('active'); } //show default-state defaultState.fadeIn(); });
You can preview a working model with the script @ http://codepen.io/nomasgrim/pen/wKbfI
Ability to play video cross browser, via HTML5, specifically mobile device and internet explorer
The Problem Mobile and iPad are damn difficult. At this point I'm unsure of whether or not the video is too large.
I've tried installing and using ffmpeg from the command line to optimize the mp4, but not only does this make the video look like garbage, it still doesn't help with the issue of not loading video. It seems this problem effects other javascripts as well, Google is what brought me to ffmpeg.
Currently at youtube solution, perhaps this solution to this challenge will be included in my next code review
To be honest, there was no real exciting pieces of code. It was exciting enough getting the before mentioned multi-rollover states working. And getting the blocks working within the header. If I were to have to choose the most exciting code, it'd probably be only 5 lines used with video to give the video the ability to show the poster after the video played. Here's the code for that.
$("video").bind("ended", function() { $('video').find('source').each(function(){ $('video').attr('src',$(this).attr('src')); }); $('video').get(0).pause(); });
This is dynamic and useful enough to be used each time a video is in need of showing it's poster after playing through once. But cation, don't forget to add native controls are create a listener to play/pause on click (that code is this)
$('video').on('click touchstart', function(){ if(this.paused) { this.play(); }else{ this.pause(); } });
I don't really believe I have anything at this point that's article worthy. However, once the youtube is plugged in and being used successfully across tablet and mobile devices, I do beleive it'd be worthy to write an article of how it was done.
