This repository has been archived on 2024-12-01. You can view files and clone it, but cannot push or open issues or pull requests.
factuges_web/www/themes/factuges/assets/plugins/breakpoints/example.html
david e93adbdd4e - Importación inicial
- Registro, activación y entrada de usuarios


git-svn-id: https://192.168.0.254/svn/Rodax.factuges_web/trunk@2 e455b18d-f7fe-5245-9c43-e2c35af70a32
2013-06-13 16:04:48 +00:00

113 lines
2.9 KiB
HTML

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="http://xoxco.com/projects/code/breakpoints/breakpoints.js"></script>
<script>
$(function() {
$(window).bind('exitBreakpoint320',function() {
$('#log').append('<p>Exiting 320 breakpoint</p>');
});
$(window).bind('enterBreakpoint320',function() {
$('#log').append('<p>Entering 320 breakpoint</p>');
});
$(window).bind('exitBreakpoint480',function() {
$('#log').append('<p>Exiting 480 breakpoint</p>');
});
$(window).bind('enterBreakpoint480',function() {
$('#log').append('<p>Entering 480 breakpoint</p>');
});
$(window).bind('exitBreakpoint768',function() {
$('#log').append('<p>Exiting 768 breakpoint</p>');
});
$(window).bind('enterBreakpoint768',function() {
$('#log').append('<p>Entering 768 breakpoint</p>');
});
$(window).bind('exitBreakpoint1024',function() {
$('#log').append('<p>Exiting 1024 breakpoint</p>');
});
$(window).bind('enterBreakpoint1024',function() {
$('#log').append('<p>Entering 1024 breakpoint</p>');
});
$(window).setBreakpoints();
$('#distinct').bind('click',function() {
$(window).resetBreakpoints();
$(window).setBreakpoints({distinct: $('#distinct').is(":checked")});
$(window).resize();
});
});
</script>
<style>
#log p {
font-size: 12px;
padding: 5px 10px;
}
#status {
border:1px solid #000;
margin-bottom:20px;
}
#status p { color: #CCC; margin:0px; padding:10px;}
.breakpoint-1024 #status p.breakpoint1024 { color: #000; font-weight:bold; background: #F0F0F0; }
.breakpoint-768 #status p.breakpoint768 { color: #000; font-weight:bold; background: #F0F0F0;}
.breakpoint-480 #status p.breakpoint480 { color: #000; font-weight:bold; background: #F0F0F0; }
.breakpoint-320 #status p.breakpoint320 { color: #000; font-weight:bold; background: #F0F0F0; }
</style>
</head>
<body>
<div id="instructions">
<h3>Demo</h3>
<p>
<strong>Resize your browser window now and watch events in the box below.</strong>
</p>
<p>
<input name="distinct" type="checkbox" id="distinct" checked /> <label for="distinct">Use only largest available breakpoint</label>
</p>
</div>
<div id="log">
<h3>Active Breakpoints</h3>
<div id="status">
<p class="breakpoint1024">1024</p>
<p class="breakpoint768">768</p>
<p class="breakpoint480">480</p>
<p class="breakpoint320">320</p>
</div>
<h3>Event Log:</h3>
</div>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-84020-8");
pageTracker._trackPageview();
} catch(err) {}</script>
</body>