jquery

Closable jquery full screen popup window and how to make it using CSS

July 23, 2015 2:45 am Published by 3 Comments

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... View Article

WordPress Portfolio Theme

July 20, 2015 2:23 am Published by Leave your thoughts

By breaking up the skeleton of underscores I was able to craft this portfolio theme for WordPress Main features Navigation menu is generated from categories and displays a category view Cool sliding effect on the menu using a combination of transition and padding As you scroll down the site title and description disappear along with the navigation menu They reappear when you start scrolling up Custom header gets added to Artwork and Music categories by manipulating directly CSS style with jQuery Footer has three distinct columns Picture links in gallery and footer icons have a tint overlay effect on hover... View Article

How to make a closable hover header div for your website announcements or ads using CSS and Javascript

April 5, 2015 11:34 am Published by Leave your thoughts

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... View Article