javascript - JQuery .text() method outputting garbled text -


so i've been having strange issue jquery's .text() method. have right js code generates random phrase few banks of random words, believe has no problem (it produces string). when click link in browser, link's text replaced random phrase produced random phrase generator. far, there nothing wrong generated random phrase. however, tends garble text behind it:

garbled text

it seems browser having difficulty when pushing text next line, causing overlap text there. when highlight paragraph, "resets" correctly , it's fine until try clicking link again. if zoom in or out, seems it's fine until return 100% zoom. if make text font size smaller, seems work fine too.

here javascript code: 

//initially random phrase , display on page getrandomphrase(); $('#phrase').text(finalphrase.new);  //on click, random phrase , display on page $('#phrase').click(function () {     getrandomphrase();     $('#phrase').text(finalphrase.new); });

here html tag i'm trying replace:

<a title="click!" href="#about" id="phrase">(the random phrase should in here)</a>

the tag in middle of paragraph of text. if has idea how fix great!

edit: here's of css, don't know problem be. i'm using on top of bootstrap:

@import url(http://fonts.googleapis.com/css?family=roboto); @import url(http://fonts.googleapis.com/css?family=roboto+slab); body {     font-family: 'roboto', sans-serif;     background-color: #fff7e4;     font-size: 14px; }  h1 {}  hr {     border-color: #9a9a9a; }  #name {     font-family: 'roboto slab', serif;     margin-top: 0px;     font-size: 80px;     color: #db1c00; }  #header {     font-size: 20px;     color: white;     padding-top: 70px;     padding-bottom: 40px;     background-color: #ccc6a6; }  #about {     font-size: 20px; }  #phrase {     color: #db1c00; }

i've managed fix problem. solution strange, though. should've added more html original post.

here basic view of frontend html: 

<div id="about">blah blah blah me stuff      <a title="click!" href="#about" id="phrase">(the random phrase should in here)</a> </div>

i had sent link in tag go #about, did not seem wrong @ all. (the reason did because user needed able click on link , stay there see result). changed href #phrase, linking link itself:

<div id="about">blah blah blah me stuff      <a title="click!" href="#phrase" id="phrase">(the random phrase should in here)</a> </div>

this fixed whole garbled text issue somehow. hypothesis linking entire div somehow not allowing reset properly, or caching div's original content in way. anyways, if explain why works great haha. if has explanation, please let me know! it's weird solution , have no idea why works (or why there problem in first place!


-

Comments

Post a Comment

Popular posts from this blog

c# - Binding a comma separated list to a List<int> in asp.net web api -

the default binder in web api expecst http://url.com/webapi/report/?pageids=3243&pageids=2365 to bind public ihttpactionresult report(list<int> pageids){ // exciting webapi code} i wish bind http://url.com/webapi/report/?pageids=3243,2365 as running out of space in url get . i have created class public class commaseparatedmodelbinder : system.web.http.modelbinding.imodelbinder { public bool bindmodel(httpactioncontext actioncontext, modelbindingcontext bindingcontext) { //binding in here } } and registered in webapiconfig.cs var provider = new simplemodelbinderprovider( typeof(list<int>), new commaseparatedmodelbinder()); config.services.insert(typeof(modelbinderprovider), 0, provider); i have altered method signature use model binder so public ihttpactionresult report( [modelbinder] list<int> pageids){ // exciting webapi code} however break point in binder not being
Read more

Delphi 7 and decode UTF-8 base64 -

in delphi 7, have widestring encoded base64(that received web service widestring result) : pd94bwwgdmvyc2lvbj0ims4wij8+dqo8c3ryaw5nptiq2lpyqjwvc3ryaw5npg== when decoded it, result not utf-8: <?xml version="1.0"?> <string>طھط³طھ</string> but when decoded base64decode.org, result true : <?xml version="1.0"?> <string>تست</string> i have use encddecd unit decodestring function. the problem have using decodestring . function, in delphi 7, treats decoded binary data being ansi encoded. , problem text utf-8 encoded. to continue encddecd unit have couple of options. can switch decodestream . instance, code produce utf-8 encoded text file data: {$apptype console} uses classes, encddecd; const data = 'pd94bwwgdmvyc2lvbj0ims4wij8+dqo8c3ryaw5nptiq2lpyqjwvc3ryaw5npg=='; var input: tstringstream; output: tfilestream; begin input := tstringstream.create(data); try output := tfilestream.
Read more

html - Is there any way to exclude a single element from the style? (Bootstrap) -

so, have img logo, overlaid on div styled background-image: url("...") , , both elements inside 2 div classes .to-color , .to-overlay respectively, black transparent overlay. is there way exclude logo style given these 2 classes? here's jsfiddle example: link html , css example: - html - <div class="to-color"> <div class="to-overlay"> <div class="respo"> <div class="row"> <div class="col-xs-4 col-xs-offset-4 text-center"> <img src="http://ansonalex.com/wp-content/uploads/2011/06/google-logo-768x260.png" alt="..." class="img-responsive"> </div> </div> </div> </div> </div> - css - .to-color { background-color: #000; } .to-overlay { opacity : 0.5; } .respo { background-image: url("https://source.unsplash.com/category/objects/1600x900"); background-position: center center;
Read more