Note that there are some explanatory texts on larger screens.

plurals
  1. POChanging CSS class elements values for a given class
    primarykey
    data
    text
    <p>I need to change the gradient which is changing the color stop parameter percentage based on some value from outside. How can I change it?</p> <p>e.g. <code>#ff2828 15%, #fff728 15%</code>. By changing both these values I could control color.</p> <p>Here is my code:</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt;&lt;/meta&gt; &lt;title&gt;beep&lt;/title&gt; &lt;style&gt; .backgroungDiv{ height:31px; width:600px; position:absolute; background: #ff3232; /* Old browsers */ background: -moz-linear-gradient(left, #ff3232 0%, #ff2828 15%, #fff728 15%, #fff728 54%, #28ff33 81%, #8fff89 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ff3232), color-stop(15%,#ff2828), color-stop(15%,#fff728), color-stop(54%,#fff728), color-stop(81%,#28ff33), color-stop(100%,#8fff89)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(left, #ff3232 0%,#ff2828 15%,#fff728 15%,#fff728 54%,#28ff33 81%,#8fff89 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(left, #ff3232 0%,#ff2828 15%,#fff728 15%,#fff728 54%,#28ff33 81%,#8fff89 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(left, #ff3232 0%,#ff2828 15%,#fff728 15%,#fff728 54%,#28ff33 81%,#8fff89 100%); /* IE10+ */ background: linear-gradient(to right, #ff3232 0%,#ff2828 15%,#fff728 15%,#fff728 54%,#28ff33 81%,#8fff89 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3232', endColorstr='#8fff89',GradientType=1 ); /* IE6-9 */ clip: rect(0px 500px 600px 0px); /* here 2nd argument given on base of SNR calcuation*/ } &lt;/style&gt; &lt;/head&gt; &lt;script type="text/javascript"&gt; &lt;!-- function SoundOn() { if(document.getElementById('chk').checked ==false) { document.getElementById('demo').volume=0; } else { document.getElementById('demo').volume=.3; document.getElementById('demo').play(); } } function SoundOnIe() { if(document.getElementById('chk-ie').checked ==false) { document.getElementById('demo1').volume="-10000"; } else { document.getElementById('demo1').volume="-3000"; document.getElementById('demo1').play(); } } --&gt; &lt;/script&gt; &lt;body&gt; &lt;!--[IF IE]&gt; &lt;BGSOUND id="demo1" loop=-1 volume="-10000" src="beep-9.wav" &gt; &lt;input id="chk" onClick="SoundOnIe()" type="checkbox"&gt; &lt;![endif]--&gt; &lt;![IF !IE]&gt; &lt;audio id="demo" loop=-1 volume=0 src="beep-9.wav" &gt;&lt;/audio&gt; &lt;input id="chk" onClick="SoundOn()" type="checkbox"&gt; &lt;div id="empty" style="background-color:#cccccc;border-width:1px;border-style:solid;border-color:black;height:31px;width:595px;"&gt; &lt;div id="SNR_bar_graph" class="backgroungDiv" style="text-align:center;"&gt;16.1&lt;/div&gt; &lt;/div&gt; &lt;![endif]&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload