How do you use css conversion with jquery and address window to maximize inconsistency?

Question

Documentation of attempts and images of the described problem:

I am trying to resize a table in Bootstrap . Bootstrap works just fine, and even my table works mostly fine. The problem I encountered is that when you resize the view port (whether it’s a desktop window or rendering a page using a mobile phone screen), the table will not be resized in any reasonable way. It resizes, but not relative to its original position. It shrinks in place and loses its margin position with other elements on the page.

As you can see, I tried several different methods represented by comments. I posted at least 40 browser tabs that were looking for a viable solution. There is a little something that I don’t grab, and a good push in the right direction would be greatly appreciated.

What do I need to do to facilitate this field so that the table stays at the top and left of the contents above it and the view port on the left?

See my answer below for a solution for both conversion and maximum problem.

Incomplete jquery code that I use:

$(window).resize(function() { var ww = $(window).width(); var hh = $(window).height(); var tt = $(".gametable").width(); var scle = 0.0;//parseFloat(tt) / parseFloat(ww); if (ww <= 688); { scle = parseFloat(ww) / parseFloat(tt); //$(".gametable").css("transform", "scale(" + scle.toString().substr(0, 4) + ")"); $('.gametable').css({ '-webkit-transform' : 'scale(' + scle.toString().substr(0, 4) + ')', '-moz-transform' : 'scale(' + scle.toString().substr(0, 4) + ')', '-ms-transform' : 'scale(' + scle.toString().substr(0, 4) + ')', '-o-transform' : 'scale(' + scle.toString().substr(0, 4) + ')', 'transform' : 'scale(' + scle.toString().substr(0, 4) + ')' }); } $(".log").html($(".log").html() + scle.toString().substr(0, 4) + "<BR>"); // $(".gametable").width($(".gamerow").css("width")); // $(".gametable").height($(".gamerow").css("width")); // $(".gametable").css("transform", "scale(0.75)"); $(".gametable").css("position", "relative"); $(".gametable").css("top", "0"); $(".gametable").css("left", "0"); $(".gametable").css("padding", "0"); // // $(".gamediv").css("position", "relative"); // $(".gamediv").css("top", "0px"); // $(".gamediv").css("left", "0px"); // $(".gamediv").css("padding", "0px"); }); 

An exact description of the declared behavior can be found in the following figures:

The table is to the left of the screen when both the window and the board have the same width: 688 pixels.

But when using the above code, the table is compressed, but does not maintain position. This is my question. How do I do this not to make this margin?

We repeat. When I compress the table using the conversion method above, it creates an unwanted edge on the top edge and to the left of the table. What do I need to do to facilitate this margin so that the table remains above and to the left of the content above it and the view port on the left?

Answer 1

Using vals, I came up with a solution that resizes my table completely dynamically. Someone else can adapt my code as they need to address their specific problem. My code also handles the problem of the "maximize" button of the operating system in the corner of the view port in the desktop environment. This bit of code solves all the problems with resizing my table in all the big 5 browsers and mobile browsers that I have access to. Hope this helps a million people. :)

As you can see below, the $(window).resize(function() event ends inside the $(document).ready(function() event. This does two separate but identical things:

• This prevents an excessive number of calls to $(window).resize(function() .
• This prevents $(window).resize(function() from being called too quickly, causing potential distortions and incorrect values ​​for various width and height calls.

This should work for all typical dynamic content resizing procedures.

Pay attention to the special contribution of vals transform-origin . This saves the content packaged together as it was before, until the trasformation .

 $(document).ready(function() { $(window).resize(function() { if ($(window).width() <= 700 || $(window).height() <= 800) { var sclw = ((parseFloat($(window).width()) - 30) / parseFloat($(".gametable").width())).toString().substr(0, 4); var sclh = ((parseFloat($(window).height()) - 120) / parseFloat($(".gametable").width())).toString().substr(0, 4); var sc = parseFloat(sclw) < parseFloat(sclh) ? sclw : sclh; $('.gametable').css({ '-webkit-transform' : 'scale(' + sc + ')', '-moz-transform' : 'scale(' + sc + ')', '-ms-transform' : 'scale(' + sc + ')', '-o-transform' : 'scale(' + sc + ')', 'transform' : 'scale(' + sc + ')', 'transform-origin' : 'top left' }); $('.mininfo').width(parseFloat($(window).width()) - 30); } else { $('.gametable').css({ '-webkit-transform' : 'scale(1)', '-moz-transform' : 'scale(1)', '-ms-transform' : 'scale(1)', '-o-transform' : 'scale(1)', 'transform' : 'scale(1)', 'transform-origin' : 'top left' }); $('.mininfo').width($(".gametable").width()); } }).resize(); }); 

Answer 2

Have you considered using media query in css instead of JavaScript for this? I prefer this normally because there is less of my own code that may go wrong ... only the style and specification of the viewport.

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries