solepixel
Posts: 1
Joined: Fri Jul 18, 2008 5:28 pm

Cooperation with Jquery?

I don't think Jquery is the problem here, but I am having trouble using multiple HS HTML boxes on my page. Inside a loop, i have this:

Code: Select all

<a href="/contact/form/<?php echo $i; ?>/" class="highslide" rel="<?php echo $i; ?>">Contact Form</a>
						
<div id="contact_form_<?php echo $i; ?>" class="highslide-html-content" style="width:350px;">
	<div style="height:20px; padding: 2px" class="highslide-header">
		<a href="#" class="closer control">Close</a>
		<a href="#" class="highslide-move control">Move</a>
	</div>
	<div class="highslide-body" style="padding: 0 10px 10px 10px">
		asdf asdf asdf
	</div>
	<div class="highslide-footer">
		<div>
			<span class="highslide-resize" title="Resize">
				<span></span>
			</span>
		</div>
	</div>
</div>
Then in the Javascript, I have:

Code: Select all

function setupHS(){
	$(".highslide").each(function(e){
			if($(this).attr("rel") != ""){
				$(this).bind("click",function(r){
						// I have tried to do this several ways and none work.
						var divID = 'contact_form_'+$(this).attr("rel");
						return hs.htmlExpand(this, { contentId: divID } );
//						return hs.htmlExpand($(this), { contentId: 'contact_form_'+$(this).attr("rel") } );
					});
				$(this).children(".closer").bind("click", function(c){
						return hs.close($(this));
					});
				$(this).children(".highslide-move").bind("click", function(c){
						return false;
					});
			}
		});
}
What happens is either it will not return false and proceed to the URL in the HREF, or the <LOADING> dialog shows up and nothing ever happens. I have tried this numerous ways, even the exact way shown in the example. What am I doing wrong? Is there a way to debug?

Return to “Highslide JS Usage”