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.
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.
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.
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;
}
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):