I found another question with a similar issue but couldn't make head nor tail of how to apply the solution. My webpage is a simple combination of draggable images that lap over each other. All I want is for an image to appear on top of the others when clicked.
Each mage is currently functioning as a span element for dragging - do I need to have all individual images as div elements for a solution to work? do I need to apply an initial z-index to each image? (right now no z-indexes have been applied)
Here is the code I'm working with
<div id="wrapper">
<span id="drag" style=""><a href="javascript:void(0)" id="paragraphAnchor">
<img src="images/logoweb.png" width="198" height="198" style="" /></a></span>
<div id="text">
<p id='a'>
<span style="background:#0C6;">
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
<br/><br/>
<a href="#">website</a>
<br/><br/>
<a href="javascript:void(0)" id="paragraphAnchor5">close</a>
</p>
</span>
and the JQuery for each element
$(document).ready(function()
{
$('#drag').draggable( { containment: 'window' } );/*.resizable();*/
});
</div>
$(document).ready(function()
{
$('p#a').hide();
$('p#b').hide();
$('a#paragraphAnchor') .click(function() {
return false;
}).dblclick(function()
{
$('p#a').slideToggle('slow');
$('p#b').hide();
});
Just starting out using JQuery, any help to fit in the solution would be really really appreciated. I'm sure it's something simple no doubt
Thank you !