SitePoint Sponsor

User Tag List

Results 1 to 9 of 9

Hybrid View

  1. #1
    SitePoint Addict
    Join Date
    Apr 2010
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How do your do this in JQuery

    I know how to shrink a box in JQuery but wondered if it is possible to shrink a box (or div) from fullscreen size to an absolute pixel size?

  2. #2
    SitePoint Addict sdleihssirhc's Avatar
    Join Date
    Feb 2009
    Posts
    387
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    When you say "shrink", do you mean "change the width and height," or do you actually want to shrink it, so that the contents retain their proportions?

    What have you tried so far?
    I'm the web overlord for Graphic Business Systems

  3. #3
    SitePoint Addict
    Join Date
    Apr 2010
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by sdleihssirhc View Post
    When you say "shrink", do you mean "change the width and height," or do you actually want to shrink it, so that the contents retain their proportions?

    What have you tried so far?
    I want a logo on a black background to display when the user first goes to a homepage with the black background covering the whole screen. Then I want the logo to gradually shrink to about 300px wide by 120px high and for the black background to dissapear revealing the page content underneath.

    I thought the only way to do this was to create a massive black background image with a logo in the middle, but being a JQuery newbie, I realise that this might not be the best way.

  4. #4
    SitePoint Addict sdleihssirhc's Avatar
    Join Date
    Feb 2009
    Posts
    387
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    jQuery has some animation functions that you'll probably want to look into. The two that seem most pertinent here are "animate" and "fadeOut". (Feel free to keep asking questions if you can't get something to work.)

    If I were doing this, I'd have two different elements: An empty <div> for the black background, and an <img> for the logo.
    I'm the web overlord for Graphic Business Systems

  5. #5
    SitePoint Addict
    Join Date
    Apr 2010
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, I'll check out the link. I think you are right, two elements would probably be the best way as I can shrink the black background to zero while the logo shrinks to its final size. I'll have a go but I may be back as this is all new ground

  6. #6
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you want to fully customise your own animation without jQuery, maybe this code might help you get started.

    I'm not sure if you want the black "cover" div to fade out or shrink with the logo. In this code, 1.5 secs after page load the black cover slowly fades out to reveal the page content underneath it.

    Code JavaScript:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <title></title>
            <style type="text/css">
                html, body, wrapper {
                    margin: 0px 0px 0px 0px;
                    padding: 0px 0px 0px 0px;
                    height: 100%;
                }
                #cover {
                    margin: 0px 0px 0px 0px;
                    padding: 0px 0px 0px 0px;
                    opacity: 100;
                    filter:alpha(opacity=100);
                    position: absolute;
                    top: 0px;
                    left: 0px;
                    height: 100%;
                    width: 100%;
                    background-color: rgb(0,0,0);
                }
            </style>
            <script type="text/javascript">
                var speed = 0.1;
                var timer
                function showContent(){
                    timer = setInterval(setOpacity,100);
                }
                function setOpacity() {
                    ((coverO.curOpac -= speed) < 0)? 0 : coverO.curOpac;
                    if(typeof(coverO.style.opacity) == 'string'){
                        coverO.style.opacity = coverO.curOpac/10;
                    } else {
                        coverO.style.filter = 'alpha(opacity=' + coverO.curOpac*10 + ')';
                    }
                    if(coverO.curOpac == 0) {
                        clearInterval(timer);
                    }
                }
                window.onload = function(){
                    coverO = document.getElementById('cover');
                    coverO.curOpac = 10;
                    setTimeout(showContent,1500);
                }
            </script>
        </head>
        <body>
            <div id="wrapper">
                <div id="content">
                    Tortor sit voluptatem pede sodales turpis hac, vel velit suscipit, luctus bibendum molestie lacinia neque. Porttitor ante
                    turpis in voluptate vivamus autem, gravida magna amet porta praesent tincidunt at, nam enim sodales ante non, sit nunc
                    posuere odio libero nibh ac. Amet id dignissim vehicula tempor et eros. Est hendrerit est quis, et viverra est class pede
                    voluptas libero, sed mauris tincidunt, ultrices praesent. Iaculis vivamus sapien id, lorem ante aliquet, commodo pede imperdiet
                    congue, dictum integer eget sed orci. Suscipit vitae quis, massa elit faucibus massa, interdum nam pharetra nulla sed, sollicitudin
                    egestas, magna viverra.
                </div>
                <div id="cover"></div>
            </div>
        </body>
    </html>

    I haven't added the logo animation, but it will follow a similar principle - instead of adjusting opacity, you would adjust the width and height properties.
    Last edited by ScallioXTX; Nov 17, 2011 at 01:10. Reason: see post #9

  7. #7
    SitePoint Addict
    Join Date
    Apr 2010
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow, that's exactly what I am looking for. I can create another div for the logo and shrink this at the same time. Thanks for this. I reckon I can get the effect I need on the web page now between the answers to this thread and what I've picked up from what I have read so far in the Sitepoint JQuery book.

  8. #8
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Hlforr View Post
    ....I can create another div for the logo and shrink this at the same time. .....
    or, as another option, you could put the shrinking of the logo in a separate timer and so control the fading out of the black cover and shrinking of the logo independently of each other.

    If you need more help, post the code you have at the time and we can try to help.

    Edit:


    not that it really matters much because it doesn't affect the fading, but

    Code:
    if(coverO.curOpac < 0)
    should have been
    Code:
    if(coverO.curOpac == 0)
    (the 30 mins grace we get to edit posts has expired )
    Edit:


    Fixed it for you
    -- XTX



    Off Topic:


    @ScallioXTX

    yep, that's right and many use the "shorter" versions. It's just my preference to specify margin and padding for all 4 sides for clarity reasons only

    Last edited by ScallioXTX; Nov 17, 2011 at 01:13. Reason: added comment

  9. #9
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,095
    Mentioned
    153 Post(s)
    Tagged
    2 Thread(s)
    Off Topic:


    Instead of margin: 0px 0px 0px 0px and padding: 0px 0px 0px 0px you can also use margin: 0 and padding: 0. Works in all browsers.
    There also is margin: a b, which is the same as margin: a b a b, and there is margin: a b c, which is the same as margin: a b c b
    Rémon - Hosting Advisor

    SitePoint forums will switch to Discourse soon! Make sure you're ready for it!

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy


Bookmarks

Posting Permissions

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