Last Updated
Viewed 48 Times
        

https://codepen.io/sheetalsinghwd/pen/WNbNBEg

I am trying to apply gradient through javascript... but linear-gradient does not work for this... want different background every time when 3n+ number is changed. normal background color is successfully applied but gradient is not working for me Tried to Google but didn't found the solution... plz help

<style id="demo-stylesheet">
        #demo-list :nth-child(3n + 1) { background-color: #FFCC33; }

    </style>

<p>:nth-child(<input id="expr" type="text" value="3n + 1" maxlength="10">) selects <span id="expr-notes">1st, 4th, 7th child and so on</span>.</p>
    <table id="expr-chart">
        <tr>
            <th>n</th>
            <th>3n + 1</th>
        </tr>
        <tr>
            <td>0</td>
            <td>1</td>
        </tr>
        <tr>
            <td>1</td>
            <td>4</td>
        </tr>
        <tr>
            <td>2</td>
            <td>7</td>
        </tr>
        <tr>
            <td>3</td>
            <td>10</td>
        </tr>
        <tr>
            <td>4</td>
            <td>13</td>
        </tr>
        <tr>
            <td>5</td>
            <td>16</td>
        </tr>
        <tr>
            <td>6</td>
            <td>19</td>
        </tr>
        <tr>
            <td>7</td>
            <td>22</td>
        </tr>
        <tr>
            <td>8</td>
            <td>25</td>
        </tr>
        <tr>
            <td>9</td>
            <td>28</td>
        </tr>
        <tr>
            <td>10</td>
            <td>31</td>
        </tr>
    </table>
    <ol id="demo-list">
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
    </ol>

<scrip>

$(function() {
            function ordinalSuffixOf(i) {
                /*
                 * https://stackoverflow.com/a/13627586/87015
                 */
                var j = i % 10, k = i % 100;
                if (j == 1 && k != 11) {
                    return i + "st";
                }
                if (j == 2 && k != 12) {
                    return i + "nd";
                }
                if (j == 3 && k != 13) {
                    return i + "rd";
                }
                return i + "th";
            }
            function updateUI() {
                var $expr = $("#expr"),
                    $notes = $("#expr-notes"),
                    $label = $("#expr-chart th:nth-child(2)"),
                    $cells = $("#expr-chart td:nth-child(2)"),
                    $stylesheet = $("#demo-stylesheet"),
                    expr1 = $expr.val(),
                    regex = /^\s*(?:([\-+]?\d*)n(\s*[\-+]\s*\d+)?|([\-+]?\d+))\s*$/,
                    match = expr1.match(regex),
                    a,
                    b;
                if (match === null) {
                    $expr.addClass("error");
                    $notes.text("");
                    $label.text("");
                    $cells.text("");
                    $stylesheet.text("");
                    return;
                }
                a = match[1] === undefined ? 0 : +(match[1] === "" || match[1] === "-" || match[1] === "+" ? match[1].concat("1") : match[1]);
                b = match[2] === undefined && match[3] === undefined ? 0 : +(match[2] || match[3]).replace(/\s/g, "");
                $notes.text(function() {
                    var n = 0,
                        result,
                        results = [];
                    do {
                        result = a * n + b;
                        if (result > 0) {
                            results.push(ordinalSuffixOf(result));
                        } else if (a <= 0) {
                            break;
                        }
                        n++;
                    } while (results.length < 3 && (a > 0 || result > 0));
                    return results.length === 0 ? "nothing" : results.join(", ").concat(results.length === 1 ? " child" : " child and so on");
                });
                $label.text(expr1);
                $cells.text(function(n) {
                    return a * n + b;
                });
                if(b==2, b==5){
         $stylesheet.text("#demo-list :nth-child(" + expr1 + ") { background-color: green; }");
       }else if(b==3, b==6){
         $stylesheet.text("#demo-list :nth-child(" + expr1 + ") { background-color: red; }");
       }else if(b==4, b==7){
         $stylesheet.text("#demo-list :nth-child(" + expr1 + ") { background-color: blue; }");
       }else{
         $stylesheet.text("#demo-list :nth-child(" + expr1 + ") { background-color: { background-color: linear-gradient(#000, #fff);; }");
       }       
            }
            $("#expr").on("focus keydown blur", function() {
                this.className = "";
                if (this.timeout) {
                    window.clearTimeout(this.timeout);
                }
                this.timeout = window.setTimeout(updateUI, 1000);
            });
        });

</script>

I am trying to create a graph, with two lines showing two different progresses. So, I am using div SVG Polyline & Line function to achieve it. Sample code is here :

var svgGraph = SVG("divID");
//Polyline
var p = svgGraph.polyline(myXYDataArray);
p.fill('#color').attr({
    'stroke': '#color',
    'stroke-width': '5px'
});
// Straight line
var straighLine = svgGraph.line(0, 150, 300, 450);
straighLine.fill('none').attr({
    'stroke': '#color',
    'stroke-width': '5px'
});

Note : I am using tag-:div to place graph, something like : <div id="divId"></div>

I want to apply gradient on lower par of the line, if I apply 'fill:"#color", it will gonna apply on top of polyline. So, can someone help me how can I achieve this. Attaching image for clarification : White line shows where I need gradient

I want to make a circle background to fill in gradually using linear-gradient. I have my CSS and JavaScrpit file, only I can't figure out how to select the linear-gradient property in JS.

 <div id="circle" class="circleBase "></div>
    #circle{
        width: 300px;
        height: 300px;
        background-color:blue;
        background: linear-gradient(90deg, #FFC0CB 0%,white 100%);
    }

    function changeBackground() {
        var elem = document.getElementById("circle"); 
        var width = 1;
        var id = setInterval(frame, 10);
        function frame() {
            if (width >= 100) {
                clearInterval(id);
            } else {
               width++; 
               elem.style = ????
            }
        }
    }

I have this fiddle and I want to know how I can implement filtering function based on two categories. when someone click the filter, it should get the values from both the current filters selection, hide the list and show only the filter result. Any idea on how to implement this step? any help would be appreciated!!

<ul style='list-style-type: none;' class="filter1">
<li><span class="filtercat1">red</span>

</li>
<li><span class="filtercat1">blue</span>

</li>
<li><span class="filtercat1">yellow</span>

</li>
<li><span class="filtercat1">all</span>

</li>
</ul> <span id="filterbutton1">
    <a href="#" id="prev">« Previous</a> 
    <a href="#" id="next">Next »</a>

</span>

<ul style='list-style-type: none;' class="filter2">
<li><span class="filtercat2">orange</span>

</li>
<li><span class="filtercat2">apple</span>

</li>
<li><span class="filtercat2">papaya</span>

</li>
<li><span class="filtercat2">all</span>

</li>
</ul> <span id="filterbutton2">
    <a href="#" id="prev2">« Previous</a>
    <a href="#" id="next2">Next »</a>
</span>

<ul id='list'>
<li class="">red orange</li>
<li class="">red apple</li>
<li class="">red papaya</li>
<li class="">blue orange</li>
<li class="">blue apple</li>
<li class="">blue papaya</li>
<li class="">yellow orange</li>
<li class="">yellow apple</li>
<li class="">yellow papaya</li>
</ul>
<span id="filterbutton">
    <a href="#" id="filter"> filter</a>

<span id="resetbutton">
    <a href="#" id="reset"> reset</a>

$(function () {
    var all = $('.filtercat1').addClass("passiv");

    var i = -1;

    $('#prev' ).click(function () {
        ctrlbutton(i = !i ? all.length - 1 : --i);
    });
    $('#next').click(function () {
        ctrlbutton(i = ++i % all.length);
    }).click();

    function ctrlbutton(ele) {
        all.removeClass("active").addClass("passiv");
        all.eq(ele).removeClass("passiv").addClass("active");
    }


})

$(function () {
    var all = $('.filtercat2').addClass("passiv");

    var i = -1;

    $('#prev2').click(function () {
        ctrlbutton(i = !i ? all.length - 1 : --i);
    });
    $('#next2').click(function () {
        ctrlbutton(i = ++i % all.length);
    }).click();

    function ctrlbutton(ele) {
        all.removeClass("active").addClass("passiv");
        all.eq(ele).removeClass("passiv").addClass("active");
    }


})

fiddle: http://jsfiddle.net/BlacBunny/5tfcuy1w/

cc