Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>You need to do something to add a "current" class to the list item that corresponds with the page you've loaded, and then you could do something like this, with the CSS you have:</p> <pre><code>.second-level-menu-vertical li a:hover, .second-level-menu-vertical li.current a { background-color: #FDCC00; border-radius: 7px; color: #000; text-decoration: none; } </code></pre> <p>You can add that class either with Javascript (on the client side) or in your menu-generating ASP.NET code (via codebehind)... I can't advise you as to which would be better for you, as you only included the CSS.</p> <p><em>EDITED</em></p> <p>Given this markup:</p> <pre><code>&lt;div class="second-level-menu-vertical"&gt; &lt;ul class="top-level"&gt; &lt;li&gt;&lt;a href="K-5th-Grades.aspx"&gt;K-5th Grades&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="6th-grade.aspx"&gt;6th Grade&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="7th-grade.aspx"&gt;7th Grade&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="8th-grade.aspx"&gt;8th Grade&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="9th-grade.aspx" class="selected"&gt;9th Grade&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="10th-grade.aspx"&gt;10 Grade&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="11th-grade.aspx"&gt;11th Grade&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="12th-grade.aspx"&gt;12th Grade&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="college-checklist.aspx"&gt;College Checklist&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="savings-growth-calculator.aspx"&gt;Savings Growth Calculator&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; </code></pre> <p>(Note, I put a selected class in there to illustrate... that shouldn't be in your markup generator if you're taking the jQuery or a Javascript approach. If you can put it into your markup generator, then that removes the need for the Javascript approach!)</p> <p>Here's modified CSS:</p> <pre><code>.second-level-menu-vertical { float: left; font:bold 110% 'verdana', sans-serif; margin-left: -10px; margin-top: 57px; text-transform: lowercase; width: 155px; z-index: 200; position: absolute; } .second-level-menu-vertical ul { padding-bottom: 10px; } .second-level-menu-vertical li { background: none; margin: 0; padding: 0 0.75em; } /* Don't forget LoVe-HAte to set the default styles for non-hover states */ .second-level-menu-vertical li a, .second-level-menu-vertical li a:link, .second-level-menu-vertical li a:visited, .second-level-menu-vertical li a:hover, .second-level-menu-vertical li a:active { border-bottom: 1.75px dashed #C9C9C9; color: #666; display: block; padding: 1em 0; text-decoration: none; } .second-level-menu-vertical li a:hover, .second-level-menu-vertical li a.selected, .second-level-menu-vertical li a.selected:link, .second-level-menu-vertical li a.selected:visited, .second-level-menu-vertical li a.selected:hover, .second-level-menu-vertical li a.selected:active { background-color: #FDCC00; border-radius: 7px; color: #000; text-decoration: underline; } </code></pre> <p>And here is the very simple jQuery you'd need for this to work. It makes a couple assumptions, based on the URLs you're currently using on your site, one of which is that you don't have a querystring in any of those URLs, and you will always end with a page name that matches a given href in your menu.</p> <pre><code>// you want the path of the location, // as that should not include the querystring, // if you have one var pathGroup = location.pathname.split("/"); // split it by the / character // then get the last element... this should be your // current page name var currentPage = pathGroup[pathGroup.length - 1]; // This selector finds the a tag that // has an href matching your currentPage // variable. It then adds a selected class // to that a tag var menuItems = $(".second-level-menu-vertical li a[href~='" + currentPage + "']").addClass("selected"); </code></pre> <p>Note that using regular javascript to get this is a little more complex. The sample, above, can be seen at jsFiddle (<a href="http://jsfiddle.net/mori57/dDsjf/" rel="nofollow">http://jsfiddle.net/mori57/dDsjf/</a>), though obviously it won't work there (might be easier to read, though), because it can't link to your site properly.</p> <p>Non-jQuery Javascript approach (<a href="http://jsfiddle.net/mori57/rQXBV/2/" rel="nofollow">http://jsfiddle.net/mori57/rQXBV/2/</a>):</p> <pre><code>// you want the path of the location, // as that should not include the querystring, // if you have one var pathGroup = location.pathname.split("/"); // split it by the / character // then get the last element... this should be your // current page name var currentPage = pathGroup[pathGroup.length - 1]; // get the top level element, and get the first // element returned, as getElementsByClassName // returns an array var sideMenu = document.getElementsByClassName("second-level-menu-vertical")[0]; // get all the li items from that item var sideLinks = sideMenu.getElementsByTagName("li"); // loop through the list returned for(var link in sideLinks){ // make sure that you're dealing with an object if(typeof sideLinks[link] == "object"){ // get the &lt;a/&gt; tag from inside the li var aTag = sideLinks[link].getElementsByTagName("a")[0]; // get the &lt;a/&gt; tag's href var href = aTag.getAttribute("href"); if(href == currentPage){ // if the href matches your currentPage // value, set the class to 'selected' aTag.setAttribute("class","selected"); } } } </code></pre>
    singulars
    1. This table or related slice is empty.
    1. POHover color will not persist upon page load
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USJason M. Batchelor
    1. USJason M. Batchelor
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    1. COThe JS method would be far easier to implement as I could pop it into the site.master, I hate further ask but can you show me what that script would look like?
      singulars
      1. PO
      1. USTom
    2. COObviously, the jQuery approach is a lot more concise, but I didn't know if you had jQuery available to use in this project, so I gave you a bare-JS approach as well. Hope these help!
      singulars
      1. PO
      1. USJason M. Batchelor
    3. COThank you so much. This is a lot of help. Much appreciated!!!
      singulars
      1. PO
      1. USTom
 

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