Tag: css

Have you ever wondered how some websites display a closable div or a full screen overlay on top of their main content to say something really important to the viewer? I had to do something similar for my old portfolio that is no longer updated, to direct readers to my new and better looking portfolio instead. Here’s how I did it.

HTML popup window is dead

I just had to say this before I continue. Do not use HTML/Javascript pop up windows- most browsers block these by default and if you mange to bypass the popup blockers, you’re just going to annoy your readers so much they will leave and never come back. Seriously, don’t do it! Instead, use a more modern approach by making a jquery popup box.

Full screen overlay effect in CSS

Consider a simple container div. We need to make its height and width match our viewport/screen. We can do this by applying a 100% viewport width and height:

#box {
height:100vh;
width:100vw;
background:white;
}

Depending on what padding/margin rules you have set for your body element, you might see that the box is not fully covering the screen yet. Besides, we need to position it outside the normal flow anyway, because it needs to stay on top of everything:

#box {
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
}

Now it should cover the whole screen with no margin anywhere. But is it on top of your main content? Probably not. You need to add a high enough z-index to it so it will stay on top:

#box {
z-index:999;
}

But wait… now you just have a box covering the whole screen and your content cannot be accessed. We need to have the box initially hidden so we can make it visible using jquery later on:

#box {
display:none;
}

Right now when you load it up, nothing should show because we have hidden the box. It’s advised to only load the overlay div when the whole page has finished loading so we will put the call inside a document .ready function using jquery:

The box should now load only when the rest of your website has loaded first. So far so good, but there is no way for your user to close the box. To do this, we need another div (it can contain a cool icon if you wish). I’m using a simple X icon with a transparent background found on Google:

The close button would look stupid if it was loaded immediately so we need to hide it the same way we hid the box itself in CSS:

#close {
display:none;
}

While we’re at it, we should position it in a place where it makes sense too. I suggest putting it in the top right corner of your screen with 10px away from both the top and right side (the display:block will make the entire div clickable):

#close {
position:absolute;
top:10px;
right:10px;
display:block;
}

Finally don’t forget to add a higher z-index than what you had for the box. In our case a z-index of 1000 should do the trick:

#close {
z-index:1000;
}

Back to jquery! Since the close button is hidden at first, we need to make it visible after we have loaded the box. Let’s also add a .click function to the close button that will hide everything when clicked:

Jetpack comes with a great feature called Infinite Scroll that adds Facebook style scrolling of content to your website, meaning that more posts are loaded as the reader scrolls down the page.

The only thing that sucks about the Infinite Scroll is the footer style. By default you’ll get a semi-transparent white box under your website that says: “Proudly powered by WordPress” along with the theme name you are currently using.

Here’s how to remove the default footer and replace it with a subtle arrow icon that’s pointing upwards.

Warning! You will be editing the Jetpack system files directly which means that any updates to the plugin will overwrite the customization.

Note! I am using Font Awesome for this arrow. For this to work on your website, you have to reference the Font Awesome library somewhere between your <head> and </head> tags. Simply copy the following and paste it inside your <head>

It’s perfect for site news

In this tutorial you will learn how to make a “hovering” header for your website news, announcements or ads. I am currently using the same technique on this blog too and it should have loaded up by now. (not any more!) As you can see it can be easily closed by the red X button and it’s “hovering” over the main content so it keeps showing even when your users scroll down.

The requirements

This script uses Font Awesome and jQuery via CDN. This basically just means that you need to add the following code inside your <head></head> tags:

* The position: fixed; along with top: 0; and left: 0; are what make the div hover over the main content. Same goes for the close button- just replace left with right to put it on the top right side of your page.

* z-index is a useful property because it specifies the stack order of an element. By giving it an unrealistic value we make sure it will stay on top of every possible element on your page.

* I’m using display: none; so that it will only display after Javascript has determined that the page is fully loaded.

* The fa-times class is for our close button. Font Awesome is really awesome 😉

Finally the Javascript

This is what makes everything work nicely! Add this code inside your <head></head> tags:

* I use the window.onload function to execute the script only after the whole page has finished loading. If your user is waiting for the page to load and at the same time a news box appears, it might scare away a potential client.

* You should also notice the getElementById(‘close’) and $(“#announcement”). Do not change these, they are the ID’s of the close button and the news box itself.