PDA

View Full Version : js detecting file type and coloring text

pixelmonkey
05-25-2004, 02:21 PM
thanks "n8thegreat", for sending me in the right direction!

what i'm wanting to do is have all files with a .pdf extention automatically colored different then what my current style sheet is coloring all <a href> tags are.

within my style sheet, i'm using this:


BODY { Arial, Helvetica, sans-serif; color:000000
}

H1,H2,H3,H4,H5 { Arial, Helvetica, sans-serif; color:000000
}

P { FONT-SIZE: 12px; FONT-FAMILY: Arial, Helvetica, sans-serif; color:000000
}

A:link { color: #FFFFFF; text-decoration: none size: 10pt
}

A:visited { color: #FFFFFF; text-decoration: none size: 10pt
}

A:hover { color: FFFFFF; text-decoration: underline size: 10pt
}

A:active { color: FFFFFF; text-decoration: underline size: 10pt
}

.content { FONT-SIZE: 12px; FONT-FAMILY: Arial, Helvetica, sans-serif; color:000000
}

.content A:link{ FONT-SIZE: 12px; FONT-FAMILY: Arial, Helvetica, sans-serif; color:0000FF
}

.content A:active{ FONT-SIZE: 12px; FONT-FAMILY: Arial, Helvetica, sans-serif; color:0000FF
}

.content A:visited{ FONT-SIZE: 12px; FONT-FAMILY: Arial, Helvetica, sans-serif; color:0000FF
}

.content A:hover{ FONT-SIZE: 12px; FONT-FAMILY: Arial, Helvetica, sans-serif; color:0000FF
}

.footer { FONT-SIZE: 10px; FONT-FAMILY: Century Gothic; color:990000
}

.footer { FONT-SIZE: 10px; FONT-FAMILY: Century Gothic; color:990000
}

.footer A:link { FONT-SIZE: 10px; FONT-FAMILY: Century Gothic; color:990000
}

.footer A:active { FONT-SIZE: 10px; FONT-FAMILY: Century Gothic; color:990000
}

.footer A:visited { FONT-SIZE: 10px; FONT-FAMILY: Century Gothic; color:990000
}

.footer A:hover { FONT-SIZE: 10px; FONT-FAMILY: Century Gothic; color:990000
}


with that set in place here is what "n8thegreat" has to suggest.

you could do it with css selectors, but it only works in none IE win browsers
a:link[href~=".pdf"] { color: red; }

*edit* that actually probably wouldnt work, since thats only for space seperated words
the only other way is to have javascript go through every a tag and checks its href, and if the extension is a pdf then change the color

so, does anyone have this javascript? and if so, will i have to change anything within the style sheet so it will "play nice" with the javascript?

thanks!
chris<pixelmonkey>:monkey:
agent002
05-25-2004, 02:27 PM
Hi Chris,
create a separate class for the PDF links:
/* regular links */
a:link{ }
a:visited{ }
a:hover{ }
a:active{ }

/* PDF links */
a.pdf:link{ }
a.pdf:visited{ }
a.pdf:hover{ }
a.pdf:active{ }

Then add this JavaScript snippet to the HTML header:
<script type="text/javascript">
window.onload = function(){
var links = document.getElementsByTagName('a');
for(var i = 0; i < links.length; i++){
if(links[i].href.substring((links[i].href.lastIndexOf('.') + 1), links[i].href.length).toLowerCase() == 'pdf'){
links[i].className += ' pdf';
}
}
}
</script>

That should do it :)
pixelmonkey
05-26-2004, 09:13 AM
thanks!

BUT

it's working great by it's self, but because i have the class for the editable section defined as "content", the attributes for links are adopted for the class.

here is the code for the style sheet

style.css

BODY { Arial, Helvetica, sans-serif; color:000000 }
H1,H2,H3,H4,H5 { Arial, Helvetica, sans-serif; color:000000 }

P { FONT-SIZE: 12px; FONT-FAMILY: Arial, Helvetica, sans-serif; color:000000 }

a.pdf:link, a:link{ color: 990000; text-decoration: underline size: 10pt }
a.pdf:visited, a:visited{ color: 990000; text-decoration: underline size: 10pt }
a.pdf:hover, a:hover{ color: 990000; text-decoration: underline size: 10pt }
a.pdf:active, a:active{ color: 990000; text-decoration: underline size: 10pt }

.content { FONT-SIZE: 12px; FONT-FAMILY: Arial, Helvetica, sans-serif; color:000000 }
.content A:link{ FONT-SIZE: 12px; FONT-FAMILY: Arial, Helvetica, sans-serif; color:0000FF }
.content A:active{ FONT-SIZE: 12px; FONT-FAMILY: Arial, Helvetica, sans-serif; color:0000FF }
.content A:visited{ FONT-SIZE: 12px; FONT-FAMILY: Arial, Helvetica, sans-serif; color:0000FF }
.content A:hover{ FONT-SIZE: 12px; FONT-FAMILY: Arial, Helvetica, sans-serif; color:0000FF }

.nav A:link { color: #FFFFFF; text-decoration: none size: 10pt }
.nav A:visited { color: #FFFFFF; text-decoration: none size: 10pt }
.nav A:hover { color: FFFFFF; text-decoration: underline size: 10pt }
.nav A:active { color: FFFFFF; text-decoration: underline size: 10pt }

.footer { FONT-SIZE: 10px; FONT-FAMILY: Century Gothic; color:003399 }
.footer A:link { FONT-SIZE: 10px; FONT-FAMILY: Century Gothic; color:003399 }
.footer A:active { FONT-SIZE: 10px; FONT-FAMILY: Century Gothic; color:003399 }
.footer A:visited { FONT-SIZE: 10px; FONT-FAMILY: Century Gothic; color:003399 }
.footer A:hover { FONT-SIZE: 10px; FONT-FAMILY: Century Gothic; color:003399 }


and the html is in the next post...
chris<pixelmonkey>:monkey:
pixelmonkey
05-26-2004, 09:15 AM
here is the html...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<!-- InstanceBegin template="/Templates/template.dwt" codeOutsideHTMLIsLocked="false" -->

<head>

<!-- InstanceBeginEditable name="doctitle" -->
<title>Constriction and Materials</title>
<!-- InstanceEndEditable -->

<!-- InstanceBeginEditable name="head" --> <!-- InstanceEndEditable -->

<script language="JavaScript" fptype="dynamicanimation">
<!--
function dynAnimation() {}
function clickSwapImg() {}
//-->
</script>
<script language="JavaScript1.2" fptype="dynamicanimation" src="../animate.js">
</script>

<script type="text/javascript">
window.onload = function(){
var links = document.getElementsByTagName('a');
for(var i = 0; i < links.length; i++){
if(links[i].href.substring((links[i].href.lastIndexOf('.') + 1), links[i].href.length).toLowerCase() == 'pdf'){
links[i].className += ' pdf';
}
}
}
</script>


<link rel="stylesheet" href="../style.css">
<!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->
</head>

<body topmargin="0" leftmargin="0" background="../images/background.jpg" onload="dynAnimation()">


<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="750" height="100%" bgcolor="#FFFFFF">
<tr>
<td>


<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="750" height="100%" bgcolor="#FFFFFF">
<tr>
<td width="100%" height="60" valign="top">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" height="60" bgcolor="8080FF">
<tr>
<td width="147"><a href="http://wwwi" onmouseover="document['fpAnimswapImgFP2'].imgRolln=document['fpAnimswapImgFP2'].src;document['fpAnimswapImgFP2'].src=document['fpAnimswapImgFP2'].lowsrc;" onMouseOut="document['fpAnimswapImgFP2'].src=document['fpAnimswapImgFP2'].imgRolln">
<img border="0" src="../images/intralogotop_gray.gif" id="fpAnimswapImgFP2" name="fpAnimswapImgFP2" dynamicanimation="fpAnimswapImgFP2" lowsrc="../images/intralogotop_yellow.gif" width="147" height="76"></a></td>
<td width="100%" background="../images/header_stripe.gif"><p align="center">
<img border="0" src="../images/header.jpg" width="350" height="73"></td>
<td width="150" valign="bottom">
<img border="0" src="../images/dozer.jpg" width="150" height="76"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="100%" valign="top">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" class="nav">
<tr>
<td width="100%" valign="top" colspan="2" height="5" bgcolor="#000000"></td>
</tr>
<tr>
<td width="150" valign="top">
<table border="2" cellpadding="4" style="border-collapse: collapse" bordercolor="#111111" width="147" cellspacing="0" class="nav">
<tr>
<td width="100%" bgcolor="#8080FF" style="cursor:hand" onClick="location.href='/cm/index.htm'">
<b><font face="Arial" size="2" color="#000000"><a href="index.htm">Home</a></font></b></td>
</tr>
<tr>
<td width="100%" bgcolor="#8080FF" style="cursor:hand" onClick="location.href='/cm/about_us/'">
<b><font face="Arial" size="2" color="#000000"><a href="about_us/">About Us</a></font></b></td>
</tr>
<tr>
<td width="100%" bgcolor="#8080FF" style="cursor:hand" onClick="location.href='/cm/central_engineering_and_testing/'">
<b><font face="Arial" size="2" color="#000000"><a href="central_engineering_and_testing/">Central Engineering &amp; Testing</a></font></b></td>
</tr>
<tr>
<td width="100%" bgcolor="#8080FF" style="cursor:hand" onClick="location.href='/cm/field_engineer/'">
<b><font face="Arial" size="2" color="#000000"><a href="field_engineer/">Field Engineer</a></font></b></td>
</tr>
<tr>
<td width="100%" bgcolor="#8080FF" style="cursor:hand" onClick="location.href='/cm/external_civil_rights/'">
<b><font face="Arial" size="2" color="#000000"><a href="external_civil_rights/">External Civil Rights</a></font></b></td>
</tr>
<tr>
<td width="100%" bgcolor="#8080FF" style="cursor:hand" onClick="location.href='/cm/pavement_management/'">
<b><font face="Arial" size="2" color="#000000"><a href="pavement_management/">Pavement Management</a></font></b></td>
</tr>
<tr>
<td width="100%" bgcolor="#8080FF" style="cursor:hand" onClick="location.href='/cm/technical_certifications/'">
<b><font face="Arial" size="2" color="#000000"><a href="technical_certifications/">Technical Certifications</a></font></b></td>
</tr>
<tr>
<td width="100%" bgcolor="#8080FF" style="cursor:hand" onClick="location.href='/cm/manuals/'">
<b><font face="Arial" size="2" color="#000000"><a href="manuals/">Manuals</a></font></b></td>
</tr>
<tr>
<td width="100%" bgcolor="#8080FF" style="cursor:hand" onClick="location.href='/cm/site_manager/'">
<b><font face="Arial" size="2" color="#000000"><a href="site_manager/">Site Manager</a></font></b></td>
</tr>
<tr>
<td width="100%" bgcolor="#8080FF" style="cursor:hand" onClick="location.href='/cm/contacts/'">
<b><font face="Arial" size="2" color="#000000"><a href="contacts/">Contacts</a></font></b></td>
</tr>
</table></td>

<td width="600" valign="top">
<table border="0" cellpadding="4" cellspacing="4" style="border-collapse: collapse" bordercolor="#111111" width="100%" height="100%" class="pdf content">
<tr>
<td valign="top">
<!-- InstanceBeginEditable name="InFocusContent" -->
all content goes here... and here is a link and<br>
here is a <a href="something.pdf">pdf link</a></td>
</tr></table>
<!-- InstanceEndEditable -->
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="100%" height="61" valign="bottom">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%">
<tr>
<td width="57">
<img src="../images/modot_tab.gif" width="129" height="57"></td>
<td width="100%">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" height="57">
<tr>
<td width="100%" height="37">
<p align="center"><span style="letter-spacing: 3pt">
<font face="Arial" color="#800000" size="1">text</font></span></td>
</tr>
<tr>
<td width="100%" background="../images/graybar.gif" height="20">
<div align="center" class="footer"><a href="http://www">Web</a>&nbsp; | &nbsp;<a href="http://www">Web</a></div></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>

</body>
<!-- InstanceEnd -->
</html>


so now i'm working on compressing both of the sheets into 1.

is there a way to address multiple classes within 1 tag and have both take effect?

<table class="content" class="pdf">
chris<pixelmonkey>:monkey:
agent002
05-26-2004, 09:28 AM
Make it class="content pdf" :)
But if you want to get different link coloring for a specifid table using that method (simply adding the pdf class to the table tag and nothing else), you need to edit the CSS a bit:

a.pdf:link, table.pdf a:link{ color: 990000; text-decoration: underline size: 10pt }
a.pdf:visited, table.pdf a:visited{ color: 990000; text-decoration: underline size: 10pt }
a.pdf:hover, table.pdf a:hover{ color: 990000; text-decoration: underline size: 10pt }
a.pdf:active, table.pdf a:active{ color: 990000; text-decoration: underline size: 10pt }
Willy Duitt
05-26-2004, 01:40 PM
You can have any number of space-delimited class names:

class="foo bar something"
pixelmonkey
05-26-2004, 04:09 PM
i must be missing something...

still no luck. i updated the code on my post above, and combined the 2 sheets into 1.

am i going to have to do something majorly different?

thanks for your help!
chris<pixelmonkey>:monkey:
agent002
05-27-2004, 05:36 AM
There's one thing I don't understand... why do you want to use the pdf class name on the table? You don't need to. You don't need to put that class name everywhere, the JavaScript checks every link on the page and applies the class name to the link if it's href goes to a PDF file. You can view it online here (http://members.surfeu.fi/jerkku/htmlforums/pdflink.html).

Then make style.css:

BODY { Arial, Helvetica, sans-serif; color:000000 }
H1,H2,H3,H4,H5 { Arial, Helvetica, sans-serif; color:000000 }

P { FONT-SIZE: 12px; FONT-FAMILY: Arial, Helvetica, sans-serif; color:000000 }

a.pdf:link, a:link{ color: 990000; text-decoration: underline size: 10pt }
a.pdf:visited, a:visited{ color: 990000; text-decoration: underline size: 10pt }
a.pdf:hover, a:hover{ color: 990000; text-decoration: underline size: 10pt }
a.pdf:active, a:active{ color: 990000; text-decoration: underline size: 10pt }

.content { FONT-SIZE: 12px; FONT-FAMILY: Arial, Helvetica, sans-serif; color:000000 }
.content A:link{ FONT-SIZE: 12px; FONT-FAMILY: Arial, Helvetica, sans-serif; color:0000FF }
.content A:active{ FONT-SIZE: 12px; FONT-FAMILY: Arial, Helvetica, sans-serif; color:0000FF }
.content A:visited{ FONT-SIZE: 12px; FONT-FAMILY: Arial, Helvetica, sans-serif; color:0000FF }
.content A:hover{ FONT-SIZE: 12px; FONT-FAMILY: Arial, Helvetica, sans-serif; color:0000FF }

.nav A:link { color: #FFFFFF; text-decoration: none size: 10pt }
.nav A:visited { color: #FFFFFF; text-decoration: none size: 10pt }
.nav A:hover { color: FFFFFF; text-decoration: underline size: 10pt }
.nav A:active { color: FFFFFF; text-decoration: underline size: 10pt }

.footer { FONT-SIZE: 10px; FONT-FAMILY: Century Gothic; color:003399 }
.footer A:link { FONT-SIZE: 10px; FONT-FAMILY: Century Gothic; color:003399 }
.footer A:active { FONT-SIZE: 10px; FONT-FAMILY: Century Gothic; color:003399 }
.footer A:visited { FONT-SIZE: 10px; FONT-FAMILY: Century Gothic; color:003399 }
.footer A:hover { FONT-SIZE: 10px; FONT-FAMILY: Century Gothic; color:003399 }

a.pdf:link { /* styles here */ }
a.pdf:visited { /* styles here */ }
a.pdf:hover { /* styles here */ }
a.pdf:active { /* styles here */ }
Willy Duitt
05-27-2004, 06:51 AM
FWIW: All this:

if(links[i].href.substring((links[i].href.lastIndexOf('.') + 1), links[i].href.length).toLowerCase() == 'pdf'){

Can be replaced with this:

if(links[i].href.match(/[^/].(?:pdf)/i)){
agent002
05-27-2004, 06:53 AM
bah I didn't think of a regex :P
pixelmonkey
05-27-2004, 08:48 AM
GOT IT!

i started picking it apart, and removed most of the head *using the new posted above.

<head>

<!-- InstanceBeginEditable name="doctitle" -->
<title>Constriction and Materials</title>
<!-- InstanceEndEditable -->

<!-- InstanceBeginEditable name="head" --> <!-- InstanceEndEditable -->

<script type="text/javascript">
window.onload = function(){
var links = document.getElementsByTagName('a');
for(var i = 0; i < links.length; i++){
if(links[i].href.match(/[^/].(?:pdf)/i)){
links[i].className += ' pdf';
}
}
}
</script>
<style type="text/css">

a:link { FONT-SIZE: 12px; FONT-FAMILY: Arial, Helvetica, sans-serif; color:0000FF }
a:visited { FONT-SIZE: 12px; FONT-FAMILY: Arial, Helvetica, sans-serif; color:0000FF }
a:hover { FONT-SIZE: 12px; FONT-FAMILY: Arial, Helvetica, sans-serif; color:0000FF }
a:active { FONT-SIZE: 12px; FONT-FAMILY: Arial, Helvetica, sans-serif; color:0000FF }

a.pdf:link { FONT-SIZE: 12px; FONT-FAMILY: Arial, Helvetica, sans-serif; color: 990000; text-decoration: underline size: 10pt }
a.pdf:visited { FONT-SIZE: 12px; FONT-FAMILY: Arial, Helvetica, sans-serif; color: 990000; text-decoration: underline size: 10pt }
a.pdf:hover { FONT-SIZE: 12px; FONT-FAMILY: Arial, Helvetica, sans-serif; color: 990000; text-decoration: underline size: 10pt }
a.pdf:active { FONT-SIZE: 12px; FONT-FAMILY: Arial, Helvetica, sans-serif; color: 990000; text-decoration: underline size: 10pt }

.nav A:link { color: #FFFFFF; text-decoration: none size: 10pt }
.nav A:visited { color: #FFFFFF; text-decoration: none size: 10pt }
.nav A:hover { color: FFFFFF; text-decoration: underline size: 10pt }
.nav A:active { color: FFFFFF; text-decoration: underline size: 10pt }

.footer A:link { FONT-SIZE: 10px; FONT-FAMILY: Century Gothic; color:003399 }
.footer A:active { FONT-SIZE: 10px; FONT-FAMILY: Century Gothic; color:003399 }
.footer A:visited { FONT-SIZE: 10px; FONT-FAMILY: Century Gothic; color:003399 }
.footer A:hover { FONT-SIZE: 10px; FONT-FAMILY: Century Gothic; color:003399 }

</style>
</head>

and within the body, removed the js from the head

<body topmargin="0" leftmargin="0" background="images/background.jpg">

so now i'm working on getting this all into an external style sheet. *background included*

thank you soo much for your help! i was close to pulling my hair out yesterday!

it's all good!
chris<pixelmonkey>:monkey:
pixelmonkey
05-27-2004, 08:51 AM
ooo almost forgot!

as for the in-line addressing, most of it has been removed! i'm using a <div> tag for the navigation table before and after the table tags, same for the footer. i also removed the lines that for the footer and nav that werent related to links.

i'll be able to sign off on this soon!
thanks again!
chirs<pixelmonkey>:monkey: