hi there
been banging my head over this for a couple of days, some help much appreciated.
i'm trying to create a solution for multiple popup layers that extend over the fantastic layout UI plugin, so the absolutely positioned popup divs ideally need to sit outside the document flow and as a direct child of the BODY tag so they don't conflict with the jquery generated layout.
all the "cluetip", "qtip" plugins just dont work for me so i've gone back to basics with andy langton's show hide.
------------------------------------------------------------------------------------------------------
// Andy Langton's show/hide/mini-accordion - updated 23/11/2009
// this tells jquery to run the function below once the DOM is ready
$(document).ready(function() {
// choose text for the show/hide link - can contain HTML (e.g. an image)
var showText="Show";
var hideText="Hide";
// initialise the visibility check
var is_visible = false;
// append show/hide links to the element directly preceding the element with a class of "toggle"
$('.toggle').prev().append(' (<a href="#" class="toggleLink">'+showText+'</a>)');
// hide all of the elements with a class of 'toggle'
$('.toggle').hide();
// capture clicks on the toggle links
$('a.toggleLink').click(function() {
// switch visibility
is_visible = !is_visible;
// change the link depending on whether the element is shown or hidden
$(this).html( (!is_visible) ? showText : hideText);
// toggle the display - uncomment the next line for a basic "accordion" style
$('.toggle').hide();$('a.toggleLink').html(showText);
$(this).parent().next('.toggle').toggle('slow');
// return false so any link destination is not followed
return false;
});
});
-------------------------------------------------------------------------------------------------
within a nested div structure of the main HTML layout i have several links which trigger the popups.
<div id="filter" class="button-filter toggleLink">Trigger popup</div>
the popup divs sit at the end of the HTML at the root of the BODY and are out of the doc flow.
here is one
<div id="bubble-filter-popup" class="toggle">some content</div>
if these two html lines sit next each other the code works and the popup appears.
how do i make the first div the toggle trigger instead of the "show/hide" text links tree traverse to the root to find the appropriate div to show?
any help appreciated!
thanks, rob