Page MenuHomeWickedGov Phorge
Files F5973112

webfonts.html
No OneTemporary
Actions

Size
3 KB
Referenced Files
None
Subscribers
None

webfonts.html
View Options

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>jQuery WebFonts Example</title>
<meta name="description" content=""/>
<meta name="author" content="Santhosh Thottingal"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="../lib/jquery.webfonts/src/jquery.webfonts.js"></script>
<script src="../lib/jquery.uls/src/jquery.uls.data.js"></script>
<script src="../lib/jquery.uls/src/jquery.uls.data.utils.js"></script>
<script src="../resources/js/ext.uls.webfonts.repository.js"></script>
<script>
$( function () {
var $webfonts, fonts, languages, $fontSelector, $langselector;
$( 'div#webfonts-preview-area' ).webfonts( {
repository: $.webfonts.repository
} );
$( 'button#webfonts-preview-bold' ).click( function () {
document.execCommand( 'bold', false, null );
} );
$( 'button#webfonts-preview-italic' ).click( function () {
document.execCommand( 'italic', false, null );
} );
$( 'button#webfonts-preview-underline' ).click( function () {
document.execCommand( 'underline', false, null );
} );
// get an instance of WebFonts
$webfonts = $( 'div#webfonts-preview-area' ).data( 'webfonts' );
// Get a list of all fonts provided by WebFonts
fonts = $webfonts.list();
languages = $webfonts.languages();
// Also test system fonts.
$fontSelector = $( 'select#fontselector' );
$langselector = $( 'select#language' );
function listFonts( fonts ) {
fonts.push( 'Sans', 'Serif' );
$fontSelector.find( 'option' ).remove();
fonts.forEach( function ( font ) {
$fontSelector.append( $( "<option></option>" )
.attr( "value", font ).text( font ) );
} );
$fontSelector.trigger( 'change' );
}
listFonts( fonts );
languages.forEach( function ( language ) {
$langselector.append( $( "<option></option>" )
.attr( 'value', language )
.text( language + " - " + $.uls.data.getAutonym( language ) ) );
} );
$fontSelector.on( 'change', function () {
var font = $fontSelector.find( 'option:selected' ).val();
$webfonts.apply( font );
} );
$langselector.on( 'change', function () {
var language = $langselector.find( 'option:selected' ).val();
listFonts( $webfonts.list( language ) );
$( '#webfonts-preview-area' ).text( $.uls.data.getAutonym( language ) );
} );
} )
</script>
<style>
div#webfonts-preview-toolbar {
background-color: #F9F9F9;
border: 1px solid #CCCCCC;
border-radius: 4px 4px 0 0;
overflow: hidden;
padding: 2px;
position: relative;
}
div#webfonts-preview-area {
border: 1px solid #CCCCCC;
border-radius: 0 0 4px 4px;
height: 150px;
line-height: 1.5em;
overflow: auto;
padding: 10px 5px;
text-align: left;
font-size: 16px;
}
select {
width: 200px;
height: 2.5em;
}
button {
height: 2.5em;
}
.langselector,
.fontselector {
float: left;
display: block;
}
#webfonts-preview-bold {
font-weight: bold;
}
#webfonts-preview-italic {
font-style: italic;
font-weight: bold;
}
#webfonts-preview-underline {
text-decoration: underline;
font-weight: bold;
}
</style>
</head>
<body>
<div>
<header>
<h1>jQuery WebFonts example</h1>
</header>
<div id='container'>
<div id="webfonts-preview-toolbar">
<div class='langselector'>
<label for="language">Language</label>
<select name="language" id="language"></select>
</div>
<div class='fontselector'>
<label for="fontselector">Font</label>
<select id="fontselector"></select>
</div>
<button id='webfonts-preview-bold'>B</button>
<button id='webfonts-preview-italic'>I</button>
<button id='webfonts-preview-underline'>U</button>
</div>
<div contenteditable="true" id="webfonts-preview-area"></div>
</div>
</div>
</body>
</html>

File Metadata

Mime Type
text/html
Expires
Sat, Oct 3, 16:23 (22 h, 50 m ago)
Storage Engine
local-disk
Storage Format
Raw Data
Storage Handle
57/4b/f7d5e9d346bc9562138324a12c20
Default Alt Text
webfonts.html (3 KB)

Event Timeline