Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="https://rawgithub.com/WickyNilliams/enquire.js/master/dist/enquire.js"></script>
  
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
 
  
  <header>
    <h2>Site Title</h2>
    <p>tag line</p>
  </header>
  
  <div id="page">
    <h1>Page title</h1>
    <p>Lorem ipsum@dolor.com sit amet, consectetur adipiscing elit. Nunc pharetra luctus mi, sollicitudin ultrices lacus iaculis sed. Nam aliquam, tortor id sodales scelerisque, est mauris adipiscing nunc, a tincidunt tortor elit eget quam. Fusce sagittis arcu ut urna egestas luctus. Aliquam erat volutpat. Suspendisse ut turpis mi. Nulla facilisi. </p>
  </div>
  
  <aside>
    <section data-respond='{"query":"screen and (max-width: 600px)", "match": { "target": "header", "method": "appendTo"}, "unmatch": "auto"}'>
      <h3>Search</h3>
      <p>Lorem ipsum sit amet, consectetur adipiscing elit.</p>
    </section>
     <section data-respond='{"query":"screen and (max-width: 680px)", "match": { "target": "footer", "method": "appendTo"}, "unmatch": { "target": "aside", "method": "appendTo"}}'>
      <h3>Links</h3>
      <p>Lorem ipsum sit amet, consectetur adipiscing elit.</p>
    </section>
     <section>
      <h3>News</h3>
      <p>Lorem ipsum sit amet, consectetur adipiscing elit.</p>
    </section>
  </aside>
  
  <footer>
    <p>Copyright stuff</p>
  </footer>
  
</body>
</html>
 
* {
  margin: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
   box-sizing: border-box; 
}
body > * {
  padding: 20px;
}
section {
  margin: 10px 0 ;
}
header {
  background: #105b63;
  color: #fff;
}
#page {
  background: #fffad5;
  color: #000;
  float: right;
  width: 80%
}
aside {
  background: #ffd34e;
  float: left;
  width: 20%
}
​
footer {
  background: #bd4932;
  clear: both;
}
 
(function($) {
    $(document).ready(function() {
      
        var $this,
            data,
            options,
            allowedMethods = ['appendTo','prependTo','insertAfter','insertBefore'];        
    
        $("[data-respond]").each(function(){  
            $this = $(this),
                data = $this.data("respond");                    
             options = {};
        
            // check we have object
            /*if(typeof data !== 'object'){
                data = eval(data);
            }*/
                     
            if(data.match){
                if($.inArray(data.match.method, allowedMethods) > -1){
                    options.match = function() {
                        if(data.match.method == 'insertAfter'){
                            if($this[0] == $(data.match.target).next()[0]){
                                return;
                            }
                        }
                        if($(data.match.target).length){
                            $this[data.match.method](data.match.target);
                        }
                    }
                }
            }//match
          
            if(data.unmatch){  
                if(data.unmatch == 'auto'){
                    data.unmatch = {};
                    
                    // a) insert after                      
                    if($this.prev().length){
                        data.unmatch.target = $this.prev();
                        data.unmatch.method = 'insertAfter';
                    } else if($this.next().length){
                        // c) insert before 
                        data.unmatch.target = $this.next();
                        data.unmatch.method = 'insertBefore';
                    } else {
                        // d) append to parent
                        data.unmatch.target = $this.parent();
                        data.unmatch.method = 'appendTo';
                    }
                                        
                    if($.inArray(data.unmatch.method, allowedMethods) > -1){
                        options.unmatch = function() {
                            $this[data.unmatch.method](data.unmatch.target);
                        }
                    }
                } else {
                    // Manually set unmatch
                    if($.inArray(data.unmatch.method, allowedMethods) > -1){
                        options.unmatch = function() {
                            if($(data.unmatch.target).length){
                                $this[data.unmatch.method](data.unmatch.target);
                            }
                        }
                    }
                }
                
            }//unmatch
            
            enquire.register(data.query, options);           
        }); 
      
    });
})(jQuery);
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
gizmojopro
0viewers