[jQuery] changing default thickbox behavior
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:st1="urn:schemas-microsoft-com:office:smarttags" xmlns="http://www.w3.org/TR/REC-html40">
<head>
<meta http-equiv=Content-Type content="text/html; charset=us-ascii">
<meta name=Generator content="Microsoft Word 11 (filtered medium)">
<!--[if !mso]>
<style>
v\:* {behavior:url(#default#VML);}
o\:* {behavior:url(#default#VML);}
w\:* {behavior:url(#default#VML);}
.shape {behavior:url(#default#VML);}
</style>
<![endif]--><o:SmartTagType
namespaceuri="urn:schemas-microsoft-com:office:smarttags" name="PersonName"/>
<!--[if !mso]>
<style>
st1\:*{behavior:url(#default#ieooui) }
</style>
<![endif]-->
<style>
<!--
/* Font Definitions */
@font-face
{font-family:Tahoma;
panose-1:2 11 6 4 3 5 4 4 2 4;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0in;
margin-bottom:.0001pt;
font-size:12.0pt;
font-family:"Times New Roman";}
a:link, span.MsoHyperlink
{color:blue;
text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
{color:purple;
text-decoration:underline;}
p
{margin:0in;
margin-bottom:.0001pt;
font-size:12.0pt;
font-family:"Times New Roman";}
pre
{margin:0in;
margin-bottom:.0001pt;
font-size:10.0pt;
font-family:"Courier New";}
span.EmailStyle17
{mso-style-type:personal;
font-family:Arial;
color:windowtext;}
span.EmailStyle20
{mso-style-type:personal-reply;
font-family:Arial;
color:navy;}
@page Section1
{size:8.5in 11.0in;
margin:1.0in 1.25in 1.0in 1.25in;}
div.Section1
{page:Section1;}
-->
</style>
</head>
<body lang=EN-US link=blue vlink=purple leftmargin=1 topmargin=1 rightMargin=1>
<div class=Section1>
<p class=MsoNormal><font size=2 color=navy face=Arial><span style='font-size:
10.0pt;font-family:Arial;color:navy'>Wow, Rob, you did all my work for me! Fantastic,
thanks!<o:p></o:p></span></font>
<p class=MsoNormal><font size=2 color=navy face=Arial><span style='font-size:
10.0pt;font-family:Arial;color:navy'><o:p> </o:p></span></font>
<div>
<div class=MsoNormal align=center style='text-align:center'><font size=3
face="Times New Roman"><span style='font-size:12.0pt'>
<hr size=3 width="100%" align=center tabindex=-1>
</span></font></div>
<p class=MsoNormal><b><font size=2 face=Tahoma><span style='font-size:10.0pt;
font-family:Tahoma;font-weight:bold'>From:</span></font></b><font size=2
face=Tahoma><span style='font-size:10.0pt;font-family:Tahoma'>
discuss-bounces@jquery.com [mailto:discuss-bounces@jquery.com] <b><span
style='font-weight:bold'>On Behalf Of </span></b>Rob Desbois
<b><span style='font-weight:bold'>Sent:</span></b> Thursday, March 15, 2007
8:54 AM
<b><span style='font-weight:bold'>To:</span></b> <st1:PersonName w:st="on">jQuery
Discussion.</st1:PersonName>
<b><span style='font-weight:bold'>Subject:</span></b> Re: [jQuery] changing
default thickbox behavior</span></font><o:p></o:p>
</div>
<p class=MsoNormal><font size=3 face="Times New Roman"><span style='font-size:
12.0pt'><o:p> </o:p></span></font>
<div>
<p class=MsoNormal><font size=2 face=Tahoma><span style='font-size:10.0pt;
font-family:Tahoma'>Paul,<o:p></o:p></span></font>
</div>
<div>
<p class=MsoNormal><font size=2 face=Tahoma><span style='font-size:10.0pt;
font-family:Tahoma'> <o:p></o:p></span></font>
</div>
<div>
<p class=MsoNormal><font size=2 face=Tahoma><span style='font-size:10.0pt;
font-family:Tahoma'>Short answer -- yes, modify the code ;-)<o:p></o:p></span></font>
</div>
<div>
<p class=MsoNormal><font size=2 face=Tahoma><span style='font-size:10.0pt;
font-family:Tahoma'>To prevent closing by clicking on the overlay and remove
the 'close' link (better IMHO than just disabling it), remove line 38:<o:p></o:p></span></font>
</div>
<div>
<p class=MsoNormal><font size=2 face=Tahoma><span style='font-size:10.0pt;
font-family:Tahoma'> $("#TB_overlay").click(TB_remove);<o:p></o:p></span></font>
</div>
<div>
<p class=MsoNormal><font size=2 face=Tahoma><span style='font-size:10.0pt;
font-family:Tahoma'> <o:p></o:p></span></font>
</div>
<div>
<p class=MsoNormal><font size=2 face=Tahoma><span style='font-size:10.0pt;
font-family:Tahoma'>remove the TB_closeWindow <div> from line 133:<o:p></o:p></span></font>
</div>
<div>
<p class=MsoNormal><font size=2 face=Tahoma><span style='font-size:10.0pt;
font-family:Tahoma'> $("#TB_window").append("<a
href='' id='TB_ImageOff' title='Close'><img id='TB_Image'
src='"+url+"' width='"+imageWidth+"'
height='"+imageHeight+"' alt='"+caption+"'/></a>"
+ "<div id='TB_caption'>"+caption+"<div
id='TB_secondLine'>" + imageCount + prev.html + next.html +
"</div></div>");<o:p></o:p></span></font>
</div>
<div>
<p class=MsoNormal><font size=2 face=Tahoma><span style='font-size:10.0pt;
font-family:Tahoma'> <o:p></o:p></span></font>
</div>
<div>
<p class=MsoNormal><font size=2 face=Tahoma><span style='font-size:10.0pt;
font-family:Tahoma'>remove line 135:<o:p></o:p></span></font>
</div>
<div>
<p class=MsoNormal><font size=2 face=Tahoma><span style='font-size:10.0pt;
font-family:Tahoma'>
$("#TB_closeWindowButton").click(TB_remove);<o:p></o:p></span></font>
</div>
<div>
<p class=MsoNormal><font size=2 face=Tahoma><span style='font-size:10.0pt;
font-family:Tahoma'> <o:p></o:p></span></font>
</div>
<div>
<p class=MsoNormal><font size=2 face=Tahoma><span style='font-size:10.0pt;
font-family:Tahoma'>remove the TB_closeAjaxWindow <div> from line 205:<o:p></o:p></span></font>
</div>
<div>
<p class=MsoNormal><font size=2 face=Tahoma><span style='font-size:10.0pt;
font-family:Tahoma'> $("#TB_window").append("<div
id='TB_title'><div
id='TB_ajaxWindowTitle'>"+caption+"</div></div><iframe
frameborder='0' hspace='0' src='"+urlNoQuery[0]+"'
id='TB_iframeContent' name='TB_iframeContent' style='width:"+(ajaxContentW
+ 29)+"px;height:"+(ajaxContentH + 17)+"px;'
onload='TB_showIframe()'> </iframe>");<o:p></o:p></span></font>
</div>
<div>
<p class=MsoNormal><font size=2 face=Tahoma><span style='font-size:10.0pt;
font-family:Tahoma'> <o:p></o:p></span></font>
</div>
<div>
<p class=MsoNormal><font size=2 face=Tahoma><span style='font-size:10.0pt;
font-family:Tahoma'>and 207:<o:p></o:p></span></font>
</div>
<div>
<p class=MsoNormal><font size=2 face=Tahoma><span style='font-size:10.0pt;
font-family:Tahoma'> $("#TB_window").append("<div
id='TB_title'><div
id='TB_ajaxWindowTitle'>"+caption+"</div></div><div
id='TB_ajaxContent'
style='width:"+ajaxContentW+"px;height:"+ajaxContentH+"px;'></div>");<o:p></o:p></span></font>
</div>
<div>
<p class=MsoNormal><font size=2 face=Tahoma><span style='font-size:10.0pt;
font-family:Tahoma'> <o:p></o:p></span></font>
</div>
<div>
<p class=MsoNormal><font size=2 face=Tahoma><span style='font-size:10.0pt;
font-family:Tahoma'>remove line 210:<o:p></o:p></span></font>
</div>
<div>
<p class=MsoNormal><font size=2 face=Tahoma><span style='font-size:10.0pt;
font-family:Tahoma'>
$("#TB_closeWindowButton").click(TB_remove);<o:p></o:p></span></font>
</div>
<div>
<p class=MsoNormal><font size=2 face=Tahoma><span style='font-size:10.0pt;
font-family:Tahoma'>and remove lines 258-259:<o:p></o:p></span></font>
</div>
<div>
<p class=MsoNormal><font size=2 face=Tahoma><span style='font-size:10.0pt;
font-family:Tahoma'>
$("#TB_overlay").unbind("click");<o:p></o:p></span></font>
</div>
<div>
<p class=MsoNormal><font size=2 face=Tahoma><span style='font-size:10.0pt;
font-family:Tahoma'>
$("#TB_closeWindowButton").unbind("click");<o:p></o:p></span></font>
</div>
<div>
<p class=MsoNormal><font size=2 face=Tahoma><span style='font-size:10.0pt;
font-family:Tahoma'> <o:p></o:p></span></font>
</div>
<div>
<p class=MsoNormal><font size=2 face=Tahoma><span style='font-size:10.0pt;
font-family:Tahoma'> <o:p></o:p></span></font>
</div>
<div>
<p class=MsoNormal><font size=2 face=Tahoma><span style='font-size:10.0pt;
font-family:Tahoma'>Thickbox also has a keydown handler so that if you push
'escape' it closes. Remove lines 236-245 to prevent this:<o:p></o:p></span></font>
</div>
<div>
<p class=MsoNormal><font size=2 face=Tahoma><span style='font-size:10.0pt;
font-family:Tahoma'> document.onkeyup = function(e){
if (e == null) { // ie
keycode = event.keyCode;
} else { // mozilla
keycode = e.which;
}
if(keycode == 27){ // close
TB_remove();
}
}<o:p></o:p></span></font>
</div>
<div>
<p class=MsoNormal><font size=2 face=Tahoma><span style='font-size:10.0pt;
font-family:Tahoma'> <o:p></o:p></span></font>
</div>
<div>
<p class=MsoNormal><font size=2 face=Tahoma><span style='font-size:10.0pt;
font-family:Tahoma'> <o:p></o:p></span></font>
</div>
<div>
<p class=MsoNormal><font size=2 face=Tahoma><span style='font-size:10.0pt;
font-family:Tahoma'>To add the 'close' functionality to something, do this:<o:p></o:p></span></font>
</div>
<div>
<p class=MsoNormal><font size=2 face=Tahoma><span style='font-size:10.0pt;
font-family:Tahoma'>
$("#myTbCloseButton").click(TB_remove);<o:p></o:p></span></font>
</div>
<div>
<p class=MsoNormal><font size=2 face=Tahoma><span style='font-size:10.0pt;
font-family:Tahoma'> <o:p></o:p></span></font>
</div>
<div>
<p class=MsoNormal><font size=2 face=Tahoma><span style='font-size:10.0pt;
font-family:Tahoma'> <o:p></o:p></span></font>
</div>
<div>
<p class=MsoNormal><font size=2 face=Tahoma><span style='font-size:10.0pt;
font-family:Tahoma'>I've heavily customised TB to my own purposes over the last
few days, hence a slight familiarity with the code :-D<o:p></o:p></span></font>
</div>
<div>
<p class=MsoNormal><font size=2 face=Tahoma><span style='font-size:10.0pt;
font-family:Tahoma'>Hope that helps,<o:p></o:p></span></font>
</div>
<div>
<p class=MsoNormal><font size=2 face=Tahoma><span style='font-size:10.0pt;
font-family:Tahoma'>rob<o:p></o:p></span></font>
</div>
<div>
<p class=MsoNormal><font size=2 face=Tahoma><span style='font-size:10.0pt;
font-family:Tahoma'> <o:p></o:p></span></font>
</div>
<div>
<p class=MsoNormal><font size=2 face=Tahoma><span style='font-size:10.0pt;
font-family:Tahoma'> <o:p></o:p></span></font>
</div>
<div>
<p class=MsoNormal><font size=2 color=blue face=Tahoma><span style='font-size:
10.0pt;font-family:Tahoma;color:blue'>>
Is there a way to modify the default Thickbox behavior? I don’t
want the user to be able to dismiss the TB window by clicking the overlay or a
close link—I want to programmatically close it based on user input within
the TB window.
Thanks,
Paul
______________________________________________________________________
This email has been scanned by the MessageLabs Email Security System.
For more information please visit <a href="http://www.messagelabs.com/email">http://www.messagelabs.com/email</a>
______________________________________________________________________
<</span></font><font size=2 face=Tahoma><span style='font-size:10.0pt;
font-family:Tahoma'><o:p></o:p></span></font>
</div>
<div>
<div>
<p class=MsoNormal><font size=2 face=Tahoma><span style='font-size:10.0pt;
font-family:Tahoma'>----------------------- <b><span style='font-weight:bold'>Original
Message</span></b> -----------------------<o:p></o:p></span></font>
</div>
<div>
<p class=MsoNormal><font size=2 face=Tahoma><span style='font-size:10.0pt;
font-family:Tahoma'> <o:p></o:p></span></font>
</div>
<div>
<p class=MsoNormal><b><font size=2 face=Tahoma><span style='font-size:10.0pt;
font-family:Tahoma;font-weight:bold'>From:</span></font></b><font size=2
face=Tahoma><span style='font-size:10.0pt;font-family:Tahoma'> "Paul"
<a href="mailto:montare@gmail.com"><montare@gmail.com></a><o:p></o:p></span></font>
</div>
<div>
<p class=MsoNormal><b><font size=2 face=Tahoma><span style='font-size:10.0pt;
font-family:Tahoma;font-weight:bold'>To:</span></font></b><font size=2
face=Tahoma><span style='font-size:10.0pt;font-family:Tahoma'> "'<st1:PersonName
w:st="on">jQuery Discussion.</st1:PersonName>'" <a
href="mailto:discuss@jquery.com"><discuss@jquery.com></a><o:p></o:p></span></font>
</div>
<div>
<p class=MsoNormal><b><font size=2 face=Tahoma><span style='font-size:10.0pt;
font-family:Tahoma;font-weight:bold'>Date:</span></font></b><font size=2
face=Tahoma><span style='font-size:10.0pt;font-family:Tahoma'> Thu, 15 Mar
2007 08:37:21 -0700<o:p></o:p></span></font>
</div>
<div>
<p class=MsoNormal><b><font size=2 face=Tahoma><span style='font-size:10.0pt;
font-family:Tahoma;font-weight:bold'>Subject: <u>[jQuery] changing default
thickbox behavior</u></span></font></b><font size=2 face=Tahoma><span
style='font-size:10.0pt;font-family:Tahoma'><o:p></o:p></span></font>
</div>
<div>
<p class=MsoNormal><font size=2 face=Tahoma><span style='font-size:10.0pt;
font-family:Tahoma'> <o:p></o:p></span></font>
</div>
</div>
<p class=MsoNormal><font size=2 face=Arial><span style='font-size:10.0pt;
font-family:Arial'>Is there a way to modify the default Thickbox behavior?
I don’t want the user to be able to dismiss the TB window by
clicking the overlay or a close link—I want to programmatically close it
based on user input within the TB window.<o:p></o:p></span></font>
<p class=MsoNormal><font size=2 face=Arial><span style='font-size:10.0pt;
font-family:Arial'><o:p> </o:p></span></font>
<p class=MsoNormal><font size=2 face=Arial><span style='font-size:10.0pt;
font-family:Arial'>Thanks,<o:p></o:p></span></font>
<p class=MsoNormal><font size=2 face=Arial><span style='font-size:10.0pt;
font-family:Arial'><o:p> </o:p></span></font>
<p class=MsoNormal><font size=2 face=Arial><span style='font-size:10.0pt;
font-family:Arial'>Paul<o:p></o:p></span></font>
<p class=MsoNormal><font size=3 face="Times New Roman"><span style='font-size:
12.0pt'>
______________________________________________________________________
This email has been scanned by the MessageLabs Email Security System.
For more information please visit http://www.messagelabs.com/email
______________________________________________________________________</span></font><font
size=2 face=Tahoma><span style='font-size:10.0pt;font-family:Tahoma'><o:p></o:p></span></font>
<div>
<p class=MsoNormal style='margin-bottom:12.0pt'><font size=2 face=Tahoma><span
style='font-size:10.0pt;font-family:Tahoma'>_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
<o:p></o:p></span></font>
</div>
<p class=MsoNormal><font size=3 face="Times New Roman"><span style='font-size:
12.0pt'>
______________________________________________________________________
This email has been scanned by the MessageLabs Email Security System.
For more information please visit http://www.messagelabs.com/email
______________________________________________________________________<o:p></o:p></span></font>
</div>
</body>
</html>
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/