Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 4 of 4
  1. #1
    Junior Member Beluga's Avatar
    Join Date
    Jan 2011
    Posts
    9
    Member #
    26139
    I'm trying to build a background in two parts. The header bg is in the body and the lower part is a div with a gradient background color generated by CSS3 or IE filters. I had problems with getting the gradient to stretch all the way to the side in IE7 with plain CSS so I had to start looking for more watertight solutions.

    Applied the jQuery advice in this stackoverflow link (can't post urls..):
    /questions/1818467/how-to-apply-100-height-to-div

    Like this:
    Code:
        $(function() {
        $(window).resize(function() {
            $('.wrapperala').height($(window).height() - $('.wrapperala').offset().top - ($('.wrapperala').outerHeight(true) - $('.wrapperala').height()));
            $('.wrapperala').width($(window).width() - $('.wrapperala').offset().right - ($('.wrapperala').outerWidth(true) - $('.wrapperala').width()));
        });
        $(window).resize();
    });
    I have shadows in the div that is over the gradient div I'm stretching and somehow the gradient won't stretch under the shadows when there are scrollbars:


    There is not much difference in FF vs. IE, I've only made the FF screenshot have one scrollbar to show how it stretches fine on the axis without one.

    This is the hierarchy, first is bodywrapper, then the content (#sisalto) is inside the gradient div (.wrapperala):
    Code:
    html {
    height: 100%;
    width: 100%;
    }
    body {
    background: #fff;
    height: 100%;
    width: 100%;
        background: url('../kuvat/laatat_edit.jpg') repeat;
    }
    
    #bodywrapper {
      position:absolute;
      top: 0px;
      left: 0px;
      width:100%;
      min-width: 100%;
      width:auto !important;
      min-height: 100%;
      height:auto !important;
      height:100%;
      z-index: 1;
    }
    
    .wrapperala {
        background: #000000; /* old browsers */
        background: -moz-linear-gradient(#4C3E2E 1%, #B7956E 3%, #F78F20 50%, #FFD059 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#B7956E), color-stop(90%,#F78F20), color-stop(100%,#FFD059)); /* webkit */
        -pie-background: linear-gradient(#3F9FFF, #FFD059);  /* PIE */
        behavior: url(htc/PIE.htc);
        padding: 0;
        margin: 0;
    }
    
    #sisalto {
        clear: left;
        position: relative;
        z-index: 1;
        padding: 2em 1em;
        border: 1px solid #AAA;
        background: #EEE;
        -webkit-box-shadow: -5px 9px 1em rgba(0,0,0,0.5), 5px 9px 1em rgba(0,0,0,0.5);
        -moz-box-shadow: -5px 9px 1em rgba(0,0,0,0.5), 5px 9px 1em rgba(0,0,0,0.5);
        box-shadow: -5px 9px 1em rgba(0,0,0,0.5), 5px 9px 1em rgba(0,0,0,0.5);
        behavior: url(htc/PIE.htc);
         width:980px; margin-left:auto ;margin-right: auto ;text-align: left;
    }
    If there are easier methods to solve this split background thing than JavaScript, I'm all ears. I can PM the address of the website, if someone wants to take a look.

  2.  

  3. #2
    Junior Member Beluga's Avatar
    Join Date
    Jan 2011
    Posts
    9
    Member #
    26139
    I realized I have to make the jQuery take always into account the width and height of the content div (#sisalto). So even if the window is smaller than the content dimensions, the gradient div retains a sufficient w&h to go under the shadows (maybe adding the shadow thickness). My brain is kind of sore right now, so if anyone wants to help on how to say this in jQueryese, I would be thankful.

  4. #3
    Junior Member Beluga's Avatar
    Join Date
    Jan 2011
    Posts
    9
    Member #
    26139
    I started with a basic implementation, without binding it to the window size changes. This static solution (almost) works in FF 3.6, but not in IE:

    Code:
    $(function()
    {
    if (($(window).width()) > (($('#sisalto').width()) + 72))
    {
            $('.wrapperala') .css({'width': ($(window).width())+'px'});
    }
    if (($(window).width()) < (($('#sisalto').width()) + 72))
    {
            $('.wrapperala') .css({'width': (1052)+'px'});
    }    
    if (($(window).height()) > (($('#sisalto').height()) + ($('#footer').height()) + 154))
    {
            $('.wrapperala') .css({'height': (($(window).height()) - 154)+'px'});
    }
    if (($(window).height()) < (($('#sisalto').height()) + ($('#footer').height()) + 154))
    {
            $('.wrapperala') .css({'height': (($('#sisalto').height()) + ($('#footer').height()) + 85)+'px'});
    }
    });
    I noticed I'm having a hard time finding the right values to add and subtract, so it doesn't work in FF either with certain window heights.

    IE throws my tabs carelessly to the side as you can see:

    Code:
    http://img529.imageshack.us/img529/7262/ietabbug.jpg
    That silly old IE also wants to interpret pixels in its own curious way, so I believe I would have to specify them in em or make IE run a different version of the script with modified px values. I have never tried to program anything in JS before this btw.

    Here's the styling for the list that makes up the tabs:

    Code:
    #tabit {
        margin: 0;
        padding: 0 10px;
        overflow: hidden;
        margin-bottom: -1px;
        height: 2.55em;
        width:980px; margin-left:auto ;margin-right: auto ;text-align: left;
        z-index: 1;
     }
     #tabit li {
         float: left; 
        list-style: none;
        margin: 0;
        padding: .25em  0;
        height: 2em;
        overflow: hidden;
        position: relative;
        z-index: 1;
        border-bottom: 1px solid #EEE; 
     }
    #tabit a {
        float: left;
        height: 1.75em;
        line-height: 1.75em;
    		color: #132401;
        background: #e1e4f2; /* old browsers */
    background: -moz-linear-gradient(top, #f5f5f5 0%, #f5f5f5 15%, #e1e4f2 16%, #bdbdbd 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f5f5), color-stop(15%,#f5f5f5), color-stop(16%,#e1e4f2), color-stop(100%,#bdbdbd)); /* webkit */
        background-image: linear-gradient(top, #f5f5f5, #bdbdbd);
        -pie-background: linear-gradient(#f5f5f5, #bdbdbd);  /* PIE */
    		font: 20px/27px 'VegurBold', Arial, sans-serif;
        border: 1px solid #AAA;
        border-bottom: 0;
        padding: 0 10px;
    		text-decoration: none; 
        behavior: url(htc/PIE.htc);
        z-index: 1;
        }

  5. #4
    Junior Member Beluga's Avatar
    Join Date
    Jan 2011
    Posts
    9
    Member #
    26139
    Ok I managed to put together a final solution. It's funny, that in Safari the headerbg doesn't quite reach the right side on initial page load, but Chrome works fine!

    Code:
    $(function()
    {
    if ($(window).width() > 1042)
    {
    $('#bodywrapper').padding({right: 0}).padding({left: 0});
    }
    $('.headerbg').width($('#bodywrapper').outerWidth(true));
    
            $('.headerbg').height($('#sisalto').offset().top);
                
    
            $(window).bind('resize', function(){
            if (($(window).width() < 1042) && ($('#bodywrapper').padding().left < 32))
    {
    $('#bodywrapper').padding({right: 32}).padding({left: 32});
    }
            });
            $(window).bind('resize', function(){
            if (($(window).width() > 1042) && ($('#bodywrapper').padding().left > 30))
    {
    $('#bodywrapper').padding({right: 0}).padding({left: 0});
    }
            });
            $(window).bind('resize', function(){
    $('.headerbg').width($('#bodywrapper').outerWidth(true));
            });
            $('.headerbg').height($('#sisalto').offset().top);
    });


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Search tags for this page

css width window width - offset

Click on a term to search for related topics.
All times are GMT -6. The time now is 05:17 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com