Skip to main content
T
tim cross
Inspiring
December 10, 2018
Question

logo in div & height of div disappear after 10sec?

  • December 10, 2018
  • 8 replies
  • 4112 views

Is there a way to hide a div and logo within it?

I have a logo at the top of the screen, but after 10 seconds I want it to disappear, and the text below it move up to replace it.

I have found how to hide the logo, but I can't get the box to go to 0px and disappear!

anyway of doing this please?

    This topic has been closed for replies.

    8 replies

    superc51632781
    superc51632781
    Participating Frequently
    December 12, 2018

    you will have to make the background

    of the div transparent so you can not see it.

    create a transparent div.

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    December 12, 2018

    superc51632781  wrote

    you will have to make the background

    of the div transparent so you can not see it.

    create a transparent div.

    The question is about making a division and its contents  disappear after a delay of 10 seconds.  The background color & transparency are irrelevant.

    Nancy O'Shea— Product User & Community Expert
    pziecina
    pziecina
    Legend
    December 10, 2018

    To the OP.

    The posters of the answers marked as helpfull, are being marked as such by the poster themselves. So have no validity of actually being helpfull.

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    December 10, 2018

    Helpful and Liked can be marked by anyone at any time today, tomorrow or 5 years from now.  There's nothing invalid about it.

    Nancy O'Shea— Product User & Community Expert
    BenPleysier
    Community Expert
    BenPleysierCommunity Expert
    Community Expert
    December 13, 2018

    https://forums.adobe.com/people/Nancy+OShea  wrote

    osgood_   wrote

    Its a bit naff though to like or mark ones own posts as helpful - that should be up to someone else to decide. Thats just sooooooo wrong in my opinion.

    Here we go again with off topic banter which is exactly why I have a Helpful on my answer.   These days, it's getting harder to separate wheat from chaff.

    Anyone that posts here, regardless of their skill level, might as well mark their answers as helpful, that then becomes meaningless if we are all as arrogant. Only the OP knows if a post is helpful to them or not. I dont give a shite about anyone else who might find the thread in years to come - they can read throught it if they want to follow whats been said and make their own judgements as to what if anything is helpful to them.

    I've marked a post that is practically useless as helpful - useless unless someone actually finds it helpful (someone might) but I can do it because its available, so why not lets all start marking our own posts as helpful because by replying we all think we are being helpful, even if we are not. Who gives you the right to judge if anything is helpful?


    osgood_  wrote

    Anyone that posts here, regardless of their skill level, might as well mark their answers as helpful, that then becomes meaningless if we are all as arrogant. Only the OP knows if a post is helpful to them or not. I dont give a shite about anyone else who might find the thread in years to come - they can read throught it if they want to follow whats been said and make their own judgements as to what if anything is helpful to them.

    I've marked a post that is practically useless as helpful - useless unless someone actually finds it helpful (someone might) but I can do it because its available, so why not lets all start marking our own posts as helpful because by replying we all think we are being helpful, even if we are not. Who gives you the right to judge if anything is helpful?

    Typical.

    This sort of comment begs for the topic to be locked.

    Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
      ALsp
      ALsp
      Legend
      December 10, 2018

      Hi Tim,

      You can use Bootstrap, jQuery, or both, but here is how I would do it (with pure CSS):

      http://www.projectseven.com/csslab/logo-be-gone/

      ALsp
      ALsp
      Legend
      December 10, 2018

      And for any carpenters who might be lurking...

      If the only tool you have is a hammer (or Bootstrap), you might tend to treat everything as if it were a nail.

        Nancy OShea
        Community Expert
        Nancy OSheaCommunity Expert
        Community Expert
        December 10, 2018

        jQuery SlideUp.

        <!doctype html>

        <html lang="en">

        <head>

        <meta charset="utf-8">

        <title>jQuery SlideUp Demo</title>

        <meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1">

        </head>

        <body>

        <div id="intro">

        <img src="https://dummyimage.com/200x200" alt="logo">

        <em>This will slide up in 10 seconds. </em>

        </div>

        <hr>

        <h3>Heading 3</h3>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam a natus ea error, sunt deserunt est magnam quo, aut voluptatem commodi doloremque dolore, sint nulla culpa dolor eveniet velit. Aliquam!</p>

        <!--latest jQuery 3-->

        <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

        <script>

        $(window).ready(function(){$("#intro").fadeIn("fast",function()

        //delay 10 seconds

        {$(this).delay(10000).slideUp(1e3)})})

        </script>

        </body>

        </html>

        Nancy O'Shea— Product User & Community Expert
        O
        osgood_
        Legend
        December 10, 2018

        https://forums.adobe.com/people/Nancy+OShea  wrote

        $(this).delay(10000).slideUp(1e3)

        Whats 1e3 do? - never seen that used before.

        Nancy OShea
        Community Expert
        Nancy OSheaCommunity Expert
        Community Expert
        December 10, 2018

          wrote

        https://forums.adobe.com/people/Nancy+OShea   wrote

        $(this).delay(10000).slideUp(1e3)

        Whats 1e3 do? - never seen that used before.

        1e3 = 1000 = 1 second

        Nancy O'Shea— Product User & Community Expert
        Nancy OShea
        Community Expert
        Nancy OSheaCommunity Expert
        Community Expert
        December 10, 2018

        Since I use jQuery for most projects anyway...

        Bootstrap with SVG Intro

        <body>

        <div id="intro">

        YOUR LOGO HERE....

        </div>

        <script>

        //show/hide intro
        $(window).ready(function() {
          $('#intro').fadeIn('fast', function() {
          //wait 5 seconds and fade out
        $(this).delay(5000).fadeOut(2000);
          });
        });
        </script>

        Nancy O'Shea— Product User & Community Expert
        O
        osgood_
        Legend
        December 10, 2018

        Assuming your logo is in a <div> with the class of 'logo' or has a class of 'logo' itself use the setTimeout javascript function to set the logo to display none after 10 seconds, example below. You're using jQuery so you can just add it to your exsiting jQuery.

        <!DOCTYPE html>

        <html>

        <head>

        <meta charset="UTF-8" />

        <title>Set Time Out</title>

        <script src="http://code.jquery.com/jquery-3.3.1.min.js"></script>

        <script>

        $(document).ready(function(){

        setTimeout(function(){

        $('.logo').css('display', 'none');

        }, 10000);

        });

        </script>

        <style>

        header {

        width: 70%;

        margin: 0 auto;

        background-color: #f2f2f2;

        }

        </style>

        </head>

        <body>

        <header>

        <div class="logo">Logo goes here</div>

        <div class="text">Text goes here</div>

        </header>

        </body>

        </html>

        WolfShade
        WolfShade
        Legend
        December 10, 2018

        I did some looking around.  Use the following instructions, but keep the "transition-timing-function" out of it.

        https://davidwalsh.name/css-slide

        Then use JavaScript to set the timer (setTimeout()) for the transition trigger.

        HTH,

        ^ _ ^

        (Or, keep the transition-timing-function in and alter the numbers to allow a ten second transition and keep it pure CSS with no JS.)

        Ignore that.  I had no idea what the numbers meant.  I do, now.  They are NOT for timing.    Keep the JS in.

        pziecina
        pziecina
        Legend
        December 10, 2018

        WolfShade  wrote

        Ignore that.  I had no idea what the numbers meant.  I do, now.  They are NOT for timing.    Keep the JS in.

        Don't throw out a good idea, try it with the addition of css keyframe animations -

        https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations

        WolfShade
        WolfShade
        Legend
        December 10, 2018

        Did not realize that there was an animation-delay.  Cool.

        V/r,

        ^ _ ^

          WolfShade
          WolfShade
          Legend
          December 10, 2018

          Are you using jQuery?  Or plain vanilla JavaScript?

          V/r,

          ^ _ ^

          Terms & ConditionsAccessibility statement
          Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices