Thickbox 3.1 and <a id="dd1">

[Niko]

Is there a way to confirgure Thickbox 3.1 to display the following:

<a href="index2.htm#dd1?ajaxOverFlow.htm?keepThis=true&TB_iframe=true&height=340&width=680&scrolling=no" title="">link 3</a>

or

<a href="index2.htm#dd1?iframeModal.html?placeValuesBeforeTB_=savedValues&TB_iframe=true&height=340&width=680&modal=true&scrolling=no" title="" class="thickbox">link 3</a>

In both examples "index2.htm" is displayed and not "index2.htm#ddd" which refers to <a id="dd1">Some Story</a> found on index2.htm.

Idea behind using Thickbox was to have index2 have 50 stories (<a id="dd1">, <a id="dd2"> so on) with a Thickbox link displayed on index1. Perhaps there is a better way of accomplishing this.

TIA

[jscheuer1]

According to my reading of the documentation on:

http://jquery.com/demo/thickbox/

Add all other query parameters before the TB_iframe parameters. Everything after the "TB" is removed from the URL.

And in normal HTML any hash (#) has to come after the query string, there might not be any technically correct URL that would take into account the above proviso and include a hash. And it's vague. Everything and including the TB? Only query components after that? What about the &TB part itself?

And I wonder what the:

?ajaxOverFlow.htm

is in your first link in your post. It's not a valid query. And you are only allowed one ? in a URL. Does ?ajaxOverFlow.htm need to be in there for some reason? Looking at the example code I think you just copied too much, that was one of the example pages. Let's just get rid of it, your page is index2.htm.

So let's say this 'worked' but didn't get you a hash because none is used in the URL:

<a href="index2.htm?keepThis=true&TB_iframe=true&height=340&width=680&scrolling=no" title="">link 3</a>

You could try the technically incorrect but sort of follows the documentation:

<a href="index2.htm?keepThis=true#dd1&TB_iframe=true&height=340&width=680&scrolling=no" title="">link 3</a>

Or the technically correct, and also sort of follows the documentation (a hash is not a part of the query string):

<a href="index2.htm?keepThis=true&TB_iframe=true&height=340&width=680&scrolling=no#dd1" title="">link 3</a>

Try those two and see if either works. If not I'm pretty sure of a way, but it would be a little more complicated than either of those.

[Niko]

Thank You for your post. As for "?ajaxOverFlow.htm" & "iframeModal.html?" bad cut&paste.

Let's review the scenario:

Goal:
-index2.htm with 50 stories (one right after another) Each story has a unique <a id=dd1>, <a id=dd2> so on.
-index.htm will display (one after another) the unique link(s) to the 50 stories.
-When clicked the individual story (from index2.htm) and nothing else (no scroll bar, back button so on) is displayed as a popup on index1.htm.



Using Thickbox 3.1 have tried the following four examples but all to no avail:

(1)

<a href="index2.htm#dd1?keepThis=true&TB_iframe=true&height=340&width=680&scrolling=no" title="">link 3</a>

(2)

<a href="index2.htm#dd1?placeValuesBeforeTB_=savedValues&TB_iframe=true&height=340&width=680&modal=true&scrolling=no" title="" class="thickbox">link 3</a>

(3)

<a href="index2.htm?keepThis=true#dd1&TB_iframe=true&height=340&width=680&scrolling=no" title="">link 3</a>

(4)

<a href="index2.htm?keepThis=true&TB_iframe=true&height=340&width=680&scrolling=no#dd1" title="">link 3</a>

Have search for several hours on how to resolve this but really haven't come up with anything solid or anything that closely matches the overall goal.

TIA

[jscheuer1]

<a href="index2.htm?#dd1TB_iframe=true&height=340&width=680&scrolling=no" title="">link 3</a>

[Niko]

No go...Things that make you go hmmmmm

[jscheuer1]

It worked here. You wouldn't happen to be using a page scrolling script on index2.htm - that could be a problem.

If you want more help:

Please post a link to a page on your site that contains the problematic code so we can check it out.

[Niko]

Attached is a simple example of index1 and index2. I'm using thickbox.js & jquery-latest.js found on http://jquery.com/demo/thickbox/.

TIA

[jscheuer1]

Ooops. We both messed up. For your part there's no link on your index page which resembles the one in my previous post. For my part I left out the class="thickbox".

Further, using dd1 is no real test because it's the first thing on the page anyway. And there's no reason to have jQuery, thickbox.js and thickbox.css on index2.htm, but they don't appear to be hurting anything. And a 50 X 50 iframe is ridiculously small. And scrolling=no apparently doesn't get translated to the iframe. But you can make the style on index2.htm:

html, body {overflow: hidden;}

That will produce an iframe with no scrollbars. Using scrolling=no doesn't hurt anything though.

Taking all of that into consideration, here's a link that works:

<a href="index2.htm?#dd2TB_iframe=true&height=340&width=680" title="" class="thickbox">dd2</a>

[Niko]

LOL...two issues for me:
1) two good eyes and I still don't see...
2) WAS using Firefox to confirm and for whatever reason it doen't work. It will work in IE8, Opera 11.10 & Chrome 10 but not Firefox 3.6

Probably a config within Firefox that needs to be toggled on. Will check it out later tonight...

[jscheuer1]

I tested in Firefox 4, which was fine. If you add this script to the head of index2.htm:

<script type="text/javascript">
if (location.hash && location.hash !== '#dd1' && window.addEventListener && typeof attachEvent === 'undefined'){
	window.addEventListener('load', function(){
		setTimeout(function(){
			if(!document.documentElement.scrollTop){
				location.hash = location.hash;
			}
		}, 0);
	}, false);
}
</script>

That fixed it for me in Firefox less than 4 (I tested this time on version 3.5.16).

A little bit about how it works. If the hash is anything but dd1, and the page is still at the top after loading and a brief pause, it goes to the anchor.

I figured that dd1 was at the top anyway. If this is different in your actual setup, let me know.

It skips IE which responds OK anyway. Others, including Firefox 4 skip it if they handle it right on their own.

This will also pick up other browsers if they fall down in this area. And, if a browser executes it without needing to, it won't hurt anything, just waste a little time.