Tag: html

Adding CSS To Header

I am currently working on a website that sources in a header and footer — not an uncommon thing to do as this ensures a consistent look across the site. The lead-in code starts head, closes head, starts body, and defines the common page elements (nav bar, etc). The footer then defines some more common page elements and closes body. This approach creates a problem when you want to add CSS. Now you could use style tags within the HTML, but I would rather not have the same style definition twenty times. Yeah, I’d make a single variable out of it and print the style-definition-variable twenty times … but I’d rather have my CSS sourced in from a style-sheet file.

Since I’m already using jQuery to dynamically append elements — add table rows as data is pulled back from the server — I wondered if you could append something to the header. Yes, you can!

/**
* This function appends a CSS file to the document head
*
* @param {string} strFileName Path to CSS file
* @return n/a
*
* @example
*
* loadCSSStylesheetToHead('/path/to/file.css')
*/
function loadCSSStylesheetToHead(strFileName){
var file = document.createElement("link");
file.setAttribute("rel", "stylesheet");
file.setAttribute("type", "text/css");
file.setAttribute("href", strFileName);
document.head.appendChild(file);
}

This allows me to after-the-fact add css from a style-sheet file into the document head.

Displaying An Image Tooltip

JQuery developers seem to have put a lot of effort into filtering HTML components out of tooltips … which, as someone who visits a website … is A Good Thing. But what’s a good security consideration can be a massive pain when building a website. I have a form which takes an internal ID number, and I have an image showing people how to find that internal ID number. I want a little question mark after the field name that pops up the image as a tooltip on mouseover events. And clears the image on mouseout.

JavaScript:

// Show finding equipment ID image "tooltip" 
$('#ShowEquipmentIDTip').hover(
	function(){
        	$('#FindingEID').css({ "display": "block" });
    	}
	,function(){
        	$('#FindingEID').css({ "display": "none" });
    	}
);
HTML:
<div class="col-md-2 col-sm-2 col-lg-2 col-xs-2 text-left">
	<span><strong>Equipment ID(s): <a id="ShowEquipmentIDTip" href="#">(?)</a></strong></span>
	<div id="FindingEID" style="position: relative;top: 20;left: 60;width: 100%;height: 100%;z-index:99;display:none"><img src="/groomsGenerateCircuitReport/images/Tip-FindingEquipmentID.png" /></div>
</div>

Moving your mouse over the ShowEquipmentIDTip a element displays the div which contains my image “tooltip” and moving the mouse away sets the display back to none.

Inspecting An Element

In Firefox’s developer tools — instead of attempting to navigate through the HTML code to find the element, just right-click on it and select “Inspect Element”

You’ll get dropped into the Inspector tab right where you need to be.

There’s also an element picker tool that you can use instead — click on it & then click on the element within the page. Same result.

HTML Opacity v/s Alpha

I am building a page that allows employees to search for public MS Teams groups — for some reason, Teams uses a ‘starts with’ search, and our staff rarely manages to find the public Teams that are out there. I wanted the list of teams and descriptions to have a visible line separation, and a table border looked bad with the enterprise color scheme. I decided to use even/odd table rows to display a slightly lighter background color. I set an opacity on the background so the actual background image is still visible.

My font colors changed! The opacity applied to the text as well.

tr:nth-child(even) {background-color: rgb(52,52,52); opacity: 0.5;}

Instead of setting an opacity on the row, I added an alpha channel to the row background color without impacting the text within table cells.

tr:nth-child(even) {background-color: rgba(52,52,52,0.5);}