Skip to content
Browse files

initial commit

  • Loading branch information...
0 parents commit 3876a44192e92573e3ce3b7bb046cb7a34478c82 scottjehl committed Dec 15, 2010
Showing with 81 additions and 0 deletions.
  1. BIN demo/arrow.gif
  2. +48 −0 demo/index.html
  3. +33 −0 pxem.jQuery.js
BIN demo/arrow.gif
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
48 demo/index.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="UTF-8" />
+ <title><? echo "Filament Group Lab Example From Page from: $articleTitle"; ?></title>
+ <link rel="shortcut icon" href="/images/favicon2.ico" type="image/x-icon" />
+ <link href="/style/demoPages" media="screen" rel="Stylesheet" type="text/css" />
+ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
+ <script src="../pxem.jQuery.js" type="text/javascript"></script>
+ <style type="text/css">
+ .A,.B,.C,.D { margin: 5px 5px 5px 0; padding: 5px 5px 5px 0; border: 1px solid #333; border-left: 0; position: relative; }
+ .A { font-size: 2em; width: 90%; }
+ .B { font-size: 2em; }
+ .C { font-size: .5em; }
+ .D { font-size: 5.5em; }
+ .test { background: #eee; margin: 0; border: 1px dotted #666; padding: 0; line-height: 1em; }
+ .labeltext { font-size: 12px; white-space: nowrap; position: absolute; top: 10px; right: 10px; line-height: 1 !important; background: url(arrow.gif) 0 50% no-repeat; padding: 0 0 0 15px;}
+ </style>
+ <script type="text/javascript">
+ $(function(){
+ $('div:not(#demoHeader)').each(function(){
+ var emval = $(200).toEm({scope: $(this)});
+ $('<span class="labeltext"><strong>width:</strong> '+ emval +'</span>')
+ .prependTo(this);
+ $('<div class="test"/>')
+ .width( emval )
+ .text('Abc')
+ .prependTo(this);
+
+
+ });
+ });
+ </script>
+</head>
+
+<body>
+
+ <div class="A">
+ <div class="B">
+ <div class="C">
+ <div class="D">
+ </div>
+ </div>
+ </div>
+ </div>
+
+</body>
+</html>
33 pxem.jQuery.js
@@ -0,0 +1,33 @@
+/*--------------------------------------------------------------------
+ * jQuery pixel/em conversion plugins: toEm() and toPx()
+ * by Scott Jehl (scott@filamentgroup.com), http://www.filamentgroup.com
+ * Copyright (c) Filament Group
+ * Dual licensed under the MIT (filamentgroup.com/examples/mit-license.txt) or GPL (filamentgroup.com/examples/gpl-license.txt) licenses.
+ * Article: http://www.filamentgroup.com/lab/update_jquery_plugin_for_retaining_scalable_interfaces_with_pixel_to_em_con/
+ * Options:
+ scope: string or jQuery selector for font-size scoping
+ * Usage Example: $(myPixelValue).toEm(); or $(myEmValue).toPx();
+--------------------------------------------------------------------*/
+
+$.fn.toEm = function(settings){
+ settings = jQuery.extend({
+ scope: 'body'
+ }, settings);
+ var that = parseInt(this[0],10),
+ scopeTest = jQuery('<div style="display: none; font-size: 1em; margin: 0; padding:0; height: auto; line-height: 1; border:0;">&nbsp;</div>').appendTo(settings.scope),
+ scopeVal = scopeTest.height();
+ scopeTest.remove();
+ return (that / scopeVal).toFixed(8) + 'em';
+};
+
+
+$.fn.toPx = function(settings){
+ settings = jQuery.extend({
+ scope: 'body'
+ }, settings);
+ var that = parseFloat(this[0]),
+ scopeTest = jQuery('<div style="display: none; font-size: 1em; margin: 0; padding:0; height: auto; line-height: 1; border:0;">&nbsp;</div>').appendTo(settings.scope),
+ scopeVal = scopeTest.height();
+ scopeTest.remove();
+ return Math.round(that * scopeVal) + 'px';
+};

0 comments on commit 3876a44

Please sign in to comment.
Something went wrong with that request. Please try again.