CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Pankaj Goyal
Pankaj Goyal

Reputation: 1548

How to resize the clockpicker?

Here is the link from where I downloaded the source code of clockpicker jquery plugin http://weareoutman.github.io/clockpicker/jquery.html

I have used clockpicker in one of my dialog box but I need to resize it. There is no such attribute of clockpicker where I can mention the dimensions. What changes do I need to do in the css to change the clockpicker's height and width?

I am able to change width and height of the box by changing some attributes in clockpicker-popover class, but changing clockpicker-dial and clockpicker-tick classes are not helping.

The actual clock (hours and minutes) is not changing. I saw this is prepared in javascript code and some variables are declared as follows based on which the actual clock is prepared.

// Clock size
var dialRadius = 100,
outerRadius = 80,
// innerRadius = 80 on 12 hour clock
innerRadius = 54,
tickRadius = 13,
diameter = dialRadius * 2,
duration = transitionSupported ? 350 : 1;

Based on these values some trigonometric operations are done. How should I change these values to resize the clock?

Upvotes: 3

Views: 2122

Answers (3)

Pankaj Goyal
Pankaj Goyal

Reputation: 1548

There is an error( which I mentioned above in my comments) in the above jsfiddle example. Here is the fix :

    // Mousedown or touchstart
    function mousedown(e, space) {
        var offset = plate.offset(),
            isTouch = /^touch/.test(e.type),
            x0 = offset.left + dialRadius*zoom,
            y0 = offset.top + dialRadius*zoom,
            dx = (isTouch ? e.originalEvent.touches[0] : e).pageX - x0,
            dy = (isTouch ? e.originalEvent.touches[0] : e).pageY - y0,
            z = Math.sqrt(dx * dx + dy * dy)/zoom,
            moved = false;
        ............
        ............

        // Clock
        self.setHand(dx/zoom, dy/zoom, ! space, true);

        // Mousemove on document
        $doc.off(mousemoveEvent).on(mousemoveEvent, function(e){
            e.preventDefault();
            ..........
            ..........
            moved = true;
            self.setHand(x/zoom, y/zoom, false, true);
        });

        // Mouseup on document
        $doc.off(mouseupEvent).on(mouseupEvent, function(e){
            $doc.off(mouseupEvent);
            e.preventDefault();
            ...........
            ...........
            if ((space || moved) && x === dx && y === dy) {
                self.setHand(x/zoom, y/zoom);
            }
            .............
            .............
            $doc.off(mousemoveEvent);
        });
    }

    // Set clock hand to (x, y)
    ClockPicker.prototype.setHand = function(x, y, roundBy5, dragging){
        var radian = Math.atan2(x, - y),
        isHours = this.currentView === 'hours',
        unit = Math.PI / (isHours || roundBy5 ? 6 : 30),
        z = Math.sqrt(x * x + y * y),
        options = this.options,
        inner = isHours && z < (outerRadius + innerRadius) / 2,
        radius = inner ? innerRadius : outerRadius,
        value;
        ......
        ......
    }

Upvotes: 0

ViliusL
ViliusL

Reputation: 4715

Use css to scale popup:

.popover{
    -ms-transform: scale(1.5);
    -webkit-transform: scale(1.5); 
    transform: scale(1.5);
    top:120px !important;
    margin-left:100px; }

and use new variable zoom in edited js library:

// Clock size
...
var zoom = 1.5;

Final result with zoom ability: (js library code changed) http://jsfiddle.net/YkvK9/412/

Upvotes: 2

Billy
Billy

Reputation: 2448

If you look in the source files you will find the css for clockpicker, it's the one that ends in .css

Upvotes: 1

Related Questions