Bootstrap Snippet Organigramme_Saint_Jean using HTML CSS jQuery

body{ background-color:white; zoom: 50%; } #svgContainer { z-index: -10; position:absolute; background-color:white; opacity: 0.5; } div{ opacity: 1; } #outer{ margin:0 auto; width: 80%; } #teal{ width: 6em; height: 6em; background-color:#ffef96; text-align: center; border-radius: 8px; margin-left: 10%; position:absolute; top: 0px; left: 250px; } #teal2{ width: 6em; height: 6em; text-align: center; background-color:#ffef96; border-radius: 8px; margin-left: 10%; position:absolute; top: 600px; left: 250px; } #teal3{ width: 6em; height: 6em; text-align: center; background-color:#ffef96; border-radius: 8px; margin-left: 10%; position:absolute; top: 300px; left: 250px; } #teal4{ width: 6em; height: 6em; text-align: center; background-color:#ffef96; border-radius: 8px; margin-left: 10%; position:absolute; top: 900px; left: 250px; } #orange2{ width: 6em; height: 6em; background-color:#80ced6; border-radius: 8px; text-align: center; margin-left: 10%; position:absolute; top: 300px; left: 575px; } #teal6{ width: 6em; height: 6em; background-color:#ffef96; border-radius: 8px; text-align: center; margin-left: 10%; position:absolute; top: 1300px; left: 250px; } #orange3{ width: 6em; height: 6em; background-color:#80ced6; text-align: center; border-radius: 8px; margin-left: 10%; position:absolute; top: 1300px; left: 0px; } #orange4{ width: 6em; height: 6em; background-color:#80ced6; border-radius: 8px; text-align: center; margin-left: 10%; position:absolute; top: 900px; left: 0px; } #teal9{ width: 6em; height: 6em; border-radius: 8px; background-color:#ffef96; text-align: center; margin-left: 10%; position:absolute; top: 1700px; left: 250px; } #orange5{ width: 6em; text-align: center; height: 6em; background-color:#80ced6; border-radius: 8px; margin-left: 10%; position:absolute; top: 1675px; left: 0px; } #orange6{ width: 6em; height: 6em; text-align: center; background-color:#80ced6; border-radius: 8px; margin-left: 10%; position:absolute; top: 0px; left: 600px; } #orange7{ width: 6em; height: 6em; text-align: center; background-color:#80ced6; border-radius: 8px; margin-left: 10%; position:absolute; top: 0px; left: 900px; } #red1{ width: 6em; height: 3em; background-color:#eea29a; border-radius: 8px; text-align: center; margin-left: 10%; position:absolute; top: 500px; left: 600px; } #red2{ width: 6em; text-align: center; height: 3em; background-color:#eea29a; border-radius: 8px; margin-left: 10%; position:absolute; top: 500px; left: 1200px; } #red3{ width: 6em; height: 2em; text-align: center; background-color:#eea29a; border-radius: 8px; margin-left: 10%; position:absolute; top: 525px; left: 900px; } #red4{ width: 6em; height: 5em; text-align: center; border-radius: 8px; background-color:#eea29a; margin-left: 10%; position:absolute; top: 500px; left: 1500px; } #green1{ width: 6em; height: 5em; text-align: center; background-color:#f4e1d2; border-radius: 8px; margin-left: 10%; position:absolute; top: 400px; left: 1800px; } #green2{ width: 6em; height: 6em; background-color:#f4e1d2; border-radius: 8px; text-align: center; margin-left: 10%; position:absolute; top: 0px; left: 1800px; } #green3{ width: 6em; height: 5em; text-align: center; background-color:#f4e1d2; border-radius: 8px; margin-left: 10%; position:absolute; top: 200px; left: 2100px; } #green4{ width: 6em; height: 6em; text-align: center; background-color:#f4e1d2; border-radius: 8px; margin-left: 10%; position:absolute; top: 600px; left: 2100px; } #green5{ width: 7em; height: 6em; background-color:#f4e1d2; border-radius: 8px; text-align: center; margin-left: 10%; position:absolute; top: 700px; left: 1800px; } #green6{ width: 7em; height: 5em; background-color:#f4e1d2; border-radius: 8px; text-align: center; margin-left: 10%; position:absolute; top: 1000px; left: 1800px; } #purple2{ text-align: center; width: 6em; height: 2em; background-color:#eea29a; margin-left: 10%; border-radius: 8px; position:absolute; top: 800px; left: 1200px; } #purple3{ width: 7em; height: 6em; background-color:#f4e1d2; text-align: center; margin-left: 10%; border-radius: 8px; position:absolute; top: 1200px; left: 1500px; } #purple4{ width: 7em; text-align: center; height: 6em; background-color:#ffef96; border-radius: 8px; margin-left: 10%; position:absolute; top: 100px; left: 1400px; } #purple5{ width: 6em; height: 6em; text-align: center; border-radius: 8px; background-color:#f4e1d2; margin-left: 10%; position:absolute; top: 800px; left: 900px; } #purple6{ width: 7em; height: 6em; text-align: center; background-color:#80ced6; border-radius: 8px; margin-left: 10%; position:absolute; top: 800px; left: 1500px; } #purple7{ width: 7em; height: 3em; background-color:plum; border-radius: 8px; margin-left: 10%; text-align: center; position:absolute; top: 800px; left: 600px; } #purple8{ width: 7em; height: 6em; background-color:#80ced6; border-radius: 8px; margin-left: 10%; text-align: center; position:absolute; top: 1100px; left: 600px; } #purple9{ width: 7em; height: 6em; background-color:#80ced6; border-radius: 8px; margin-left: 10%; text-align: center; position:absolute; top: 1100px; left: 900px; } #purple10{ width: 7em; height: 6em; background-color:#f4e1d2; border-radius: 8px; margin-left: 10%; text-align: center; position:absolute; top: 1100px; left: 1200px; } #purple11{ width: 7em; height: 6em; background-color:#80ced6; border-radius: 8px; margin-left: 10%; text-align: center; position:absolute; top: 1400px; left: 1200px; } #teal12{ width: 7em; height: 2em; background-color:#80ced6; border-radius: 8px; margin-left: 10%; text-align: center; position:absolute; top: 0px; left: 0px; } #teal13{ width: 7em; height: 3em; background-color:#f4e1d2; border-radius: 8px; margin-left: 10%; text-align: center; position:absolute; top: 40px; left: 0px; } #teal14{ width: 7em; height: 3em; background-color:#ffef96; border-radius: 8px; margin-left: 10%; text-align: center; position:absolute; top: 100px; left: 0px; } #teal15{ width: 7em; height: 3em; background-color:plum; border-radius: 8px; margin-left: 10%; text-align: center; position:absolute; top: 160px; left: 0px; } #teal16{ width: 7em; height: 3em; background-color:#eea29a; border-radius: 8px; margin-left: 10%; text-align: center; position:absolute; top: 220px; left: 0px; } #demo{ width: 7em; height: 6em; opacity: 0.5; background-color:pink; border-radius: 8px; margin-left: 10%; text-align: center; position:absolute; top: 500; left: 0; } figure { width:200px; border:5px ridge grey; position:relative; } img { width:100%; vertical-align:top; } figcaption { opacity:0; background-color: AntiqueWhite; text-align:center; position:absolute; bottom:0; left:0; right:0; border: black; } figure:hover figcaption { transition:all 1s; opacity:1; } button { display:block; background-color: white; /* Green */ border: 2px solid #4CAF50; color: black; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 20px; border-radius: 8px; transition-duration: 0.4s; } button:hover { background-color: #4CAF50; /* Green */ color: white; }

//helper functions, it turned out chrome doesn't support Math.sgn() function signum(x) { return (x < 0) ? -1 : 1; } function absolute(x) { return (x < 0) ? -x : x; } function drawPath(svg, path, startX, startY, endX, endY) { // get the path's stroke width (if one wanted to be really precize, one could use half the stroke size) var stroke = parseFloat(path.attr("stroke-width")); // check if the svg is big enough to draw the path, if not, set heigh/width if (svg.attr("height") < endY) svg.attr("height", endY); if (svg.attr("width" ) < (startX + stroke) ) svg.attr("width", (startX + stroke)); if (svg.attr("width" ) < (endX + stroke) ) svg.attr("width", (endX + stroke)); var deltaX = (endX - startX) * 0.15; var deltaY = (endY - startY) * 0.15; // for further calculations which ever is the shortest distance var delta = deltaY < absolute(deltaX) ? deltaY : absolute(deltaX); // set sweep-flag (counter/clock-wise) // if start element is closer to the left edge, // draw the first arc counter-clockwise, and the second one clock-wise var arc1 = 0; var arc2 = 1; if (startX > endX) { arc1 = 1; arc2 = 0; } // draw tha pipe-like path // 1. move a bit down, 2. arch, 3. move a bit to the right, 4.arch, 5. move down to the end path.attr("d", "M" + startX + " " + startY + " V" + (startY + delta) + " A" + delta + " " + delta + " 0 0 " + arc1 + " " + (startX + delta*signum(deltaX)) + " " + (startY + 2*delta) + " H" + (endX - delta*signum(deltaX)) + " A" + delta + " " + delta + " 0 0 " + arc2 + " " + endX + " " + (startY + 3*delta) + " V" + endY ); } function connectElements(svg, path, startElem, endElem) { var svgContainer= $("#svgContainer"); // if first element is lower than the second, swap! if(startElem.offset().top > endElem.offset().top){ var temp = startElem; startElem = endElem; endElem = temp; } // get (top, left) corner coordinates of the svg container var svgTop = svgContainer.offset().top; var svgLeft = svgContainer.offset().left; // get (top, left) coordinates for the two elements var startCoord = startElem.offset(); var endCoord = endElem.offset(); // calculate path's start (x,y) coords // we want the x coordinate to visually result in the element's mid point var startX = startCoord.left + 0.5*startElem.outerWidth() - svgLeft; // x = left offset + 0.5*width - svg's left offset var startY = startCoord.top + startElem.outerHeight() - svgTop; // y = top offset + height - svg's top offset // calculate path's end (x,y) coords var endX = endCoord.left + 0.5*endElem.outerWidth() - svgLeft; var endY = endCoord.top - svgTop; // call function for drawing the path drawPath(svg, path, startX, startY, endX, endY); } function connectAll() { // connect all the paths you want! connectElements($("#svg1"), $("#path1"), $("#orange6"), $("#orange2")); connectElements($("#svg1"), $("#path2"), $("#orange4"), $("#teal4")); connectElements($("#svg1"), $("#path3"), $("#teal6"), $("#orange3") ); connectElements($("#svg1"), $("#path4"), $("#orange2"), $("#teal3") ); connectElements($("#svg1"), $("#path5"), $("#orange5"), $("#teal9") ); connectElements($("#svg1"), $("#path6"), $("#orange2"), $("#red1") ); connectElements($("#svg1"), $("#path7"), $("#green5"), $("#green1") ); connectElements($("#svg1"), $("#path8"), $("#purple4"), $("#red2") ); connectElements($("#svg1"), $("#path9"), $("#green1"), $("#green4") ); connectElements($("#svg1"), $("#path10"), $("#green1"), $("#green3") ); connectElements($("#svg1"), $("#path11"), $("#purple2"), $("#red2") ); connectElements($("#svg1"), $("#path12"), $("#purple7"), $("#purple8") ); connectElements($("#svg1"), $("#path13"), $("#purple7"), $("#purple5") ); connectElements($("#svg1"), $("#path14"), $("#teal2"), $("#red1") ); connectElements($("#svg1"), $("#path15"), $("#purple6"), $("#purple3") ); connectElements($("#svg1"), $("#path16"), $("#purple11"), $("#purple10") ); } $(document).ready(function() { // reset svg each time $("#svg1").attr("height", "0"); $("#svg1").attr("width", "0"); connectAll(); }); $(window).resize(function () { // reset svg each time $("#svg1").attr("height", "0"); $("#svg1").attr("width", "0"); connectAll(); }); function myFunction() { document.getElementById("demo").innerHTML = document.getElementById("field1").value; document.getElementById("demo2").innerHTML = document.getElementById("field2").value; }

"Organigramme_Saint_Jean"
Bootstrap 4.1.1 Snippet by alun28827

Related: See More

Questions / Comments:

"Organigramme_Saint_Jean" Bootstrap 4.1.1 Snippet by alun28827

Related: See More

Questions / Comments:

"Organigramme_Saint_Jean"
Bootstrap 4.1.1 Snippet by alun28827