Fluid design with Artisteer

A place for discussion about skinning and design. Before posting questions here you should review the documentation about creating skins.

This thread is closed to new posts. You must sign in to post in the forums.
2/7/2012 10:20:22 PM
Gravatar
Total Posts 28

Fluid design with Artisteer

Hi,

I'm using Artisteer 3.1 and their pages are designed with 100% page height. With mojoportal, all the skins are only as heigh as the content in them. Has anyone got an example of layout.master to achieve the 100% height of page?

Thanks,

Peter

2/8/2012 9:39:43 AM
Jon
Gravatar
Total Posts 13

Re: Fluid design with Artisteer

I'm putting one together now using the technique found here: http://ryanfait.com/sticky-footer

2/8/2012 10:20:55 AM
Gravatar
Total Posts 18439

Re: Fluid design with Artisteer

I think the reason it appears to work in Artisteer itself is just because of the filler content in the page that is not really part of the design but is enough content to make the page look full height, we are using the css exported from Artisteer so it should work the same but may not appear the same unless there is sufficient content on the page.

There are ways of achieving 100% height, if you google for "css height 100 percent" you can find tutorials and discussions about it.

2/8/2012 3:16:42 PM
Gravatar
Total Posts 28

Re: Fluid design with Artisteer

Thanks Jon and Joe,

I'll try the one suggested http://ryanfait.com/sticky-footer

Peter

5/30/2012 11:02:57 AM
Jan
Gravatar
Total Posts 11

Re: Fluid design with Artisteer

It seems Artisteer sets the height from javascript in script.js by attaching a function to the resize event of the window that manipulates the height of the div with class "art-content".

The problem is Mojoportal does not generate a div with "art-content".

Anybody has an idea on how to solve this?

/* begin Layout */
jQuery(function () {
     var c = jQuery('div.art-content');
    if (c.length !== 1) return;
    var s = c.parent().children('.art-layout-cell:not(.art-content)');

    jQuery(window).bind('resize', function () {
        c.css('height', 'auto');
        var innerHeight = 0;
        jQuery('#art-main').children().each(function() {
            if (jQuery(this).css('position') != 'absolute')
                innerHeight += jQuery(this).outerHeight(true);
        });
        var r = jQuery('#art-main').height() - innerHeight;
        if (r > 0) c.css('height', r + c.parent().height() + 'px');
    });

    if (jQuery.browser.msie && parseInt(jQuery.browser.version) < 8) {
        jQuery(window).bind('resize', function() {
            var w = 0;
            c.hide();
            s.each(function() { w += this.clientWidth; });
            c.w = c.parent().width(); c.css('width', c.w - w + 'px');
            c.show();
        });
    }

    jQuery(window).trigger('resize');
});/* end Layout */

5/31/2012 3:27:35 AM
Jan
Gravatar
Total Posts 11

Re: Fluid design with Artisteer

After some tweaking I managed to get the 100% height working for my specific combination of layout.master and Artisteer stuff.

I replaced the code from the previous post in script.js with this one:

/* begin Layout */
$.getDocHeight = function(){
    return Math.max(
        $(document).height(),
        $(window).height(),
        /* For opera: */
        document.documentElement.clientHeight
    );
};
jQuery(function () {
    var c = jQuery('div.art-layout-wrapper');
    if (c.length !== 1) return;

    jQuery(window).bind('resize', function () {
  var r = $.getDocHeight()
  - jQuery('div.art-header').height()
  - jQuery('div.art-nav-outer').height()
  - jQuery('div.art-footer').height()
  - parseInt(jQuery('div.art-box').css('margin-top').replace('px', ''))
  + parseInt(jQuery('div.art-box').css('margin-bottom').replace('px', ''))
  - parseInt(jQuery('div.art-footer').css('margin-top').replace('px', ''));
c.css('height', r + 'px');
    });

    jQuery(window).trigger('resize');
});/* end Layout */

Also, you need to specify the height of your art-footer explicitly in your css.

You must sign in to post in the forums. This thread is closed to new posts.