New technology, new possibilities

The new Sluggo where finished two weeks ago. I just didn't get that final touch... Just a tiny little adjustment...

And then...

I got my hands on the new CSS Grid Layout.

And now - everything have to be rewritten. And it will be so much better.

Sluggo update have to wait some more.

Sluggo North Star, Version 2

Great News!

The Sluggo North Star is re-written and improved. The "last-minute"-quirks is gone, the code is now more than ever easy to follow.

Sluggo North Star at Codepen

SluggoNorthStar in action.

The input function, "SluggoNorthStar", got some new variables to help out every pixel of the positioning of your precious logotype. You can now size your logotype to a maximum width and have different padding at different sides.

Try it today! Download it at Codepen!

Big releaseparty for Sluggo Beat Experience!

At last!

Sluggo Beat Experience is finaly released. Ready for world domination. 

This first big step on my Sluggo journey is over. A personal dream an vision as ended. I'm so happy to make this bird fly. 

Take a look at the demo at CodePen: http://codepen.io/steffodimfelt/pen/PNBEaG

And the live site of actor Pontus Olgrim: http://pontusolgrim.se/

The next step

The development of Sluggo Beat have giving me some new ideas to further examine. One thing is to update Sluggo Pins from Mark II to Mark III. 

Stay tuned. Peace out!

Sluggo Beat XP - Pre-release

The Sluggo Beat has been delayed a month. I'd some minor drawbacks, but now I got some final adjustments and tweaks before I can rekease it. 

But that's not entirely true. I've build a website based on Sluggo Beat. My good friend Pontus Olgrim needed a new site and I took the opportunity the get some live action. 

 And yes. There were some tweaks before it worked out. On the upper hand - the changes makes Sluggo even better. 

Check out Pontus at http://pontusolgrim.se

Sluggo North Star - Rewrite the codes

I have not failed. I've just found 10,000 ways that won't work.
-Thomas Edison

Sometimes things looks like their done, but put into a new context, it crumbles to dust.

My precious North Star didn't work properly. In my effort to fix it, I realized that the old codes won't work - I must rewrite everything. 

On the bright side - I may get tighter codes and I definitely got a new releaseparty. 

Release Party: Sluggo North Star - The Home of Logotypes

Sometimes things got finished faster than expected.

Today I completed a small, but important, milstone - Sluggo North Star!

North Star makes it easy to control the positioning of the Logotype.

North Star is responsive is, of course, responsive and will be a integrated part of Sluggo Beat XP.

The user can:

• Change position the easy way - R (right). C (center), L (left)
• OR positioning it with pixels or em (i.e. 10px, 1.4em) 
• OR positioning it  0%-100% (0%=Left, 50%=Center, 100%=Right)  

As an extra bonus - if the Logotype is bigger than the outer Tag, it will scale down proportional.

You can find the codes at CodePen:
http://codepen.io/steffodimfelt/pen/rxEKep

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.