StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>This is relatively easy, using jQuery (which you included in your tags, so I'm assuming you're okay using it for this):</p> <pre><code>$(document).ready( function(){ $('a.openInThisPage').click( function(){ $('#newContent').load('path/to/htmlFile.html #idOfTheContentYouWantToLoad'); return false; }); }); </code></pre> <p>with the mark-up</p> <pre><code><a href="path/to/htmlFile.html" class="openInThisPage">Click to view new content</a> <div id="newContent"> </div> </code></pre> <p>I've got <a href="http://davidrhysthomas.co.uk/play/loadDemo.html" rel="nofollow">a demo of this on my own site</a>, since it gave me an excuse to do something with Doctor Who.</p> <p>this uses jQuery's <a href="http://api.jquery.com/load/" rel="nofollow"><code>load()</code></a> to load the remote content into the named <code>div</code>; <code>load()</code> takes a string of two items:</p> <ol> <li>The URL to the page you want to load into the current page, and</li> <li>A selector to identify which part of that page you want to load into the current page.</li> </ol> <p>The usual JavaScript caveats apply, of course, you're restricted to pages from the same (sub-) domain, and it can cause issues with bookmarking (unless you reflect the new content in the URL in some way).</p> <hr /> <p>Edited in response to OP's posted code.</p> <p>Given that your posted (x)html doesn't feature any <code>a</code> elements of the class I posted, you'd need to adapt your jQuery to the following:</p> <pre><code>$(document).ready( function(){ $('#slidedoormenu a').click( function(){ $('#col1').load('.\listOfServices.htm'); return false; }); }); </code></pre> <p>Be aware that the <code>\</code> in the URL might cause problems (I'm not entirely sure, but it's the first time I've seen it used in a URL, so I'm not sure if it's valid or not).</p> <p><hr /> Edited in response to comment from OP:</p> <blockquote> <p>@David, I have one more question on this thread. How do I have one of the pages 'defaulted' to appear in the right column (i.e., before the link is clicked by the user)? Thanks again, jmac</p> </blockquote> <p>You could simply use the <code>$(document).ready()</code>:</p> <pre><code>$(document).ready( function(){ $('#newContent').load('path/to/htmlFile.html #idOfTheContentYouWantToLoad'); } ); </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