7 {{ upvoteCount | shortNum }}
7 {{ upvoteCount | shortNum }}

Expanding / Contracting DIV - Magic Buy Button

by WillR
6 replies
  • WEB DESIGN
    • |
Most of you have probably seen the 'Magic Buy Button' popularized by people like Ryan Deiss. It's a simple bit of javascript you add to your page which then allows you to delay the display of the div in which the buy button is included. You set a time period and that div is then hidden until that time period has passed and then the div with the buy button is displayed.

Here's the problem.

When the buy button div is NOT displaying (ie: hidden) the size of the page is still the same size so it can look a bit weird if the buy button div is quite large. You end up seeing a large white space until the actual code appears. Is there a way to make it so when that div is not displayed the page will contract so it's the right size for only what is displayed on the page. Then when the buy button div displays the page will expand/drop down to insert the new code?

I hope that makes sense and would appreciate any insight.
#button #buy #contracting #div #expanding #magic
  • Profile picture of the author yukon
    Banned
    What about including the buy div inside another parent div with the parent div width & height preset?

    Do you have a link to the buy div page example?

    Also check the CSS code for something like visibility: hidden, that will hide content but still leave a blank space.

    display:none will hide the element completely so you can't see white space when the content isn't visible.
    {{ DiscussionBoard.errors[5238328].message }}
    • Profile picture of the author WordPressurize
      Originally Posted by yukon View Post

      Do you have a link to the buy div page example?
      +1

      @WillR Without seeing an example, it's hard to fix. However, I'm assuming that the DIV holding the button has a fixed height, and is therefore keeping it's height regardless of the content. You may just need to change/remove the DIV's height setting.

      However, without the link, it's hard to say.
      Signature

      "The Dominance characteristic values competency, results, and action. The Influence characteristic values action, enthusiasm, and relationships. The Steadiness characteristic values relationships, sincerity, and dependability. The Conscientiousness characteristic values dependability, quality, and competency... it is necessary to give them the thing they value most." - from Convert, by Ben Hunt

      {{ DiscussionBoard.errors[5238591].message }}
  • Profile picture of the author RyanA4D
    display:none; will work in this case.
    {{ DiscussionBoard.errors[5238611].message }}
  • Profile picture of the author yukon
    Banned
    Here is a couple of javascript examples, not pretty (inline CSS), just a quick sample. I'm sure server side php would be a better idea.




    <html>

    <head>

    <script type="text/javascript">
    function showdiv() {
    document.getElementById("hidediv1").style.display = "block";
    }
    setTimeout("showdiv()", 3000);
    </script>

    <script type="text/javascript">
    function hidediv() {
    document.getElementById("hidediv2").style.display = "none";
    }
    setTimeout("hidediv()", 6000);
    </script>

    </head>
    <body>

    This is my hidden div <div id="hidediv1" style="display: none">(I was hidden)</div> here.

    <div id="hidediv2" style="display: block">(I'm not hidden yet)</div>
    <br />
    Just some random text here.

    </body>
    </html>
    {{ DiscussionBoard.errors[5238747].message }}
  • Profile picture of the author WillR
    You guys are awesome.

    Problem solved. I was trying to hide the div that had the buy button in it. What I did instead was to put a div outside that div and this solved the problem!

    Thanks for all who helped!
    Signature

    .


    .

    {{ DiscussionBoard.errors[5239819].message }}
    • Profile picture of the author yukon
      Banned
      Originally Posted by WillR View Post

      You guys are awesome.

      Problem solved. I was trying to hide the div that had the buy button in it. What I did instead was to put a div outside that div and this solved the problem!

      Thanks for all who helped!
      I thought that might work (parent div). If the parent div width/height is zero pixels then it should remove the white space.

      Make sure to check all major browsers.
      {{ DiscussionBoard.errors[5240851].message }}

Trending Topics