CategoryWeb_development

Make div bigger than parent

The parent should not be positioned!!!!!!!

.child-div {
    position:absolute;
    left:0;
    right:0;
}

https://stackoverflow.com/questions/5581034/is-there-are-way-to-make-a-child-divs-width-wider-than-the-parent-div-using-css

Sticky FacetWP flyout menu

To make it sticky I used the offsetParent, offsetTop and scrollY properties. I placed the button in a positioned element ( not sticky ) hid it with opacity so I can animate it and get the offsetParent ( does not work with display:none; ) and then used scrollY to change it’s opacity. I added a class ‘.sticky-facetwp’ to the button to target it.

The CSS

button.sticky-facetwp {
	opacity: 0;
	position: absolute;
	z-index: 99;
	color:#000 !important;
	transition-property: opacity;
	transition-duration: 1s;
	transition-delay: 0s;
}

.archive button.fixed-sticky-facetwp {
	opacity: 1;
	position: fixed;
}	

The JS


const page = document.querySelector('#content')

// get the filter button
const theFilter = document.querySelector('.sticky-facetwp')
const theFilterTop = theFilter.offsetTop

function stickyfacetwp() {
	if (window.scrollY >= theFilterTop) {
        theFilter.classList.add('fixed-sticky-facetwp');
      } else {
        theFilter.classList.remove('fixed-sticky-facetwp');
      }
}

window.addEventListener('scroll', stickyfacetwp)

Sites with JS exercises

Simple security tip for WordPress

BACKUP EVEYTHING! 

That’s it folks

done looney tunes GIF

JointsWP + WooCommerce = Woojoo theme

Fun project using JointsWP + WooCommerce, nothing fancy. JointsWP is a great starter theme that uses Zurb Foundation framework with WordPress. I added the code to make it compatible with WooCommerce, some styling and voila!

I start doing it for a client that wanted a ‘simple’ theme and decided to publish it here as well. If you use it you can check the documentation of

Plugins i am using are

Simple Social Icons really simple, does the job, great plugin

WooCommerce doh!

This is not a complete theme, but i will use it as a reference if i need to, you can do the same if you like.

Woojoo demo

Looking for tutorial topics!

Hey, if you have any idea about a topic, please send me an email.I have some ideas of my own but i am open to suggestions, thanks!