Skip to content

Instantly share code, notes, and snippets.

@Guerino1

Guerino1/index.html

Last active July 13, 2016 12:00
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Guerino1/451f4c47842967dd813c8a64b24f7686 to your computer and use it in GitHub Desktop.
Save Guerino1/451f4c47842967dd813c8a64b24f7686 to your computer and use it in GitHub Desktop.
Download ZIP
D3 polygons for SDLC Infographic
Raw
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en-US"
lang="en-US">
<head profile="http://www.w3.org/2005/10/profile">
<title>IF4IT Sample Charts Web Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="Description" content="This page tries to mix charts with html formatting and layout constructs." />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="-l" />
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?2.4.5"></script>
<script type="text/javascript">
// START
function drawSDLC( selectString )
{
// MOUSE
var chevronMouseOver = function () {
var thisObject = d3.select(this);
var chevronSelectString = '#' + thisObject.attr("id");
var selectedChevron = d3.selectAll(chevronSelectString);
selectedChevron.style("fill", polygonMouseOverColor);
var textboxSelectString = chevronSelectString.replace("chevron_", "textbox_");
var selectedTextbox = d3.selectAll(textboxSelectString);
selectedTextbox.style("fill", textboxMouseOverColor);
};
var chevronMouseOut = function () {
var thisObject = d3.select(this);
var chevronSelectString = '#' + thisObject.attr("id");
var selectedChevron = d3.selectAll(chevronSelectString);
var originalColor = selectedChevron.attr("originalcolor")
selectedChevron.style("fill", originalColor);
var textboxSelectString = chevronSelectString.replace("chevron_", "textbox_");
var selectedTextbox = d3.selectAll(textboxSelectString);
originalColor = selectedTextbox.attr("originalcolor")
selectedTextbox.style("fill", originalColor);
};
var chevronTextMouseOver = function () {
var thisObject = d3.select(this);
var chevronSelectString = '#' + thisObject.attr("poly_id");
var selectedChevron = d3.selectAll(chevronSelectString);
selectedChevron.style("fill", polygonMouseOverColor);
var textboxSelectString = chevronSelectString.replace("chevron_", "textbox_");
var selectedTextbox = d3.selectAll(textboxSelectString);
selectedTextbox.style("fill", textboxMouseOverColor);
};
var chevronTextMouseOut = function () {
var thisObject = d3.select(this);
var chevronSelectString = '#' + thisObject.attr("poly_id");
var selectedChevron = d3.selectAll(chevronSelectString);
var originalColor = selectedChevron.attr("originalcolor")
selectedChevron.style("fill", originalColor);
var textboxSelectString = chevronSelectString.replace("chevron_", "textbox_");
var selectedTextbox = d3.selectAll(textboxSelectString);
originalColor = selectedTextbox.attr("originalcolor")
selectedTextbox.style("fill", originalColor);
};
var textboxMouseOver = function () {
var thisObject = d3.select(this);
var textboxSelectString = '#' + thisObject.attr("id");
var selectedTextbox = d3.selectAll(textboxSelectString);
selectedTextbox.style("fill", textboxMouseOverColor);
var chevronSelectString = textboxSelectString.replace("textbox_", "chevron_");
var selectedChevron = d3.selectAll(chevronSelectString);
selectedChevron.style("fill", polygonMouseOverColor);
};
var textboxMouseOut = function () {
var thisObject = d3.select(this);
var textboxSelectString = '#' + thisObject.attr("id");
var selectedTextbox = d3.selectAll(textboxSelectString);
var originalColor = selectedTextbox.attr("originalcolor")
selectedTextbox.style("fill", originalColor);
var chevronSelectString = textboxSelectString.replace("textbox_", "chevron_");
var selectedChevron = d3.selectAll(chevronSelectString);
originalColor = selectedChevron.attr("originalcolor")
selectedChevron.style("fill", originalColor);
};
var textboxTextMouseOver = function () {
var thisObject = d3.select(this);
var textboxSelectString = '#' + thisObject.attr("textbox_id");
var selectedTextbox = d3.selectAll(textboxSelectString);
selectedTextbox.style("fill", textboxMouseOverColor);
var chevronSelectString = textboxSelectString.replace("textbox_", "chevron_");
var selectedChevron = d3.selectAll(chevronSelectString);
selectedChevron.style("fill", polygonMouseOverColor);
};
var textboxTextMouseOut = function () {
var thisObject = d3.select(this);
var textboxSelectString = '#' + thisObject.attr("textbox_id");
var selectedTextbox = d3.selectAll(textboxSelectString);
var originalColor = selectedTextbox.attr("originalcolor")
selectedTextbox.style("fill", originalColor);
var chevronSelectString = textboxSelectString.replace("textbox_", "chevron_");
var selectedChevron = d3.selectAll(chevronSelectString);
originalColor = selectedChevron.attr("originalcolor")
selectedChevron.style("fill", originalColor);
};
var wrap = function (text, width) {
text.each(function (d, i) {
var text = d3.select(this);
//words = "Foo is not a long word".split(/\s+/).reverse(),
var words = (d.phase + ": " + d.name1 + " (" + d.name2 + ") - " + d.description).split(/\s+/).reverse();
var word;
var line = [];
var lineNumber = 0;
lineHeight = 1.1; // ems
var x = text.attr("x");
var y = text.attr("y");
var dy = 0; //parseFloat(text.attr("dy")),
var tspan = text.text(null)
.append("tspan")
.attr("x", x)
.attr("y", y)
.attr("dy", dy + "em");
while (word = words.pop()) {
line.push(word);
tspan.text(line.join(" "));
if (tspan.node().getComputedTextLength() > width) {
line.pop();
tspan.text(line.join(" "));
line = [word];
tspan = text.append("tspan")
.attr("x", x)
.attr("y", y)
.attr("dy", ++lineNumber * lineHeight + dy + "em")
.html(word);
}
}
});
};
// DATA
var dataSet = [
{"phase": "Phase A", "name1": "Engage IT", "name2": "ENGAGE", "link": "http://nounz.if4it.com/Nouns/SDLC_Activities/Index.SDLC_Activity.SDLC_Phase.Phase_A_Engage.4.html", "description": "This phase covers all activities that need to be performed in order to engage Information Technology (IT) teams for the purpose of delivering anything that must move through the Systems Development Life Cycle (or Lifecycle) (i.e. the SDLC) process."},
{"phase": "Phase B", "name1": "Strategy Development", "name2": "STRAT", "link": "http://nounz.if4it.com/Nouns/SDLC_Activities/Index.SDLC_Activity.SDLC_Phase.Phase_B_Strategy.17.html", "description": "This phase covers key activities associated with developing strategy for any deliverable solutions, such as but not limited to, Systems, Applications, Software, and Hardware, which must all move through the Systems Development Life Cycle (or Lifecycle) (i.e. the SDLC) in order to be delivered."},
{"phase": "Phase C", "name1": "Research and Development", "name2": "R&D", "link": "http://nounz.if4it.com/Nouns/SDLC_Activities/Index.SDLC_Activity.SDLC_Phase.Phase_C_Research_and_Solutions_Options.16.html", "description": "This phase covers key activities associated with performing research, studies and/or evaluations for any deliverable solutions, such as but not limited to, Systems, Applications, Software, and Hardware, which must all move through the Systems Development Life Cycle (or Lifecycle) (i.e. the SDLC) in order to be delivered."},
{"phase": "Phase D", "name1": "Planning", "name2": "PLAN", "link": "http://nounz.if4it.com/Nouns/SDLC_Activities/Index.SDLC_Activity.SDLC_Phase.Phase_D_Planning.13.html", "description": "This phase covers key activities associated with planning work (e.g. Program, Project and Release Planning) for deliverables that move through the SDLC, such as but not limited to, Systems, Applications, Software, and Hardware."},
{"phase": "Phase E", "name1": "Requirements Management", "name2": "REQs", "link": "http://nounz.if4it.com/Nouns/SDLC_Activities/Index.SDLC_Activity.SDLC_Phase.Phase_E_Requirements.14.html", "description": "This phase covers key activities associated with performing Requirements Management work (e.g. collection, prioritization, analysis, etc.) for deliverable solutions that move through the SDLC, such as but not limited to, Systems, Applications, Software, and Hardware."},
{"phase": "Phase F", "name1": "Design", "name2": "DES", "link": "http://nounz.if4it.com/Nouns/SDLC_Activities/Index.SDLC_Activity.SDLC_Phase.Phase_F_Design.52.html", "description": "This phase covers key activities associated with performing Design work for any deliverable solutions, such as but not limited to, Systems, Applications, Software, and Hardware, which must all move through the Systems Development Life Cycle (or Lifecycle) (i.e. the SDLC) in order to be delivered."},
{"phase": "Phase G", "name1": "Work Space Development", "name2": "WS", "link": "http://nounz.if4it.com/Nouns/SDLC_Activities/Index.SDLC_Activity.SDLC_Phase.Phase_G_Procure_and_Build_in_Workspaces.21.html", "description": "This phase covers key activities associated with performing Procurement and/or Building work (e.g. Purchasing, Hardware Construction and Software Coding) in Federated Workspace (WS) Environments for deliverables that move through the SDLC, such as but not limited to, Systems, Applications, Software, and Hardware."},
{"phase": "Phase H", "name1": "Common Build", "name2": "BUILD", "link": "http://nounz.if4it.com/Nouns/SDLC_Activities/Index.SDLC_Activity.SDLC_Phase.Phase_H_Common_Build_or_Centralized_Build.35.html", "description": "This phase covers key activities associated with performing Common Build or Centralized Build (BUILD) Environment work for any deliverable solutions, such as but not limited to, Systems, Applications, Software, and Hardware, which must all move through the Systems Development Life Cycle (or Lifecycle) (i.e. the SDLC) in order to be delivered."},
{"phase": "Phase I", "name1": "Integration Testing", "name2": "INTEG", "link": "http://nounz.if4it.com/Nouns/SDLC_Activities/Index.SDLC_Activity.SDLC_Phase.Phase_I_Systems_Integration_Testing.35.html", "description": "This phase covers key activities associated with performing Systems Integration Testing (SIT) work (a.k.a. Integration Testing (INTEG) work) for deliverables that move through the SDLC, such as but not limited to, Systems, Applications, Software, and Hardware."},
{"phase": "Phase J", "name1": "User Acceptance Testing", "name2": "UAT", "link": "http://nounz.if4it.com/Nouns/SDLC_Activities/Index.SDLC_Activity.SDLC_Phase.Phase_J_User_Acceptance_Testing.35.html", "description": "This phase covers key activities associated with performing User Acceptance Testing (UAT) Environment work for any deliverable solutions, such as but not limited to, Systems, Applications, Software, and Hardware, which must all move through the Systems Development Life Cycle (or Lifecycle) (i.e. the SDLC) in order to be delivered."},
{"phase": "Phase K", "name1": "Education and Training", "name2": "EDU", "link": "http://nounz.if4it.com/Nouns/SDLC_Activities/Index.SDLC_Activity.SDLC_Phase.Phase_K_Training_and_Education.35.html", "description": "This phase covers key activities associated with performing Training and Education (TRAIN/EDU) Environment work for any deliverable solutions, such as but not limited to, Systems, Applications, Software, and Hardware, which must all move through the Systems Development Life Cycle (or Lifecycle) (i.e. the SDLC) in order to be delivered."},
{"phase": "Phase L", "name1": "Product Release", "name2": "PROD", "link": "http://nounz.if4it.com/Nouns/SDLC_Activities/Index.SDLC_Activity.SDLC_Phase.Phase_L_Production.35.html", "description": "This phase covers key activities associated with performing Production (PROD) Environment work for any deliverable solutions, such as but not limited to, Systems, Applications, Software, and Hardware, which must all move through the Systems Development Life Cycle (or Lifecycle) (i.e. the SDLC) in order to be delivered."},
{"phase": "Phase M", "name1": "Disaster Recovery Release", "name2": "DR", "link": "http://nounz.if4it.com/Nouns/SDLC_Activities/Index.SDLC_Activity.SDLC_Phase.Phase_M_Disaster_Recovery.34.html", "description": "This phase covers key activities associated with performing Disaster Recovery (DR) or Business Continuity work for any deliverable solutions, such as but not limited to, Systems, Applications, Software, and Hardware, which must all move through the Systems Development Life Cycle (or Lifecycle) (i.e. the SDLC) in order to be delivered."},
{"phase": "Phase N", "name1": "Closing and Post Mortem", "name2": "CLOSE", "link": "http://nounz.if4it.com/Nouns/SDLC_Activities/Index.SDLC_Activity.SDLC_Phase.Phase_N_Closing_and_Post_Mortem.7.html", "description": "This phase covers key activities associated with the ending of a Project or Release for any deliverable solutions, such as but not limited to, Systems, Applications, Software, and Hardware, which must all move through the Systems Development Life Cycle (or Lifecycle) (i.e. the SDLC) in order to be delivered."}
];
// VARIABLES
var polygonPrimaryColor = "MidnightBlue";
var polygonMouseOverColor = "#96ACEE";
var textboxMouseOverColor = "#B3C3F3"; // A few shades lighter
var textboxColor = "#F6F8FE"; // A few shades even lighter
var svgMargin = 5;
var chevronWidth = 90;
var chevronTopOffset = 10;
var chevronGapSpace = -5;
var chevronDistance = chevronGapSpace + chevronWidth;
var chevronPointYOffset = 20;
var slantDepth = 10;
var chevronHeight = chevronPointYOffset*2;
var textboxHeight = chevronHeight;
var textboxVerticalSpace = 3;
var textboxVerticalOffset = 2*chevronTopOffset + chevronHeight;
var textboxesOriginOffset = textboxVerticalSpace;
var svgWidth = (2 * svgMargin) + (dataSet.length * chevronWidth) - ((dataSet.length * slantDepth/2) - slantDepth);
var svgChevronHeight = (2 * chevronTopOffset) + chevronHeight;
var svgTextboxesHeight = (textboxVerticalSpace + textboxHeight) * dataSet.length + textboxVerticalSpace;
var chevronTop = chevronTopOffset;
var chevronPointY = chevronTopOffset + chevronPointYOffset;
var chevronBottom = chevronTopOffset + 2*chevronPointYOffset;
// FUNCTION
function chevronOrigin(d, i){
return [
[0,chevronTop],
[0,chevronTop],
[0,chevronPointY],
[0,chevronBottom],
[0,chevronBottom],
[0,chevronPointY]
];
};
function calculateChevron(d, i){
return [
[(svgMargin) + i*(chevronDistance),chevronTopOffset],
[(svgMargin + chevronWidth - slantDepth) + i*(chevronDistance),chevronTop],
[(svgMargin + chevronWidth) + i*(chevronDistance),chevronPointY],
[(svgMargin + chevronWidth - slantDepth) + i*(chevronDistance),chevronBottom],
[(svgMargin) + i*(chevronDistance),chevronBottom],
[(svgMargin + slantDepth) + i*(chevronDistance),chevronPointY]
];
};
function textboxesOrigin(d, i){
dataSet.forEach( function (d,i)
{
return [
[0, textboxesOriginOffset + (i * (textboxHeight + textboxVerticalSpace))],
[0, textboxesOriginOffset + (i * (textboxHeight + textboxVerticalSpace))],
[0, (textboxesOriginOffset + (i * (textboxHeight + textboxVerticalSpace))) + textboxHeight],
[0, (textboxesOriginOffset + (i * (textboxHeight + textboxVerticalSpace))) + textboxHeight]
];
}
);
};
function calculateTextbox(d, i){
return [
[svgMargin, textboxesOriginOffset + (i * (textboxHeight + textboxVerticalSpace))],
[svgWidth - 10, textboxesOriginOffset + (i * (textboxHeight + textboxVerticalSpace))],
[svgWidth - 10, (textboxesOriginOffset + (i * (textboxHeight + textboxVerticalSpace))) + textboxHeight],
[svgMargin, (textboxesOriginOffset + (i * (textboxHeight + textboxVerticalSpace))) + textboxHeight]
];
};
var svgChevronsDiv = d3.select(selectString).append("div")
.attr("id","if4it_chevrons");
var svgChevronsCanvas = svgChevronsDiv.append("svg")
.attr("width", svgWidth)
.attr("height", svgChevronHeight);
// Simply to help with debugging the svg canvas.
//svgChevronsCanvas.append("rect")
//.attr("width", "100%")
//.attr("height", "100%")
//.attr("fill", "GreenYellow");
// Create Polygons for SDLC
svgChevronsCanvas.selectAll("a")
.data(dataSet)
.enter().append("a")
.attr("xlink:href", function(d) { return d.link; })
.append("svg:polygon")
.attr("id", function(d,i){ return ("chevron_" + selectString.replace(/ /g,'_').replace(/#/g,'') + "_index_" + i); })
.attr("originalcolor", polygonPrimaryColor)
//.style("stroke","blue")
//.style("stroke-width",1)
.style("fill", polygonPrimaryColor)
.attr("points", chevronOrigin)
.on('mouseover', chevronMouseOver)
.on("mouseout", chevronMouseOut)
.on("click", chevronMouseOut)
.transition()
.duration(3000)
.attr("points", calculateChevron);
// Create Phase text elements
svgChevronsCanvas.selectAll("g")
.data(dataSet)
.enter().append("svg:g")
.attr("poly_id", function(d,i){ return ("chevron_" + selectString.replace(/ /g,'_').replace(/#/g,'') + "_index_" + i); })
.on('mouseover', chevronTextMouseOver)
.on("mouseout", chevronTextMouseOut)
.append("a")
.attr("xlink:href", function(d) { return d.link; })
.append("text")
.attr("poly_id", function(d,i){ return ("chevron_" + selectString.replace(/ /g,'_').replace(/#/g,'') + "_index_" + i); })
.attr("x", 0)
.attr("y", function(){ return (chevronTopOffset + chevronPointYOffset); })
.attr("dx", function(d) { return -1 * chevronGapSpace; })
.attr("dy", -2)
.attr("text-anchor", "middle") // text-align: start|middle|end|inherit
.style("font-family","Verdana")
.style("font-size","1.2em")
.style("font-weight","bold")// normal|bold|bolder|lighter|100|200|...|700|800|900|inherit
.text(function(d) { return d.phase + ":";})
.attr("fill", "White")
.on('mouseover', chevronTextMouseOver)
.on("mouseout", chevronTextMouseOut)
.on("click", chevronTextMouseOut)
.transition()
.duration(3000)
.attr("x", function(d,i){ return ((svgMargin + chevronDistance/2) + i*(chevronDistance)); });
// Create short name (name2) text elements
svgChevronsCanvas.selectAll("g")
.data(dataSet)
.append("g") // No need to enter, again and "svg" is already declared in previous section
.attr("poly_id", function(d,i){ return ("chevron_" + selectString.replace(/ /g,'_').replace(/#/g,'') + "_index_" + i); })
.on('mouseover', chevronTextMouseOver)
.on("mouseout", chevronTextMouseOut)
.on("click", chevronTextMouseOut)
.append("a")
.attr("xlink:href", function(d) { return d.link; })
.append("text")
.attr("poly_id", function(d,i){ return ("chevron_" + selectString.replace(/ /g,'_').replace(/#/g,'') + "_index_" + i); })
.attr("x", 0)
.attr("y", function(){ return (chevronTopOffset + chevronPointYOffset); })
.attr("dx", function(d) { return -1 * chevronGapSpace; })
.attr("dy", 11)
.attr("text-anchor", "middle") // text-align: start|middle|end|inherit
.style("font-family","Verdana")
.style("font-size","1.2em")
.style("font-weight","bold") // normal|bold|bolder|lighter|100|200|...|700|800|900|inherit
.text(function(d) { return d.name2;})
.attr("fill", "White")
.on('mouseover', chevronTextMouseOver)
.on("mouseout", chevronTextMouseOut)
.on("click", chevronTextMouseOut)
.transition()
.duration(3000)
.attr("x", function(d,i){ return ((svgMargin + chevronDistance/2) + i*(chevronDistance)); });
// Start textboxes
var svgTextboxesDiv = d3.select(selectString).append("div")
.attr("id","if4it_textboxes");
var svgTextboxesCanvas = svgTextboxesDiv.append("svg")
.attr("width", svgWidth)
.attr("height", svgTextboxesHeight);
// Simply to help with debugging the svg canvas.
//svgTextboxesCanvas.append("rect")
//.attr("width", "100%")
//.attr("height", "100%")
//.attr("fill", "gold");
// Create Polygons for SDLC
svgTextboxesCanvas.selectAll("a")
.data(dataSet)
.enter().append("a")
.attr("xlink:href", function(d) { return d.link; })
.append("svg:polygon")
.attr("id", function(d,i){ return ("textbox_" + selectString.replace(/ /g,'_').replace(/#/g,'') + "_index_" + i); })
.attr("originalcolor", textboxColor)
.style("stroke", textboxColor)
.style("stroke-width",1)
.style("fill", textboxColor)
.attr("points", textboxesOrigin)
.on('mouseover', textboxMouseOver)
.on("mouseout", textboxMouseOut)
.on("click", textboxMouseOut)
.transition()
.duration(3000)
.attr("points", calculateTextbox);
// Create textbox text elements
svgTextboxesCanvas.selectAll("g")
.data(dataSet)
.enter().append("svg:g")
.attr("textbox_id", function(d,i){ return ("textbox_" + selectString.replace(/ /g,'_').replace(/#/g,'') + "_index_" + i); })
.append("a")
.attr("xlink:href", function(d) { return d.link; })
.append("text")
.attr("textbox_id", function(d,i){ return ("textbox_" + selectString.replace(/ /g,'_').replace(/#/g,'') + "_index_" + i); })
.attr("x", svgMargin + 10)
//.attr("x", -100)
.attr("y", function(d,i){ return ((textboxesOriginOffset + 20 + (i * (textboxHeight + textboxVerticalSpace)))); })
.attr("dx", 0)
.attr("dy", -2)
.attr("text-anchor", "start") // text-align: start|middle|end|inherit
.style("font-family","Verdana")
.style("font-size","1.2em")
.style("font-weight","normal")// normal|bold|bolder|lighter|100|200|...|700|800|900|inherit
//.text(function(d) { return (d.phase + ": " + d.name1 + " (" + d.name2 + ") - " + d.description); })
.attr("fill", "Black")
.on('mouseover', textboxTextMouseOver)
.on("mouseout", textboxTextMouseOut)
.on("click", textboxTextMouseOut)
.call(wrap, (svgWidth - 6*svgMargin))
.transition()
.duration(3000)
.attr("x", (svgMargin + 10));
};
// END
</script>
<style type="text/css">
svg {
font: 10px sans-serif;
display: block;
}
</style>
<STYLE type="text/css">
/* unvisited link */
a:link {
color: "blue";
text-decoration: none;
}
/* visited link */
a:visited {
color: "darkblue";
text-decoration: none;
}
/* mouse over link */
a:hover {
color: "maroon";
text-decoration: none;
}
/* selected link */
a:active {
color: "maroon";
text-decoration: none;
}
div.div_Header {
width: 100%;
border:2px solid White;
border-radius:7px;
background: WhiteSmoke;
font: bold 14px Arial;
font-family:Arial, Helvetica, sans-serif;
color:WhiteSmoke;
text-align:center;
}
h1.h1_BodyHeader {
text-align:center;
font: bold 1.5em Arial;
}
h2.h2_LeftMenuHeader {
text-align:center;
font: bold 1.2em Arial;
}
h3.h3_Body {
text-align:center;
}
p.p_Red {
color:Red;
}
table.table_Header {
width: 100%;
text-align:center;
}
td.td_HeaderLeft {
text-align:left;
}
td.td_HeaderRight {
text-align:right;
}
div.div_Menu {
width: 100%;
border:2px solid White;
border-radius:7px;
background: MidnightBlue;
font: bold 14px Arial;
font-family:Arial, Helvetica, sans-serif;
color:White;
text-align:center;
}
p.p_Left {
font-family:Arial, Helvetica, sans-serif;
color:Black;
text-align:left;
padding-left: 5px;
font: normal 14px Arial;
}
table.table_Body {
width: 100%;
height: 100%;
padding: 0;
}
td.td_BodyLeft {
width: 250px;
height: 100%;
padding: 0;
}
td.td_BodyRight {
vertical-align: top;
}
li.li_LeftMenu {
text-align:left;
font: normal 14px Arial;
}
a.a_LeftMenuNoUnderLine {
text-decoration: none;
}
div.div_Body {
height: 100%;
width: 100%;
position: relative;
border:2px solid White;
border-radius:7px;
background: WhiteSmoke;
font: bold 14px Arial;
font-family:Arial, Helvetica, sans-serif;
color:Black;
text-align:center;
}
div.div_Footer {
width: 100%;
border:2px solid White;
border-radius:7px;
background: MidnightBlue;
font: bold 14px Arial;
font-family:Arial, Helvetica, sans-serif;
color:White;
text-align:center;
}
p.p_if4itMessage {
width: 100%;
background: White;
font: bold .75em Arial;
font-family:Arial, Helvetica, sans-serif;
color:GoldenRod;
text-align:center;
}
.menuButton{
background-color: MidnightBlue;
}
.menuButton li{
height: 100%;
list-style: none;
display: inline;
}
.menuButton li a{
height: 100%;
padding: 3px 0.5em;
text-decoration: none;
color: White;
background-color: MidnightBlue;
border: 2px solid MidnightBlue;
}
.menuButton li a:hover{
height: 100%;
color: MidnightBlue;
background-color: White;
border-style: outset;
background-color: White;
}
.menuButton li a:active{
height: 100%;
border-style: inset;
color: MidnightBlue;
background-color: White;
}
.menuButton li a.disabled{
height: 100%;
padding: 3px 0.5em;
text-decoration: none;
color: MidnightBlue;
background-color: White;
border: 2px solid MidnightBlue;
border-style: inset;
border-color: White;
}
</STYLE>
<STYLE type="text/css">
div.div_RootBody {
position: relative;
border:2px solid White;
border-radius:7px;
background: WhiteSmoke;
font: normal 14px Arial;
font-family:Arial, Helvetica, sans-serif;
color:Black;
padding: 0px 1em;
text-align:left;
}
</STYLE>
<!--[if gt IE 7]>
<style>body { overflow-y:scroll; } </style>
<![endif]-->
</head>
<body>
<div>
<h1 style="text-align:center; font: bold 1.7em Arial;"><a href="http://www.if4it.com">The International Foundation for Information Technology (IF4IT)</a></h1>
</div>
<div class="div_Menu">
<ul class="menuButton">
<li><a href="http://www.if4it.com">HOME</a></li>
<li><a href="http://www.if4it.com/resources.html">RESOURCES</a></li>
<li><a href="http://www.if4it.com">PRODUCTS</a></li>
<li><a href="http://www.if4it.com">SERVICES</a></li>
<li><a href="http://www.if4it.com">SUPPORT</a></li>
<li><a href="http://www.if4it.com">HELP</a></li>
</ul>
</div>
<table class="table_Body">
<tr>
<td class="td_BodyLeft">
<div class="div_Body">
<h2 class="h2_LeftMenuHeader">Sample Left Menu Links</h2>
<ul>
<li class="li_LeftMenu"><a class="a_LeftMenuNoUnderLine" href="http://www.if4it.com">IF4IT Home</a></li>
<li class="li_LeftMenu"><a class="a_LeftMenuNoUnderLine" href="http://www.if4it.com/disciplines.html">IF4IT Disciplines</a></li>
<li class="li_LeftMenu"><a class="a_LeftMenuNoUnderLine" href="http://www.if4it.com/glossary.html">IF4IT Glossary</a></li>
<li class="li_LeftMenu"><a class="a_LeftMenuNoUnderLine" href="http://www.if4it.com/taxonomy.html">IF4IT Taxonomies</a></li>
</ul>
<p class="p_Left">This is dummy paragraph 1 text that would go in this section of the page.</p>
<p class="p_Left">This is dummy paragraph 2 text that would go in this section of the page.</p>
<p class="p_Left">This is dummy paragraph 3 text that would go in this section of the page.</p>
<p class="p_Left">This is dummy paragraph 4 text that would go in this section of the page.</p>
<p class="p_Left">This is dummy paragraph 5 text that would go in this section of the page.</p>
<ul>
<li class="li_LeftMenu"><a class="a_LeftMenuNoUnderLine" href="http://www.if4it.com">IF4IT Home</a></li>
<li class="li_LeftMenu"><a class="a_LeftMenuNoUnderLine" href="http://www.if4it.com/disciplines.html">IF4IT Disciplines</a></li>
<li class="li_LeftMenu"><a class="a_LeftMenuNoUnderLine" href="http://www.if4it.com/glossary.html">IF4IT Glossary</a></li>
<li class="li_LeftMenu"><a class="a_LeftMenuNoUnderLine" href="http://www.if4it.com/taxonomy.html">IF4IT Taxonomies</a></li>
</ul>
<p class="p_Left">This is dummy paragraph 1 text that would go in this section of the page.</p>
<p class="p_Left">This is dummy paragraph 2 text that would go in this section of the page.</p>
<p class="p_Left">This is dummy paragraph 3 text that would go in this section of the page.</p>
<p class="p_Left">This is dummy paragraph 4 text that would go in this section of the page.</p>
<p class="p_Left">This is dummy paragraph 5 text that would go in this section of the page.</p>
</div>
</td>
<td class="td_BodyRight">
<div class="div_RootBody">
<h1 style="text-align:center; font: bold 1.5em Arial;">D3 based Chevrons using Polygon for SDLC Phases</h1>
</div>
<div class="div_RootBody" id="root_div">
<div id="body_top"></div>
</div>
</td>
</tr>
</table>
<div class="div_Footer"><p><p>This is the IF4IT Footer Message for this web page.</p></p></div>
<div><p class="p_if4itMessage">This Site Has Been Created and Published by The International Foundation for Information Technology (IF4IT).</p></div>
<script type="text/javascript">
drawSDLC("#body_top");
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment