Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <html>
- <head>
- <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
- <style>
- .org {
- background: /*icon*/;
- }
- .gru {
- background: /*icon*/;
- }
- .dec {
- background: /*icon*/;
- }
- .orgName, .gruName, .decName {
- font-family: "Helvetica Neue",Helvetica,Helvetica,Arial,sans-serif;
- color:#000000;
- text-shadow: 1px 0 #000000;
- letter-spacing:1px;
- font-weight: bold !important;
- font-size: 14px !important;
- vertical-align: middle;
- background-color: rgba(244,217,159,0.5);
- }
- .fa {
- display: inline-block;
- font: normal normal normal 14px/1 FontAwesome;
- font-family: FontAwesome;
- font-style: normal;
- font-variant: normal;
- font-weight: normal;
- line-height: 1;
- font-size: 5em;
- text-rendering: auto;
- -webkit-font-smoothing: antialiased;
- color: #ffffff;
- }
- .fa-institution:before, .fa-bank:before, .fa-university:before {
- content: "\f19c";
- color: #e2a219;
- margin: 0 -156px 0 56px;
- z-index: -1000;
- padding-left: 10px;
- }
- .fa-group:before, .fa-users:before {
- content: "\f0c0";
- color: #e2a219;
- margin: 0 -111px 0 25px;
- z-index: -1000;
- padding-left: 4px;
- }
- .fa-check:before {
- content: "\f00c";
- color: #e2a219;
- margin: 0 -110px 0 38px;
- z-index: -1000;
- }
- div {
- float: left;
- }
- div.in {
- padding: 5px 15px 0 15px;
- border-right: dotted #330e06 2px;
- background: #f4d99f;
- }
- div.in {
- padding: 5px 15px 0 15px;
- background: #f4d99f;
- }
- span {
- margin: 4px 0 7px 0;
- padding-right: 10px;
- }
- span.gru {
- padding-right: 3px !important;
- }
- div.bread {
- background: #f4d99f;
- -moz-border-radius: 15px;
- -webkit-border-radius: 15px;
- border-radius: 15px; /* future proofing */
- -moz-border-radius: 15px;
- -webkit-border-radius: 15px;
- border-radius: 15px; /* future proofing */
- }
- img.brand {
- float: left;
- margin: 10px 0 5px 10px;
- }
- /*if screen less than 658*/
- @media (max-width:657px) {
- .fa {
- font-size: 1.5em !important;
- }
- .fa-institution:before, .fa-bank:before, .fa-university:before {
- margin: 0 -36px 0 56px;
- }
- .fa-group:before, .fa-users:before {
- margin: 0 -36px 0 25px;
- }
- .fa-check:before {
- margin: 0 -36px 0 38px;
- }
- }
- </style>
- <script>
- var abbrevNames = "NameA"; //populated by PHP
- var abbrevGroup = "NameB"; //populated by PHP
- var abbrevDecid = "NameC"; //populated by PHP
- var namesOrig = "NameNameNameName";
- var groupOrig = "NameNameNameName";
- var decidOrig = "NameNameNameName";
- console.log(abbrevNames);
- function bakeTheBread() {
- //store the breadcrumb string names into vars
- var names = document.getElementById("breadNames");
- var group = document.getElementById("breadGroup");
- var decid = document.getElementById("breadDecid");
- console.log(names, group, decid);
- //store the screen-size into var
- console.log(window.innerWidth);
- var screen = window.innerWidth;
- if (screen < 658) {
- names.innerText = abbrevNames;
- group.innerText = abbrevGroup;
- decid.innerText = abbrevDecid;
- } else if (screen > 658) {
- names.innerText = namesOrig;
- group.innerText = groupOrig;
- decid.innerText = decidOrig;
- }
- window.addEventListener('resize', sizeIt);
- return screen;
- }
- function sizeIt() {
- var names = document.getElementById("breadNames");
- var group = document.getElementById("breadGroup");
- var decid = document.getElementById("breadDecid");
- var nowScreen = bakeTheBread();
- console.log(nowScreen);
- console.log(names.innerText);
- console.log(abbrevNames);
- if (nowScreen < 658) {
- names.innerText = abbrevNames;
- group.innerText = abbrevGroup;
- decid.innerText = abbrevDecid;
- }
- }
- </script>
- </head>
- <body onload="bakeTheBread()" style="background: #5a180a;">
- <div class="bread">
- <img class="brand" width="30" height="30" src="comingsoon.jpg" />
- <div class="in"><span class="org fa fa-university"><font id="breadNames" class="orgName">NamesNamesNamesNamesNames</font></span></div>
- <div class="in"><span class="gru fa fa-group"><font id="breadGroup" class="orgName">NamesNamesNames</font></span></div>
- <div class="inLast"><span class="dec fa fa-check"><font id="breadDecid" class="orgName">NamesNamesNames</font></span></div>
- </div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement