Friday, August 28, 2009

ThickBox Cookie Control How To Make it only Show up once

How to make ThickBox only show up the first time on your web site with cookie control.

As stated in my previous post I have been diligently working on this LightBox / ThickBox implementation for a client. Banging my head against the keyboard for several days. But its working now.

Here is what you need if you want your Box (LightBox / ThickBox / what ever implementation..)to only show up the first time someone hits your site.


First you will need a file off of plugins.jquery.com just right click the link and save as:

jquery.cookie.js

http://plugins.jquery.com/files/jquery.cookie.js.txt

Place this file in you public directory my folder name is /js

Just make sure you remember where it is at. because you will need to referance that later in your site code.

then here is my example

Place this line of code in the <head> of you site

<script type="text/javascript" src="js/jquery.cookie.js"></script>

After <body> somewhere here is the implementation for the pop-up with cookie control

<script type="text/javascript">
$(document).ready(function(){
if ($.cookie('guest') != '1') {
tb_show("Coupon","***WHATEVERYOUR PAGE***.html?height=490&width=380");
$.cookie('guest', '1', { expires: 2 });
}
});
</script>

Where as the 'guest' is just the name of the cookie (I guess.. lol)

!='1' is the limitation on how many times it will show up.

{ expires: 2 } is the days it will take before it shows up again on that persons computer.

Hope this helps someone out there ...


Overlapping Thickbox with Embeded Videos underneath

Web site design with ThickBox, Ajax, Java, Videos, and/or .swf (ShockWave)

Issue: Thickbox pop-up with underlying videos or .sfw buttons (ie. ShockWave) files. Will overlap on top of your ThickBox. When opening on top of an embedded swf the background of the TB window gets pushed down.

I am by no means a web coding guru or Internet specialist in fact it took me three full days of google searching, reading, and testing to even get something close to functional.

Well with all of that I did get it working but on the site there are .swf buttons basically movies. When the Thickbox would pop up the .swf buttons were on top of the pop-up and you could not read it. So after another two hours of searching I finally found a solution. Thank you to a post on http://vidlivery.com/2008/nov/06/tutorials/quick-tip-create-video-gallery-thickbox (after checking Feb 2010 this site is now gone so I guess you will have to take my word for it)from MaryJ. The person who posted it could not show the code they used so I went to their web site and looked at the source code.

and here is the solution



The buttons name is aboutus.swf

The line of code that was never implemented is <param name="wmode' the value must be set to "transparent" other wise the object will supercede the ThickBox object.

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="147" height="34">
<param name="BGCOLOR" value="#3399CC">
<param name="movie" value="aboutus.swf">
<param name="quality" value="high">
<param name="wmode" value="transparent" />
<embed src="aboutus.swf" width="147" height="34" quality="high" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" bgcolor="#3399CC" ></embed>
</object>

If the line is not there just copy and paste in to you site and you should be set to go.. This should work with most multimedia files.

Lone Star Custom Lapel Pins

Lone Star Custom Lapel Pins
Veteran Managed Lone Star Pins are creators of custom lapel pins. We offer a free digital how to PDF on our site, Free Artwork, and quote. Contact us today for your proof and quote.

Share

Twitter Delicious Facebook Digg Stumbleupon Favorites More