Databases
StackOverflow2013
Postsdbo
POChange from double click to single click when I replace my toggle navigation text links with images?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POChange from double click to single click when I replace my toggle navigation text links with images?
    primarykey
    data
    text
    <p>When you single click on my navigation items/li a content box slides out. I would now like each navigation item to be a custom image, that when single-clicked results in it's corresponding content box sliding out.</p> <p>Everything works just fine until I switch the navigation 'li' from text to an image. Now to toggle open the content box, the image requires a double click as opposed to a single click when it was plain text. Can anyone point me in the right direction to change the double click to a single click?</p> <p>In my example I have changed only the first of my three navigation items (About) to an image to show the double-click issue: <a href="http://jsfiddle.net/rcdtest/YnspZ/" rel="nofollow">My Fiddle</a></p> <p><strong>HTML</strong></p> <pre><code>&lt;nav id="nav"&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#about" class="open"&gt;&lt;img src="images/pgtitle-about.png" title="About" /&gt; &lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#gallery" class="open"&gt;Gallery&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#contact" class="open"&gt;Contact&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/nav&gt; &lt;/section&gt; &lt;!------- Content Slide Out -------&gt; &lt;div id="slide-right"&gt; &lt;!-------------------- About ----------------------&gt; &lt;section class="content" id="about"&gt; &lt;div id="about-title"&gt; &lt;h2&gt;About&lt;/h2&gt; &lt;/div&gt; &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt; &lt;/section&gt; &lt;!-------------------- Gallery ----------------------&gt; &lt;section class="content" id="gallery"&gt; &lt;div id="gallery-title"&gt; &lt;h2&gt;Gallery&lt;/h2&gt; &lt;/div&gt; &lt;p&gt;IMAGE IMAGE IMAGE IMAGE IMAGE IMAGE&lt;/p&gt; &lt;/section&gt; &lt;!-------------------- Contact ----------------------&gt; &lt;section class="content" id="contact"&gt; &lt;div id="contact-title"&gt; &lt;h2&gt;Contact&lt;/h2&gt; &lt;/div&gt; &lt;p&gt; Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem. Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?&lt;/p&gt; &lt;/section&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p><strong>jQuery</strong></p> <pre><code> $(document).ready(function() { $('.content').hide(); $('.open').click(function(event){ event.preventDefault(); var targetDiv = $($(this).attr('href')); $('.open').removeClass("activeClass"); if(targetDiv.css("display") == "none") { $(this).addClass("activeClass"); } targetDiv.siblings().hide(); targetDiv.toggle('slide', {direction: 'left'}); }); $(document).click(function(e) { if($(e.target).hasClass("open") || $("#slide-right").find(e.target).length &gt; 0) { } else { $('.content').hide(); $('.open').removeClass("activeClass"); } }); }) </code></pre> <p><strong>CSS</strong></p> <pre><code>#sidebar { float: left; height: 1200px; max-width: 180px; left: 0; position: fixed; background: url(../images/bg-nav.png) no-repeat #000; z-index: 1; } .activeClass { text-decoration: none; } .content { background: #333; opacity: .6; color: #fff; width: 500px; min-height: 100%; top: 0; bottom: 0; margin-left: 180px; padding: 40px 30px; position: absolute; border: groove 5px #000; overflow: auto; } #about-title { background: url(../images/pgtitle-about.png) top left no-repeat; margin-bottom: 5%; } #gallery-title { background: url(../images/pgtitle-gallery.png) top left no-repeat; margin-bottom: 5%; } #contact-title { background: url(../images/pgtitle-contact.png) top left no-repeat; margin-bottom: 5%; } </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USJosh Crozier
    1. USHAR
    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. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

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