QNimate

  • CoursesVideos
  • WP PremiumPlugins
  • DemosLab
  • Home
  • QIdea
  • QTrack
Home Carbon Ads wikiHow Style Popup

wikiHow Style Popup

wikihow

In this tutorial I will show you how to create a wikiHow style popup for your website. With just few lines of CSS and JavaScript you can create such kind of styles.


View Demo


When to Display?

wikiHow displays the popup after user has scrolled 85% of the webpage. Using this JavaScript snippet you can easily detect when user has scrolled 85% of the webpage

window.addEventListener("scroll", function(){
                var heightOfWindow = window.innerHeight;
                var contentScrolled = window.pageYOffset;
                var bodyHeight = window.document.getElementsByTagName("body")[0].offsetHeight;
                var total = bodyHeight - heightOfWindow;
                var got = contentScrolled;
                var scrolled = parseInt((got/total) * 100);
               
                if(scrolled > 85)
                {
                    //display popup
                }
            }, false);

To understand how the above code words please refer this article.

Styling the box

The popup box is displayed as fixed position. We get the balloon shape by making the border top left, top right and bottom left assigned to same pixel value but greater than zero. Border top right is assigned to 0px.

Here is the complete code of the demo.

<!doctype html>
<html>
    <head>
        <title>wikiHow Style Popup</title>
        <style>
            .popup-cover
            {
                right: -250px;
                bottom: -250px;
                position: fixed;
                margin-left: -10px;
                width: 250px;
                -webkit-transition: all 1s;
                -moz-transition: all 1s;
                -o-transition: all 1s;
                transition: all 1s;
            }
           
            .popup
            {
                background-color: white;
                border: 5px solid #93b874;
                border-right: none;
                border-bottom: none;
                border-radius: 150px 150px 0px 150px;
                height: 160px;
                margin-bottom: 0px;
                padding: 40px;
                text-align: center;
                clear: both;
            }
           
            .popup .close
            {
                font-size: 14px;
                position: relative;
                float: right;
                text-decoration: none;
            }
        </style>
    </head>
    <body>
        <div id="popup-cover" class="popup-cover">
            <div class="popup">
                <a class="close" href="javascript:popup_close();">&#10006;</a>
                <h3>QNimate</h3>
            </div>
        </div>
       
        <script>
            window.addEventListener("scroll", function(){
                var heightOfWindow = window.innerHeight;
                var contentScrolled = window.pageYOffset;
                var bodyHeight = window.document.getElementsByTagName("body")[0].offsetHeight;
                var total = bodyHeight - heightOfWindow;
                var got = contentScrolled;
                var scrolled = parseInt((got/total) * 100);
               
                if(scrolled > 85)
                {
                    document.getElementById("popup-cover").style.right = "0px";
                    document.getElementById("popup-cover").style.bottom = "-10px";
                }
                else
                {
                    document.getElementById("popup-cover").style.right = "-250px";
                    document.getElementById("popup-cover").style.bottom = "-250px";
                }
            }, false);

            function popup_close()
            {
                document.getElementById("popup-cover").style.right = "-250px";
                document.getElementById("popup-cover").style.bottom = "-250px";
                setTimeout(function(){document.getElementById("popup-cover").style.display = "none";}, 1000);
            }
        </script>
    </body>
</html>
Oct 12, 2014Narayan Prusty
Database Design for AnalyticsLogin User into WordPress without Password

Leave a Reply Cancel reply

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax

Narayan Prusty

I am a software engineer specialising in Blockchain, DevOps and Go/JavaScript. This is my personal blog where I write about things that I learn and feel interesting to share.

Image8 years ago Web Development
Share this
0
GooglePlus
0
Facebook
0
Twitter
0
Linkedin
  • When to Display?
  • Styling the box
  • QNimate
Related Articles
  • Facebook Style Chat Box Popup using JavaScript and CSS
  • How To Detect Element Entered Viewport
  • Popup Best Time, Placement and Options
  • Styling Text using CSS
  • Change Navigation Style On Scroll
Our Sponsor
My Books

2014 - 2015 © QNimate
All tutorials MIT license