Advertisement
Guest User

Untitled

a guest
Sep 30th, 2014
220
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 4.99 KB | None | 0 0
  1. <html>
  2. <head>
  3. <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
  4. <style>
  5. .org {
  6. background: /*icon*/;
  7. }
  8. .gru {
  9. background: /*icon*/;
  10. }
  11. .dec {
  12. background: /*icon*/;
  13. }
  14. .orgName, .gruName, .decName {
  15. font-family: "Helvetica Neue",Helvetica,Helvetica,Arial,sans-serif;
  16. color:#000000;
  17. text-shadow: 1px 0 #000000;
  18. letter-spacing:1px;
  19. font-weight: bold !important;
  20. font-size: 14px !important;
  21. vertical-align: middle;
  22. background-color: rgba(244,217,159,0.5);
  23. }
  24.  
  25. .fa {
  26. display: inline-block;
  27. font: normal normal normal 14px/1 FontAwesome;
  28. font-family: FontAwesome;
  29. font-style: normal;
  30. font-variant: normal;
  31. font-weight: normal;
  32. line-height: 1;
  33. font-size: 5em;
  34. text-rendering: auto;
  35. -webkit-font-smoothing: antialiased;
  36. color: #ffffff;
  37. }
  38.  
  39. .fa-institution:before, .fa-bank:before, .fa-university:before {
  40. content: "\f19c";
  41. color: #e2a219;
  42. margin: 0 -156px 0 56px;
  43. z-index: -1000;
  44. padding-left: 10px;
  45. }
  46.  
  47. .fa-group:before, .fa-users:before {
  48. content: "\f0c0";
  49. color: #e2a219;
  50. margin: 0 -111px 0 25px;
  51. z-index: -1000;
  52. padding-left: 4px;
  53. }
  54.  
  55. .fa-check:before {
  56. content: "\f00c";
  57. color: #e2a219;
  58. margin: 0 -110px 0 38px;
  59. z-index: -1000;
  60. }
  61.  
  62. div {
  63. float: left;
  64. }
  65.  
  66. div.in {
  67. padding: 5px 15px 0 15px;
  68. border-right: dotted #330e06 2px;
  69. background: #f4d99f;
  70. }
  71.  
  72. div.in {
  73. padding: 5px 15px 0 15px;
  74. background: #f4d99f;
  75. }
  76.  
  77. span {
  78. margin: 4px 0 7px 0;
  79. padding-right: 10px;
  80. }
  81.  
  82. span.gru {
  83. padding-right: 3px !important;
  84. }
  85.  
  86. div.bread {
  87. background: #f4d99f;
  88. -moz-border-radius: 15px;
  89. -webkit-border-radius: 15px;
  90. border-radius: 15px; /* future proofing */
  91. -moz-border-radius: 15px;
  92. -webkit-border-radius: 15px;
  93. border-radius: 15px; /* future proofing */
  94. }
  95.  
  96. img.brand {
  97. float: left;
  98. margin: 10px 0 5px 10px;
  99. }
  100.  
  101. /*if screen less than 658*/
  102. @media (max-width:657px) {
  103. .fa {
  104. font-size: 1.5em !important;
  105. }
  106. .fa-institution:before, .fa-bank:before, .fa-university:before {
  107. margin: 0 -36px 0 56px;
  108. }
  109. .fa-group:before, .fa-users:before {
  110. margin: 0 -36px 0 25px;
  111. }
  112. .fa-check:before {
  113. margin: 0 -36px 0 38px;
  114. }
  115.  
  116. }
  117.  
  118.  
  119. </style>
  120. <script>
  121. var abbrevNames = "NameA"; //populated by PHP
  122. var abbrevGroup = "NameB"; //populated by PHP
  123. var abbrevDecid = "NameC"; //populated by PHP
  124. var namesOrig = "NameNameNameName";
  125. var groupOrig = "NameNameNameName";
  126. var decidOrig = "NameNameNameName";
  127. console.log(abbrevNames);
  128.  
  129. function bakeTheBread() {
  130.  
  131. //store the breadcrumb string names into vars
  132. var names = document.getElementById("breadNames");
  133. var group = document.getElementById("breadGroup");
  134. var decid = document.getElementById("breadDecid");
  135. console.log(names, group, decid);
  136.  
  137. //store the screen-size into var
  138. console.log(window.innerWidth);
  139. var screen = window.innerWidth;
  140. if (screen < 658) {
  141. names.innerText = abbrevNames;
  142. group.innerText = abbrevGroup;
  143. decid.innerText = abbrevDecid;
  144. } else if (screen > 658) {
  145. names.innerText = namesOrig;
  146. group.innerText = groupOrig;
  147. decid.innerText = decidOrig;
  148. }
  149.  
  150. window.addEventListener('resize', sizeIt);
  151.  
  152. return screen;
  153.  
  154. }
  155.  
  156. function sizeIt() {
  157. var names = document.getElementById("breadNames");
  158. var group = document.getElementById("breadGroup");
  159. var decid = document.getElementById("breadDecid");
  160.  
  161. var nowScreen = bakeTheBread();
  162.  
  163. console.log(nowScreen);
  164. console.log(names.innerText);
  165. console.log(abbrevNames);
  166.  
  167. if (nowScreen < 658) {
  168. names.innerText = abbrevNames;
  169. group.innerText = abbrevGroup;
  170. decid.innerText = abbrevDecid;
  171. }
  172.  
  173. }
  174.  
  175.  
  176.  
  177.  
  178.  
  179.  
  180.  
  181.  
  182.  
  183.  
  184. </script>
  185.  
  186. </head>
  187.  
  188. <body onload="bakeTheBread()" style="background: #5a180a;">
  189. <div class="bread">
  190. <img class="brand" width="30" height="30" src="comingsoon.jpg" />
  191. <div class="in"><span class="org fa fa-university"><font id="breadNames" class="orgName">NamesNamesNamesNamesNames</font></span></div>
  192. <div class="in"><span class="gru fa fa-group"><font id="breadGroup" class="orgName">NamesNamesNames</font></span></div>
  193. <div class="inLast"><span class="dec fa fa-check"><font id="breadDecid" class="orgName">NamesNamesNames</font></span></div>
  194. </div>
  195. </body>
  196. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement