Log in

View Full Version : CSS exception on external link


phipm1
07-19-2011, 07:16 PM
I currently have an external link icon put after each link created. I do not want an external link icon on Google links

/* CSS Code */

a[href^="http:"]
{
display:inline-block;
padding-right:14px;
background:transparent url(="extlink.gif) no-repeat 100% 0;
padding: 0 20px 0 0
}


a[href^="http:"] :hover:after { content: " > " attr (title);


a[href*="google"]{
background-image:none;
}
a[href*="google"] :hover:after { content: " "; }


I have also tried

a[href*="http://google"]{

this doesn't work either.


Anyone have any ideas?
coothead
07-19-2011, 08:46 PM
Hi there phipm1,

and a warm welcome to these forums. ;)

try it like this...


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">

<title></title>

<style type="text/css">
a {
display:inline-block;
padding-right:14px;
background:transparent url('http://www.coothead.co.uk/images/anim2.gif') no-repeat 100% 0;
color:#000;
}
a:hover:after {
content: ">";
}
a[href*="google"] {
background-image:none;
}
a[href*="google"]:hover:after {
content: " ";
}
</style>

</head>
<body>

<ul>
<li><a href="http://www.google.com">google.com</a></li>
<li><a href="http://www.dynamicdrive.com/">dynamicdrive.com</a></li>
<li><a href="http://www.google.co.uk">google.co.uk</a></li>
</ul>

</body>
</html>

coothead
phipm1
07-20-2011, 02:42 PM
Thanks so much, works great!!!
coothead
07-20-2011, 03:26 PM
No problem, you're very welcome. ;)
phipm1
07-20-2011, 04:45 PM
how would you assign a attribute title to all links except the ones going to Google?
coothead
07-20-2011, 09:47 PM
Hi there phipm1,

try it like this...


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">

<title></title>

<style type="text/css">
a:not([href*="google"]) {
color:#f00;
}
</style>

</head>
<body>

<ul>
<li><a href="http//www.google.com">google.com</a></li>
<li><a href="http://www.dynamicdrive.com/">dynamicdrive.com</a></li>
<li><a href="http//www.google.co.uk">google.co.uk</a></li>
<li><a href="http://www.bbc.co.uk/">bbc.co.uk</a></li>
</ul>

</body>
</html>

Obviously, this will only work in modern browsers. ;)

Further reading:-
http://www.w3.org/TR/css3-selectors/#negation
coothead
phipm1
07-21-2011, 02:13 PM
I want a hyperlink title "you are leaving" to show up automatically on all links, except the Google links.

Am I going about this the right way?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">

<title></title>

<style type="text/css">
a {
display:inline-block;
padding-right:14px;
background:transparent url('http://www.coothead.co.uk/images/anim2.gif') no-repeat 100% 0;
color:#000;

}
a:hover:after {
content: ">";
}
a[href*="google"] {
background-image:none;
}
a[href*="google"]:hover:after {
content: " ";
}


a:not([href*="google"]) {
color:#f00;
}


</style>

</head>
<body class="add">


<p><a href="http://www.google.com" google.com</a></p>
<p>



<a href="http://www.yahoo.com/" yahoo.com</a></p>
<p>



<a href="http://www.google.co.uk" google.co.uk</a></p>
</body>
</html>
coothead
07-21-2011, 05:44 PM
Hi there phipm1,

does this help...


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">

<title></title>

<style type="text/css">
a {
color:#000;
}
a:not([href*="google"]):before {
content:'you are leaving to...';
color:#f00;
}
</style>

</head>
<body>

<ul>
<li><a href="http//www.google.com">google.com</a></li>
<li><a href="http://www.dynamicdrive.com/">dynamicdrive.com</a></li>
<li><a href="http//www.google.co.uk">google.co.uk</a></li>
<li><a href="http://www.bbc.co.uk/">bbc.co.uk</a></li>
</ul>

</body>
</html>

coothead
phipm1
07-21-2011, 07:23 PM
I can't get the code to work for me. It doesn't show the title tags.
coothead
07-21-2011, 08:22 PM
Hi there phipm1,

CSS is used to style HTML elements.

To add content to the HTML attributes requires serverside or client side scripting.

coothead
coothead
07-21-2011, 09:04 PM
Hi there phipm1,

This, of course, would be better done serverside but for now here is a javascript example...


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">

<title></title>

<style type="text/css">
a {
color:#000;
}
</style>

<script type="text/javascript">
function testLink() {
var mat=[];
var anc=document.getElementsByTagName('a');
for(c=0;c<anc.length;c++){
mat[c]=anc[c].href.match(/google/g);
if(mat[c]==null){
anc[c].title='you are leaving';
}
}
}
window.addEventListener?
window.addEventListener('load',testLink,false):
window.attachEvent('onload',testLink);
</script>

</head>
<body>

<ul>
<li><a href="http//www.google.com">google.com</a></li>
<li><a href="http://www.dynamicdrive.com/">dynamicdrive.com</a></li>
<li><a href="http//www.google.co.uk">google.co.uk</a></li>
<li><a href="http://www.bbc.co.uk/">bbc.co.uk</a></li>
</ul>

</body>
</html>

coothead
phipm1
07-26-2011, 02:06 PM
So when I put everything together, the external link title script doesn't work. When I test the example you made, it work. What am I doing wrong?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">

<title></title>

<style type="text/css">
a {
display:inline-block;
padding-right:14px;
background:transparent url('http://www.coothead.co.uk/images/anim2.gif') no-repeat 100% 0;
color:#000;
}
a:hover:after {
content: ">";
}
a[href*="google"] {
background-image:none;
}
a[href*="google"]:hover:after {
content: " ";
}
</style>
<script type="text/javascript">
function testLink() {
var mat=[];
var anc=document.getElementsByTagName('a');
for(c=0;c<anc.length;c++){
mat[c]=anc[c].href.match(/google/g);
if(mat[c]==null){
anc[c].title='you are leaving';
}
}
}
window.addEventListener?
window.addEventListener('load',testLink,false):
window.attachEvent('onload',testLink);
</script>



</head>
<body>

<ul>
<li><a href="http://www.google.com">google.com</a></li>
<li></li>

<li><a href="http://www.dynamicdrive.com/">dynamicdrive.com</a></li>
<li></li>

<li><a href="http://www.google.co.uk">google.co.uk</a></li>
</ul>
<p>&nbsp;</p>
</body>
</html>
coothead
07-26-2011, 07:13 PM
Hi there phipm1,

I tested your code in IE8, Firefox 3.16.18, Safari 5 and Opera 11.

It worked OK in all of them, ;)

coothead
phipm1
07-26-2011, 08:03 PM
I got the example to work but my actual code won't work

What does /g do?

I've tried it with and without the /g can't get it to work.

Everything works except the title is not showing up in my actual code

mat[c]=anc[c].href.match(/quicklinks/g);


Here is my actual code

a[href^="mailto:"]
{
display:inline-block;
padding-left:20px;
line-height:18px;
background:transparent url(C:/QuicklinksSynchronized/images/link_icons/email_link.gif) no-repeat 100% 0;
padding: 0 20px 0 0;
}


a {
display:inline-block;
padding-right:14px;
background:transparent url('C:/QuicklinksSynchronized/images/link_icons/extlink.gif') no-repeat 100% 0;
colour:#000;
padding: 0 20px 0 0
}

a[href*="quicklinks"]
{
background-image:none;
}

a[href*="quicklinks"] :hover:after { content: " "; }

<script type="text/javascript">
function testLink() {
var mat=[];
var anc=document.getElementsByTagName('a');
for(c=0;c<anc.length;c++){
mat[c]=anc[c].href.match(/quicklinks/g);
if(mat[c]==null){
anc[c].title='You Are Leaving Quicklinks';
}
}
}
window.addEventListener?
window.addEventListener('load',testLink,false):
window.attachEvent('onload',testLink);

</script>
phipm1
07-28-2011, 02:46 PM
Thanks again for all your help.

So this is what I've done now.

I have broken out the javascript and CSS to have the html page call it.

I have everything working in my test site, but when I run the exact same script on my main site. The javascript doesn't work.


test site html
<link href="test.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="extLinktitle.js"> </script>

Main site
<link href="test.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/js/extLinktitle.js"> </script>


The only difference is the javascript is in a js folder on my main site.

Why would this be?
What am I missing?
coothead
07-28-2011, 03:58 PM
Hi there phipm1,

we would need the link to your site to assess the problem. ;)

coothead
phipm1
07-29-2011, 12:02 AM
ok here is htm and css code



<HEAD>
<LINK REL=STYLESHEET TYPE="text/css" HREF="../../../css/psi.css">
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1252">
<script type="text/javascript" src="extlinkTitle.js"> </script>
<link href="test.css" rel="stylesheet" type="text/css" />
<TITLE>TESTPAGE</TITLE>
<META NAME="subject" CONTENT="Order Processing">
</HEAD>
<BODY >
<h6><A HREF="../../../toc.htm" TARGET="_top">QL-HOME</A> | <A HREF="index.htm" TARGET="body">TOC</A>
</h6>
<HR>
<h5>TEST PAGE</h5>
<UL>
<LI><A HREF="#TOC_7">Title1</A></LI>
<LI><A HREF="#TOC_4">Title2</A> </LI>
</UL>
<HR>
<H1><A NAME="TOC_7"></A>Title1</H1>
<ul>
<li><a href="http://www.yahoo.com">Yahoo.com</a> </li>
<li><a href="http://quicklinks">Quicklinks</a></li>
<li><a href="http://quicklinks-qa">Quicklinks-QA</a></li>
<li></li>
<li></li>
</ul>
<H1><A NAME="TOC_4"></A>Title2</H1>
<ul>
<li> send an email to <a href="mailto:retailstoresupport@yahoo.com">guesswho@yahoo.com </a><br>
</li>
</ul>
<h1>&nbsp;</h1>

<HR>
<!-- #BeginLibraryItem "/Library/last_modified.lbi" --><!-- #BeginLibraryItem "/Library/last_modified.lbi" -->
<div align="center" class="lastModDate">
<script type="text/javascript" language="JavaScript">
<!--
function getCorrectedYear(year) {
year = year - 0;
if (year < 70) return (2000 + year);
if (year < 1900) return (1900 + year);
return year;
}
var intro = "last modified: ";
var lmod = new Date(document.lastModified);
var monthname;
var lmonth = lmod.getMonth();
if (lmonth == 0) monthname = "Jan";
if (lmonth == 1) monthname = "Feb";
if (lmonth == 2) monthname = "Mar";
if (lmonth == 3) monthname = "Apr";
if (lmonth == 4) monthname = "May";
if (lmonth == 5) monthname = "Jun";
if (lmonth == 6) monthname = "Jul";
if (lmonth == 7) monthname = "Aug";
if (lmonth == 8) monthname = "Sep";
if (lmonth == 9) monthname = "Oct";
if (lmonth == 10) monthname = "Nov";
if (lmonth == 11) monthname = "Dec";
var yearstr = getCorrectedYear(lmod.getYear());
var outstr = intro + monthname + " " + lmod.getDate() + ", " + yearstr;
document.write(outstr);
// -->

</script>
</div><!-- #EndLibraryItem --><!-- #EndLibraryItem -->
</blockquote>
</li>
</ul>
<script src="../../../lib/js/dcs_include.js" language="javascript" type="text/javascript"></script>
</BODY>
</HTML>

///CSS
/***********************************************/
/*****mailto icon******/

a[href^="mailto:"]
{
display:inline-block;
padding-left:20px;
line-height:18px;
background:transparent url(C:/QuicklinksSynchronized/images/link_icons/email_link.gif) no-repeat 100% 0;
padding: 0 20px 0 0;
}
/
/***********************************************/
/********** QA Add External Link Icon*/

a {
display:inline-block;
padding-right:14px;
background:transparent url('C:/QuicklinksSynchronized/images/link_icons/extlink.gif') no-repeat 100% 0;
colour:#000;
padding: 0 20px 0 0
}

a[href*="quicklinks"]
a[href*="quicklinks-qa"]
{
background-image:none;
}

/*removes external link icon from http://quicklinks*/

a[href*="quicklinks"] :hover:after { content: " "; }
a[href*="quicklinks-qa"] :hover:after { content: " "; }