Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p><code>window.resize</code> is the correct event but it doesn't fire on page-load. You can however just add <code>.trigger('resize')</code> to your code to make it fire on page-load:</p> <pre><code>$(window).bind('resize', function(){ var containerSize = $('.container').width(), textPercentage = 0.17391304347826086956521739130435, /* 40/230 */ textRatio = containerSize * textPercentage, textEms = textRatio / 14; $('.container h3').css(fontSize, textEms+"em"); }).trigger('resize'); </code></pre> <p>You are going to want to run this code after <code>document.ready</code> to make sure the width you are getting for the container is correct. You could also place this code at the bottom of your HTML document (which you should do with or without the <code>document.ready</code> event handler) which will make sure the elements are available when you run this code:</p> <pre><code>//wait for `document.ready` to fire $(function () { //cache the .container and H3 elements var $container = $('.container'), $h3 = $container.find('h3'); //bind event handler to `window.resize` $(window).bind('resize', function(){ //get the width of the container var containerSize = $container.width(), textPercentage = 0.17391304347826086956521739130435, /* 40/230 */ textRatio = containerSize * textPercentage, textEms = textRatio / 14; $h3.css('fontSize', textEms+"em"); }).trigger('resize'); }); </code></pre> <p>Notice that I cached the <code>H3</code> element(s) so it/then don't have to be selected every <code>resize</code> event, because when you actually re-size your browser there are tons of these events that fire.</p>
    singulars
    1. This table or related slice is empty.
    1. PODynamically Resize Text Based on Container Width
      singulars
      1. PTQuestion
    1. PTAnswer
    1. This table or related slice is empty.
    1. USJasper
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PODynamically Resize Text Based on Container Width
      singulars
      1. PTQuestion
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTAcceptedByOriginator
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    1. COHi Jasper, thank you so much for responding! I have a question about "waiting for `document.ready` to fire". I don't quite understand what that means, can you explain or link me to an article that explains? Thanks!
      singulars
      1. PO
      1. USpixelcook
    2. COI think the guys at jQuery can explain it a bit better: http://api.jquery.com/ready/. `The handler passed to .ready() is guaranteed to be executed after the DOM is ready, so this is usually the best place to attach all other event handlers and run other jQuery code.`. Basically when you put your code inside a `document.ready` event handler you will ensure that the elements you want to manipulate will be available to do so (if you for instance put your JS code in the head of the document w/o a `document.ready` event handler you won't be able to select elements in the body tag.
      singulars
      1. PO
      1. USJasper
    3. COIt is my understanding that placing the link to your script at the bottom of the page makes that unnecessary, since the DOM loads before the script. Is that correct?
      singulars
      1. PO
      1. USpixelcook
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload