Home/ Questions/Q 6236673
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T10:53:21+00:00

I’m building a site with a fluid layout, and therefore need to use percentages

  • 0

I’m building a site with a fluid layout, and therefore need to use percentages in my Jquery sizes and animations. The problem, as I’ve discovered, is that Jquery doesn’t understand percentages. Here’s an example of what I’m after:

The page <body> is 100% wide.

<article> is the width of 71% of the page body.

<hgroup> is the width of 33.2% of <article>

I would like <article> to be the same width as <hgroup> on page load (so that only <hgroup> is showing), then expand to 71% of the page width again when <hgroup> is clicked, allowing the rest of the content within <article> to show. At the same time, I’d like <article> to slide left by the width of <hgroup>, hiding <hgroup>.

Is there any way to make this kind of calculation, or will I have to resort to pixels?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    After much frustration and lamentation, I finally got it sorted out. Here’s the code I came up with which, miraculously, works:

            $(document).ready(function() {
            $('section').hide();
            //Capture widths on page load
            var bwidth = $('body').width();
            var awidth = $('article').width();
            var hgwidth = $('hgroup').width();
            $('hgroup').width(hgwidth);
            $('article').width(hgwidth);

            $('hgroup').click(function(){
            //Hide open article
            var close = $('section:visible').parent();
            $(close).children('section').hide().end().width(hgwidth);
            $(close).removeClass('active').css('marginLeft', '+=' +hgwidth).detach().appendTo('body');

            //Hide last Article
                $('body article').last().hide();

            //Show current
            $(this).parent().addClass('active')
                $('.active').animate({
                            width: awidth,
                            marginLeft: '-=' + hgwidth  
                        },500);
                $(this).next().delay(500).fadeIn(50);
                $(this).css('box-shadow','0px 0px 8px #666');

                //Show Next Hgroup
                $(this).parent().nextAll('article:first').show();

                  });
        });
    • 0