Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Wow that is confusing, It seems like your over complicating the situation. You don't need page specific CSS or anything like that, You just need to set .current class at a different time.</p> <p>When somebody navigates to your website you will know what #tag they are loading, or if there isn't any. </p> <p>Now, basically on page load you need to look at the hashtag, if there is one there and if it is correct (being that its an actual page you have accounted for) then you just load that page like you do at the moment, but also highlight the leaf. </p> <p><strong>You could actually simplify your whole thing on the .current leaf</strong></p> <p>Really a 'leaf' is only 'current' when you load the information. So when the information is loaded and placed inside your $wrapper, faded in and animated; put your .current on then.</p> <p><em>Comment if you need clarification or a working example :)</em></p> <hr> <p><strong>Update - The quick solution</strong></p> <p><a href="http://jsfiddle.net/6p2f6/1/" rel="nofollow">http://jsfiddle.net/6p2f6/1/</a><br> Basically i moved the stuff changing the .current leaves into the hash change and at the bottom I made it check to see if the user navigated to a page using hash, if not then it set a default. Its not perfect but its the best i can do in the time i have at the moment. Hope it helps!</p> <p><em>Again comment if you need clarification or more example</em> </p> <hr> <p><strong>Update - new code :)</strong></p> <p><a href="http://www.mediafire.com/?51vajskfeu923" rel="nofollow">http://www.mediafire.com/?51vajskfeu923</a></p> <p>There are a few files so i couldn't chuck it in a JSfiddle</p> <p>Right so, i couldn't get the whole fading menu to work, but i got it show/hiding like a normal hover. I can look at it later, but since you know how to do it I'm assuming you can figure it out. Just go to the javascript file and look for this:</p> <pre><code> $this = $(this); var currentHash = window.location.hash; console.log('specialMenu this.each(this) = '+$this.attr('href')); //append all images $this.append('&lt;img class="defaultImage" src="'+settings.defaultImage+'"/&gt;') .append('&lt;img class="hoverImage" src="'+settings.hoverImage+'"/&gt;') .append('&lt;img class="activeImage" src="'+settings.activeImage+'"/&gt;'); //prepare positioning $('.defaultImage').css({ 'z-index':'1' }); $('.activeImage').css({ 'z-index':'2' }); $('.hoverImage').css({ 'z-index':'3' }); //Make parent correct height $this.height($this.find('img').height()); //check what hash value is loaded if(currentHash == $this.attr('href')){ $this.find('img:not(.activeImage)').hide(); $this.find('img.activeImage').show(); }else{ $this.find('img:not(.defaultImage)').hide(); $this.find('img.defaultImage').show(); } $(this).hover(function(){ currentHash = window.location.hash; $(this).find('img:not(.hoverImage)').hide(); $(this).find('img.hoverImage').show(); },function(){ currentHash = window.location.hash; if(currentHash == $(this).attr('href')){ $(this).find('img:not(.activeImage)').hide(); $(this).find('img.activeImage').show(); }else{ $(this).find('img:not(.defaultImage)').hide(); $(this).find('img.defaultImage').show(); } }); }); }, </code></pre> <p>Now on the main page to set it up look at this code:</p> <pre><code> $('#contentContainer').jdAjaxContent({ 'defaultPage': 'home', 'pathToLoadGif' : 'ajaxloading.gif' }); $("#destroy").click(function(){ console.log('destroy.click'); $(this).jdAjaxContent('destroy'); }); //had to put this in its own window load, not sure why; weird bug $(window).load(function(){ console.log('specialMenu.click'); $('a[href^=#]').jdAjaxContent('specialMenu', { 'defaultImage': 'MenuIcons-01.png', 'hoverImage' : 'MenuIcons-02.png', 'activeImage' : 'MenuIcons-03.png' }); }); </code></pre> <p>Ignore the destroy bit, that just gets rid of the plugin; take it out.<br> Your interested in the </p> <pre><code>$('#contentContainer').jdAjaxContent({ 'defaultPage': 'home', 'pathToLoadGif' : 'ajaxloading.gif' }); </code></pre> <p>$('#contentContainer') is the container that your ajax loads into<br> default page is default page ha<br> pageToLoadGif is the path to the little loading gif that is usually displayed.</p> <p>Now you'll also need to look at </p> <pre><code>$('a[href^=#]').jdAjaxContent('specialMenu', { 'defaultImage': 'MenuIcons-01.png', 'hoverImage' : 'MenuIcons-02.png', 'activeImage' : 'MenuIcons-03.png' }); </code></pre> <p>This is the bit that does your little menu thing. Since you have different images you'll need to do each one separately, something like this:</p> <pre><code>$('a[href^=#]').each(function(){ $(this).jdAjaxContent('specialMenu', { 'defaultImage': $(this).attr('defaultImage'), 'hoverImage' : '$(this).attr('hoverImage'), 'activeImage' : $(this).attr('activeImage') }); }); </code></pre> <p>Then you put defaultImage="blah" in your so it will look like </p> <p>ALSO<br> Do a find replace on all ' console.log' to '//console.log' so that all the console stuff doesn't appear on your actual website.</p> <p><em>I hope this helps, i found it very interesting to write my own ajax engine, if you find any bugs or need any more help just comment or email me at mr.jackdavis@gmail.com</em></p>
    singulars
    1. This table or related slice is empty.
    1. POApplying effects to a div class for the current page/tab using jQuery
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USMrJD
    1. USMrJD
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POApplying effects to a div class for the current page/tab using jQuery
      singulars
      1. PTQuestion
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTAcceptedByOriginator
    3. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTBountyClose
    1. COThanks, I had a feeling I was overcomplicating matters! My jQuery skills are limited, so a working example/some clarification would be great.
      singulars
      1. PO
      1. USNick
    2. COI could re-write the whole thing to be a bit more efficient, but its melbourne cup day and I'm at work this morning so its a bit difficult. I'll do a quick update of the question with something that will work for now. I need to do something like this soon for work and i can do it this weekend coming, ill update my question again with my rewritten code that you can plagiarise :)
      singulars
      1. PO
      1. USMrJD
    3. COThanks. I've tried your current code, and am experiencing a few strange things. The site opens on the about page rather than the home page, and the leaf for the current page stays green when the contact form opens (It faded before, which is the behaviour I am looking for). There's no big rush though, so if you are able to post new code this weekend, that would be great. Always happy to plagiarise!
      singulars
      1. PO
      1. USNick
 

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