
Clinical Research Management Group
http://clinicalresearchmgt.com
- Initio Designed
- Concrete5
- Responsive
- HTML5 Boilerplate
- CSS3
- jQuery
- Cycle2
- mediaCheck
- also helping render layout
Interior pages got a little messed up due to their crappy content entry. And they also didn’t fully use the “Share with a colleague / NextPrev Case Study” widget. But overall turned out alright.
Change Layout Based on Height
Change layout based on height
@media only screen and (max-height: 600px) { // something awesome here }
Change a layout based on width or height
@media only screen and (max-width: 1060px), screen and (max-height: 600px) { // something awesome here }
Change a layout based on width and height
@media only screen and (max-width: 1060px) screen and (max-height: 600px) { // something awesome here }

Park Industries
- Concrete5
- Grid system from Bootstrap
- Responsive with Media Queries
- CSS3 pop-up nav
- YouTube Gallery

Voyager Industries
Site design by Josh, built by Darin.
Features:
- Concrete5
- HTML5 Boilerplate
- CSS3
- Responsive Layout using Media Queries
- News Section using Concrete5’s Composer
- Google Webfonts
Tablet-Only jQuery using Media Queries
The following is how to run javascript that should only be run on tablets. The idea is that you have a div with a width and height of 0. When you are on a tablet, the media query will set the width to 1px. jQuery will then detect the width of the div and do its thing.
To your html add
<div id="device-detect"></div>
Add to your CSS
#device-detect{ height:0; width:0; } @media only screen and (min-device-width: 768px) and (max-device-width: 1280px){ #device-detect{ width:1px; } }
To your scripts add inside $(document).ready(function() {
if($('#device-detect').css('width') == '1px'){ //tablet-only functions here };
If anyone knows an alternative or better way, let me know.
—
I used this on Palmer Printing to deliver different js to tablets. Below is the full javascript including how I targeted only phones.
if (document.documentElement.clientWidth > 767) { //scripts for tablets and desktops $(document).ready(function() { $('#nav-main .nav').superfish({ animation: { opacity: 'show', height: 'show' }, autoArrows: false }); $('#nav-sup .nav').superfish({ animation: { opacity: 'show' }, autoArrows: false }); //detect if this is a tablet. In the css is a media query that only tablets will recognize, it will set the width of a div to 1px if($('#device-detect').css('width') == '1px'){ //creates duplicate top level link and adds it to the dropdown $('#nav-main ul.nav > li > a').each(function(){ var newLink = '<li>' + $(this).clone().wrap("<div />").parent().html() + '</li>'; $(this).next('ul').prepend(newLink); $(this).attr('href', 'javascript: void(0)'); }); }; }); } else { //scripts for phones (width under 768px) $(document).ready(function() { //disable flash intro on phones (yes I know android can do it, but it breaks the homepage) $('.home #flash').css('display','none'); //show html homepage $('.home #non-flash').css({'height':'auto','overflow':'auto'}); //close all dropdowns $('ul.nav ul').css('display','none').parent('li').addClass('closed'); //creates duplicate top level link and adds it to the dropdown $('#nav-main ul.nav > li > a').each(function(){ var newLink = '<li>' + $(this).clone().wrap("<div />").parent().html() + '</li>'; $(this).next('ul').prepend(newLink); $(this).attr('href', 'javascript: void(0)'); }); //controls the toggling of the dropdowns $('ul.nav > li.closed > a').live('click', function(){ $('ul.nav ul').slideUp('slow').parent('li').removeClass('open').addClass('closed'); $(this).next('ul').slideDown(300).parent('li').removeClass('closed').addClass('open'); return false; }); $('ul.nav > li.open > a').live('click', function(){ $(this).next('ul').slideUp(300).parent('li').removeClass('open').addClass('closed'); return false; }); }); };
Recent Comments