Add 0 in front of 1-9

Question

I have a div with a number, which changes dynamically in php. The number comes from the slide number in the Supersized plugin. I have tried my best to figure out how to change the plugin, so I could fix it with php, but without any luck.

I would like to "force" this number to always have a 0 in front of it, if it is below 10. So if the number is 5, it should be 05.

I found a solution with jQuery, but it is only working until the next slide loads and the number changes, and then the next number has no zero in front of it. This is the script:

$(".number").text(function(i, val){
    return $.trim(val).length === 1 ? '0' + val : val;
});

Is there a way to make jQuery keep checking the number, and adding a zero every time the number is below 10? Or some other solution?

Hope someone can help :)

What do you mean by "keep checking the number"? How would it change? — Ja͢ck, Jan 02 '14 at 00:23
if you want to show leading 0 in user control such as `` why you not using mask? (Can be duplicate of that question: http://stackoverflow.com/questions/12578507/how-to-do-an-input-with-a-mask) — Epsil0neR, Jan 02 '14 at 00:26
Why not compare the value to 10 every time it's changed? `return (val < 10) ? ('0' + val) : val` (unless it can possibly be negative, in which case checking the length is correct) — Trojan, Jan 02 '14 at 00:26

score 0 · Answer 1 · answered Jan 02 '14 at 00:27

0

Um would it be okay to do it in php ?

echo addZero(6);

function addZero($n){
  if($n < 10 && $n > -1) return "0".$n;
  else return $n;
}

answered Jan 02 '14 at 00:27

user3152069

408
3
9

Thank you very much for your answer - I have tried to do it with php, but I am working the a plugin, which makes it very difficult. (I updated the original answer). – Cody Jan 02 '14 at 00:45

Chad La Guardia · Answer 2 · 2014-01-02T02:43:22.950

0

If you want to use JQuery, you could change the inner element of the div to be a text input and style it to look like text. Then, bind your function to the textfield's change event.

$(".number").change(function(i, val){
    return $.trim(val).length === 1 ? '0' + val : val;
});

This will allow your function to be called any time the text is changed.

[1]Here's a good link to show all the various events you can use in JQuery and [2]the post I linked in the comments regarding monitoring DOM properties.

edited Jan 02 '14 at 02:43

answered Jan 02 '14 at 00:28

Chad La Guardia

5,088
4
24
35

Thanks for your answer, but the change event seems to be limited to form elements only? – Cody Jan 02 '14 at 00:43
Ah, i see. I didn't read closely enough. You might make it the inner element a text field and simply style it to look as if its simply text. Might be a bit gacky, but there isn't really any way to watch a `div` for changing ([there is](http://stackoverflow.com/q/4979738/550514), but it isn't supported by IE). You could save the info in the div by using the `.data()` function and managing the changing yourself. – Chad La Guardia Jan 02 '14 at 01:53
Just read the info about this being a plug-in. I'm guessing the php generates this `div` so changing the html is out of the question... Does the plugin name the div by any chance? – Chad La Guardia Jan 02 '14 at 02:00
Yes, the php generates the div. Yes, it gives it a class, so there is a little to work with :) – Cody Jan 02 '14 at 02:04
Cool, we can work with that then by using the class selector (`$(.className)`) Check out [this post](http://james.padolsey.com/javascript/monitoring-dom-properties/) about using `setInterval` to solve your problem. – Chad La Guardia Jan 02 '14 at 02:41

score 0 · Answer 3 · answered Jan 02 '14 at 13:47

Just made this (pretty dirty) hack, and it fixed my problem! I was able to insert <span class="extra-zero">0</span> before <div class="number">

And then hide or show it with this code:

$(".number").bind("DOMSubtreeModified",function(){
    $(function() {
        $(".number").filter(function() {
            if ($(this).text() < 10 ) {
                $('.extra-zero').css({ 'display': 'inline' });
                    }                   

            else {
                $('.extra-zero').css({ 'display': 'none' });
                }                       
        });
    });
});

It would have been nicer to prepend the span with the zero, but it didn't work for me, so I think I will stick with my dirty hack. Thank you all for answering and trying to help.

Add 0 in front of 1-9

3 Answers3