alter .css gradient in jquery using hex values AND variable

Question

I have set a background gradient in the body of a website I'm building. I also have created a menu the items of which change to distinct colors on hover. What I'd like to do is ask just sections of the background gradient to change to the same color of the menu item that is being hovered over. I have been able to use JQuery to alter the background color using preselected hex values. I wonder if it is possible to define these hex values in combination with a variable that selects the color of the "this", or hovered-over item. And if not, if there is another, perhaps simpler way to solve the problem.

Here is my HTML:

<div id="header">Jane K Callahan &#124; Freelancer Writer</div>
    <hr>
    <div>
        <ul id="menu">
            <li>Portfolio</li>
            <li>Services</li>
            <li>Testimonials</li>
            <li>Blog</li>
            <li>About Jane</li>
            <li>Contact</li>

        </ul>
    </div>

</div>

My relevant CSS:

     html {
    height: 100%;
}

body {
    max-width: 1100px;
    min-width: 800px;
    font-family: Rockwell;
    font-size: 13px;
    font-color: #3a3a3c;
    width: 100%;
    margin: 0;
    height: 100%;
    background: -webkit-linear-gradient(left bottom, #ffffff 20%, #f8f8f8, #f0f0f0, #e8e8e8, #e0e0e0, #d8d8d8, #d0d0d0, #e8e8e8, #ffffff 50%, #f8f8f8, #f0f0f0, #e8e8e8); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(top right #ffffff 20%, #f8f8f8, #f0f0f0, #e8e8e8, #e0e0e0, #d8d8d8, #d0d0d0, #e8e8e8, #ffffff 50%, #f8f8f8, #f0f0f0, #e8e8e8); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(top right #ffffff 20%, #f8f8f8, #f0f0f0, #e8e8e8, #e0e0e0, #d8d8d8, #d0d0d0, #e8e8e8, #ffffff 50%, #f8f8f8, #f0f0f0, #e8e8e8); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to top right #ffffff 20%, #f8f8f8, #f0f0f0, #e8e8e8, #e0e0e0, #d8d8d8, #d0d0d0, #e8e8e8, #ffffff 50%, #f8f8f8, #f0f0f0, #e8e8e8); /* Standard syntax */
    background-repeat: no-repeat;
    background-attachment: fixed;
}

#header {
    font-family: Copperplate;
    font-size: 25px;
    font-color: #080808;
    margin-top: 120px;
    margin-left: -50%;
    width: 45%;
    min-width: 500px;
    font-variant: small-caps;
    position: fixed;
}


hr {
    margin-top: 150px;
    width: 45%;
    min-width: 530px;
    margin-left: -100px;
    color: #505050;
    background-color: #505050;
    height: 2px;
    border: grooved 2px;
    box-shadow: 4px 4px 15px 0px rgba(50, 50, 50, 0.75);
    position: fixed;

}

#menu {
    margin-top: 200px;
    margin-left: 90px;
    float: left;
    width: 15%;
    min-width: 150px;
    position: fixed;
}

ul {
    list-style: none;
}

li {
    font-weight: bold;
    padding: 8px 8px 8px 20px;
    border: 1px solid gray;
    margin-bottom: 10px;
}

li a {
    color: inherit;
}

#menu li:nth-child(1) {
    background-color: #333333;
    color: #ffffff;
}

#menu li:nth-child(1):hover {
    background-color: #f16745; 
    -webkit-box-shadow: -9px 3px 15px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    -9px 3px 15px 0px rgba(50, 50, 50, 0.75);
    box-shadow:         -9px 3px 15px 0px rgba(50, 50, 50, 0.75);
}

#menu li:nth-child(2) {
    background-color: #5c5c5c;
    color: #ffffff;
}

#menu li:nth-child(2):hover {
    background-color: #ffc65d; 
    -webkit-box-shadow: -9px 3px 15px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    -9px 3px 15px 0px rgba(50, 50, 50, 0.75);
    box-shadow:         -9px 3px 15px 0px rgba(50, 50, 50, 0.75);
}

#menu li:nth-child(3) {
    background-color: #858585;
    color: #ffffff;
}

#menu li:nth-child(3):hover {
    background-color: #7bc8a4; 
    -webkit-box-shadow: -9px 3px 15px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    -9px 3px 15px 0px rgba(50, 50, 50, 0.75);
    box-shadow:         -9px 3px 15px 0px rgba(50, 50, 50, 0.75);
}


#menu li:nth-child(4) {
    background-color: #adadad;
    color: #1a1a1a;
}

#menu li:nth-child(4):hover {
    background-color: #4cc3d9; 
    -webkit-box-shadow: -9px 3px 15px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    -9px 3px 15px 0px rgba(50, 50, 50, 0.75);
    box-shadow:         -9px 3px 15px 0px rgba(50, 50, 50, 0.75);
}

#menu li:nth-child(5) {
    background-color: #d6d6d6;
    color: #1a1a1a;
}

#menu li:nth-child(5):hover {
    background-color: #93648d; 
    -webkit-box-shadow: -9px 3px 15px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    -9px 3px 15px 0px rgba(50, 50, 50, 0.75);
    box-shadow:         -9px 3px 15px 0px rgba(50, 50, 50, 0.75);
}

#menu li:nth-child(6) {
    background-color: #ffffff;
    color: #1a1a1a;
}

#menu li:nth-child(6):hover {
    background-color: #404040; 
    color: #ffffff;
    -webkit-box-shadow: -9px 3px 15px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    -9px 3px 15px 0px rgba(50, 50, 50, 0.75);
    box-shadow:         -9px 3px 15px 0px rgba(50, 50, 50, 0.75);
}

And finally, my JQuery-in-progress:

$(function() {
$("li").hover(function() {
    var color = $(this).css("background-color");
    $("hr").css({"background-color": color});
    $("body").css({"background": "-webkit-linear-gradient(left bottom, #ffffff 20%, #f8f8f8, #f0f0f0, " + color + "#e0e0e0, #d8d8d8, #d0d0d0, " + color + "#ffffff 50%, #f8f8f8, #f0f0f0, " + color + ")"} /* For Safari 5.1 to 6.0 */
        //{"background:" "-o-radial-gradient(#ffffff 70%, #f8f8f8, #f7f7f7, #f0f0f0, #e8e8e8, #e0e0e0, #f16745"}, /* For Opera 11.1 to 12.0 */
        //{"background:" "-moz-radial-gradient(#ffffff 70%, #f8f8f8, #f7f7f7, #f0f0f0, #e8e8e8, #e0e0e0, #f16745"}, /* For Firefox 3.6 to 15 */
        //{"background:" "radial-gradient(#ffffff 70%, #f8f8f8, #f7f7f7, #f0f0f0, #e8e8e8, #e0e0e0, #f16745"} /* Standard syntax */
    );
},
function() {
    $("hr").css({"background-color": "#505050"});
    $("body").css({"background": "-webkit-linear-gradient(left bottom, #ffffff 20%, #f8f8f8, #f0f0f0, #e8e8e8, #e0e0e0, #d8d8d8, #d0d0d0, #e8e8e8, #ffffff 50%, #f8f8f8, #f0f0f0, #e8e8e8)"});
}
);

});

So, for example, I tried to substitute the hex value "#e8e8e8" in the first gradient with the pre-defined "color" variable.

score 0 · Answer 1 · answered Sep 27 '14 at 03:35

Not sure if I understand this correctly, but I'm pretty sure doing something like this is what you're looking for?

var color = $(this).css("background-color");

$("body")
  .css(
    {
      "background":"-webkit-radial-gradient(#ffffff 70%, #f8f8f8, #f0f0f0, #e8e8e8, " + color + ")"
    });

?

manishie · Accepted Answer · 2014-10-03T18:57:39.607

Press the button below to see this in action.

You were pretty close. Each line would be something like:

$("body").css({"background": "-webkit-radial-gradient(#ffffff 70%, #f8f8f8, #f0f0f0, #e8e8e8, " + color + ")"}

$(function() {
  $("li").hover(function() {
      var color = $(this).css("background-color");
      $("hr").css({
        "background-color": color
      });
      $("body").css({
          "background": "-webkit-linear-gradient(left bottom, #ffffff 20%, #f8f8f8, #f0f0f0, " + color + ",#e0e0e0, #d8d8d8, #d0d0d0, " + color + ",#ffffff 50%, #f8f8f8, #f0f0f0, " + color + ")"
        } /* For Safari 5.1 to 6.0 */
        //{"background:" "-o-radial-gradient(#ffffff 70%, #f8f8f8, #f7f7f7, #f0f0f0, #e8e8e8, #e0e0e0, #f16745"}, /* For Opera 11.1 to 12.0 */
        //{"background:" "-moz-radial-gradient(#ffffff 70%, #f8f8f8, #f7f7f7, #f0f0f0, #e8e8e8, #e0e0e0, #f16745"}, /* For Firefox 3.6 to 15 */
        //{"background:" "radial-gradient(#ffffff 70%, #f8f8f8, #f7f7f7, #f0f0f0, #e8e8e8, #e0e0e0, #f16745"} /* Standard syntax */
      );
    },
    function() {
      $("hr").css({
        "background-color": "#505050"
      });
      $("body").css({
        "background": "-webkit-linear-gradient(left bottom, #ffffff 20%, #f8f8f8, #f0f0f0, #e8e8e8, #e0e0e0, #d8d8d8, #d0d0d0, #e8e8e8, #ffffff 50%, #f8f8f8, #f0f0f0, #e8e8e8)"
      });
    }
  );

});

html {
    height: 100%;
}

body {
    max-width: 1100px;
    min-width: 800px;
    font-family: Rockwell;
    font-size: 13px;
    font-color: #3a3a3c;
    width: 95%;
    margin: 0;
    height: 100%;
    background: -webkit-radial-gradient(#ffffff 70%, #f8f8f8, #f0f0f0, #e8e8e8, #e0e0e0, #d8d8d8, #d0d0d0); /* For Safari 5.1 to 6.0 */
    background: -o-radial-gradient(#ffffff 70%, #f8f8f8, #f7f7f7, #f0f0f0, #e8e8e8, #e0e0e0, #d8d8d8, #d0d0d0); /* For Opera 11.1 to 12.0 */
    background: -moz-radial-gradient(#ffffff 70%, #f8f8f8, #f7f7f7, #f0f0f0, #e8e8e8, #e0e0e0, #d8d8d8, #d0d0d0); /* For Firefox 3.6 to 15 */
    background: radial-gradient(#ffffff 70%, #f8f8f8, #f7f7f7, #f0f0f0, #e8e8e8, #e0e0e0, #d8d8d8, #d0d0d0); /* Standard syntax */
    background-repeat: no-repeat;
    background-attachment: fixed;
}

#header {
    font-family: Copperplate;
    font-size: 25px;
    font-color: #080808;
    margin-top: 120px;
    margin-left: -50%;
    width: 45%;
    min-width: 500px;
    font-variant: small-caps;
    position: fixed;
}


hr {
    margin-top: 150px;
    width: 45%;
    min-width: 500px;
    margin-left: -100px;
    color: #505050;
    background-color: #505050;
    height: 2px;
    border: grooved 2px;
    box-shadow: 4px 4px 15px 0px rgba(50, 50, 50, 0.75);
    position: fixed;

}

#menu {
    margin-top: 200px;
    margin-left: 90px;
    float: left;
    width: 15%;
    min-width: 150px;
    position: fixed;
}

li:nth-child(1) {
    background-color: #333333;
    color: #ffffff;
}

li:nth-child(1):hover {
    background-color: #f16745; 
    -webkit-box-shadow: -9px 3px 15px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    -9px 3px 15px 0px rgba(50, 50, 50, 0.75);
    box-shadow:         -9px 3px 15px 0px rgba(50, 50, 50, 0.75);
}

li:nth-child(2) {
    background-color: #5c5c5c;
    color: #ffffff;
}

li:nth-child(2):hover {
    background-color: #ffc65d; 
    -webkit-box-shadow: -9px 3px 15px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    -9px 3px 15px 0px rgba(50, 50, 50, 0.75);
    box-shadow:         -9px 3px 15px 0px rgba(50, 50, 50, 0.75);
}

li:nth-child(3) {
    background-color: #858585;
    color: #ffffff;
}

li:nth-child(3):hover {
    background-color: #7bc8a4; 
    -webkit-box-shadow: -9px 3px 15px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    -9px 3px 15px 0px rgba(50, 50, 50, 0.75);
    box-shadow:         -9px 3px 15px 0px rgba(50, 50, 50, 0.75);
}


li:nth-child(4) {
    background-color: #adadad;
    color: #1a1a1a;
}

li:nth-child(4):hover {
    background-color: #4cc3d9; 
    -webkit-box-shadow: -9px 3px 15px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    -9px 3px 15px 0px rgba(50, 50, 50, 0.75);
    box-shadow:         -9px 3px 15px 0px rgba(50, 50, 50, 0.75);
}

li:nth-child(5) {
    background-color: #d6d6d6;
    color: #1a1a1a;
}

li:nth-child(5):hover {
    background-color: #93648d; 
    -webkit-box-shadow: -9px 3px 15px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    -9px 3px 15px 0px rgba(50, 50, 50, 0.75);
    box-shadow:         -9px 3px 15px 0px rgba(50, 50, 50, 0.75);
}

li:nth-child(6) {
    background-color: #ffffff;
    color: #1a1a1a;
}

li:nth-child(6):hover {
    background-color: #404040; 
    color: #ffffff;
    -webkit-box-shadow: -9px 3px 15px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    -9px 3px 15px 0px rgba(50, 50, 50, 0.75);
    box-shadow:         -9px 3px 15px 0px rgba(50, 50, 50, 0.75);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header">Jane K Callahan &#124; Freelancer Writer</div>
    <hr>
    <div>
        <ul id="menu">
            <li>Portfolio</li>
            <li>Services</li>
            <li>Testimonials</li>
            <li>Blog</li>
            <li>About Jane</li>
            <li>Contact</li>

        </ul>
    </div>

</div>

UPDATE:

I've updated the code above with your new code. You were missing two commas in the quoted bits after your variables, co this:

"background": "-webkit-linear-gradient(left bottom, #ffffff 20%, #f8f8f8, #f0f0f0, " + color + "#e0e0e0, #d8d8d8, #d0d0d0, " + color + "#ffffff 50%, #f8f8f8, #f0f0f0, " + color + ")"

should have been this:

"background": "-webkit-linear-gradient(left bottom, #ffffff 20%, #f8f8f8, #f0f0f0, " + color + ", #e0e0e0, #d8d8d8, #d0d0d0, " + color + ", #ffffff 50%, #f8f8f8, #f0f0f0, " + color + ")"

I'm working on making the gradient a little more complex. Theoretically this code should work, no? $("body").css({"background": "-webkit-linear-gradient(left bottom, #ffffff 20%, #f8f8f8, #f0f0f0, " + color + "#e0e0e0, #d8d8d8, #d0d0d0, " + color + "#ffffff 50%, #f8f8f8, #f0f0f0, " + color + ")"} — clareeileen, Sep 30 '14 at 03:01
Practically speaking something is wrong but not sure where. I've been tinkering with it but so far unsuccessful. — clareeileen, Sep 30 '14 at 03:36
paste your new code as an update to the question (leaving the original question). — manishie, Sep 30 '14 at 03:37
you forgot a parentheses at the end. $("body").css({"background": "-webkit-linear-gradient(left bottom, #ffffff 20%, #f8f8f8, #f0f0f0, " + color + "#e0e0e0, #d8d8d8, #d0d0d0, " + color + "#ffffff 50%, #f8f8f8, #f0f0f0, " + color + ")"}) — manishie, Sep 30 '14 at 03:43
Nope parens are there after the commented out code (same as in the original example). — clareeileen, Sep 30 '14 at 04:18
i was just saying that in the code you pasted into your comment was missing the close paren. — manishie, Sep 30 '14 at 04:20

alter .css gradient in jquery using hex values AND variable

2 Answers2