Tag Archive | NFL.com

Adblock Custom Filters NFL Sites Nag

Block Ads and Notifications of Ad Blockers

Ever get tired of NFL sites and others notifying you that their site is “best viewed with ad blockers turned off”. This is because they make money on these hits hence they don’t want you blocking them. However to the user they are rather annoying. As a developer I understand fully why they don’t want them blocked. However the reason users block ads is because developers/companies over do it causing frustration for the user. If not over done there’d be little need for ad blockers.

How to Fix it

First install the adblocker extension for chrome. If you are not using Chrome stop go install it, slap yourself with a fresh trout apologize to your computer and then continue. Folks trust me Chrome is miles better than any other offering. It just is.

After you have it installed you’ll want to click on the stop sign icon in the upper right of your browser it has a hand inside it then select options.

adblock_options

Go to the “customize” tab and then click the edit button. See image below.

adblock_customize

Finally add the same filters you see in the image above. This will block the nag claiming the site is best viewed without ad blockers. Note you can do this with any page following the same syntax. So for example you could right click while in Chrome and and choose “inspect element” this will tell you what the offending HTML element is. You then enter a similar syntax and unless the developer of the page changes that class name or id etc. you’ll never see it again.

Filter List

For your convenience I’ll update this list periodically as I come across other offenders.

Download: adbock_filter_list

Conclusion

Again I get the need for ads. They pay for the sites we use. However if a user blocks ads with a blocker their preferences should be respected. You NEVER as a developer circumvent the user’s preferences. Some may disagree but for me I think its important.

Advertisements

jCarouselLite Extended, Carousel Slider with Paging, NFL.com Style

If you’ve done some Googling you’ve come across jCarousel Lite and jCarousel by now. Both are excellent solutions as they stand. jCarousel in particular is a full featured JQuery carousel/slider plugin that makes slick presentations of unordered lists a snap. The “Lite” version is just that. A much smaller footprint for a lack of a better term is the main difference. Base functionality is very similar. I extended the “Lite” version as for most implementations it was perfect but there are just a couple key things I wanted that it didn’t have. So I extended it to include these features:

  • Pause the slide when hovered.
  • Add paging that was simple and customizable via css.
  • At the end of the last slide go to the first slide.
    To me those key additions make this already solid plugin even better. In the download below you’ll find two files. The extended uncompressed source and the minified counterpart. This was based on the original source of jCarouselLite v1.0.1  as of 8/1/2011.

DOWNLOAD

What you’ll end up with.

image

I won’t go into the full CSS styling. You can find this here in the documentation by the author. The below CSS is all you’ll need to add the pager feature. Please note that I chose this method rather than using images for ease of use. If you want to use images simply add your image as a background to the LI and position it centered for both x/y using CSS. It works just fine and makes the plugin nice and light weight as we aren’t managing images for the different states. As long as your image is properly positioned and correctly sized according to the size of your LI it will have a similar effect as if the image tags were right inside the LI.

NOTE: The Html for the pager is dynamically built within the plugin for simplicity. You could certainly extend this for your needs quite easily if desired. The structure of the dynamic elements are very basic and simplistic. In fact you could easily wire up some custom JQuery using .appendTo() if you wanted to add some sort of element to the li’s.

Dynamic Pager Html

<div class="pager">
    <ul>
    <li class=”0”></li>
    <li class=”1”></li>
    <li class=”2”></li>
    <li class=”3”></li>
    </ul>
</div>

CSS Styles for above NFL.com carousel look.

The pager styling:

.pager
{    
    position: absolute;
    height: 24px;
    right: 15px;
    bottom: 30px;    
}

.pager ul
{    
    list-style-type: none;
    margin: 0px; 
    padding: 0px;  
}

.pager li
{
    border: 1px solid #333333;
    line-height: 15px;
    height: 15px;
    width: 15px;
    display: inline-block;
    background-color: #F7F7F7;
    margin: 2px 4px 2px 4px;
    vertical-align: middle; 
    float: right; /* float:right; required for IE because it sucks and can't handle inline-block*/ 
    
    /* CSS 3 Styles */
    opacity: .50;
    filter: “alpha(opacity=50)”;
    -moz-border-right: 3px;
    -webkit-border-radius: 3px;
    -khtml-border-radius: 3px;
    border-radius: 3px;
}

.pager li:hover
{
    background-color: #C41313;
    cursor: pointer;
    
    /* CSS 3 Styles */
    opacity:100;
    filter:alpha(opacity=100);
    filter: “alpha(opacity=100)”;
}

.pager li.selected
{
    /* CSS 3 Styles */
   background-color: #C41313;
   opacity:100;
   filter:alpha(opacity=100);
   filter: “alpha(opacity=100)”;
}

The Overlay style that sits under the pager and contains the description text for the given slide:

.carousel-overlay
{
    position: relative;
    bottom: 95px;
    width: 725px;
    height: 75px;    
    background-image: url('Images/Backgrounds/carousel_bkgrnd.png');
    background-repeat: no-repeat;
}

.carousel-overlay div
{
  padding: 3px 24px 3px 24px;
  width: 450px;
}

.carousel-overlay-caption
{
    font-weight: 600;
    font-size: 1.1em;
    color: #F2F2F2;
}

.carousel-overlay-description
{    
    color: #F2F2F2;
}

Again I didn’t enclose the Html or the styling for the carousel itself. If you need this please follow the detailed documentation at the author’s site here. If you would like to use the overlay image in the demo you can DOWNLOAD it along with the source plugin.

Wiring Up Your Carousel

Wiring up the carousel is extensively covered by the author so I’m only going to hit on the extended options which are very simple.

<script type="text/javascript">
    $('.carousel').jCarouselLite({
        visible: 1,
        auto: 8000,
        speed: 1200,
        circular: false, // Set circular to false to use onEndFirst.
        onEndFirst: true, // Navigates to first slide on end.
        showPager: true, // Boolean to show or hide the pager.
        pauseOnHover: true, // Pauses the carousel when hovered over
        pager: 'pager', // The class to use for the pager.
        scroll: 1
    });
</script>

Wrapping Up

Please note as normal you will need to add reference in your header to JQuery itself and the extended jCarousellite plugin as normal. I know you are aware of this but for those that are new and in the interest of being complete it should be mentioned.

To reiterate the ‘”pager” was intentionally created using only CSS and the basic dynamic html for structure. This was because your pager could literally look like anything and may need to be placed in many locations. If you want to place the pager outside of the main carousel element use neg. values for top, bottom, right, left. By using CSS only rather than embedding images it becomes much more tolerant of your unique design.

This was tested in Opera, Chrome, FireFox, IE 9 and IE 8. I have not tested on any other browsers.