CSS Tip: How To Vertical Align One Div Inside Another

Here is the handy CSS code you can use to vertically align one div inside a parent div:

.parentDiv {
	display: inline-flex; 
}

.childDiv {
	margin: auto 0px;
}

I found this code on this StackOverflow answer.

How to fade in content on page scroll on a website that uses fullPage.js with CSS and jQuery

I recently used the fullPage.js script on a website that I am working on and ran into a bit of trouble getting the section content to fade in nicely when it was scrolled into view. Here is the way I was able to accomplish that feature.

Following the instructions on how to incorporate fullPage.js into my site, my HTML structure looked like this:

<div id="fullpage">
    <div class="section">Some section</div>
    <div class="section">Some section</div>
    <div class="section">Some section</div>
    <div class="section">Some section</div>
</div>

First, I added this declaration to my stylesheet, to start all of the page sections out as invisible:

.section {
	opacity:0;
}

Next I found the onattrchange listener (a jQuery plugin). I downloaded this script – https://raw.github.com/meetselva/attrchange/master/attrchange.js – and uploaded to it to my website, and then added the call to it into my webpage, after my call to the jQuery library:

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="/scripts/attrchange.js"></script>

*Note: make sure to verify that the path to your script in the code above is correct!

And then, finally I added this bit of jQuery to my webpage:

<script>
$(document).ready(function(){

$(".section").eq(0).animate({"opacity":"1"},1500);  //fade the first div.section in on page load

$(".section").attrchange({
    trackValues: true, // set to true so that the event object is updated with old & new values
    callback: function(evnt) {
        if(evnt.attributeName == "class") { // which attribute you want to watch for changes
            if(evnt.newValue.search(/active/i) == -1) { // "active" is the class name you search for inside "class" attribute
                $(".section.active").animate({"opacity":"1"},1500); //fade in the section with class active
            }
        }
    }
});

}); //end of document ready
</script>

And that did the trick! Now my section content fades in nicely when the new section is scrolled into view.

Pure CSS Dropdown Navigation Menu with Animation

Here is a quick and easy way to add beautiful CSS animation to a simple dropdown menu.

Here is the HTML structure for our dropdown menu:

<ul class="menu">		
  <li><a href="#">Home</a></li>	
  <li><a href="#">About</a></li>	
  <li><a href="#">Products</a>
    <ul class="submenu">
      <li><a href="#">Clothing</a>
      <li><a href="#">Shoes</a>
      <li><a href="#">Accessories</a>
    </ul>
  </li>	
  <li><a href="#">Contact</a></li>	
</ul>

Here is the basic CSS for a dropdown menu:

ul.menu {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}
ul.menu li {
    float: left;
    margin: 0;
    padding: 0;
    position: relative;
}
ul.menu li a {
    display: block;
    padding: 0 25px;
    text-align: center;
    -webkit-transition: all .25s ease;
       -moz-transition: all .25s ease;
        -ms-transition: all .25s ease;
         -o-transition: all .25s ease;
            transition: all .25s ease;
}
ul.menu li ul.submenu {
    float: left;
    position: absolute;
    left: 0;
    top:0;
    visibility:hidden;
    z-index: 1;
    -webkit-transition: all .25s ease;
       -moz-transition: all .25s ease;
        -ms-transition: all .25s ease;
         -o-transition: all .25s ease;
            transition: all .25s ease;
}
ul.menu li:hover ul.submenu {
    opacity: 1;
    top: 50px;
    visibility: visible;
}
ul.menu li:hover ul.submenu li {
    float: none;
    width: 100%;
}

The key things to note in the code above are the positioning, the opacity, and the visibility declarations for ul.submenu and ul.submenu when its parent LI is hovered over.

By positioning the submenu 0px from the top of it’s parent LI to begin with, adding a transition style to it, and then changing the position from the top to 50px when the parent LI is hovered over, we achieve a beautiful “sliding down” effect on the submenu.

You could obviously edit the positioning of the submenu to easily achieve a “slide in from the bottom or one of the sides” affect as well.

You will notice that the initial opacity of the submenu is 0 and changes to 1 when the parent LI is hovered over, this adds a beautiful fade in effect.

How to make the top-level links in a jQuery accordion menu clickable

I often use a jQuery accordion menu for the mobile menu on responsive websites and have run into issues before where the top level links by default seem only to expand or collapse submenus and not actually take you to the page you are trying to go to. What I have found is that I usually just need to add this line of code to my script:

header: '.menu-control'

So, for example, the script I now use to call in the accordion menu would be:

function enableAccordion() {
 $('#menu-mobile-nav').accordion({
 header: '.menu-control',
 autoHeight: false,
 navigation: true,
 collapsible: true,
 active: false
 });
}

Where my HTML for the menu is:

<h3>MENU</h3>
<ul id="menu-mobile-nav" class="menu">
<li><a href="/">Home</a></li>
<li><a href="/about">About Us</a></li>
<li><a href="/contact">Contact Us</a></li>
</ul>

Colorbox: Removing the blue outline around images

After spending a bit of time sleuthing around this morning for a solution to removing the blue outline or border that you see around either an image that triggers a Colorbox event or around the close button in an active Colorbox, I finally found a simple piece of CSS that did the trick.

This is the code I used which solved my issue:

a:focus, button:focus {
outline:none;
}

Javascript Trick: Add a class or ID to an HTML element on hover

Here is the line of code you can use to add a class or ID to an element in your webpage when a user hovers over it (for example: if you want to add a class called “active” to an li element with a class called “top-nav” in the div called “menu” when a user hovers over it):

  • Recent Posts

  • Recent Comments

  • Categories

  • Archives