[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Cross browser transparent gradient using SPAN tags

Posted on 2006-05-01
4
Medium Priority
?
630 Views
Last Modified: 2008-01-09

Hello.


I want a cross browser gradient bar that uses JS and CSS.

I want it to be 22 px high and 100 pix wide.  It should be red on the right and transparent on the left.

My idea is to create 100 span tags with JavaScript, each one more transparent than the one before it.

The first one should look like this:


<span height="22" width="1" style="
      filter:alpha(opacity=99);
      opacity: 0.99;
      -moz-opacity:0.9;
      background-color: #FF0000
><img src="trans.gif" height="22" width="1"></span>


And the last one like this:


<span height="22" width="1" style="
      filter:alpha(opacity=01);
      opacity: 0.01;
      -moz-opacity:0.01;
      background-color: #FF0000
><img src="trans.gif" height="22" width="1"></span>


So the short script should create 100 lines.

Any ideas how to effectively do this?


Thanks!
0
Comment
Question by:hankknight
  • 2
4 Comments
 
LVL 5

Accepted Solution

by:
maclema earned 2000 total points
ID: 16578017
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
function pad(num)
{
      var str = ""+num;
      if ( str.length == 1 )
      {
            str = "0" + str;
      }
      return str;
}

function createFade() {
      var startOp = 99;
      var endOp = 01;
      
      var allHtml = "";
      for ( var i=startOp; i>=endOp; i-- )
      {
            var op = pad(i);
            var html = '<span height="22" width="1" style="width: 1px; height: 22px; filter:alpha(Opacity=' + op + '); opacity: 0.' + op + '; -moz-opacity:0.' + op + '; background-color: #FF0000;">&nbsp;</span>';
            allHtml += html;
      }
      
      document.getElementById("putHere").innerHTML = allHtml;
}

window.onload = createFade;
</script>
</head>

<body>
<div id="putHere"></div>
</body>
</html>
0
 
LVL 5

Expert Comment

by:maclema
ID: 16578055
P.S. You will need to replace '&nbsp;' with your transparent gif >> '<img src="trans.gif" height="22" width="1">'
0
 
LVL 8

Expert Comment

by:KennyTM
ID: 16578075
Just a curious question... Why not just create a PNG with alpha-channel? (For IE just use the AlphaImageLoader filter. Much faster & less work to do.)
0
 
LVL 16

Author Comment

by:hankknight
ID: 16610678
Thanks, maclema.

KennyTM, good question.  I used red as the colour in my question to simplify the answer.  However, the actual colour will be dynamically created on the fly with JavaScript.   So a PNG is not an option, unless I were to dynamically create a PNG on the fly.

Cheers!
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

834 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question