javascript - JQuery is providing incorrect widths for embedded fonts on document ready -
so i'm trying underline <a> elements of header. problem, believe, reason jquery isn't getting proper width of <a> text, it's in embedded font.
update: oddly, occurring within chrome , safari, webkit browsers having issue.
here's relevant css:
* { padding: 0; border: 0; margin: 0; } { text-decoration: none; color: inherit; cursor: pointer; } body { height: 100%; margin: 0; padding: 0; } body > #container { min-height: 100%; position: relative; height: 100%; } body > #container > header { width: 100%; background-color: black; color: white; } body > #container > header > #title { font-family: 'shadows light', cursive; padding: 12px 0px 12px 30px; font-size: 42px; } body > #container > header > #title > .navigation { font-family: 'montserrat', sans-serif; float: right; display: inline; } body > #container > header > #title > .navigation > span { display: block; float: left; text-decoration: none; font-size: 20px; padding-left: 20px; padding-right: 20px; padding-top: 20px; } body > #container > header > #title > .navigation > #magic-line { position: absolute; padding-top: 5px; top: 60px; left: 0; background: white; padding-left: 0px; padding-right:0px; } body > #container footer { color: #3e606f; text-align: center; position: absolute; bottom: 0; width: 100%; height: 40px; } here's header.html
<!doctype html> <html> <head> <link href="css/header.css" media="screen" rel="stylesheet" type="text/css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script src="js/header.js"></script> <link href='http://fonts.googleapis.com/css?family=montserrat' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=shadows+into+light' rel='stylesheet' type='text/css'> <meta property="og:image" content="res/bigduckse.png" /> </head> <body> <div id="container"> <header> <div id="title">r.a.g.e. <span class = "navigation"> <span class="current_page_item" id="home"> <a href="index.html">home</a> </span> <span id="about"> <a href="videos.html">about</a> </span> <span id="points"> <a href="#">points</a> </span> <span id="schedule"> <a href="#">schedule</a> </span> <span id="swag"> <a href="#">swag</a> </span> </span> </div> </header> </div> </body> and here's all-important header.js
var ready1 = function() { var $el, leftpos, newwidth, $mainnav = $(".navigation"); if($("#magic-line").length){ } else{ $mainnav.append("<span id='magic-line'></span>"); } var $magicline = $("#magic-line"); $magicline .width($(".navigation .current_page_item a").width()) .css("left", $(".current_page_item a").position().left) .data("origleft", $magicline.position().left) .data("origwidth", $magicline.width()); $(".navigation span").hover(function() { $el = $(this); leftpos = $el.children("a").position().left; newwidth = $el.children("a").width(); $magicline.stop().animate({ left: leftpos, width: newwidth },200); }, function() { $magicline.stop().animate({ left: $magicline.data("origleft"), width: $magicline.data("origwidth") },200); }); }; var resizewindow = function() { //adjusting body size dynamically var $headerfooter=$("header").height()+$("footer").height(); var $bodyheight=$(window).height()-$headerfooter; $(".body").css("height",$bodyheight); //adjusting position of wrapper dynamically $("#wrapper").css("top",(.1*$bodyheight)); var $wrapperheight = .8*$bodyheight; $("#wrapper").css("height",$wrapperheight); }; $(window).load(ready1); $(window).resize(ready1); $(window).resize(resizewindow); i set of on jsfiddle, reason when do, formats properly. seems happen when testing on actual browser. in addition, can see i'm using window.load instead of document.ready, i've read cause of wrong width, it's not helping @ all.
also note, sec resize window, underline works.
if help, appreciated.
the window resize event , dom ready event called before google font loaded. solution utilize web font loader command moment google font loaded... "it co-developed google , typekit."
first, described here: https://github.com/typekit/webfontloader
just approach:
var activecallback = jquery.callbacks(); // define callback activecallback.add(function() { // add together callback function resizewindow(); }); webfont.load({ google: { families: ['montserrat'] }, active: function () { activecallback.fire(); } // fire callback }); javascript jquery html css
No comments:
Post a Comment