Handy code snippets for front-end development

CODE SNIPPETS:

HIDE LINK FOR VISUAL IMPAIRED OFF SCREEN

<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<style>
.hidden {
position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;
}
</style>	
</head>
<body>
<div class="hidden"><p><a href="http://www.google.com">For the visually impaired, please click this link to launch the search tool</a></p></div>
</body>	
</html>

CENTER DIV

.centerContent{
margin: 0 auto;
display:flex;
justify-content: center;
}
*************ADD EXTERNAL LINK ICON****************

<a href="">
<sup><abbrv title="opens in new window" class="smaller">
<span class="icon-share small">
<<pseudo:before>></<pseudo:before>>
</span>
</abbr>
</sup>
</a>

TABLE list

<ul>
  <li>foo<br>foo</li>
  <li>barbar</li>
  <li>baz</li>
</ul>

ul {
    width: 100%;
    display: table;
    table-layout: fixed; /* optional, for equal spacing */
    border-collapse: collapse;
}
li {
    display: table-cell;
    text-align: center;
    border: 1px solid pink;
    vertical-align: middle;
}

JQUERY Word Swap

//$("#sort label").text($("#sort label").text().replace("Search:", "Filter:"));//replace the default word 'Search' with filter

function replaceNodeText() { 
if (this.nodeType === 3) {
this.nodeValue = this.nodeValue.replace(replaceNodeText.find,
replaceNodeText.replace);
			} else {
				$(this).contents().each(replaceNodeText);
			}
		}
		replaceNodeText.find = "Search";
		replaceNodeText.replace = "Filter";
		$("#sort_filter").contents().each(replaceNodeText);

<h3>center content in div:</h3>
.box{
display: flex;
    flex-direction: column;
    align-items: center;
  }

RESPONSIVE TEXT CSS

body {
  font-size: calc(.7vw + 14px);
  line-height: 1.5;
  font-family: 'Source Serif Pro', serif;
  font-style: normal;
  font-weight: 400;
}

* {
  box-sizing: border-box;
}

.content{
  font-size:100%;
}
.wrapper {
  margin: 0 auto;
  padding: 2em 1em;
  max-width: 45em;
}

h1 {
  font-size: calc(4em - 1rem);
  line-height: 1;
  margin-bottom: 2rem;
}

p {
  margin: 0;
  margin-bottom: 1em;
}

p.pullquote {
  font-size: 1.3em;
  margin-bottom: 1em;
  padding-left: 1.5em;
  border-width: 0px 0px 0px 3px;
  border-style: solid;
  font-weight: 700;
  margin-left: -1.5em;
}

.content .content{
  font-size:66%;
  width:66%;
  background:yellow;
  padding:1em;
}

2 elements on the same line

<div class="wrapSame">
    <div class="memberName"><input name="member_name" label="member name" value="member name" title="member name" size="25"></textarea></div>
    <div class="sameLine"><input id="searchBox" size="25"><input type="image" src="/site-resources/resource-files/img/magnify-22w.png" onsubmit="submit-form();" /></div>
</div>

.sameLine {
padding-right:40px;
    display: inline;
	float:right;
	vertical-align:top;
}
.sameLinetext {
padding-right:40px;
    display: inline;
	float:right;
	width:80%;
	vertical-align:top;
}
.wrapSame{
display:block;
	margin-bottom:20px;
	clear:both;
}

Have Two boxes side by side

.wrapCompany{
	width:100%;
	border-bottom:0px solid #000;
	overflow: hidden; /* add this to contain floated children */
  	margin-bottom:60px;
}
.boxList{
  	width:45%;
	float:left;
	margin-left:2%;

}
 .boxList2{
	margin:0 auto;
	width:45%;
	  float:left;
}

Alternate Table ROW background colour css3 Zebra Stripes

.profileTable{
		width:100%; 
		border-collapse:collapse; 
	}
	.profileTable td{ 
		padding:7px; border:#4e95f4 1px solid;
	}
	/* provide some minimal visual accomodation for IE8 and below */
	.profileTable tr{
		background: #b8d1f3;
	}
	/*  Define the background color for all the ODD background rows  */
	.profileTable tr:nth-child(odd){ 
		background: #b8d1f3;
  font-weight:600;
	}
	/*  Define the background color for all the EVEN background rows  */
	.profileTable tr:nth-child(even){
		background: #dae5f4;
	}

Hide h2 text from render

    nav header {
       position: absolute !important;
        clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
        clip: rect(1px, 1px, 1px, 1px);
        padding:0 !important;
        border:0 !important;
        height: 1px !important; 
        width: 1px !important; 
        overflow: hidden;
}

Prevent Googlebot from indexing web service pages:

User-agent: googlebot
Disallow: /Office/LocationDetails.aspx
Disallow: /office/default.aspx
Disallow: /Electronics/Communitylist.aspx
Disallow: /electronics/locationdetails.aspx
Disallow: /electronics/Communitydetails.aspx
Disallow: /electronics/communitydetails.aspx

Styling hyperlinks in a paragraph contained within a div with a class of sfContentBlock

.sfContentBlock p a, .sfContentBlock p a:link{
  text-decoration:underline;
  color:#0000ff;
}
.sfContentBlock p a:visited,.sfContentBlock p a:hover, .sfContentBlock p a:active{
  text-decoration:none;
}

Tool Tip with CSS used on Page Portal

a.tooltip {outline:none; }
a.tooltip strong {line-height:30px;}
a.tooltip:hover {text-decoration:none;} 
a.tooltip span {
    z-index:10;display:none; padding:14px 20px;
    margin-top:-30px; margin-left:28px;
    width:300px; line-height:16px;
}
a.tooltip:hover span{
    display:inline; position:absolute; color:#111;
    border:1px solid #DCA; background:#fffAF0;}
.callout {z-index:20;position:absolute;top:30px;border:0;left:-12px;}
    
<h3>CSS3 extras</h3>
a.tooltip span
{
    border-radius:4px;
    box-shadow: 5px 5px 8px #CCC;
}
HTML:
<a href="#" title="tool tip" class="tooltip">skills
<span> <img alt="" src="https://crmportalqa.ola.org/images/default-source/default-album/callout.gif" class="callout" />
*Hint These could be academic, volunteer or work done in your community and at home.</span> </a>

CSS Button used on Page Portal

.appButton {
	background-color:#74ad5a;
	-moz-border-radius:28px;
	-webkit-border-radius:28px;
	border-radius:28px;
	border:3px solid #3b6e22;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Trebuchet MS;
	font-size:17px;
	padding:10px 31px;
	text-decoration:none;
	text-shadow:0px 1px 0px #92b879;
}
.appButton:hover {
	background-color:#68a54b;
}
.appButton:active {
	position:relative;
	top:1px;
}
HTML:
<p><a href="/portal-secure-pages/Application" class="appButton">Start Your Application</a></p>

No Page Cache

Put in head tags:

<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="-1">
  

Reader Interactions

Leave a Reply

Your email address will not be published. Required fields are marked *