You will recieve your password to this address. Address is not made public.

Your preferred username that is used when logging in.

Overlay - Strange bug - Need help please. Created Mar 12, 2010

This thread is solved

Views: 1295     Replies: 2     Last reply Mar 20, 2010  
You must login first before you can use this feature

ToolingAround

Posts: 2

Registered:
Mar 12, 2010

Overlay - Strange bug - Need help please.

Posted: Mar 12, 2010

Hi

I'm trying to set up one simple page with jQuery Tool overlay effect.
I'm using the most basic one, the minimal setup just like the demo.

Everything works as shown in the standalone demo.
( which means that I've done everything right )

.................................................

Later on...

I found out that the page won't pass the xhtml validation
because in xhtml strict, the rel attribute is not allow in img tag.

So I searched the forum

I've learned that it's okay to use an a tag with rel attribute
and have the original img wrapped inside the a tag.

.................................................

Now the comes the strange problem.

The overlay didn't work with a[rel]

I switched back and forth between using img[rel] and a[rel]
( of course - each with matching call in xhtml )

The result shown that it only works when using img[rel]
and it won't work when using a[rel]

.................................................

I was hoping someone who've experienced this before, or
someone with advance skill can shed some light on this.

( I called this bug because it's really bugging me )

Please Help If You Could.

Thank You Very Much

^_^

neodude

Posts: 4

Registered:
Nov 24, 2009

This worked for me

Posted: Mar 12, 2010

Reply to: Overlay - Strange bug - Need help please., from ToolingAround 

<!-- external page is given in the href attribute -->
<div class="feedback-button">
<a href="feedback.htm" rel="#overlay">
<img src="images/feedback.png" alt="feedback" />
</a>
</div>

<!-- overlayed element -->
<div class="feedback_overlay" id="overlay">
<!-- the external content is loaded inside this tag -->
<div class="feedback-content"></div>
</div>

Here is the JS for it:


<script type="text/javascript">
// JS for Feedback Form
$(function() { $("a[rel]").overlay({ expose: 'white', effect: 'apple', onBeforeLoad: function() { var wrap = this.getContent().find(".feedback-content"); wrap.load(this.getTrigger().attr("href")); } }); });
</script>

Here's the CSS for it:

/* Feedback */

	.feedback_overlay { display: none; background: url(images/overlay.png); width: 598px; padding: 10px; }
	/* default close button positioned on upper right corner */
	.feedback_overlay div.close { background: url(images/close.png); position: absolute; right: 5px; top: 5px; cursor: pointer; height: 35px; width: 35px; }
	
	/* use a semi-transparent image for the overlay */
	#overlay { background: url(images/overlay.png); height: 418px; }
	
	/* container for external content. uses vertical scrollbar, if needed */
	.feedback-content { height: 394px; margin: 19px 0 0 19px; overflow-y: auto; }

	.feedback-button { position: fixed; top: 317px; right: 0; }

Explanation for HTML
--------------------

The "feedback-button" div holds an image that has < a > tag on it with the "rel" attribute, this example calls an external page, i.e feedback.htm in my example.

The overlay element "feedback_overlay", i.e the stuff that pops up, holds the form inside it.

Explanation for JS
------------------

Initialize with the a[rel] attribute, call the function to find the said div, i.e "feedback-content" and display whatever is linked...sorry, my JS understanding is very limited :-)

CSS if self explanatory and can be adjusted for your wishes. This validates XHTML Strict. You can see it action on this theme I used it on -http://bit.ly/ce24i7

ToolingAround

Posts: 2

Registered:
Mar 12, 2010

I'm the bug.

Posted: Mar 20, 2010

Reply to: Overlay - Strange bug - Need help please., from ToolingAround
Hi all

Thanks neodude for the demo and all the advice above.
( I checked your work, it's very very impressive. )

Ok now, about the bug that get me started this thread.
I'v found that the bug is me.

The a[rel] is acting as a selector.

And if used as is ( just a[rel] ) the jQuery Overlay will detect all the a tag in the page,
this is what caused the problem.

I changed the a[rel] to specify only within a div
( specific area that needs the Overlay implemented )

and then problem resolved.

I'm putting this to clarify that the problem is me
not having studied the documentation good enough.

and I hope this will save some time for others
who might be having this same issue and reading thru the forum here.

•