0

I'm having real trouble painting div's with different shapes. Example is here. All is in html/css/js so there will be no issue viewing it's source. Are there any attributes to css to make it work properly? All I have to do it all the way around?

Issue - div doesn't always change color when clicking it in different parts of it.

var colors = ["white","red","blue","green","yellow","purple"];
var names = ["none","próchnica","odbarwienie","coś1","coś2","coś3"];
var index = 0;
function button_click() {
   index = (index + 1) % colors.length;
   document.getElementById("box").style.backgroundColor = colors[index];
   document.getElementById("boxname").innerHTML = " "+names[index];
}
function paint(color,id,type) {
 var currentID = id;
 if (type=="trapez") {
  document.getElementById(currentID).style.borderBottomColor = color;
 } else if (type=="triangle_left") {
  document.getElementById(currentID).style.borderRightColor = color;
 } else if (type=="triangle_right") {
  document.getElementById(currentID).style.borderLeftColor = color;
 }
  
}
div#box
{
    width:20px;
    height:20px;
    background-color: white;
    border-color: black;
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    float: left;
}
.t1
{
 width:50px;
 height:50px;
 background-color: white;
 border-color: black;
 border-style: solid;
 border-width: 1px 1px 1px 1px;
 float: right;
}

.line{

 height:200px;
}
.container{
 float:left;
 margin-left:10px;
 
}
.triangle-left {
 width: 0;
 height: 0;
 border-top: 50px solid transparent;
 border-right: 50px solid blue;
 border-bottom: 50px solid transparent;
 position:absolute;
 margin-left:110px;
}

.triangle-right {
 width: 0;
 height: 0;
 border-top: 50px solid transparent;
 border-left: 50px solid green;
 border-bottom: 50px solid transparent;
 position:absolute;

}

.trapezoid {
 border-bottom: 50px solid red;
 border-left: 50px solid transparent;
 border-right: 50px solid transparent;
 height: 0;
 width: 60px;
}

.trapezoid-rotated {
 border-bottom: 50px solid gray;
 border-left: 50px solid transparent;
 border-right: 50px solid transparent;
 height: 0;
 width: 60px;
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
}
<div id="box" onclick="button_click();"></div><div id="boxname">&nbsp;none</div>

 <div class='line'>
  <div class='container'>
   <div id='a-1' class='triangle-left' onclick="paint(colors[index],this.id,'triangle_left');">
    
   </div>
   <div id='b-1' class='triangle-right' onclick="paint(colors[index],this.id,'triangle_right');">
    
   </div>
   <div id='center'>
    <div id='c-1' class='trapezoid-rotated' onclick="paint(colors[index],this.id,'trapez');">
     
    </div>
    <div id='d-1' class='trapezoid' onclick="paint(colors[index],this.id,'trapez');">
     
    </div>
   </div>
  </div>

 <div class='line'>
  <div class='container'>
   <div id='a-2' class='triangle-left' onclick="paint(colors[index],this.id,'triangle_left');">
    
   </div>
   <div id='b-2' class='triangle-right' onclick="paint(colors[index],this.id,'triangle_right');">
    
   </div>
   <div id='center'>
    <div id='c-2' class='trapezoid-rotated' onclick="paint(colors[index],this.id,'trapez');">
     
    </div>
    <div id='d-2' class='trapezoid' onclick="paint(colors[index],this.id,'trapez');">
     
    </div>
   </div>
  </div>
Pierre Irani
  • 805
  • 5
  • 19
crusty
  • 151
  • 4
  • 14

5 Answers5

1

The real problem is that what you are doing is a kind of a hack, creating triangles and trapezoids with border and transparency is not the same as creating a polygon. If you use the Inspect Element of any browser you will see the area that each polygon is using.

To make things easier I've created your code on Codepen, and recreated it using SVG. http://codepen.io/laurosollero/pen/aOQmVW

<div class="new">
  <h2>And now in SVG</h2>
  <div id="box2" onclick="newButtonClick();"></div>
  <div id="boxname2">&nbsp;none</div>
  <svg width="400" height="400">
    <path id="trapezoid1" style="fill:#a0a0a0;fill-opacity:1;stroke:none" d="M 50,50 350,50 275,150 125,150 z" />
    <path id="trapezoid2" style="fill:#ff0000;fill-opacity:1;stroke:none" d="M 50,250 125,150 275,150 350,250 z" />
    <path id="triangle1" style="fill:#007100;stroke:none;fill-opacity:1" d="M 50,50 125,150 50,250 z" />
    <path id="triangle2" style="fill:#0000ff;fill-opacity:1;stroke:none" d="M 350,50 350,250 275,150 z" />
  </svg>
</div>

And also the JS:

var colors = ["white","red","blue","green","yellow","purple"];
var names = ["none","próchnica","odbarwienie","coś1","coś2","coś3"];
var index = 0;

// new js code

var index1 = 0;
var forms = document.getElementsByTagName("path");


function newButtonClick() {
  index1 = (index1 + 1) % colors.length;
  document.getElementById("box2").style.backgroundColor = colors[index1];
  document.getElementById("boxname2").innerHTML = "&nbsp;" + names[index1];
}

for (var a = 0; a < forms.length; a++) {
  var elem = forms[a];
  elem.onclick = function() {
    // console.log(this);
    document.getElementById(this.id).style.fill = colors[index1];
    return false;
  };
}

I've tried not to change too much of the original code.

SVG is the way to go.

Lauro S.
  • 46
  • 2
  • I'm afraid it doesn't work on jsfiddle http://jsfiddle.net/ka2q7uy6/ or anywhere else... – crusty Jul 28 '15 at 16:56
  • That's why I don't like jsfiddle... copy the script part to the script view and change on the left to "No wrap - in ". Did you clicked on the link that I provided? The Codepen one?... – Lauro S. Jul 28 '15 at 17:07
  • Sorry, it's working. Perfect job :) Just needed to add the scripts AFTER svg – crusty Jul 28 '15 at 17:15
  • Oh, yeah, forgot about that when I've opened the jsFiddle. Glad I could help! – Lauro S. Jul 28 '15 at 17:30
  • This is the working fiddle with "No wrap - in " and separated scripts: http://jsfiddle.net/ka2q7uy6/4/ – Bjoerg Jul 28 '15 at 19:39
0

Thing is that your divs do look like triangles, but they still have rectangular form. So your click events may fire for a wrong elements.

Take a look on the solution posted here - Hover and click on CSS triangle. I think that's exactly what you need.

Community
  • 1
  • 1
serhiy volochiy
  • 13
  • 5
0

I think the problem is that those divs are not triangular xD they are just boxes with position: absolute. It will depend on z-index which one is triggered

Mimetix
  • 272
  • 1
  • 4
  • 12
0

this will do it:

var names = ["none","próchnica","odbarwienie","coś1","coś2","coś3"];
var index = 0;
function button_click() {
   index = (index + 1) % colors.length;
   document.getElementById("box").style.backgroundColor = colors[index];
   document.getElementById("boxname").innerHTML = "&nbsp;"+names[index];
}
function paint(color,e,type) {

switch (type) {
case "trapez":
    e.style.borderBottomColor = color;
    break;

case "triangle_left":
    e.style.borderRightColor = color;
    break;

case "triangle_right": 
    e.style.borderLeftColor = color;
    break;
}   

}
</script>
<body>
<div id="box" onclick="button_click();"></div><div id="boxname">&nbsp;none</div>
<div class='line'>
    <div class='container'>
        <div id='a-1' class='triangle-left' onclick="paint(colors[index],this,'triangle_left');">

        </div>
        <div id='b-1' class='triangle-right' onclick="paint(colors[index],this,'triangle_right');">

        </div>
        <div id='center'>
            <div id='c-1' class='trapezoid-rotated' onclick="paint(colors[index],this,'trapez');">

            </div>
            <div id='d-1' class='trapezoid' onclick="paint(colors[index],this,'trapez');">

            </div>
        </div>
    </div>

<div class='line'>
    <div class='container'>
        <div id='a-2' class='triangle-left' onclick="paint(colors[index],this,'triangle_left');">

        </div>
        <div id='b-2' class='triangle-right' onclick="paint(colors[index],this,'triangle_right');">

        </div>
        <div id='center'>
            <div id='c-2' class='trapezoid-rotated' onclick="paint(colors[index],this,'trapez');">

            </div>
            <div id='d-2' class='trapezoid' onclick="paint(colors[index],this,'trapez');">

            </div>
        </div>
    </div>
</body>
</html>
Armin Bleiholder
  • 72
  • 4
0

Your DIV's are no real triangles.

I did create a solution with overlapping DIV's. It's a bit tricky to set the correct position in CSS:

HTML:

<div class="container">
    <div class="top"></div>
    <div class="bottom"></div>
    <div class="left"></div>
    <div class="right"></div>
</div>

CSS:

.container {
    height: 75px;
    width: 200px;
    background-color: gray;
    overflow:hidden;
    display:block;
}
.top {
    height: 37px;
    width: 200px;
    position: relative;
    background-color: green;
}
.bottom {
    height: 37px;
    width: 200px;

    position: relative;
    background-color: yellow;
}
.left {
    height: 50px;
    width: 50px;
    top:-62px;
    left:-25px;
    position: relative;
    background-color: blue;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
}
.right {
    height: 50px;
    width: 50px;
    top:-112px;
    left:175px;
    position: relative;
    background-color: blue;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
}

JavaScript/jQuery:

$(".top, .bottom, .left, .right" ).mouseenter(
  function() {
    $( this ).css("background","gray");
  }
);
$(".top, .bottom, .left, .right" ).mouseleave(
  function() {
    $( this ).css("background","");
  }
);

Try it on jsfiddle with only mouseenter/mouseleave handler:

http://jsfiddle.net/3d4thkwo/

Bjoerg
  • 1,229
  • 1
  • 16
  • 32