CODEWITHSUNDEEP
jqueryapi
user1196567
user1196567

Reputation:

How to change width of HTML table on browser by jQuery

I'm making an exam site, i prepared my html for jQuery and now i want to provide user to change width of table when he take mouse on border of table and drag it. because some answers might be longer than my default places.

What api should i use? i'm guessing i should use drag() api but what else i'm gonna need?

I will be also appriciated if you guys can provide me some examples too :)

Upvotes: 2

Views: 319

Answers (2)

Tats_innit
Tats_innit

Reputation: 34117

Working demo http://jsfiddle.net/YfnjA/

Hope it helps.

When you will click on and drag it will allow you to resize, rest you can play around and make it your way now :)

code

$(function() {
    var pressed;
    var start;
    var startX;
    var startWidth;
    var wrapper = $("div#wrapper");
    var container = $("table#container");

    $("table th").mousedown(function(e) {
        start = $(this);
        startX = e.pageX;
        startWidth = $(this).width();
        $(start).addClass("resizing");
        pressed = true;
    });

    $(document).mousemove(function(e) {
        if(pressed) {
            var newWidth = startWidth + (e.pageX - startX);
            start.width(newWidth);
            wrapper.width(container.width() + 10);
        }
    });

    $(document).mouseup(function() {
        if(pressed) {
            $(start).removeClass("resizing");
            pressed = false;
        }
    });
});​

Upvotes: 1

jancha
jancha

Reputation: 4977

some hints:

$(selector).width();

$(selector).mousedown(function(){});

$(selector).mouseup(function(){});

Upvotes: 1

Related Questions