Home posted: 1
» Mon Aug 06, 2012 12:35 am
Admin
“ It's very easy to change values with a simple jQuery script. ”
You can see this jsFiddle here:
http://jsfiddle.net/UDdhL/19/
As you can see the first 3 numbers are lower than 500 and therefore set to active. The last number is between 500 and 3000 and therefore set to less active.
Here is the jQuery code we are going to use:
The jQuery code
This code basically checks for the numbers what value they have got.
If the value is lower than 500 it sets the text to 'active'.
If the value is between 500 and 3000 it sets the text to 'less active'.
This is the HTML we are going to use:
The HTML code
So how do we wrap it into a complete html page?
That's easy, I made this HTML5 set-up page for you:
The HTML code
Simply take the code and save it as a HTML (.html or .htm) page.
This way you can set values.
For example I could do:
If my post value reaches 100 I could change my post value to 'Insane' or 'Unlimited'. Just by using this code.
You can see this jsFiddle here:
http://jsfiddle.net/UDdhL/19/
As you can see the first 3 numbers are lower than 500 and therefore set to active. The last number is between 500 and 3000 and therefore set to less active.
Here is the jQuery code we are going to use:
The jQuery code
- Code:
$(".number").each(function(){
var elm = $(this);
var number = parseFloat(elm.text(), 10);
if (number >= 1 && number <= 500) {
state = "active";
} else if (number >= 500 && number < 3000) {
state = "less active";
}
elm.text(state);
});
This code basically checks for the numbers what value they have got.
If the value is lower than 500 it sets the text to 'active'.
If the value is between 500 and 3000 it sets the text to 'less active'.
This is the HTML we are going to use:
The HTML code
- Code:
<span class="number" >1.3< /span>
<div class="number">1.75</div>
<div class="number">1.1</div>
<div class="number">570</div>
So how do we wrap it into a complete html page?
That's easy, I made this HTML5 set-up page for you:
The HTML code
- Code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> changing values </title>
<!-- Include jQuery -->
<script> $(".number").each(function(){
var elm = $(this);
var number = parseFloat(elm.text(), 10);
if (number >= 1 && number <= 500) {
state = "active";
} else if (number >= 500 && number < 3000) {
state = "less active";
}
elm.text(state);
});</script>
</head>
<body>
<span class="number" >1.3< /span>
<div class="number">1.75</div>
<div class="number">1.1</div>
<div class="number">570</div>
</body>
</html>
Simply take the code and save it as a HTML (.html or .htm) page.
This way you can set values.
For example I could do:
If my post value reaches 100 I could change my post value to 'Insane' or 'Unlimited'. Just by using this code.
