HTML CSS Alignment inside td

Question

I am doing some custom CSS with Jquery-UI date picker.

I have one requirement to display a dot below each date on calender to indicate some kind of ratings:

enter image description here

I am creating the dots dynamically as:

  <strong>.</strong>

I want to display all the dots closed to the dates like Sunday 1, but I cannot find a way to dynamically align each dots with every date.

What are you trying to do? put the dots in the grey bit? - jsfiddle.net/peteng/6pER9/2 — Pete
– Pete, Commented May 1, 2014 at 12:16
I think what you want is to replace your line tds[j].innerHTML += '.....'; with $("a", tds[j]).append(' .....'); — garlon4
– garlon4, Commented May 1, 2014 at 12:20

Pete · Accepted Answer · 2014-05-01 12:39:59Z

1

If you are just trying to put the dots inside your grey bit then you can change your js code (I noticed you are using jQuery so have rewritten to use it):

var table = $(".ui-datepicker-calendar").eq(0);
var tds = table.find("td");

tds.each(function(i) {
    var link = $(this).find('a');
    if (link.length > 0) {
        var rating = 5; // add your rating functionality here
        switch (rating)
        {
            case 1:
                link.addClass('dot one');
                break;
            case 2:
                link.addClass('dot two');
                break;
            case 3:
                link.addClass('dot three');
                break;
            case 4:
                link.addClass('dot four');
                break;
            case 5:
                link.addClass('dot five');
                break;
        }
    }
});

and use the following styles:

.dot.one:after {content:'.';}
.dot.two:after {content:'..';}
.dot.three:after {content:'...';}
.dot.four:after {content:'....';}
.dot.five:after {content:'.....';}
.dot:after {display:block; color:#081ae4; font-weight:bold;}

This way your click functionality won't lose the date - Example

edited May 1, 2014 at 12:39

answered May 1, 2014 at 12:31

Pete

58.8k31 gold badges132 silver badges188 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Dot_NET Pro Over a year ago

But here is one Problem, when i click on date, it alerts (NaN/NaN/Nan). how to fix this

Pete Over a year ago

@Dot_NETJunior Sorry, you must have missed the edit - See new fiddle above

Collectives™ on Stack Overflow

HTML CSS Alignment inside td

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related