Css Snippets » external http://www.csssnippets.be Snippets for you, snippets for me Mon, 17 Oct 2011 08:42:00 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 Target=_blank op de XHTML manier http://www.csssnippets.be/2009/09/target_blank-op-de-xhtml-manier/ http://www.csssnippets.be/2009/09/target_blank-op-de-xhtml-manier/#comments Fri, 18 Sep 2009 10:35:24 +0000 Mark http://www.csssnippets.be/?p=348 Soms kan je niet anders en moeten links naar een externe site openen in een nieuw venster, maar je kan niet target=_blank gebruiken omdat dan je XHTML niet meer XHTML zou zijn. Met een beetje javascript kan je dit oplossen:

HTML

Je originele link

<a href="document.html" target="_blank">external link</a>

Aangepaste link

<a href="document.html" rel="external">external link</a>

<![CDATA[
function externalLinks() {
 if (!document.getElementsByTagName) return;
 var anchors = document.getElementsByTagName("a");
 for (var i=0; i<anchors.length; i++) {
   var anchor = anchors[i];
   if (anchor.getAttribute("href") &&
       anchor.getAttribute("rel") == "external")
     anchor.target = "_blank";
 }
}
window.onload = externalLinks;
]]>
Google Bookmarks Digg BlinkList Technorati del.icio.us StumbleUpon

]]> http://www.csssnippets.be/2009/09/target_blank-op-de-xhtml-manier/feed/ 10 Toon applicatie icon naast link http://www.csssnippets.be/2009/02/toon-applicatie-icon-naast-link/ http://www.csssnippets.be/2009/02/toon-applicatie-icon-naast-link/#comments Thu, 12 Feb 2009 17:45:35 +0000 Mark http://www.csssnippets.be/?p=106 Dit werkt niet in Internet Explorer 6]]> Naast een download link voor een PDF bestand, komt een icon van het PDF logo, naast een download link voor een MP3 komt het icon van een MP3, etc … Dit werkt niet in Internet Explorer 6

HTML

<p><a href="mailto:x@x.com">email</a></p>
<p><a class="popup" href="#">pop up</a></p>
<p><a href="test.doc">word</a> </p>
<p><a href="test.xls">excel</a></p>
<p><a rel="external" href="http://www.test.com">website</a></p>
<p><a href="test.pdf">pdf</a></p>
<p><a rel="pdf" href="test">pdf2</a></p>
<p><a rel="xxpdfxx" href="test">pdf3</a></p>

CSS

/* all A tags whose HREF attribute ends in .pdf */
a[href$='.pdf'] {
	padding-left: 18px;
	background: transparent url(pdf.gif) no-repeat center left;
}
/* all A tags whose REL attribute = pdf */
a[rel='pdf'] {
	padding-left: 18px;
	background: transparent url(pdf.gif) no-repeat center left;
}
/*  all A tags whose REL attributes has the string pdf inside */
a[rel*='pdf'] {
	padding-left: 18px;
	background: transparent url(pdf.gif) no-repeat center left;
}
/* all A tags whose HREF attribute starts with mailto: */
a[href ^="mailto:"] {
	padding-left: 18px;
    background: transparent url(mailto.gif) no-repeat center left;

}
/* all A tags whose CLASS attribute is popup */
a[class ="popup"] {
	padding-left: 18px;
    background: transparent url(popup.gif) no-repeat center left;
}
a[href$='.doc'] {
	padding-left: 18px;
	background: transparent url(doc.gif) no-repeat center left;
}
a[href$='.xls'] {
	padding-left: 18px;
	background: transparent url(xls.gif) no-repeat center left;
}
a[rel ~='external'] {
	padding-left: 18px;
	background: transparent url(external.gif) no-repeat center left;
}
Google Bookmarks Digg BlinkList Technorati del.icio.us StumbleUpon

]]> http://www.csssnippets.be/2009/02/toon-applicatie-icon-naast-link/feed/ 2