StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>I'd strongly recommend separating style, logic, and content. It makes your code much easier to read maintain. Some recommendations:</p> <ul> <li>All inline styling (e.g. ) should be replaced by stylesheets <ul> <li>In this example doing so allows you to reuse the same styling for both the menu item and the paragraph</li> </ul></li> <li>Make use of a third-party JavaScript library like jQuery to simplify handling cross-browser javascript implementation inconsistencies</li> <li>Attach events progmatically rather than inline</li> <li>Don't try to handle each case individually; abstract your code a little more. There's no need to create multiple div's just to get the styling to match</li> <li>Generally speaking, it is a good idea to place all script content at the end of the page, just before the closing body tag. This will make your content visible while the page is processing the javascript and give the site the appearance of loading faster</li> </ul> <p>Here's an example of how to implement these suggestions:</p> <pre><code><style> .red { color: red; } .green { color: green; } </style> <div id="TitleBar"> <a data-text="Paragraph 1" class="green">Title 1</a> <a data-text="Paragraph 2" class="red">Title 2</a> </div> <div id="text"></div> <script src="http://code.jquery.com/jquery-git.js"></script> <script> $('#TitleBar').on('hover', 'a', function (e) { var $evTarg = $(e.target), $dest = $('#text'); $dest.html($evTarg.data('text')).attr('class', $evTarg.attr('class')); }); </script> </code></pre> <p> One last comment - if the "Paragraph x" text is more than a couple of words, consider storing the text in a named array instead of embedding it in the source tag.</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