Menu icon Foundation

My Posts



My Comments

Paul Lee commented on Wesley Picotte's post over 3 years

Sorry, I really have no idea. Good luck with it.

Paul Lee commented on Wesley Picotte's post over 3 years

Could you try using foundation.min.js to include every plug-in -- including Equalizer -- instead of using foundation.core.js and adding the Equalizer plug-in separately? Especially since you're working on a prototype at the moment.... Equalizer works in my project when included only through foundation.min.js.

Paul Lee commented on Paul Lee's post over 3 years

@Vladimir, I'm using percentage max- and min-height in my scss to control how large or small the logo can get. To allow it to be larger than the header row when necessary, at those breakpoints I give it absolute positioning and then force the header's background color to be drawn large enough to encompass the logo image by giving it a min-height.

Right now this is what my SCSS looks like, though I'm sure the specific values will change:

#section-logo {
    @media screen and (min-width: 40em) and (max-width: 63.9375em) {
        min-height: 55%;
        min-width: 55%;
    }
    @media screen and (min-width: 64em) {
        min-height: 60%;
        min-width: 60%;
        position: absolute;
    }
}

header {
    @media screen and (min-width: 64em) {
        min-height: 125px;
    }
}

I also have a solid plan for centering the title h1 element. I've written a JQuery script that changes the positioning of the h1 element to absolute and then calculates where to put it in order for it to be centered inside the header.

The problem is that the header does not start at the top left of the page due to a CSS centering technique that I'm using. The non-Foundation wrapper elements I'm using aren't giving me a convenient handle to subtract the height and width from the content area from the height and width of the total page. However, once I find a way to discover these values, I'm pretty sure I'll be all set. I've double checked my formulas, and I believe they're correct.

Here is my current script, in case you're interested in using a similar method:

```Javascript console.log("center-title.js loaded");

var headerWidth = $("header").width();
var headerHeight = $("header").height();
var textElementWidth = $("#page-title h1").width();
var textElementHeight = $("#page-title h1").height();

console.log("Width of header = " + headerWidth);
console.log("Height of header = " + headerHeight);
console.log("Width of text in h1 element = " + textElementWidth);
console.log("Height of text in h1 element = " + textElementHeight);

$(function() {
// Give the title h1 absolute positioning so it can be placed precisely.
var titleH1 = $("#page-title h1");

titleH1.css('position', 'absolute');

// Calculate where the title has to be placed to be centered in the header.
var widthDifference = headerWidth - textElementWidth;
var heightDifference = headerHeight - textElementHeight;

console.log("Width difference = " + widthDifference);
console.log("Height difference = " + heightDifference);

// Finding distance from top of page to top of header

var pageHeight = $("#non-framework-container").height();
var pageContentHeight = $("#non-framework-wrapper").height();
var pageHeightOffset = pageHeight-pageContentHeight/2;

console.log("Space above header = " + pageHeightOffset);

var pageWidth = $("#non-framework-container").width();
var pageContentWidth = $("non-framework-wrapper").width();
var pageWidthOffset = pageWidth-pageContentWidth/2;

console.log ("Space left of content =" + pageWidthOffset);

// Getting the absolute value of the difference.
// Dividing by two to get the amount of "padding" on each side.
var horizontalOffset = Math.abs(widthDifference-headerWidth/2) + pageHeightOffset;
var verticalOffset = Math.abs(heightDifference-headerHeight/2) + pageWidthOffset;

console.log("Horizontal Offset = " + horizontalOffset);
console.log("Vertical Offset = " + verticalOffset);

// titleH1.css('left', horizontalOffset+'px');
titleH1.css('top', verticalOffset+'px');
});

Thanks again for the help.

Paul Lee commented on Paul Lee's post over 3 years

Thank you, Vladimir. Your reply is gracious and is very much appreciated.

You're right about the column structure. The medium and large columns should be the same. This prevents some of the padding problems I observed. (The logo's container is now "medium-4 large-4" and the text's container is now "medium-8 large-8".)

With these columns, the logo actually appears largest -- the full size of the image file's dimensions -- at the beginning of the small breakpoint (639px). It is not even as large on the large breakpoint. The text does become much smaller at the small breakpoint, which looks promising.

Defining height and width on the logo's container (using the height and width CSS properties) does not work for me at all. I tried setting height and width to the actual dimensions of the PNG image, but doing so makes the image appear very tiny at all breakpoints. Using min-height and min-width properties (trying to prevent the logo from shrinking beyond a specific point) doesn't seem to have an obvious affect.

As a last resort, it may be possible to use a JQuery script to center the text inside the row for the small breakpoint. I still don't have much of a plan for the logo image, though.

Posts Followed


Following

    No Content

Followers

My Posts

My Comments

You commented on Wesley Picotte's post over 3 years

Sorry, I really have no idea. Good luck with it.

You commented on Wesley Picotte's post over 3 years

Could you try using foundation.min.js to include every plug-in -- including Equalizer -- instead of using foundation.core.js and adding the Equalizer plug-in separately? Especially since you're working on a prototype at the moment.... Equalizer works in my project when included only through foundation.min.js.

You commented on Paul Lee's post over 3 years

@Vladimir, I'm using percentage max- and min-height in my scss to control how large or small the logo can get. To allow it to be larger than the header row when necessary, at those breakpoints I give it absolute positioning and then force the header's background color to be drawn large enough to encompass the logo image by giving it a min-height.

Right now this is what my SCSS looks like, though I'm sure the specific values will change:

#section-logo {
    @media screen and (min-width: 40em) and (max-width: 63.9375em) {
        min-height: 55%;
        min-width: 55%;
    }
    @media screen and (min-width: 64em) {
        min-height: 60%;
        min-width: 60%;
        position: absolute;
    }
}

header {
    @media screen and (min-width: 64em) {
        min-height: 125px;
    }
}

I also have a solid plan for centering the title h1 element. I've written a JQuery script that changes the positioning of the h1 element to absolute and then calculates where to put it in order for it to be centered inside the header.

The problem is that the header does not start at the top left of the page due to a CSS centering technique that I'm using. The non-Foundation wrapper elements I'm using aren't giving me a convenient handle to subtract the height and width from the content area from the height and width of the total page. However, once I find a way to discover these values, I'm pretty sure I'll be all set. I've double checked my formulas, and I believe they're correct.

Here is my current script, in case you're interested in using a similar method:

```Javascript console.log("center-title.js loaded");

var headerWidth = $("header").width();
var headerHeight = $("header").height();
var textElementWidth = $("#page-title h1").width();
var textElementHeight = $("#page-title h1").height();

console.log("Width of header = " + headerWidth);
console.log("Height of header = " + headerHeight);
console.log("Width of text in h1 element = " + textElementWidth);
console.log("Height of text in h1 element = " + textElementHeight);

$(function() {
// Give the title h1 absolute positioning so it can be placed precisely.
var titleH1 = $("#page-title h1");

titleH1.css('position', 'absolute');

// Calculate where the title has to be placed to be centered in the header.
var widthDifference = headerWidth - textElementWidth;
var heightDifference = headerHeight - textElementHeight;

console.log("Width difference = " + widthDifference);
console.log("Height difference = " + heightDifference);

// Finding distance from top of page to top of header

var pageHeight = $("#non-framework-container").height();
var pageContentHeight = $("#non-framework-wrapper").height();
var pageHeightOffset = pageHeight-pageContentHeight/2;

console.log("Space above header = " + pageHeightOffset);

var pageWidth = $("#non-framework-container").width();
var pageContentWidth = $("non-framework-wrapper").width();
var pageWidthOffset = pageWidth-pageContentWidth/2;

console.log ("Space left of content =" + pageWidthOffset);

// Getting the absolute value of the difference.
// Dividing by two to get the amount of "padding" on each side.
var horizontalOffset = Math.abs(widthDifference-headerWidth/2) + pageHeightOffset;
var verticalOffset = Math.abs(heightDifference-headerHeight/2) + pageWidthOffset;

console.log("Horizontal Offset = " + horizontalOffset);
console.log("Vertical Offset = " + verticalOffset);

// titleH1.css('left', horizontalOffset+'px');
titleH1.css('top', verticalOffset+'px');
});

Thanks again for the help.

You commented on Paul Lee's post over 3 years

Thank you, Vladimir. Your reply is gracious and is very much appreciated.

You're right about the column structure. The medium and large columns should be the same. This prevents some of the padding problems I observed. (The logo's container is now "medium-4 large-4" and the text's container is now "medium-8 large-8".)

With these columns, the logo actually appears largest -- the full size of the image file's dimensions -- at the beginning of the small breakpoint (639px). It is not even as large on the large breakpoint. The text does become much smaller at the small breakpoint, which looks promising.

Defining height and width on the logo's container (using the height and width CSS properties) does not work for me at all. I tried setting height and width to the actual dimensions of the PNG image, but doing so makes the image appear very tiny at all breakpoints. Using min-height and min-width properties (trying to prevent the logo from shrinking beyond a specific point) doesn't seem to have an obvious affect.

As a last resort, it may be possible to use a JQuery script to center the text inside the row for the small breakpoint. I still don't have much of a plan for the logo image, though.

Posts Followed


Following

  • No Content

Followers

  • No Content