Develop Reference

Grab Number From Text And Add One With Jquery

Basically I am trying to just grab a number from this div, and it only contains this one number. Now once I grab it I would like to add one to it, but I can not get this to work. I am successfully grabbing the number, but when I add to it the number does not seem to work correctly.
Let me give you an example:
Div has the number 10 in it.
Jquery runs on it.
Div has the number 11 in it.
That is the expected, but instead, it changes the number to 1 after I add to it, and I do not know why.
Here is my code:
$(".postvotenumber").text(parseInt($(".postvotenumber").val()) + 1);
So this code is not adding one to the current number, but instead just making it one. How do I fix this? Thank You!

Your jquery is a bit off try this
$(".postvotenumber").text(parseInt($(".postvotenumber").text()) + 1);
divs do not have a value, so the val function doesn't return anything. The text function returns what is in the div tag.

It should be:
$(".postvotenumber").text((parseInt($(".postvotenumber").text()) + 1));
.val is used for inputs and text area's mostly. For a div you'll need to get the text via the .text, and set it with .text() also.

Is there a line of javascript that will change every hex color to a different hex color?

Basically, I'm wondering if it's possible to have a line of javascript isolate a specific hex code on a page (lets say #1166e7) and change it to another hex code (lets say #ff0000).
I know that this is a weird question because the process could easily be done by just changing the css, but in my situation, just pretend I can't access the css.
Thanks in advance.

You can go over all css properties of every element present on the page and replace the value you are looking for. You could do something like:
$("*").foreach(function() {
for(var key in this.style) {
if(this.style[key] == '#1166e7') {
this.style[key] = '#ff0000';
}
}
});
Note that I used the jQuery Framework to select all elements within the page. See Javascript: How to loop through ALL DOM elements on a page? for better approaches with wich you can iterate over all elements.

Get css width from a string

I have a string that I want to display on a web page that is dynamically passed in. I want to be able to dynamically determine the css width needed to display this string and then wrap it in an html element with the exact size needed to display it.
I am currently using javascript and dojo, so answers using those two are fine, but anything else won't work.
More Detail
I guess I should clarify. I want to display the string in an input field, so not as simple as a div (I think at least)

If you're wanting to set the <input> length to show all characters in the string, you can set it like so:
var myString = "abcdefg"; // this is what got input dynamically
var myInputElement = document.getElementById('someInput');
myInputElement.size = myString.length;

Since usually a good measure of characters are by em.
You can do this;
var element = Document.getElementById("ID");
element.style.length = element.value.length + " em";

You have to remember that before calculating the string's pixel width with regards to it's character count you have to somehow be aware of the metrics on the font used.
If then, you were to take the input string, wrap it in a <span>, embed it in the document, calculate the element's width, then remove the span and add the value to it's final destination you'd have a pretty decent projection of the intended width as long as your span has the same font style rules as the destination element.
If you want to get really fancy and technical about it, then the HTML 5 <canvas> tag is your friend.
A good article to better understand the complexity of font metrics in javascript which will also help you solve this: http://mudcu.be/journal/2011/01/html5-typographic-metrics/#measure

you can create an element and put some callback in it's load event
var span = $("<span/>").text("your input").load(function(e){
console.log($(this).width());
});
this way you can get the current width. don't define any width for the span element and don't float.

Inserting smilies into div with jQuery

I'm working on some small chat application. I want to implement smilies over there so when i click on some smiley it will appear in textarea where user enters his message and when user clicks on select i want smilies to appear in div that contains the conversation.
After some workarounds i got to idea that replacing textarea with div contenteditable="true"
doesn't work that well so i did wrap certain smiley name with ':' like :wink: in textarea but still i need to replace :wink: with real span containing image as background.
Problem is i don't see a way to make this dynamically but doing each one by one.
for example:
if ($('.line:contains(":wink:")').length > 0) {
var oldLineHTML = $('.line:contains(":wink:")').html();
$('.line:contains(":wink:")').html(oldLineHTML.replace(/:wink:/gi, '<span class="wink></span>"'));
I have plenty of smilies so doing this very resource expensive function will costs me much and also will cause me lots of problems during maintenance.
How can i do that dynamically? Or maybe you have better solution which will require to re-design... I'm up to it if it is required.
thanks
}

var testString = "test1 :smile: test2 :wink:";
alert(testString.replace(/:([^:]*):/g, '<span class="$1"></span>'));

My suggestion is read every string that is wrapped by colons :[something]:, then convert it into span. So that you don't have to define every smile, and it is easy to maintain.

If you are doing this on page load, then you can do this in a $(document).ready(). Then you can use selector that you have $('.line:contains(":wink:")') and use the $each operator to loop over each one and perform the update. This will cover you for the page load. But if you refactor that $each code into a method, then you can call it each time the text is updated. I think this will give you the best in both cases. Something like this:
function replaceWinks(){
$('.line:contains(":wink:")').each(function(index) {
//Replace the wink here
});
}
$(document).ready(function(){
replaceWinks();
});
I would recommend replacing the winks server side for the page load though. It will be more performant. Also it will avoid content that changes when after the first view.

Jeaffrey Gilbert's idea is good, but I have another one that may be interesting:
write down you winks the way you want(let's say [SmileName]), and when processing the text with jquery, read every one of them, and replace the [ with <div class=" then replace the ] sign, with "></div>, this way, you will end up like this:
using these smilies:
1- [smile]
2- [wink]
3- [shy]
will lead to the following markup
1- <div class="smile"></div>
2- <div class="wink"></div>
3- <div class="shy"></div>
and using CSS, you will give every class of them, a different background image, which is the smile image.
by utilizing this method, every div will lead to displaying your smilies, and you will write the code once, and end up using it wherever you want, without repeating yourself

How to color the numbers

I'm developing a website and in some pages of this website there are some services coupled with their related prices (I'm using WordPress as CMS).
I would to color in a different manner all the prices and I would to know if exists some automatic way to do this, for example using Javascript or simply using a specific CSS rule.
The alternative could be insert manually all the prices in an html tag like "<span class='price'>...</span>" but for me it would me a bad and boring way ;-)
Thanks

Your HTML is actually a mess where things are very difficult to trace back. Each paragraph seems to have its own div - that's a no-no, the p tag exists for a reason. Also, all of these divs have no way to be identified individually, meaning that you can never get to the one you need.
The best way here, honestly, is just to put that span around every price you find.
You could always track down all the strong elements since only they are used next to prices, but it could bug out other uses of strong tags elsewhere (if you ever have any). Since it doesn't seem like CSS has a way to find the parent element, you would have to do this through JS anyway:
var pricedivs = document.getElementsByTagName("strong");
for (var i = 0; i < pricedivs.length; i++) {
pricedivs[i].parentNode.className = "price";
}
And associated CSS:
.price { color: red; }
.price strong { color: black; } /* We only want the text beside the strong tag, so set the style back */
The effect is that all text that is around text with a strong tag will be colored red.

Is there any code you could share so we can see your situation? As long as the prices are separated in any way from the rest, you can make a CSS entry for it.
Also, using JS to format a page isn't recommended and you should not do it unless you really can't find any other way to access the exact part of the page you need.
EDIT: I guess what you could do is search for any numbers in the text using JS, and wrap that span around it. Then the CSS will do the rest. However, this may be expensive if you're not careful where you're searching for the text, and the numbers wouldn't color for anyone who has JS disabled.

I do an example. In this page http://www.3jolieistitutodibellezza.it/corpo-donna/ the prices are in a structure like this:
<div><strong>Polyglyco Pell:</strong> 25,00</div><div>A base di Poli Idrossiacidi e Alfa Idrossiacidi, favorisce l’eliminazione delle cellule morte, agevola il turnover cellulare, dona turgore e levigatezza</div><div>al tessuto. Indicato per pelli spesse, ipercheratosiche, favorisce la riduzione delle smagliature di recente formazione.</div>
Without using JS maybe it's impossible to find the prices and to color them.
Probably the only easy way to color the prices is to add a class attribute to div containers that contain the prices and to apply a simple CSS rule.
What do you think about it ?