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">
Leave a Reply