Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>Few things first.</p> <p>You have the same <code>&lt;ul&gt;</code> in multiple places, each with the same <code>id</code>. Same with the multiple <code>&lt;li&gt;</code> elements sharing IDs. This is not only invalid HTML but just a bad practice in general.</p> <p>Secondly, your document outline is backwards. Your text is in <code>&lt;h2&gt;</code> elements whereas your navigation/headers are in <code>&lt;h3&gt;</code> elements. This is also invalid and a bad practice.</p> <p>Next, let's talk about rest of the HTML for your navigation bars (which are doubling as section headers) and their content sections. Let's look at new HTML for two of them (Creativity and Minimalism)</p> <pre><code>&lt;div id="a1" class="section creativity"&gt; &lt;ul class="nav"&gt; &lt;li class="creativity"&gt;&lt;a href="#a1"&gt;Creativity&lt;/a&gt;&lt;/li&gt; &lt;li class="minimalism"&gt;&lt;a href="#a2"&gt;Minimalism&lt;/a&gt;&lt;/li&gt; &lt;li class="youthfulness"&gt;&lt;a href="#a3"&gt;Youthfulness&lt;/a&gt;&lt;/li&gt; &lt;li class="kuler"&gt;&lt;a href="#a4"&gt;Kuler&lt;/a&gt;&lt;/li&gt; &lt;li class="design"&gt;&lt;a href="#a5"&gt;Design&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;p&gt;Lorem ispum...&lt;/p&gt; &lt;/div&gt; &lt;div id="a2" class="section minimalism"&gt; &lt;ul class="nav"&gt; &lt;li class="creativity"&gt;&lt;a href="#a1"&gt;Creativity&lt;/a&gt;&lt;/li&gt; &lt;li class="minimalism"&gt;&lt;a href="#a2"&gt;Minimalism&lt;/a&gt;&lt;/li&gt; &lt;li class="youthfulness"&gt;&lt;a href="#a3"&gt;Youthfulness&lt;/a&gt;&lt;/li&gt; &lt;li class="kuler"&gt;&lt;a href="#a4"&gt;Kuler&lt;/a&gt;&lt;/li&gt; &lt;li class="design"&gt;&lt;a href="#a5"&gt;Design&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;p&gt;Lorem ispum...&lt;/p&gt; &lt;/div&gt; </code></pre> <p>The key takeaways here are</p> <ul> <li>Semantic use of elements</li> <li>Semantic use of class names</li> <li>No behavior</li> </ul> <p>Next, the CSS changes</p> <pre><code>div.section ul.nav { font: 35px 'ChunkFiveRegular', Arial, sans-serif; letter-spacing: 0; padding: 0px; margin: 0px; border-top: 1px solid black; border-bottom: 1px solid black; width:100%; list-style-type: none; } div.section ul.nav li { display:inline; padding: 0px; margin: 0px; } div.section p { font: 36px 'ChunkFiveRegular', Arial, sans-serif; letter-spacing: 0; } div.section.active ul.nav li a { color: #ddd; } a:link {color:#999; text-decoration: none;} a:visited {color:#999; text-decoration: none;} a:hover {color:#000; text-decoration: none;} li.creativity a:hover, div.creativity.active li.creativity a {color:#00ffff !important;} li.minimalism a:hover, div.minimalism.active li.minimalism a {color:#ff00ff !important;} li.youthfulness a:hover, div.youthfulness.active li.youthfulness a {color:#ffff00 !important;} li.kuler a:hover, div.kuler.active li.kuler a {color:#000000 !important;} li.design a:hover, div.design.active li.design a {color:#666666 !important;} </code></pre> <p>Key takeaways here are</p> <ul> <li>Semantic use of class names</li> <li>Inheritance based coloring</li> </ul> <p>And finally, the modification to your jQuery</p> <pre><code>jQuery.noConflict(); jQuery(function($) { $("ul.nav li a").click(function( event ) { event.preventDefault(); var target = $(this).attr( 'href' ); $.scrollTo( target.replace( '#', '' ) , { duration: 800 , axis: "y" , onAfter: function() { $( 'div.section.active' ).removeClass( 'active' ); $( target ).addClass( 'active' ); } } ); }); $(".return-top").click(function() { $.scrollTo("body", {duration: 800, axis:"y"}); }); }); </code></pre> <p>Key takeaways here are</p> <ul> <li>Behavior removed from links is added here</li> <li>Now relies on CSS classes, not IDs</li> </ul>
 

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