Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>Add an id to your search div and set its postion to fixed</p> <p><strong>HTML</strong></p> <pre><code>&lt;div class="ui-grid-c" id="searchbar"&gt; &lt;input name="text-12" id="text-12" value="" type="text" autocorrect="off" class="searchbox"&gt; &lt;a href="#" data-role="button" data-corners="false" data-inline="true" class="search"&gt;Search&lt;/a&gt; &lt;a href="#" data-role="button" data-corners="false" data-inline="true" id="next" class="searchNext" disabled&gt;Next&lt;/a&gt; &lt;a href="#" data-role="button" data-corners="false" data-inline="true" id="prev" class="searchPrev" disabled&gt;Previous&lt;/a&gt; &lt;/div&gt; </code></pre> <p><strong>CSS</strong></p> <pre><code>#searchbar .ui-btn { width: 8em; } #searchbar .ui-input-text { display: inline-block; } #searchbar { position: fixed; } #searchbar + * { margin-top: 70px; } </code></pre> <p><strong><a href="http://jsfiddle.net/3xbGW/5/" rel="nofollow">Demo fiddle</a></strong> - Now the buttons are always visible but they may cover up the search result</p> <h2><strong>UPDATE</strong></h2> <p>I have devised a better solution. This time I removed the fixed position of the searchbar, instead I made it so the content is scrollable and whenever a new search match is highlighted the content is scrolled, leaving the searchbar on top.</p> <p>I made some changes to the script:</p> <p>Replace the last three functions (<code>searchAndHighlight()</code>, <code>searchNext()</code> and <code>searchPrev()</code>) with the ones below and add a new function <code>goToMatch()</code> add the end</p> <p><strong>Javascript</strong></p> <pre><code>function searchAndHighlight(searchTerm) { if (searchTerm) { var searchTermRegEx, matches; var selector = "#realTimeContents"; $(selector + ' span.match').each(function () { $(this).replaceWith($(this).html()); }); try { searchTermRegEx = new RegExp('(' + searchTerm + ')', "ig"); } catch (e) { return false; } $('.highlighted').removeClass('highlighted'); matches = $(selector).text().match(searchTermRegEx); if (matches !== null &amp;&amp; matches.length &gt; 0) { var txt = $(selector).text().replace(searchTermRegEx, '&lt;span class="match"&gt;$1&lt;/span&gt;'); $(selector).html(txt); searchIndex++; goToMatch(); return true; } else { alert('Search not found.'); } return false; } return false; } function searchNext() { searchIndex++; if (searchIndex &gt;= $('.match').length) searchIndex = 0; goToMatch(); } function searchPrev() { searchIndex--; if (searchIndex &lt; 0) searchIndex = $('.match').length - 1; goToMatch() } function goToMatch(){ $('.highlighted').removeClass('highlighted'); $('.match').eq(searchIndex).addClass('highlighted'); $('#realTimeContents').animate({ scrollTop: $('.match').eq(searchIndex).get(0).offsetTop}); } </code></pre> <p>And for the new element styles you need to add this to your CSS:</p> <p><strong>CSS</strong></p> <pre><code>.ui-page.ui-body-c.ui-page-active { height: 100%; } #realTimeContents { max-height: 100%; position: relative; overflow-y: auto!important; } #searchbar .ui-btn { width: 8em; } #searchbar .ui-input-text { display: inline-block; } #searchbar { background: #333; width: 100%; } </code></pre> <p>Check out the <strong><a href="http://jsfiddle.net/3xbGW/9/" rel="nofollow">new fiddle</a></strong></p>
 

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