jQuery – closingtags </>
Categories
jQuery PHP Plugins WordPress

Restricting Dates of jQuery UI Datepicker with custom WordPress plugin

Recently, I was tasked with adding a custom field to a WooCommerce order details section. This itself is not a major task and is well documented online, but this particular field had some special requirements. It had to

Allow users to select a date for delivery/pickup
Restrict possible order dates to days when the facility is open

Sounds simple enough, right? Just toss a calendar widget in there and limit the days to weekdays since weekends and holidays are the only days when this particular facility is closed. Weekends are easy, but holidays? That’s where it got a little bit weird. Take Labor Day for instance. It always falls on the first Monday in September. President’s Day falls on the third Monday of February each year. These wouldn’t be difficult to code for the current year, but we don’t want our calendar widget to only work for this year. It should work for every year, so we don’t have to remember to go update our code every December 31st.
This company also has special rules regarding holidays. For example, if the 4th of July falls on a Saturday, then they are closed the Friday before. If the 4th is on a Sunday, then employees get the following Monday off. All in all, there are 11 different holidays we need to prevent orders from happening on.
I wasn’t sure how this could all be done with jQuery, so I ended up doing it in PHP and then serving up an array of dates to be blocked off in the widget with an AJAX call.
PHP
In our PHP code, I went through the normal suggested steps of enabling AJAX calls in a plugin and ended up with the function `company_holidays_callback`. This function gets our current year, and pushes each holiday onto an array. It does this for the current year, and the following year. Figuring out the date for each holiday wouldn’t have been so simple without the PHP strtotime function. That was a life saver! And the  function `fri_or_mon` was the logic used to mark the previous Friday or the following Monday off of the calendar as per special rule of this particular company.

jQuery
To break down the jQuery, we create the instance of our datepicker on the element `#order_fulfillment_date`. If that element exists on the page, we perform our AJAX call to get the list of dates that need to be restricted. The function `noWeekendsOrHolidays` checks to if the date is a weekend. If it is, it gets disabled. If it isn’t, it passes the day onto `nationalDays` where we check if the date is one of our holidays that needs to be disabled as well.

In all of this code there isn’t really anything special or groundbreaking, but I thought the logic that determined the holidays was useful and maybe someone else could save themselves a little bit of time and headaches. Thanks for reading!

Categories
CSS jQuery WordPress

CSS Hamburger Menu

I like the hamburger menu. It makes sense. So this is the one that I use when building a menu for mobile devices.
Here’s the HTML:
<nav id=”mobile-navigation” class=”site-navigation mobile-navigation” role=”navigation”>
<a href=”#” class=”mobile-menu-link”>MENU<span></span></a>
</nav>
And the SCSS:
.mobile-navigation {
display: none;

.mobile-menu-link {
display: block;
position: relative;
width: 90px;
height: 30px;
left: 0;
color: #2f6b68;
font-size: 20px;
text-align: right;
margin: 10px;
@include transition(all, 200ms, ease);

span {
content: ” “;
display: block;
position: absolute;
width: 24px;
height: 4px;
left: 50%;
top: 44%;
margin-left: -43px;
background: transparent;
@include transition(all, 200ms, ease);
&:before {
content: ” “;
display: block;
position: absolute;
width: 24px;
height: 4px;
background: #2f6b68;
left: 50%;
margin-left: -12px;
transform: rotate(45deg);
top: 0;
@include transition(all, 200ms, ease);
}
&:after {
content: ” “;
display: block;
position: absolute;
width: 24px;
height: 4px;
background: #2f6b68;
left: 50%;
margin-left: -12px;
transform: rotate(-45deg);
top: 0;
@include transition(all, 200ms, ease);
}
}
}
.menu-mobile-container {
height: auto;
background-color: #ffffff;
.nav-menu {
position: relative;
z-index: 50;
width: 100%;
.menu-item {
display: block;
margin: 0;
a {
display: block;
border-radius: 0;
}
}
}
}
}
.mobile-navigation.closed {
.mobile-menu-link {
span {
background: #2f6b68;
&:before {
top: -7px;
transform: rotate(0);
}
&:after {
top: 7px;
transform: rotate(0);
}
}
}
.menu-mobile-container {
height: 0;
overflow: hidden;
position: relative;
}
}
Here’s my transition mixin:
@mixin transition($property, $time, $type: ease) {
-webkit-transition: $property $time $type;
-moz-transition:$property $time $type;
-ms-transition:$property $time $type;
-o-transition:$property $time $type;
transition:$property $time $type;
}
And here’s some of the jQuery:
$(document).ready( function() {
$(‘.mobile-menu-link’).on(‘click’, function(event) {
event.preventDefault();
$(this).parent(‘.mobile-navigation’).toggleClass(‘closed’, 200);
});
});
Now, this toggleClass function is giving a little bit of a delay, so if you can figure out a way of doing all of this without it, I’d be interested in knowing a fix.
I like the animation of the ‘X’ that is provided with this hamburger menu. It’s intuitive and self-explaining.

Categories
CSS HTML5 jQuery Mobile PHP WordPress

Developing with Vagrant

Recently, I’ve been trying to find ways to speed up my development time, and I came across a great video showcasing Vagrant. I could spend a lot of time writing a bunch of mumbo jumbo here for you to read, or you could just watch the video that explains it a thousand times better than I would ever be able to.

Categories
CSS HTML5 jQuery PHP WordPress

DemocracyOS

It’s been pretty slow on the web development front for me lately, but I have discovered something new and interesting. It’s called DemocracyOS. What is DemocracyOS? Oh, I’m so glad you asked. Well it’s an open-sourced platform that aims to bring democracy back into the hands of the people in a way that makes voting on almost anything, very simple.
Just recently, we had some elections here in the US (Nov. 4th, 2014) and supposedly, Republicans took back control of both the House and the Senate because so many young people didn’t turn out to vote. What DemocracyOS intends to do, is bring the voting to you. No more waiting in lines at the polls, trying to get away from work, attempting to figure out where you’re supposed to go to vote, or filling in the circles ever so perfectly on an outdated technology (paper).
It’s supposed to be as simple to install and use as WordPress, although I haven’t quite gotten that far yet. I’ll keep the blog updated with my findings though. Check it out at Github here or the main site here.
And if you want to chat about this stuff, hit me up on Twitter @awebdevguy.

Categories
CSS jQuery

The Perfect Browser Home Page

UPDATE! Google removed the ability to host web pages within Google Drive so my simple and free hosting solution provided here (plus the link to the files) is dead.
I decided a while back that I could do my home page (in browser) better than just the standard google.com page. I tailored an html file especially to my needs, and added in some flair. The page will automatically grab the most recent top post from the subreddit /r/EarthPorn. This subreddit basically just supplies cool wallpapers all day. I hosted the file in Google Drive so that I could sync it across my work computer and home computers in Google Chrome. I used this plugin to open this page on a new tab.
So the actual page is here and if you’d like to download the files and tweak it to however you see fit, you can get those here. Let me know @awebdevguy if you do anything cool, or come up with a better way of doing what I did. I know it can be done better.

Categories
HTML5 jQuery

HTML Games

Whoa. I just discovered this super easy way to build HTML5 web games, where a ton of the heavy lifting is already done for you. Seriously, go check out what the guys and gals over at Photon Storm are doing and check out Phaser

Categories
jQuery

Code School

I know it’s been a while since I’ve written anything here and I really don’t have any excuse other than I got lazy. But this is a short, quality post that I’m writing on my phone while my wife is shopping. How cool is that?
Anyways, if you click this link, you can get two free days of Code School. That’s right. Free. They have excellent courses on jQuery, Ruby, Git, and a lot of other developer tools. So check it out.

Categories
CSS jQuery

jQuery code to set 2 elements to same height

This is a little chunk of jQuery written to set a couple elements to equal heights. It has to take into consideration, the padding on the two elements. The two elements being set to equal heights are entry-content and sidebar_images.
$(window).load(function() {

var finalleft = $(‘.entry-content’).height();
var finalright = $(‘.entry-content’).height();
var padleft = parseInt($(‘.entry-content’).css(‘paddingTop’)) + parseInt($(‘.entry-content’).css(‘paddingBottom’));
var padright = parseInt($(‘.sidebar_images’).css(‘paddingTop’)) + parseInt($(‘.sidebar_images’).css(‘paddingBottom’));

if($(‘.sidebar_images’).height() < $(‘.entry-content’).height()){
var padtot = padleft – padright;
$(‘.sidebar_images’).height(finalleft+ padtot);
}
else {
var padtot = padright – padleft;
$(‘.entry-content’).height(finalright + padtot);
}

});

Categories
CSS jQuery

HTML and CSS artwork

This is a very simple tool that lets users create artwork based on absolutely positioned HTML elements.

 
See the Pen gveJz by Dylan Hildenbrand (@Dilden) on CodePen.

Categories
jQuery Parallax

Scrolling Shadows

This plugin is derived from the same idea that was posted here, except in a much simpler form and using HTML5 to control the shadow attributes.
The jQuery looks like this:
function calculateShadow(object){

/* 12/5/13 Dylan Hildenbrand */

var blur = object.data(“blur”);
var spread = object.data(“spread”);
var xpos = object.data(“xpos”);
var dir = object.data(“direction”);

var ypos = null;
if(dir==”down”){
ypos = (jQuery(window).scrollTop() / object.data(‘speed’));
}
else {
ypos = -(jQuery(window).scrollTop() / object.data(‘speed’));
}

object.css(“box-shadow”, xpos+”px “+ypos+”px “+blur+”px “+spread+”px rgba(0, 0, 0, 0.5)”);
}

jQuery(document).ready(function(){

var object = jQuery(“#object”);
calculateShadow(object);

jQuery( window ).resize(function() {
calculateShadow(object);
});

jQuery(window).scroll(function () {
calculateShadow(object);
})
});
The HTML:
<div id=”content” class=”site-content” role=”main”>
<!– Elements on object set parameters for box shadow
data-direction: move shadow up or down
data-blur: shadow blur
data-spread: shadow spread
data-speed: speed of shadow movement; less means faster
data-xpos: x-position of shadow
data-ypos: y-position of shadow
–>
<div id=”object” data-blur=”10″ data-spread=”3″ data-xpos=”10″ data-ypos=”20″ data-speed=”8″ data-direction=”down”>
obj
</div>
</div><!– #content –>