I've been experimenting with creating angled divs on a webpage, where each basic panel is separated by an angled break. The idea is to have the background-image of one div flow smoothly into the background-color of the next div.
Since I couldn't directly select pseudo classes, I opted to use .addClass() in jQuery to toggle the presentation of the angles. However, I've run into some issues with my comparisons - either all the divs turn green or they all get angles added to them. It seems that my approach may be flawed, and I'm struggling to pinpoint where I'm going wrong.
Below is the JavaScript and jQuery code I've been working on:
$(function() {
green = $('div').css("background-color", "rgb(0,255,0)");
if ($('.box').prev() === green)
{
$(this).addClass('withTop withoutTop');
//if ($(this).css("background-color") == green)
}
});
I even tried using regex to extract only the digits from the RGB values, but it hasn't made much of a difference. Any help would be greatly appreciated! Here's the link to the codepen for reference: http://codepen.io/AnomalousDevs/pen/GJmrrw
CSS and markup
$(function() {
green = $('div').css("background-color", "rgb(0,255,0)");
if ($('.box').prev() === green) {
$(this).addClass('withTop withoutTop');
//if ($(this).css("background-color") == green)
}
});.box {
height: 100px;
width: 100%;
/*background-color: rgb(0,255,0);*/
position: relative;
}
... (CSS continuation) ...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="parent">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box withTop"></div>
</section>