Log in

View Full Version : Help needed in document viewer


shachi
08-02-2005, 05:00 AM
:confused: Can anyone help me with the tabbed document viewer I found
Here (http://www.dynamicdrive.com/dynamicindex3/tabdocviewer.htm)
I want an input box out side the iframe so that users can type the url and the page they are looking for loads in the inside the frame. I tried but could not make it.

I have the following code:
------------------------------------------------------------------------------------------------------------
<html>
<style type="text/css">
#URL{
width: 70%;
font-family: sans;
}
</style>
<body>
</form></td><td><script language="JavaScript">

<!-- Hide the script from old browsers --
// Created by Andrew Cantino (xx053@seorf.ohiou.edu)
function confirmBox()
{
if (confirm("Go to the HTTP address you entered? You will be leaving Kidzone!"))
{
alert ("Just hit back to get back to this page! Have fun!");
location.href = document.PlaceToGo.PlaceInput.value;
}
}
function quickJump()
{
if (confirm("Go to selected HTTP address?"))
{
location.href = document.PlaceToGo.PlaceInput.value;
}
}

// --End Hiding Here -->

</script>
<!--URL BOX STARTS --><form name="PlaceToGo">
<div id="URL">
URL: <input type=text name="PlaceInput" value="http://">
</div>
<INPUT TYPE="button" VALUE="Go" onClick="confirmBox()"><!--URL BOX ENDS -->
<hr>
</body>
</html>
---------------------------------------------------------------------------------------------------------
And :
---------------------------------------------------------------------------------------------------------
<html>
<style type="text/css">

/*Eric Meyer's based CSS tab*/

#tablist{
padding: 3px 0;
margin-left: 0;
margin-bottom: 0;
margin-top: 0.1em;
font: bold 12px Verdana;
}

#tablist li{
list-style: none;
display: inline;
margin: 0;
}

#tablist li a{
text-decoration: none;
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #778;
border-bottom: none;
background: white;
}

#tablist li a:link, #tablist li a:visited{
color: navy;
}

#tablist li a:hover{
color: #000000;
background: #C1C1FF;
border-color: #227;
}

#tablist li a.current{
background: lightyellow;
}
</style>

<script type="text/javascript">

/***********************************************
* Tabbed Document Viewer script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

var selectedtablink=""
var tcischecked=false

function handlelink(aobject){
selectedtablink=aobject.href
tcischecked=(document.tabcontrol && document.tabcontrol.tabcheck.checked)? true : false
if (document.getElementById && !tcischecked){
var tabobj=document.getElementById("tablist")
var tabobjlinks=tabobj.getElementsByTagName("A")
for (i=0; i<tabobjlinks.length; i++)
tabobjlinks[i].className=""
aobject.className="current"
document.getElementById("tabiframe").src=selectedtablink
return false
}
else
return true
}

function handleview(){
tcischecked=document.tabcontrol.tabcheck.checked
if (document.getElementById && tcischecked){
if (selectedtablink!="")
window.location=selectedtablink
}
}

</script>
<script language="javascript">
function back(){
history.go(-1)
}
</script>
</head>
<body>
<ul id="tablist">
<li><a class="current" href="#" onClick="back()">Back</a></li>
<li><a href="http://www.quirksmode.org" onClick="return handlelink(this)">Quirksmode</a></li>
<li><a href="http://www.google.com" onClick="return handlelink(this)">Google</a></li>
<li><a href="http://www.yahoo.com" onClick="return handlelink(this)">Yahoo</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 handlelink(this)">News.com</a></li>
<li><a href="http://www.dynamicdrive.com" onClick="return handlelink(this)">Dynamic Drive</a></li>
</ul>
<iframe id="tabiframe" src="browser.htm" width="100%" height="100%">
</iframe>

<form name="tabcontrol" style="margin-top:0">
<input name="tabcheck" type="checkbox" onClick="handleview()"> Open tab links in browser window instead.
</form>
</body>
</html>
---------------------------------------------------------------------------------------------------------

I want the viewer to look somewhat like a browser.
If anyone can help me then it would be great help.
Thanks.
jscheuer1
08-02-2005, 06:36 AM
Well, we are getting there:

<html>
<head>
<title>Tabbed Browser w/input URL - Demo</title>
<style type="text/css">

#URL{
width: 70%;
font-family: sans;
}

/*Eric Meyer's based CSS tab*/

#tablist{
padding: 3px 0;
margin-left: 0;
margin-bottom: 0;
margin-top: 0.1em;
font: bold 12px Verdana;
}

#tablist li{
list-style: none;
display: inline;
margin: 0;
}

#tablist li a{
text-decoration: none;
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #778;
border-bottom: none;
background: white;
}

#tablist li a:link, #tablist li a:visited{
color: navy;
}

#tablist li a:hover{
color: #000000;
background: #C1C1FF;
border-color: #227;
}

#tablist li a.current{
background: lightyellow;
}
</style>

<style type="text/css">

/*Eric Meyer's based CSS tab*/

#tablist{
padding: 3px 0;
margin-left: 0;
margin-bottom: 0;
margin-top: 0.1em;
font: bold 12px Verdana;
}

#tablist li{
list-style: none;
display: inline;
margin: 0;
}

#tablist li a{
text-decoration: none;
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #778;
border-bottom: none;
background: white;
}

#tablist li a:link, #tablist li a:visited{
color: navy;
}

#tablist li a:hover{
color: #000000;
background: #C1C1FF;
border-color: #227;
}

#tablist li a.current{
background: lightyellow;
}

</style>

<script type="text/javascript">

/***********************************************
* Tabbed Document Viewer script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

var selectedtablink=""
var tcischecked=false

function handlelink(aobject){
selectedtablink=aobject.href
tcischecked=(document.tabcontrol && document.tabcontrol.tabcheck.checked)? true : false
if (document.getElementById && !tcischecked){
var tabobj=document.getElementById("tablist")
var tabobjlinks=tabobj.getElementsByTagName("A")
for (i=0; i<tabobjlinks.length; i++)
tabobjlinks[i].className=""
aobject.className="current"
document.getElementById("tabiframe").src=selectedtablink
return false
}
else
return true
}

function handleview(){
tcischecked=document.tabcontrol.tabcheck.checked
if (document.getElementById && tcischecked){
if (selectedtablink!="")
window.location=selectedtablink
else
window.location = document.PlaceToGo.PlaceInput.value;
}
}

function quickJump(){
tabiframe.location.href = document.PlaceToGo.PlaceInput.value;
}
</script>
</head>
<body>
<form name="PlaceToGo">
URL: <input id="URL" type=text name="PlaceInput" value="http://home.comcast.net/~ansiguy/">
<INPUT TYPE="button" VALUE="Go" onClick="quickJump()">
</form>
<hr>

<ul id="tablist">
<li><a class="current" href="blank.htm" onClick="history.go(-1);return false">Back</a></li>
<li><a href="http://www.quirksmode.org/home.shtml" onClick="return handlelink(this)">Quirksmode</a></li>
<li><a href="http://www.google.com" onClick="return handlelink(this)">Google</a></li>
<li><a href="http://www.yahoo.com" onClick="return handlelink(this)">Yahoo</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 handlelink(this)">News.com</a></li>
<li><a href="http://www.dynamicdrive.com" onClick="return handlelink(this)">Dynamic Drive</a></li>
</ul>
<iframe name="tabiframe" id="tabiframe" src="blank.htm" width="100%" height="100%">
</iframe>

<form name="tabcontrol" style="margin-top:0">
<input name="tabcheck" type="checkbox" onClick="handleview()"> Open tab links in browser window instead.
</form>
</body>
</html>Requires blank.htm in the same directory:

<html>
<head>
</head>
<body>
</body>
</html>
shachi
08-03-2005, 01:58 AM
Can you tell me what the blank.html do?
jscheuer1
08-03-2005, 02:30 AM
It populates the iframe on page load before anything else is put there and provides a concrete url to return to if the 'back' tab is clicked after just one forward move. You could use another page from your site if you like. Just change the two mentions of the file blank.htm on the page to the name of that file. It could have instructions on it or whatever you like.
shachi
08-03-2005, 02:44 AM
Thanks,
Thank you very much.
I really appereciate it.
Thanks again.
By the way can you teach me how you do such tricks? I am just a 13 year old boy and am new to javascript. If you would like to guide me then it would be a great help.
Thanks,
shachi. :)
shachi
08-03-2005, 03:19 AM
Can you tell me how can we execute keyboard commands (I mean commands like Shift+Enter) with javascript? And perform a function with it? :rolleyes: