Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p><strong>Alternative solution:</strong> My original answer is still below but I was thinking about how to do this in a different way so created a <a href="http://jsfiddle.net/ZByff/" rel="nofollow"><strong>demo</strong></a> of the following code, where changing <code>BREADCRUMBS_MAX_WIDTH</code> for a larger or smaller value will allow for more or less <em>ellipsis-izing</em> and changing <code>.last()</code> to <code>.first()</code> will make the higher level breadcrumbs be <em>ellipsis-ized</em> first :-)</p> <p>JavaScript (requires jQuery)</p> <pre><code>var BREADCRUMBS_MAX_WIDTH = 700; function crumbsWidth() { var width = 0; $('#breadcrumbs li').each(function() { width += $(this).outerWidth(); }); return width; } while (crumbsWidth() &gt;= BREADCRUMBS_MAX_WIDTH &amp;&amp; $('#breadcrumbs li').length - 2 !== $('#breadcrumbs li.ellipsis').length) { $('#breadcrumbs li:not(:first-child):not(:last-child):not(.ellipsis)').last().addClass('ellipsis'); } </code></pre> <p>CSS</p> <pre><code>#breadcrumbs { margin:0; padding:0; list-style-type:none; font-size:0; } #breadcrumbs li { display:inline-block; font-size:16px; padding-left:4px; } #breadcrumbs li:not(:first-child):before { content:'\002192 '; } .ellipsis { width:60px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } </code></pre> <p>HTML</p> <pre><code>&lt;ul id="breadcrumbs"&gt; &lt;li&gt;Lorem ipsum dolor&lt;/li&gt; &lt;li&gt;sit amet, consectetur&lt;/li&gt; &lt;li&gt;adipisicing elit, sed&lt;/li&gt; &lt;li&gt;do eiusmod tempor&lt;/li&gt; &lt;li&gt;incididunt ut labore&lt;/li&gt; &lt;li&gt;et dolore magna aliqua&lt;/li&gt; &lt;li&gt;Ut enim ad minim&lt;/li&gt; &lt;/ul&gt; </code></pre> <p><strong>Original answer:</strong></p> <p>Initially I had some problems running the code before the fiddle was added which I'll cover first.</p> <p>The <code>while (height &gt; 17)</code> control flow statement can cause an infinite loop which may result in 100% CPU and could crash a browser or tab. I see in the fiddle that you have provided a way to break out of the loop though, but the code in the question should really fully describe the problem.</p> <p>There is a selector problem with <code>$('#breadcrumbsContainer &gt; span')</code> in that you are using the CSS Child combinator <code>&gt;</code> which only returns direct children and not all descendants. With this markup in your fiddle:</p> <pre><code> &lt;div id="breadcrumbsContainer"&gt; &lt;span id="ctl00_breadcrumb"&gt; &lt;span&gt;&lt;a style="text-decoration: none;" href="#"&gt;Min startside&lt;/a&gt;&lt;/span&gt; &lt;span&gt;&lt;/span&gt; &lt;span&gt;&lt;a style="text-decoration: none;" href="#"&gt;dfa as dfdsa dsa fdsfas&lt;/a&gt;&lt;/span&gt; &lt;span&gt;&lt;/span&gt; &lt;span&gt;&lt;a style="text-decoration: none;" href="#"&gt;a fdsa fsd adsfdsasad fdsa&lt;/a&gt;&lt;/span&gt; &lt;span&gt;&lt;/span&gt; &lt;span&gt;&lt;a style="text-decoration: none;" href="#"&gt;test aff for log og opr sds&lt;/a&gt;&lt;/span&gt; &lt;span&gt;&lt;/span&gt; &lt;span&gt;&lt;a style="text-decoration: none;" href="#"&gt;TESTs sds&lt;/a&gt;&lt;/span&gt; &lt;span&gt;&lt;/span&gt; &lt;span&gt;anders er awesome&lt;/span&gt; &lt;/span&gt; &lt;/div&gt;​ </code></pre> <p>the selector is finding the <code>&lt;span id="ctl00_breadcrumb"&gt;</code> and not the breadcrumb spans. So you might need to correct that to be <code>$('#breadcrumbsContainer span span')</code></p> <p>That will still not fix the problem because using <code>$('#breadcrumbsContainer span span').get(j)</code> will cause a JavaScript error as the <a href="http://api.jquery.com/get/" rel="nofollow"><code>.get()</code></a> returns a DOM element and not a jQuery wrapped object so you cannot call <code>.find()</code> on it.</p> <p>The second example using <a href="http://api.jquery.com/eq-selector/" rel="nofollow"><code>:eq()</code></a> will also not work because the <code>j</code> variable is part of the selector string, rather than a variable value and will not cause an error in jQuery. So,</p> <pre><code>$('#breadcrumbsContainer &gt; span:eq(j) a') </code></pre> <p>should be</p> <pre><code>$('#breadcrumbsContainer &gt; span:eq(' + j + ') a') </code></pre> <p>However with all these changes, the resultant selector will still not work due to the way in which <code>:eq()</code> operates. From the documentation</p> <blockquote> <p>:eq filters the set of elements that have matched the expressions that precede them</p> </blockquote> <p>so <code>$('#breadcrumbsContainer span span')</code> will select all the breadcrumbs and spacer elements and then apply the filter. So <code>:eq(0)</code> will be the first breadcrumb and <code>:eq(1)</code> will be the first <em>spacer span</em>.</p> <p>So taking all of these changes, we end up with:</p> <pre><code>for (var j = 2; j &lt; length; j++) { // &lt;--- starts at 2 (do not change first breadcrumb) if ($('#breadcrumbsContainer span span:eq(' + j + ') a').text() != "...") { if ($('#breadcrumbsContainer span span:eq(' + j + ') a').text("...")); } j++; } </code></pre> <p><strong>Note:</strong> This above loop will work but it is not very efficient for the following reasons:</p> <ol> <li>Empty <code>&lt;span&gt;</code> elements to pad the breadcrumbs can be removed in favour of spacing each breadcrumb with CSS</li> <li>Use more semantic markup to describe the data for example <code>&lt;ul&gt;&lt;li&gt;&lt;/li&gt;&lt;/ul&gt;</code> instead</li> <li>The <code>:eq()</code> selector is a jQuery extension and not part of the CSS specification, queries using :eq() cannot take advantage of the performance boost provided by the native DOM querySelectorAll() method <sup><a href="http://api.jquery.com/eq-selector/" rel="nofollow"><strong>[docs]</strong></a></sup></li> <li>Might be simpler to use the <a href="http://caniuse.com/#search=text-overflow" rel="nofollow">widely supported</a> CSS property <code>text-overflow:ellipsis</code> and change the <em>width</em> of each breadcrumb rather than changing the <code>&lt;a&gt;</code> text.</li> </ol>
    singulars
    1. This table or related slice is empty.
    1. POjQuery for-loop with :eq / get - compress breadcrumb
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USandyb
    1. USandyb
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POjQuery for-loop with :eq / get - compress breadcrumb
      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. VTUpMod
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTAcceptedByOriginator
    1. COUpdated my answer with an alternative solution based off of the comments at the end of the original answer
      singulars
      1. PO
      1. USandyb
 

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