PDA

View Full Version : anchor link in javascript code



jianxin9
07-11-2007, 03:37 PM
Hi everyone,

I am using the following code to create tabs on one of my webpages and I am curious if there is anyway to link from another page directly to one tab, so the patron won't have to come to this page and then find the tab they need.
I tried adding 'a name="#somename"' to the tab information, but that isn't working.
Any ideas? All input is greatly appreciated.




Here is the tab code by itself:
<ul class="tabselector" id="tabcontrol1">
<li class="tab-selected" id="db_tab">&nbsp;
<a href="#" onclick="tabselect($('db_tab')); paneselect($('db_pane')); return false;">Parkland Health Sciences Library</a></li>

<li class="tab-unselected" id="art_tab">
<a href="#" a name="#computer" onclick="loadPane($('art_pane'), 'psudo-noteslist.php'), tabselect($('art_tab')); paneselect($('art_pane')); return false;">Presbyterian Health Sciences Library</a></li>
<li class="tab-unselected" id="sub_tab">
<a href="#" onclick="loadPane($('sub_pane'), 'psudo-noteslist.php'), tabselect($('sub_tab')); paneselect($('sub_pane')); return false;">Houston Health Sciences Librarian</a></li>


</ul>


Here is all the of code together:
<script type="text/javascript">
function tabselect(tab) {
var tablist = $('tabcontrol1').getElementsByTagName('li');
var nodes = $A(tablist);
var lClassType = tab.className.substring(0, tab.className.indexOf('-') );

nodes.each(function(node){
if (node.id == tab.id) {
tab.className=lClassType+'-selected';
} else {
node.className=lClassType+'-unselected';
};
});
}

function paneselect(pane) {
var panelist = $('panecontrol1').getElementsByTagName('li');
var nodes = $A(panelist);

nodes.each(function(node){
if (node.id == pane.id) {
pane.className='pane-selected';
} else {
node.className='pane-unselected';
};
});
}

function loadPane(pane, src) {
if (pane.innerHTML=='' || pane.innerHTML=='<img alt="Wait" src="images/loading.gif" style="vertical-align:-3px" /> Loading...') {
reloadPane(pane, src);
}
}

function reloadPane(pane, src) {
new Ajax.Updater(pane, src, {asynchronous:1, evalScripts:true, onLoading:function(request){pane.innerHTML='<img alt="Wait" src="images/loading.gif" style="vertical-align:-3px" /> Loading...'}})
}
</script>


<div id="preview_area">


<ul class="tabselector" id="tabcontrol1">
<li class="tab-selected" id="db_tab">&nbsp;
<a href="#" onclick="tabselect($('db_tab')); paneselect($('db_pane')); return false;">Parkland Health Sciences Library</a></li>

<li class="tab-unselected" id="art_tab">
<a href="#" a name="#computer" onclick="loadPane($('art_pane'), 'psudo-noteslist.php'), tabselect($('art_tab')); paneselect($('art_pane')); return false;">Presbyterian Health Sciences Library</a></li>
<li class="tab-unselected" id="sub_tab">
<a href="#" onclick="loadPane($('sub_pane'), 'psudo-noteslist.php'), tabselect($('sub_tab')); paneselect($('sub_pane')); return false;">Houston Health Sciences Librarian</a></li>


</ul>





<div id="text">
<ul class="panes" id="panecontrol1">
<li id="db_pane" class="pane-selected">
<IMG STYLE="position:absolute; TOP:260px; LEFT:600px; width:228; height:200;" SRC="images/park1.jpg"><br />
<table width="448" border="0">
<tr>
<th width="235" align="left" scope="col">Contact Information:</th>
<th width="203" align="left" scope="col">Librarian:</th>
</tr>
<tr>
<td>TWU Health Sciences Library</td>
<td>Eula Oliphant</td>
</tr>
<tr>
<td>Parkland Campus</td>
<td>214-689-6585</td>
</tr>
<tr>
<td>1810 Inwood Rd.</td>
<td><a href="mailto:eoliphant@mail.twu.edu">Eula Oliphant</a></td>
</tr>
</table>
<br /><br />
<table width="500" border="0">
<tr>
<td width="233"><a href="http://www.twu.edu/library/about/about_pkmap.htm">Map</a></td>
<td width="257"><a href="http://twuill.twu.edu/libweb/web/res/nursing_guide.htm">Nursing Resources</a></td>
</tr>
<tr>
<td><a href="http://twuill.twu.edu/libweb/web/hours.htm">Hours</a></td>
<td><a href="http://twuill.twu.edu/libweb/web/res/hs_guide.htm">Health Studies Resources</a></td>
</tr>
<tr>
<td><a href="http://twuill.twu.edu/libweb/web/research/subject_specialists.htm">Request Personalized Instruction</a></td>
<td><a href="http://twuill.twu.edu/libweb/web/res/ready.htm">Internet Reference</a></td>
</tr>
<tr>
<td>Library Instruction Workshops</td>
<td><a href="http://twuill.twu.edu/libweb/web/services/services_faq.htm">Library Cards & TexShare Information</a></td>
</tr>
</table> </li>



<li id="art_pane" class="pane-unselected">

<IMG STYLE="position:absolute; TOP:280px; LEFT:600px;" SRC="images/presby2.jpg"><br />
<table width="448" border="0">
<tr>
<th width="235" align="left" scope="col">Contact Information:</th>
<th width="203" align="left" scope="col">Librarian:</th> &nbsp;&nbsp;&nbsp;
</tr>
<tr>
<td>TWU Health Sciences Library</td>
<td> Elaine Cox</td>
</tr>
<tr>
<td> Presbyterian Campus</td>
<td> DPH Room 24</td>
</tr>
<tr>
<td> 8194 Walnut Hill Lane</td>
<td> 214-706-2390</td>
</tr>
<tr>
<td> Dallas, Texas 75231</td>
<td><a href="mailto:ecox@mail.twu.edu">Elaine Cox</a></td>
</tr>
<tr>
<td> 214-706-2395</td>
<td></td>
</tr>
</table>
<br /><br />
<table width="500" border="0">
<tr>
<td width="233"><a href="http://www.twu.edu/library/about/about_pkmap.htm">Map</a></td>
<td width="257"><a href="http://twuill.twu.edu/libweb/web/res/ot_guide.htm">Occupational Therapy</a></td>

</tr>
<tr>
<td><a href="http://twuill.twu.edu/libweb/web/hours.htm">Hours</a></td>
<td><a href="http://twuill.twu.edu/libweb/web/res/pt_guide.htm">Physical Therapy</a></td>
</tr>
<tr>
<td><a href="http://twuill.twu.edu/libweb/web/research/subject_specialists.htm">Request Personalized Instruction</a></td>
<td><a href="http://twuill.twu.edu/libweb/web/res/ready.htm">Internet Reference</a></td>
</tr>
<tr>
<td>Library Instruction Workshops</td>
<td><a href="http://twuill.twu.edu/libweb/web/services/services_faq.htm">Library Cards & TexShare Information</a></td>
</tr>
</table>
</li>





<li id="sub_pane" class="pane-unselected">


<IMG STYLE="position:absolute; TOP:260px; LEFT:600px; " SRC="images/houston.jpg"><br />
<table width="448" border="0">
<tr>
<th width="235" align="left" scope="col">Contact Information:</th>
<th width="203" align="left" scope="col">Librarian:</th>
</tr>
<tr>
<td>Institute of Health Sciences</td>
<td>Marilyn Goff </td>
</tr>
<tr>
<td>Academic Resource Center</td>
<td>713-794-2481</td>
</tr>
<tr>
<td>6700 Fannin</td>
<td>Fax: 713-794-2484</td>
</tr>

<tr>
<td>Houston , Texas 77030-4132</td>
<td><a href="mgoff@mail.twu.edu">Marilyn Goff</a></td>
</tr>
</table>
<br /><br />
<table width="500" border="0">
<tr>
<td width="233"><a href="http://www.twu.edu/library/about/about_pkmap.htm">Map</a></td>
<td><a href="http://twuill.twu.edu/libweb/web/res/hs_guide.htm">Health Studies Resources</a></td>

</tr>
<tr>
<td><a href="http://twuill.twu.edu/libweb/web/hours.htm">Hours</a></td>
<td width="257"><a href="http://twuill.twu.edu/libweb/web/res/nursing_guide.htm">Nursing Resources</a></td>
</tr>
<tr>
<td><a href="http://twuill.twu.edu/libweb/web/research/subject_specialists.htm">Request Personalized Instruction</a></td>
<td><a href="http://twuill.twu.edu/libweb/web/res/ot_guide.htm">Occupational Therapy</a></td>

</tr>
<tr>
<td>Library Instruction Workshops</td>
<td><a href="http://twuill.twu.edu/libweb/web/res/pt_guide.htm">Physical Therapy</a></td>

</tr>
<tr>
<td></td>

<td><a href="http://twuill.twu.edu/libweb/web/res/ready.htm">Internet Reference</a></td>
</tr>

</table> </li>
</ul>
</div>


</div>

alexjewell
07-11-2007, 07:07 PM
You could use PHP, and add something on to the end of the url, like so:

index.php?tab=db

Then:



<?php

if(@$_GET['tab']){
$tab = $_GET['tab'];

if($tab == 'db'){ ?>

<!-- HTML HERE FOR SELECTED DB TAB -->

<?php }

else if($tab == 'art'){ ?>

<!-- HTML HERE FOR SELECTED ART TAB -->

<?php }

else { ?>

<!-- HTML HERE IF THE TAB DECLARED IN THE URL IS FALSE...JUST A BACKUP THING HERE -->

<?php }

}

else { ?>

<!-- HTML HERE IF THE PAGE ISN'T LINKED TO A CERTAIN SELECTED TAB -->

<?php } ?>


I would put the different pieces of code into variables beforehand so that you can just echo those variables when needed in the above code.

If you need more help with the PHP aspect, let me know.

jianxin9
07-11-2007, 07:48 PM
Hi, thanks so much for the response. I really don't know much at all about PHP. Any help that you could provide would be greatly appreciated.

Thanks again.

alexjewell
07-11-2007, 07:53 PM
Well, you would, first, have to make the page .php (use the php extension in place of .html or .htm)

The statements I wrote above do the following:

if this, do this
if that, do that
if neither of those (else), do this

it's simple logic.

What PHP does is it handles these statements on the server and outputs the information for the browser to read accordingly.

So, what the above code does is it first checks to see if it finds "tab" in the url, then it sets what tab equals as the variable $tab.

It then checks to see what $tab equals, and displays different html accordingly.

Make sense?

jianxin9
07-12-2007, 01:35 PM
That does make sense and I really do appreciate the info.
I just found out that our server doesn't have activated support for PHP...ugh...

Thanks again for all of your help.