octocatstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Want a Run Button?

If active, the preview will update automatically when you change code.

            
              <div id="wrap" class="hover">
  <header class="header">
    <h1>Hover/Touch Switcher</h1>
    
    <div class="switcher">
       <p>Hover or Touch Device?</p>
      <a href="#" class="touch" title="Touch list"><i class="fa fa-hand-o-up"></i> Touch</i></a>
      <a href="#" class="hover" title="Hover Grid"><i class="fa fa-location-arrow"></i> Hover</a>
    </div>
  </header>
  
  <div class="main">
    
    <p>Here we see an example of a switcher for users to dictate their preference of hover or touch. This helps if you start with a hover-first approach.</p>

      <p>On smaller screens, the selector is in the header, playing the odds that more small screens are touch devices, though certainly not always the case. Otherwise it will be in the footer, where larger screens can scroll to it easier or see it on default. </p>
   
    <p>In this example, the page starts as <code>:hover</code> enabled. Users can change the prefence to touch. On change, the page .wrap container will change the class to either touch or hover. You could always start with touch first for a more conservative approach. </p>
    
    <p>We can even increase the size of our link hit area for the touch selector to accomidate larger finger sizes.</p>
    
    <h2 class="current">Current Prefence: hover</h2>
  </div>
  
  <footer class="footer">
    <p>This site loves cats. &copy; 2013&ndash;2014</p>
  </footer>
 </div>
            
          
!
            
              @import "compass/css3";

.switcher {
  text-align: center;
  padding-top: 1em;
  @media screen and (min-width:34em){
    float: right;
    text-align: right;
    padding-top: 0;
  }
  @media screen and (min-width: 40em){
    position: absolute;
    bottom: 2em;
    border-top: 1px solid #333;
    padding-top: 1em;
    width: 50%;
    margin: 0 auto;
    left: 25%;
    text-align: center;
  }
  p {
    font-size: 0.875em;
    color: #333;
    position: absolute;
    left: -9999px;
    @media screen and (min-width: 40em){
     position: static;
    }
  }
  a {
    background: #666;
    text-decoration: none;
    color: #fff;
    padding: 10px;
    margin-right: 10px;
    display: inline-block;
    @include transition;
    .touch & {
       padding: 20px 15px;
    }
    .hover &:hover, .hover &:focus {
      outline: 10px solid black;
    }
  }
}

#wrap {
  max-width: 45em;
  margin: 0 auto;
  position: relative;
}

.header {
  padding: 1em;
  background: rgba(0,0,0,0.5);
  &:before, &:after {
    content: " ";
    display: table;
  }
  &:after {
      clear: both;
  }
}

.main {
  min-height: 180px;
  padding: 1em;
  background: rgba(0,0,0,0.3);
  border-top: 5px solid #000;
  border-bottom: 5px solid #000;
}

.footer {
  padding: 1em;
  background: rgba(0,0,0,0.5);
  text-align: center;
  @media screen and (min-width: 40em){
   padding-bottom: 8em; 
  }
}

p {
  margin-bottom: 1em;
}

h1 {
  font-size: 2em;
  text-align: center;
   @media screen and (min-width:34em){
    float: left;
    text-align: left;
  }
   @media screen and (min-width:40em){
    float: none;
  }
}

h2 {
  margin-bottom: 1em;
  font-weight: bold;
}

body {
  line-height: 1.4;
}
            
          
!
            
              $(document).on('click', 'div.switcher a', function(e) {
	var wrapClass = $(this).attr('class');
	$('#wrap').removeClass().addClass(wrapClass);
	e.preventDefault();
  $('.current').html('<h2>Current Prefence: '+wrapClass+'</h2>');
});

            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console