cast42

Cast for two

Showing posts with label code. Show all posts
Showing posts with label code. Show all posts

Wednesday, May 19, 2010

HTML5 example to change the opacity of an image via CSS3

Here's a simple HTML5 example that changes the opacity of an image via CSS3 using an input range element and some Javascript.

<!DOCTYPE html>
<html>
<head>
 <title>HTML5 example to change the opacity of an image via CSS3</title>
</head>
<body>
<img id="img_0576" src="IMG_0576.jpg" alt="My bike"style="opacity: 0.5;" />
<input id="img_op" type='range' min='0' max='100' value='50' onchange="changeOpacity()">
<script>
function changeOpacity() {
 var opacity = document.getElementById('img_op').value/100;
 document.getElementById('img_0576').style.opacity = opacity;
}
</script>
</body>
</html>
This example is mainly to test out the use of code highlighting on Blogger as explained by Luka Marinko. It seems to work well. Huray!
If you're interested in HTML5 you can follow the Friendfeed on HTML5.

Posted by cast42 at 2:04 PM 2 comments

Labels: , ,

Sunday, August 02, 2009

Set all links target to _blank on a XHTML 1.0 Strict using jquery

As explained here, opening links in a new window is no longer possible via target=_blank in XHTML 1.0 strict. This code is a workaround using Javascript:


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;

A link with attribute rel set to external will open in a new window:

<a rel="external" href="http://castfortwo.blogpspot.com/">cast42</a>

On the Friendfeed realtime embed code, I saw they use jquery to do the job:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.js">
<script type="text/javascript"> 
$("body").mousedown(function(e) {
for (var target = e.target; target; target = target.parentNode) {
  if (target.tagName == "A") {
    if ((document.location.href.split("#")[0] + "#") == target.href) {
      return;
    }
    target.target = "_blank";
    return;
    }
}
});
</script>

The advantage is that all links will open in a new window, except if the refere to an anchor in the page. Hence there's no need to add the attribute rel to each anchor.

Posted by cast42 at 1:39 PM 0 comments

Labels: , , , ,

Subscribe to: Posts (Atom)