Change color by passing variable

Due to the structure of my HTML, I need to change the color of an arrow by variable…
I’ve captured the color, but having problems assigning it. I think it may be cause I’m, getting RGB values…or i’m simply assigning incorrectly…help mucho appreciated

    <script>
$(".step-arrow").click(function(event) {
var win_w = window.innerWidth;
var myTarget = $(this).data("target");


if (win_w > 820 && win_w <1000){
$(this).toggleClass("active");
var cc = $(myTarget).css ("background-color");
$(this).style="border-left-color:"+cc;
console.log('color' + cc);
 $(myTarget).toggle("blind", {direction: "horizontal"}, 1000);	
}
else {
$(this).toggleClass("active");

 $(myTarget).toggle("blind", {direction: "vertical"}, 1000);	
}

});	

</script>



    <div id="s1-c" class="gridContainer clearfix">
<div id ="s1-top" class="top">
  <div id="s1-title-c" class="title-c">
  <span id="step4-num" class="step-num">1</span>
  <span id="step4-title" class="step-title">Title</span>
  <span id="step4-xinfo" class="title-xinfo">Extra Info</span>
  <div id ="s1-arrow-c" class="step-arrow-c">
  <div data-target="#s1-bottom"  id="step4-arrow" class="step-arrow"></div>
  </div>
  </div><!--end title c-->
</div><!--end s1 top -->

<div id ="s1-bottom" class="bottom">
<div id="s1-content-c" class="content-c"></div>
</div><!--end s1 bottom-->
</div><!--end s1c-->


.step-arrow{
display:block;
position: absolute;
top:0;
right:0;
width: 0;
height: 0;
line-height: 0;
border-bottom:22px solid transparent;
border-top:22px solid transparent;
border-left: 22px solid;
border-left-color:#fff;
cursor:pointer;

Hi,
I’m not overly sure what you are trying to achieve here.
Could you provide an runnable code sample (for example in a JSFiddle) that demonstrates the problem you are having?

I’m probably barking up the wrong tree with this… and could probably do it myself with a crap load of code like if (this) === s1.arrow or s2 or s3 or s4 blabla… but i’m simply trying to get the container (.top) color…different container different color s1top/s2top and assign it to the arrows .active class

so the arrow should change to the color of the container it originates in
what ive put was a long shot…
1/ not sure how to get the specific containers color when (this) is referring to a class used by 3 others…tried data which points to class & long shot 2 was hoping the class would inherit the color…but that was silly thinking on it…

anyway via this you can hopefuly see what I mean

http://175310703.linuxzone38.grserver.gr/test2/step4v2/s4-v2.html

So when I click on the arrow in the blue box, the background turns blue, the arrow is animated to turn downwards. In addition to this, you would like it to turn blue, as well?

Green box, same thing but the arrow should turn green.

Did I get that right?

thats it…so the color of the box will transfer to the arrow… preff assigned to the .active class border-left-color as this has the ease effect…

just tried along the lines of
var topColor = $(this).data(“topC”).css(“background-color”);
but no joy…

Ill do a complete color transformation…

the color of top container goes to arrow, text, and bottom container border
top container goes to white

Once I can see how to do the arrow, I should be ok with the rest…fingers crossed

suppose I could do a onclick function for each container…would simplify things eh

Not sure if I understood what you want correctly, but how about this:

$(".step-arrow").click(function(event) {
  var borderLeftColor;
    if($(this).hasClass("active")){
        borderLeftColor = "#fff"
    } else {
        borderLeftColor = $(this).closest(".top").css("background-color");
    }

  $(this).css("border-left-color", borderLeftColor)
  $(this).toggleClass("active");
});

Demo

Once again…great stuff…thats half the battle. I was near with code on server too =/

Thanks ever so much again Pullo

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.