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):
$('#menu li').hover ( function(){ $('.top-nav').addClass('active')}, function() {$('.top-nav').removeClass('active')} ) </script>
Here is the code I use to add a div or image or other element to just one page or category page of my WordPress sites:
This code will add a div with the id “featured_content” only on the home page:
<?php if ( is_home() ) { ?> <div id="featured_content"> </div> <?php } ?>
This code would add a div with the id “featured_recipe” to all posts in the category “recipes.”:
<?php if ( is_category('recipes') ) { ?> <div id="featured_recipe"> </div> <?php } ?>
This code would exclude “myimage.jpg” only on the Contact page:
<?php if ( !is_page('contact') ) { ?> <img src="myimage.jpg"> <?php } ?>
As you can see, there are many uses and ways implementations of this code. Let me know if you have any questions or need further assistance.