Tabbed Document Viewer - tabs open in new window

**keveen** · 04-28-2007, 10:05 PM

1) Script Title: Tabbed Document Viewer

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...bdocviewer.htm

3) Describe problem:
I'm using TiddlyWiki which allows me to paste html code into a Note (Tiddly) and usually it works.

The script works - I get the tabbed page an it opens automatically with Google. However, if I click on a tab, it opens a new browser page NOT the inline page that I want. The checkbox for opening in a new windows is NOT checked. It is a very useful script, can anyone suggest a solution to make the clicked tab open in its Iframe, as it first does?

The script does behave properly in a normal blank html page (not TiddlyWiki) so maybe TiddlyWiki does not like something?

**ddadmin** · 04-29-2007, 08:56 AM

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

**jscheuer1** · 04-29-2007, 09:01 AM

If the page you are loading has code to break out of frames, unless you can remove that code, it will break out of the iframe, period.

**keveen** · 04-29-2007, 12:22 PM

I uploaded the test to http://www.the-bizness.co.uk/wikis/t...mptwtheme.html

Hit the search engines link on the right and you get the very nice google iframe. The great thing about tiddlywiki is you can look at all the code - it's all packed into the one html file.

**jscheuer1** · 04-29-2007, 02:03 PM

This is how the style, script, and its markup appears in your generated source:

Code:

&lt;html&gt;\n&lt;head&gt;\n&lt;title&gt;Tabbed Doc Memory - Demo&lt;/title&gt;\n&lt;style type=&quot;text/css&quot;&gt;\n\n/*Eric Meyer's based CSS tab*/\n\n#tablist{\npadding: 3px 0;\nmargin-left: 0;\nmargin-bottom: 0;\nmargin-top: 0.1em;\nfont: bold 12px Verdana;\n}\n\n#tablist li{\nlist-style: none;\ndisplay: inline;\nmargin: 0;\n}\n\n#tablist li a{\ntext-decoration: none;\npadding: 3px 0.5em;\nmargin-left: 3px;\nborder: 1px solid #778;\nborder-bottom: none;\nbackground: white;\n}\n\n#tablist li a:link, #tablist li a:visited{\ncolor: navy;\n}\n\n#tablist li a:hover{\ncolor: #000000;\nbackground: #C1C1FF;\nborder-color: #227;\n}\n\n#tablist li a.current{\nbackground: lightyellow;\n}\n\n.tabcurrent{\ndisplay:block;\n}\n\n.tabbkgrnd{\ndisplay:none;\n}\n\n&lt;/style&gt;\n\n&lt;script type=&quot;text/javascript&quot;&gt;\n\n/***********************************************\n* Tabbed Document Viewer script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)\n* This notice MUST stay intact for legal use\n* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code\n***********************************************/\n\nvar selectedtablink=&quot;&quot;\nvar tcischecked=false\n\nfunction handlelink(aobject, frameNum){\nselectedtablink=aobject.href\ntcischecked=(document.tabcontrol &amp;&amp; document.tabcontrol.tabcheck.checked)? true : false\nif (document.getElementById &amp;&amp; !tcischecked){\nvar tabobj=document.getElementById(&quot;tablist&quot;)\nvar tabobjlinks=tabobj.getElementsByTagName(&quot;A&quot;)\nfor (i=0; i&lt;tabobjlinks.length; i++)\ntabobjlinks[i].className=&quot;&quot;\naobject.className=&quot;current&quot;\ndispFrames=document.getElementsByTagName('iframe');\nfor (i = 0; i &lt; dispFrames.length; i++)\nif(dispFrames[i].className=='tabcurrent')\ndispFrames[i].className='tabbkgrnd'\ndocument.getElementById(&quot;tabiframe&quot;+frameNum).className='tabcurrent'\nif (document.getElementById(&quot;tabiframe&quot;+frameNum).src==''||document.getElementById(&quot;tabiframe&quot;+frameNum).src==location.href)\ndocument.getElementById(&quot;tabiframe&quot;+frameNum).src=selectedtablink\nreturn false\n}\nelse\nreturn true\n}\n\nfunction handleview(){\ntcischecked=document.tabcontrol.tabcheck.checked\nif (document.getElementById &amp;&amp; tcischecked){\nif (selectedtablink!=&quot;&quot;)\nwindow.location=selectedtablink\n}\n}\n\n\n&lt;/script&gt;\n&lt;/head&gt;\n&lt;body&gt;\n&lt;ul id=&quot;tablist&quot;&gt;\n&lt;li&gt;&lt;a class=&quot;current&quot; href=&quot;http://www.google.com&quot; onClick=&quot;return handlelink(this, 0)&quot;&gt;Google&lt;/a&gt;&lt;/li&gt;\n&lt;li&gt;&lt;a href=&quot;http://www.yahoo.com&quot; onClick=&quot;return handlelink(this, 1)&quot;&gt;Yahoo&lt;/a&gt;&lt;/li&gt;\n&lt;li&gt;&lt;a href=&quot;http://www.msn.com&quot; onClick=&quot;return handlelink(this, 2)&quot;&gt;MSN&lt;/a&gt;&lt;/li&gt;\n&lt;li&gt;&lt;a href=&quot;http://www.news.com&quot; onClick=&quot;return handlelink(this, 3)&quot;&gt;News.com&lt;/a&gt;&lt;/li&gt;\n&lt;li&gt;&lt;a href=&quot;http://www.dynamicdrive.com&quot; onClick=&quot;return handlelink(this, 4)&quot;&gt;Dynamic Drive&lt;/a&gt;&lt;/li&gt;\n&lt;/ul&gt;\n&lt;iframe class=&quot;tabcurrent&quot; id=&quot;tabiframe0&quot; src=&quot;http://www.google.com&quot; width=&quot;98%&quot; height=&quot;350px&quot;&gt;&lt;/iframe&gt;\n&lt;iframe class=&quot;tabbkgrnd&quot; id=&quot;tabiframe1&quot; src=&quot;&quot; width=&quot;98%&quot; height=&quot;350px&quot;&gt;&lt;/iframe&gt;\n&lt;iframe class=&quot;tabbkgrnd&quot; id=&quot;tabiframe2&quot; src=&quot;&quot; width=&quot;98%&quot; height=&quot;350px&quot;&gt;&lt;/iframe&gt;\n&lt;iframe class=&quot;tabbkgrnd&quot; id=&quot;tabiframe3&quot; src=&quot;&quot; width=&quot;98%&quot; height=&quot;350px&quot;&gt;&lt;/iframe&gt;\n&lt;iframe class=&quot;tabbkgrnd&quot; id=&quot;tabiframe4&quot; src=&quot;&quot; width=&quot;98%&quot; height=&quot;350px&quot;&gt;&lt;/iframe&gt;\n\n&lt;form name=&quot;tabcontrol&quot; style=&quot;margin-top:0&quot;&gt;\n&lt;input name=&quot;tabcheck&quot; type=&quot;checkbox&quot; onClick=&quot;handleview()&quot;&gt; Open tab links in browser window instead.\n&lt;/form&gt;\n&lt;/body&gt;\n&lt;/html&gt;

It has to look like it does on the demo page, not like the above. I have no idea how to get the TiddlyWiki package to do that, refer to its documentation or post in a TiddlyWiki help forum.

**Rob (SA)** · 07-27-2007, 08:21 PM

Hi Folks,

I have downloaded your tabbed document veiwer.

I have got it to position correctly however the tabs do not appear as the demo does.

A link to this site is http://www.gnjgf.co.za/constitution.php

PLease could someone advise me as to what I should do to correct this problem.

Regards

rob

**jscheuer1** · 07-28-2007, 10:11 AM

Originally Posted by Rob (SA)

Hi Folks,

I have downloaded your tabbed document veiwer.

I have got it to position correctly however the tabs do not appear as the demo does.

A link to this site is http://www.gnjgf.co.za/constitution.php

PLease could someone advise me as to what I should do to correct this problem.

Regards

rob

As far as the tabs not looking as expected, style belongs in the head of a document (they actually look OK in FF, FF is being lenient). I believe that you also have an onload or other script conflict, at least in some browsers (Opera, IE). This would affect the functionality of the script in those browsers, and may be the main problem.

**Rob (SA)** · 07-28-2007, 10:28 AM

Hi John,

As usual you are prompt to reply.

You make reference to an onload or other script conflict.

How do I fix this problem if it is an onload conflict - What is an onload conflict. I am not a website designer and thus terminology needs to be learnt.

Script conflict I accept is as it is in plain english. The problem is identifying which is in conflict. Any suggestions?

Regards
Rob

**jscheuer1** · 07-28-2007, 11:12 AM

Upon closer examination of your page, although it is very messy, invalid and exhibits signs of failure in following the script installation instructions, the only real problem with this script and its style appears to be that you have left in the beginning of a form tag for a form that looks like it's no longer used (from your source code):

Code:

 . . . ment.getElementById && tcischecked){
if (selectedtablink!="")
window.location=selectedtablink
}
}

</script><form name="Form1" method="POST" action="" enctype="application/x-www-form-urlencoded" id="Form1" <ul id="tablist">
<li><a class="current" href="http://www.google.com" onClick="return handlelink(this)">CONSTITUTION</a></li>
<li><a href="http://www.yahoo.com" onClick="return handlelink(this)">HOUSE HOLD RULES</a></li>
<li><a href="http://www.msn.com" onClick="return handlelink(this)">MSN</a></li>
<li><a href="http://www.news.com" onClick="return handleli . . .

Get rid of the red part:

Code:

<form name="Form1" method="POST" action="" enctype="application/x-www-form-urlencoded" id="Form1"

Doing just that much will get the tabbed viewer looking OK and working.

**Rob (SA)** · 07-28-2007, 06:53 PM

HI John,

As usual - perfect fix

Thanks so much

Regards
Rob

Thread: Tabbed Document Viewer - tabs open in new window

Thread Tools

Search Thread

Tabbed Document Viewer - tabs open in new window

Tabs not showing

Bookmarks

Bookmarks

Posting Permissions