Databases
StackOverflow2013
Postsdbo
POApply jQuery plugin to hidden elements
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POApply jQuery plugin to hidden elements
    primarykey
    data
    text
    <p>I have a page which has a number of hidden divs in it. These divs are hidden using the CSS handler <code>.div {display: none}</code>.</p> <p>Within each of these hidden divs is a jQuery powered slideshow, built using a jQuery plugin called TN3.</p> <p>Each hidden div is linked to a photo which is visible on the page. Clicking on the photo shows the corresponding hidden div and slides it into place. Clicking on the photo again, or on a close button within the hidden div, slides it back up and hides it again. This is done using a simple jQuery show/hide toggle script.</p> <p>My problem is that when you click a photo and the 'hidden' div becomes visible, the jQuery slideshow in the now visible div does not work. </p> <p>I think this is because the script for the slideshow uses a <code>$(document).ready()</code> function. As the hidden divs are not part of the DOM (as they are set to <code>display:none</code>) - the jQuery needed to run the slideshow does not fire.</p> <p>I think this leaves me with two options:</p> <ol> <li><p>Hide the hidden divs on page loading with jQuery, rather than setting CSS to <code>display: none</code>. I think this would mean the hidden divs would all be visible for a fraction of second on page load, and then they get hidden with the jQuery code - that would look clunky and is not desirable.</p></li> <li><p>Somehow set the jQuery code needed to operate the slideshow to fire when the user clicks the photo to toggle the visibility of the hidden div. This is where I come unstuck - I'm not sure how to do this.</p></li> </ol> <p>My knowledge of JavaScript is limited to jQuery, and generally limited to using functions that have <code>$(document).ready()</code>. I don't know how to trigger the code on another event other than the page loading.</p> <p>The code for the slideshow is below.</p> <p>Any ideas would be much appreciated</p> <pre><code>$(document).ready(function () { $('.tn3-gallery').tn3({ image: { transitions: [{ type: "fade", easing: "easeInQuad", duration: 423 }] }, thumbnailer: { overMove: false }, mouseWheel: false }); }); // end ready </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USuser2226032
    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
    1. VO
      singulars
      1. POApply jQuery plugin to hidden elements
      1. This table or related slice is empty.
      1. VTDownMod
    2. VO
      singulars
      1. POApply jQuery plugin to hidden elements
      1. This table or related slice is empty.
      1. VTUpMod
    1. COProper formatting makes your code easier to read and to understand.
      singulars
      1. POApply jQuery plugin to hidden elements
      1. USFelix Kling
    2. CO*"As the hidden divs are not part of the DOM"* That is incorrect. The elements are part of the document. Their styling does not have any influence on that. I'm pretty sure the elements are found by jQuery. The problem could be that the plugin reads the dimensions of the element which might return inaccurate values since they are not visible. It would be great if you could set up a http://jsfiddle.net/ demo for your problem. It would make it a lot easier for us to help you.
      singulars
      1. POApply jQuery plugin to hidden elements
      1. USFelix Kling
    3. COCould we see a fiddle or some working code?
      singulars
      1. POApply jQuery plugin to hidden elements
      1. USMatt Harrison
 

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