Sluggo Beat XP - WIP - Sluggo North Star: The Home of Logotypes - Part 1

UPDATE (2016-02-09)
The Sluggo North Star is finished, and the codes below are changed. I'll rewrite this bloggpost and put the new codelines in.

---------- Old post -------------

Time to build the home of the logtype Sluggo North Star.

I thought I had the perfect solution, but when I started to work with the code it didn't work out.

The biggest challenge is to scale the logotype proportional when the #Header changes. I don't want the user to figure out were to change things or how much to make it look nice in all browsers - the function should do the heavy work.



My spec looks like this:

1. The logotype must be scaleable without any input from the user. 
2. The ability to choose Source- and Target-tags.
3. There should be, at least, three basic horizontal alignment - right, left and center. 
4. The ability to use padding. 
5. Sluggo North Star must work independently and integrated with Sluggo Family 

Basic code:

HTML

<div id="Logotype">
<div id="Logotype_Container">
<img id="LogoImg" src="http://steffo.info/css/portfolio-logotype.png">
</div>
</div>

Script

function SluggoNorthStar()
{
var Logotype_H = $("#Logotype").height();
var Logotype_W = $("#Logotype").width();
var LogoUrlSrc = $("#LogoImg").attr("src");

var LoadingImg = new Image();
LoadingImg.onload = function() {
var LogotypeImg_H = this.height;
var LogotypeImg_W = this.width;
var Perc_H =  (Logotype_H-LogotypeImg_H)/LogotypeImg_H;
var Width_Diff = Perc_H*LogotypeImg_W;
var New_Width = LogotypeImg_W+Width_Diff;
$("#LogoImg").css("height",Logotype_H).css("width",New_Width);
}
LoadingImg.src = LogoUrlSrc;
}

The old solution nearly worked. The part that was missing was the ability to adjust the size exactly as I wanted (or as the user wants). I needed to rethink. It became a small journey into Math 101...

Walkthrough

var Logotype_H = $("#Logotype").height();

The first line picks up the height of the logotype container #Logotype. Why? Because the script need to wait until the image has loaded to have access to the width and height data. This has not happen yet.

The lack of non-loaded image, the .height(); will only generate a value of 0 (zero) and cannot be used in this case. The fundamental idea is that the logotype image scales when the user alters the height. I need a reference to start with if I want to change it..

var LoadingImg = new Image();

To get proper information from the image I need to get it loaded. new Image(); creates a new image to pull information from. More about this technique: TechRepublic: Preloading and the JavaScript Image() object.

LoadingImg.src = $("#LogoImg").attr("src");

This gets the source attribute from the image with id-tag LogoImg. The information that I want to use is the image height.

LoadingImg.onload = function() {

When the new image is loaded, it will run the function.

var LogotypeImg_H = this.height;
var LogotypeImg_W = this.width;

Two variables is created. They contains the width and height of the new image, that will the base unit when to get the difference between the first logotype in the HTML, <img id="LogoImg" src="http://steffo.info/css/portfolio-logotype.png">,but also be used when the new logotype will be build, based on #Logotype height.

var Perc_H =  (Logotype_H-LogotypeImg_H)/LogotypeImg_H;

Time to do some math. The variable generates the difference in height between the first logotype in HTML and #Logotype and returns the result in percent. Now we know how much the logotype must be scaled.

var Width_Diff = Perc_H*LogotypeImg_W;

The percentage is used to calculate the width difference in pixels.

var New_Width = LogotypeImg_W+Width_Diff;

The pixels is added to the logotype width to scale it proportionally.

$("#LogoImg").css("height",Logotype_H).css("width",New_Width);

The first logotype in HTML gets it new width and height.

Conclusion

It was somehow easy to get a basic setup. I think the heavy work is done, and relatively easy to add padding and positioning.