Live Chat & Podcast at 1:00PM Eastern on Sunday!
There's no such thing as a stupid question, but they're the easiest to answer.
JoinTour
Login
Search
Web Design & Development
Tag Cloud
access acer asus bios bsod computer crash drive driver drivers error ethernet excel freeze games gaming graphics hard drive hardware hdmi internet laptop malware memory monitor motherboard netgear network printer problem ram random registry router slow software sound trojan usb video virus vista wifi windows windows 7 windows 7 32 bit windows 7 64 bit windows xp wireless xbox
Search
Search for:
Tech Support Guy Forums > Internet & Networking > Web Design & Development >
ThickBox Effect Before Offsite Navigation - Site Disclaimer

Reply  
Thread Tools
Shekibobo's Avatar
Junior Member with 13 posts.
 
Join Date: Dec 2008
19-Aug-2009, 02:23 PM #1
ThickBox Effect Before Offsite Navigation - Site Disclaimer
I am trying to achieve a ThickBox effect using inline elements to display a disclaimer about certain links after a user clicks on them.

Effectively, the process is as follows:
User clicks a specified link.
ThickBox widget appears, informing user about the site being accessed
user clicks 'OK'
Thickbox Disappears
Linked page loads.
The attached image shows the effect I am trying to achieve. Basically, it will tell them about the site being linked to, then sends them to the new page after clicking okay.

Ideally, the new page would be loading while the ThickBox widget is being displayed, but this is not a necessity.

I've been searching for methods to achieve this effect to no avail. I am an extreme novice when it comes to javascript, but not with general programming. Details would be extremely helpful. If there are alternative solutions to this problem, I am more than willing to read about them as well, but I have found very little to this effect.

Thanks.
Attached Thumbnails
ThickBox Effect Before Offsite Navigation - Site Disclaimer-screenshot.png  
Mawer IV's Avatar
Computer Specs
Member with 82 posts.
 
Join Date: Jun 2007
Location: Wales, UK
Experience: Intermediate
19-Aug-2009, 02:44 PM #2
I'm not entirely familiar with how Thickbox works but to achieve the same effect more simply all you have to do is this:

Code:
<a href="http://google.com" onclick="disclamer()">Google</a>
				
<script type="text/javascript">
	function disclamer() {
		alert('We are not resposible for any of the content on the website you are going to.');
		//You could potentially put the thickbox stuff in here
	}
</script>
The function is actually overkill because you could put the alert() in the onclick attr.

I know this doesn't exactly awnser your question but I hope it helps.
Shekibobo's Avatar
Junior Member with 13 posts.
 
Join Date: Dec 2008
19-Aug-2009, 03:07 PM #3
This is definitely helpful and definitely achieves, in part, what I am trying to accomplish. However, I'm not exactly sure it will work this way with ThickBox. In order to get the effect I want in Thickbox, it requires a tag like this:

Code:
<a href="#TB_inline?height=155&width=300&inlineId=hiddenModalContent&modal=true" class="thickbox">External Blog Link</a>


Therefore, I'm not sure it's possible for me to use it to link to a new page, unless you can link to more than one link in a single href.

Mawer IV's Avatar
Computer Specs
Member with 82 posts.
 
Join Date: Jun 2007
Location: Wales, UK
Experience: Intermediate
19-Aug-2009, 03:23 PM #4
I understand now;
I presume that that link then opens up the thickbox whose html content you have previously defined earlier in the document or whatever.

So what you can do is put this or similar in the thickbox content:
Code:
<!--Asuming that you define a thickbox through a div with class "thickbox"-->
<div class="thickbox">
	<p>We are not resposible for any of the content on the website you are going to.</p>
					
	<button onclick="window.location = 'http://google.com'">Ok</button>
</div>
Shekibobo's Avatar
Junior Member with 13 posts.
 
Join Date: Dec 2008
19-Aug-2009, 04:39 PM #5
Okay, I see where you're coming from. Here is the content of the hidden div:

Code:
<div id="hiddenModalContent" style="display:none">
<p>We are not responsible for the things you see on this page.</p>
<p style="text-align:center"><input type="submit" id="Login" value="&nbsp;&nbsp;Ok&nbsp;&nbsp;" onclick="tb_remove()" /></p>
</div>
Here is the content from the thickbox.js file regarding tb_remove():
Code:
function tb_remove() {
     $("#TB_imageOff").unbind("click");
    $("#TB_closeWindowButton").unbind("click");
    $("#TB_window").fadeOut("fast",function(){$('#TB_window,#TB_overlay,#TB_HideSelect').trigger("unload").unbind().remove();});
    $("#TB_load").remove();
    if (typeof document.body.style.maxHeight == "undefined") {//if IE 6
        $("body","html").css({height: "auto", width: "auto"});
        $("html").css("overflow","");
    }
f

If I replace onclick="tb_remove" with a uri, the program simply won't work.

Would it be possible to pass a web address into the tb_remove() function so that it will then move on to that page after finishing all of it's functions? For instance:
Code:
<div id="hiddenModalContent" style="display:none">
<p>We are not responsible for the things you see on this page.</p>
<p style="text-align:center"><input type="submit" id="Login" value="&nbsp;&nbsp;Ok&nbsp;&nbsp;" onclick="tb_remove('http://www.google.com')" /></p>
</div>
Mawer IV's Avatar
Computer Specs
Member with 82 posts.
 
Join Date: Jun 2007
Location: Wales, UK
Experience: Intermediate
19-Aug-2009, 07:02 PM #6
Quote:
Originally Posted by Shekibobo View Post
Okay, I see where you're coming from. Here is the content of the hidden div:

Code:
<div id="hiddenModalContent" style="display:none">
<p>We are not responsible for the things you see on this page.</p>
<p style="text-align:center"><input type="submit" id="Login" value="&nbsp;&nbsp;Ok&nbsp;&nbsp;" onclick="tb_remove()" /></p>
</div>
Here is the content from the thickbox.js file regarding tb_remove():
Code:
function tb_remove() {
     $("#TB_imageOff").unbind("click");
    $("#TB_closeWindowButton").unbind("click");
    $("#TB_window").fadeOut("fast",function(){$('#TB_window,#TB_overlay,#TB_HideSelect').trigger("unload").unbind().remove();});
    $("#TB_load").remove();
    if (typeof document.body.style.maxHeight == "undefined") {//if IE 6
        $("body","html").css({height: "auto", width: "auto"});
        $("html").css("overflow","");
    }
f

If I replace onclick="tb_remove" with a uri, the program simply won't work.

Would it be possible to pass a web address into the tb_remove() function so that it will then move on to that page after finishing all of it's functions? For instance:
Code:
<div id="hiddenModalContent" style="display:none">
<p>We are not responsible for the things you see on this page.</p>
<p style="text-align:center"><input type="submit" id="Login" value="&nbsp;&nbsp;Ok&nbsp;&nbsp;" onclick="tb_remove('http://www.google.com')" /></p>
</div>

Totally,

Asuming that you pass the URI like you suggested:
Code:
function tb_remove(uri) {
     $("#TB_imageOff").unbind("click");
     $("#TB_closeWindowButton").unbind("click");
     $("#TB_window").fadeOut("fast",function(
     {$('#TB_window,#TB_overlay,#TB_HideSelect').trigger("unload").unbind().remove();});
     $("#TB_load").remove();
     if (typeof document.body.style.maxHeight == "undefined") {//if IE 6
          $("body","html").css({height: "auto", width: "auto"});
     $("html").css("overflow","");

     //Once thickbox has been removed send user to provided URI
     window.location = uri;
}
This should work however I can't fully test it so....


P.S. Considering you're sending the user away from your site does it really matter if the thickbox is actually closed?
Shekibobo's Avatar
Junior Member with 13 posts.
 
Join Date: Dec 2008
19-Aug-2009, 07:15 PM #7
That did it. Awesome, and thanks. ThickBox now works as an external page warning, or pseudo-redirect page.

Regarding PS, I tried replacing tb_remove() with the website, and it just didn't work.

However, the new code for tb_replace() is:

Code:
function tb_remove(uri) {
     $("#TB_imageOff").unbind("click");
    $("#TB_closeWindowButton").unbind("click");
    $("#TB_window").fadeOut("fast",function(){$('#TB_window,#TB_overlay,#TB_HideSelect').trigger("unload").unbind().remove();});
    $("#TB_load").remove();
    if (typeof document.body.style.maxHeight == "undefined") {//if IE 6
        $("body","html").css({height: "auto", width: "auto"});
        $("html").css("overflow","");
    }
    document.onkeydown = "";
    document.onkeyup = "";
    
     //Once thickbox has been removed send user to provided URI
     window.location = uri;

    return false;
}
Mawer IV's Avatar
Computer Specs
Member with 82 posts.
 
Join Date: Jun 2007
Location: Wales, UK
Experience: Intermediate
20-Aug-2009, 04:20 AM #8
I'm glad I could help
Reply

Tags
javascript, lightbox, links, redirect, thickbox

THIS THREAD HAS EXPIRED.
Are you having the same problem? We have volunteers ready to answer your question, but first you'll have to join for free. Need help getting started? Check out our Welcome Guide.

Search Tech Support Guy

Find the solution to your
computer problem!




Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
WELCOME TO TECH SUPPORT GUY! Are you looking for the solution to your computer problem? Join our site today to ask your question -- for free! Our site is run completely by volunteers who want to help you solve your computer problems. See our Welcome Guide to get started.
Thread Tools



Facebook Facebook Twitter Twitter TechGuy.tv TechGuy.tv Mobile TSG Mobile
You Are Using:
Server ID
Advertisements do not imply our endorsement of that product or service.
All times are GMT -4. The time now is 04:03 PM.
Copyright © 1996 - 2011 TechGuy, Inc. All rights reserved.

Powered by Cermak Technologies, Inc.