StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>It seems to me that your main goal is to have 3 different sized sidebars. I am under the impression you still want them BEFORE the content div. You will need to put a in the location you want the sidebar to appear. Otherwise, there is no good way to flush the current sidebar and load the new one.</p> <p>I believe to accomplish what you are trying to do, you need to have some knowledge of the currently loaded sidebar, and only change it if the page has been resized into a different category. For this example, we'll assume the first sidebar is for 0-1023 pixel windows, medium is 1024-1599, and wide is 1600+.</p> <pre><code>$(document).ready(function() { var curwidth, script, prevclass, newclass; function reloadBars(width) { width = parseInt(width, 10); newclass = "" if (width < 801 && (curwidth == -1 || curwidth > 800)) { newclass = 'bar-0'; bar = '800.php'; } else if ((width > 800 && width < 1201) && (curwidth < 800 || curwidth > 1201)) { newclass = 'bar-1'; bar = '1000.php'; } else if ((width > 1200 && width < 1601) && (curwidth < 1200 || curwidth > 1601)) { newclass = 'bar-2'; bar = '1200.php'; } else if (width > 1600 && curwidth < 1600) { newclass = 'bar-3'; bar = '1600.php'; } else { return; } $.ajax({ type: "POST", url: bar, data: {}, success: function(response) { $('#aside').html(response); $('#aside').addClass(newclass); $("#aside").removeClass(prevclass); prevclass = newclass; }, error: function(e) { alert("UH OH! Error!"); } }); curwidth = width; } prevclass = "" curwidth = -1; reloadBars($(this).width()); $(window).resize(function() { reloadBars($(this).width()); }); }); </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

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