JQuery .text() method outputting garbled text - javascript

So I've been having a strange issue with JQuery's .text() method. What I have right now is some JS code that generates a random phrase from a few banks of random words, which I believe has no problem (it basically just produces a string). When you click a link in the browser, that link's text is replaced by a random phrase produced by the random phrase generator. So far, there is nothing wrong with the generated random phrase. However, it tends to garble the text behind it:
It seems that the browser is having difficulty when pushing text to the next line, causing it to overlap with the text that was already there.
When I highlight the paragraph, it "resets" correctly and it's fine until I try clicking the link again. If I zoom in or out, it seems like it's fine until I return to 100% zoom. If I make the text font size smaller, it seems to work fine too.
Here is the Javascript code:
//Initially get random phrase and display it on the page
getRandomPhrase();
$('#phrase').text(finalPhrase.new);
//On click, get the random phrase and display it on the page
$('#phrase').click(function () {
getRandomPhrase();
$('#phrase').text(finalPhrase.new);
});
Here is the HTML tag that I'm trying to replace:
<a title="Click!" href="#about" id="phrase">(the random phrase should be in here)</a>
The tag is in the middle of a paragraph of text. If anyone has any idea how I could fix this that would be great!
Edit: Here's all of the CSS, don't know what the problem could be. I'm using this 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 just managed to fix the problem. The solution is very strange, though.
I should've added more HTML to the original post.
Here is a basic view of the frontend HTML:
<div id="about">blah blah blah about me stuff
<a title="Click!" href="#about" id="phrase">(the random phrase should be in here)</a>
</div>
I had sent the link in the tag to go to #about, which did not seem wrong at all. (The reason I did this was because the user needed to be able to click on the link and stay there to see the result). I changed the href to #phrase, thus linking the link to itself:
<div id="about">blah blah blah about me stuff
<a title="Click!" href="#phrase" id="phrase">(the random phrase should be in here)</a>
</div>
This fixed the whole garbled text issue somehow. My hypothesis is that linking to the entire div was somehow not allowing it to reset properly, or that it was caching the div's original content in some way. Anyways, if someone could properly explain why this works that would be great haha. If anybody has a good explanation, please let me know! It's a really weird solution and I have no idea why it works (or why there was a problem in the first place!

Related

Can't get animate to work in jquery. Iv'e tried everything but it just doesn't react to any button click

problem= well nothing actually happens when i click menu on the html page. Nothing at all. Yes this is at the point of total noobiness but i just can't get it to work. I've looked through it but it still doesn't do a thing. The jquery is connected to the html file as alert works. But animate is something that doesn't.
jquery and html CODE!
<div class="fgg">
<ul>
<li>Home</li>
<li>Product</li>
<li>About</li>
<li>Contact</li>
</ul>
<id class="button">Menu</id>
<script>
$('#button').click(function({$(".fgg").animate({down:'+=400px'})});
</script>
</div>
CSS code!
.fgg {
font-family: "Courier New", Courier, monospace;
font-size: 20px;
text-decoration: none;
padding-left: 200px;
border-style: solid;
border-color: black;
position: relative;
}
#button {
font-family: "Courier New", Courier, monospace;
font-size: 35px;
border-style: solid;
border-color: black;
position: relative;
}
sorry, just started this and i don't even know how to make a code block.
There's a few problems with the code you're using.
First, you're using the CSS Selector #button, which targets elements that have an ID of 'button'. From the HTML you posted, you don't have any elements with an ID of 'button'. You do, however, have an element with a class of 'button'. Since this is the case, you'll want to change your CSS selector (in your CSS and JavaScript code) to .button. You can read more about how CSS selectors work by clicking here.
Second, there is a syntax error in your JavaScript code. jQuery's .click() function takes a function as an argument, and this function will execute when the specified element is clicked. A simple example:
$('.button').click(function () {
alert('Hello, world!');
});
In English, this might read like "When the element with the class 'button' is clicked, I want to show an alert that says 'Hello, world!'".
The problem with your current code is that you're passing a code block as an argument to this function, instead of executing some code inside of the function. The difference might be hard to spot, but this is a pattern that you will get used to as you work with JavaScript a bit more.
So in other words, you will want your code to look something like this:
$('.button').click(function () {
$('.fgg').animate({
// your options here
});
});
(You can read more about jQuery's .click() function and see some more examples by clicking here)
Finally, there is a problem with your usage of .animate(). You specified a directional property of down, but .animate() only understands directional properties top, bottom, right, and left. Try using one of those and see if you can get the result you're looking for. You can read more about how .animate() works and see some examples by clicking here.
There is no such thing as 'down'. Use 'top'. Also check you have included JQuery correctly (correct link, check console for a 404 error, etc). Finally, surround all your JQuery in an document.ready function - if not, it may not run on page load correctly (essentially it's good practice). Also just noticed you need to use the attribute ID not class when assigning the name button to the element in html so that the # (ID Reference) selects it correctly.
1 issue is that your function is not correctly written (there is a syntax error)
you forgot to add closing round bracket:
wrong:
$('#button').click(function({$(".fgg").animate({down:'+=400px'})});
right:
$('#button').click(function(){$(".fgg").animate({down:'+=400px'})});
if it still not work then print what your console's showing errors here

jQuery.insertBefore is not respecting the line break

I have a simple html with a div limited by width. Inside I have many span tags that are configured with nowrap. My css:
.content {
width: 50%;
margin: 10px;
padding: 10px;
border: 1px solid black;
}
.adder {
color: blue;
cursor: pointer;
}
.added {
position: relative;
white-space: nowrap;
}
And my html:
<div class="content">
<span class="added">A text just a little large 1.</span>
<span class="added">A text just a little large 2.</span>
<span class="added">A text just a little large 3.</span>
<span class="added">A text just a little large 4.</span>
<span class="added">A text just a little large 5.</span>
<span class="adder">Add</span>
</div>
As expected, the text is broken when there is no more space in the line to be placed. Then the entire span is rendered on the next line. Now I added some javascript code:
$(function() {
$(".adder").click(function() {
$(document.createElement("span"))
.addClass("added")
.html("A custom text to be add,")
.insertBefore(this);
});
});
So, now a new span is placed before the Add text for every time I click on Add.
But the problem is this, when I click a few more times in the Add, there comes a point where the end of the line size is reached, but rather to break the line as the other part of the text does, the new span is simply rendered in the same line overlapping the edge of the div.
Why this happen? How to avoid it?
I'm testing this page in Google Chrome 42.0.2311.135.
The whole html can be viewed in jsfinddle.
Your original list of "added" <span> elements have whitespace between them. The ones you add with the JavaScript code don't. Therefore, the browser can't insert line breaks between them — it will only do that at whitespace boundaries.
You can fix that in a few different ways; one simple way is to add this to your "click" handler:
$("<span/>", { text: " " }).insertBefore(this);
Another way to fix it is with pure CSS:
.added::after {
white-space: normal;
content: "\00200B";
}
No JavaScript changes would be necessary with that approach.
When you use insertBefore there is no space added between yoru elements. Simply add a space yourself and they will wrap as you expect:
$(function() {
$(".adder").click(function() {
$(document.createElement("span"))
.addClass("added")
.html("A custom text to be add,")
.insertBefore(this)
.after(" "); // add a single space
});
});
http://jsfiddle.net/gtoh8hzp/

How to display content anywhere using html class or ids

I want to write content in a post editor and display it somewhere in the same page only.
Previously I tried:
<div class="post-header-title"></div> - Where I like to display my content.
In Post Editor:
<style>
.post-header-title:after
{
content:"Content that I'd like to display.";
display: block;
padding-top: 10px;
font-size: 40px !important;
color: rgb(187, 185, 185) !important;
font-style: italic;
}
</style>
The above step using Pseudo-elements worked perfectly and it rendered the text that I want to display in my desired place.
But it can not be highlighted and search engine can not index it. So it became useless. Here is a codepen:
http://codepen.io/anon/pen/Ggwjpj
This is just an example.
I want to do something like this.
So how can we do that? Can anyone help me please.
Jquery has many functions to add html to your web page. To reproduce something like what you did, just use the after method.
$(".post-header-title").after("<span class='text'>SomeContent</span>");
See an example

Mismatch in text width between div and textarea

I'm trying to create a textarea control in which it is possible to mention other users. The feature is pretty much similar to the one found in Facebook, and the implementation is similar too. When the user types an "#", a dropdown is presented from which a user can be selected which is then displayed with a highlight in the textarea. To be able to selectively render highlights in the textarea, I'm using an overlay div with the same text, but with span tags to create highlights.
The overlay has the same width, the same font and font-size, the same letter-spacing, same line-height, etc., to make sure all highlights will align properly with the text in the textarea. All the text in the overlay div, except for the highlights themselves, is transparent to avoid artifacts of rendering anti-aliased text over text.
This all works pretty well, except that when there is a mention highlight, the text in the highlight is somehow just slightly less wide than the text below it in the textarea, which causes a very slight mismatch. Worse, this small mismatch accumulates when there are multiple highlights, and it can sometimes cause a line to wrap in the textarea but not in the div, after which the whole illusion just falls apart.
I have verified that all text rendering options are exactly the same for the text in the textarea and in the overlay and in the highlights. All have equal font, font-size, letter-spacing, line-height, there's no margin, border or padding on the highlights, etc.. I have also looked in the WebKit Inspector to see if I might have missed any properties that could still affect text rendering, but couldn't find any. Simply put, I can't explain where this slight rendering difference comes from.
Please note that the rendering difference does not occur as long as the overlay doesn't contain any highlights.
I have also tried only rendering the overlay and not rendering the textarea at all (instead of having the overlay be transparent outside of the highlights), but this has the nasty side-effect that I won't see any cursor anymore.
Is there some CSS property that I still might have overlooked or is there some other reason why breaking the text into multiple spans would cause the total width of the text to slightly differ from an uninterrupted text node? Any suggestions would be greatly appreciated!
Update: For any others who might run into this problem, it's illustrated in the following jsfiddle: http://jsfiddle.net/brt8w85z/5/
<style type="text/css">
.parent {
text-rendering: optimizeLegibility;
position: relative;
}
textarea {
border: 0;
color: #000;
resize: none;
}
.overlay {
color: transparent;
pointer-events: none;
}
textarea,.overlay {
font-family: Helvetica,sans-serif;
font-size: 12px;
left: 10px;
letter-spacing: normal;
margin: 0;
padding: 0;
position: absolute;
top: 10px;
width: 200px;
}
.highlight {
background-color: #00f;
color: #fff;
}
</style>
<div class="parent">
<textarea>Tom Kleijn, Mark van der Velden and Arend van Beelen</textarea>
<div class="overlay"><span class="highlight">Tom Kleijn</span>, <span class="highlight">Mark van der Velden</span> and <span class="highlight">Arend van Beelen</span></div>
</div>
The problem can be fixed by adding "text-rendering: geometricPrecision" to the "textarea,.overlay" rule.
Seems I have found the solution myself: On the body there's a definition of "text-rendering: optimizeLegibility". Setting this back to "text-rendering: geometricPrecision" on the textarea fixed the problem. The reason this was not obvious before was because the WebKit Inspector did not show the inherited text-rendering on the textarea, even though it does so for (most?) other inherited properties.

JS/CSS/XHTML: Don't copy specific text during copy events

I'm looking for a way to disable the copying of a specific area of text when you use Ctrl + C, etc. Whether I have to write the text a different way or not.
http://gyazo.com/721a0a5b5af173beb1ad3305633beafb.png
Above is what this is for. It's a syntax highlighter I have been working on (3 languages supported so far). When the user selects ANY text in any way, I don't want the line numbers to be copied.
I can't think of a way to display line numbers, without them actually being there.
As long as the line numbers and the source code are mixed together, this is going to be tough to prevent programmatically, if not impossible.
The ideal way would be having the source code in an actual container of its own.
Open a document inspector and look at how Github do it, for example: https://github.com/jbrisbin/riak-exchange/blob/master/Makefile
they have a separate <pre> element containing the line numbers, and a <table> cell containing the code. (I assume selecting is a reason why they use tables here, but I do not know for sure.)
Give this a try...
Demo: http://jsfiddle.net/wdm954/UD8Dq/7
I layered the div so the code div is on top and the numbers are behind. When you copy and paste you should just get the code.
.lines {
position: absolute;
width: 80%;
color: #666;
}
.lines pre:nth-child(odd) {
background-color: #EEE;
}
.code {
position: absolute;
z-index: 2;
padding-left: 5%;
width: 80%;
}
<div class="box">
<div class="lines">
<pre>1</pre>
<pre>2</pre>
<pre>3</pre>
<pre>4</pre>
</div>
<div class="code">
<pre>
code
code
code
code
</pre>
</div>
</div>
Setting user-select, -moz-user-select, and -webkit-user-select to none might work. For IE, you will need to handle onselectstart and return false.
This will prevent people from selecting the text, but I don't know what happens when it's beside other text that you attempt to copy.
I know that this question is three years old, but with HTML5 you can store line numbers in a data attributes and use CSS2 to display the text. This should prevent line numbers from being copied.
HTML
<span data-line-number='1' class='line'></span>
CSS
.line:before {
content: attr(data-line-number);
}

Categories

Resources