Tag Archive: jquery

Add A Time Input to Contact Form 7 Without A Plugin

August 31, 2020

The Contact Form 7 plugin does not inherently support the time attribute for an input field. As of version 5.2, you can use the native HTML5 date input field (and all of the UX that browsers provide that come along with it) but you cannot set up a time field with the same features.  I prefer using the HTML5 date and time fields for these input configurations rather than a Javascript library.  Though not fully supported, it still does have a considerable amount of browser compatibility and I believe that is the way things are headed.  It’s very likely that the plugin will begin to support and include this field type in the future, but for now, let’s look at how to include this in our form.

This post assumes you have some knowledge about Contact Form 7, some coding skills, and knowledge of your WordPress theme.

Step 1: Add A Field to your Form

We are going to include the field we would like to make a time input field type in our form.  You would perform this the same way you normally do for a text field, but in this case, you would like to give it an ID.  In this case, it will be time-field .  I also gave the field a name of my-time-field  which I will reference later.

Step 2: Change The Property Type With Javascript

Now that we have our field, we are going to use jQuery to change the property type of the input field based on its ID.  This is the same ID you provided in the prior step.

Take the code below and place it wherever you place your theme’s custom Javascript.  This could be in your theme settings or in a file in your theme that is called.

You would like this to occur on $(document).ready()  to once the form is called, you will immediately switch the input field from text  to time  and now the browser will respond accordingly.

This would be good enough for some, however, when Contact Form 7 sends the form submission via email, it will have that field value as a long string.  Something like “YYYYDDHH” and that may not necessarily be legible for your client/user to receive.

That leads us to our next step.

Step 3: Modify the Time Value Before Sending

Here we would like to change the returned value of our new time input field to something legible that a user can understand and interpret.  Since it is returning as a big long string, we can use a little PHP and tap into Contact Form 7’s hooks to modify the value before it is sent in an email.

Place the following snippet in the functions.php file of your theme:

Let’s discuss what is happening here.  The wpcf7_posted_data  filter will allow you to tap into the returned values of your form before it is sent.  In our case, we are looking for a field in the array with the name my-time-field .  Once we have that value, let’s use the PHP functions strtotime()  to parse the value as a time value and then use the date()  function to manipulate it into a format we’d like.  In my case, it will return as the 12-hour with AM/PM meridiem format.

In the email, the recipient will see the time as something like “8:23 AM”.

Conclusion

I hope this helps get you on the right track towards including a time field type in your forms going forward.  Though I find it very likely there will be more support in the plugin going forward, I believe this method is sufficient in getting that accomplished.  Please leave any questions or concerns in the the comments below.

Happy Coding!

Toggle A Caption in Fancybox 3

March 27, 2018

View Demo on CodePen View Project on GitHub

Since the release of Fancybox 3 and all of its new options, I started looking for a way to incorporate the caption of an image and toggle it.  The default effect of this JQuery lightbox plugin is to hide and show the caption (along with all of the UI) when the lightbox is hovered.  I have adjusted this slightly so there is a toggle button added to the options and it toggles the caption.

There are two sections to creating this effect, the Javascript and the CSS.

Adjusting the CSS

While I don’t recommend adjusting the CSS file you call when implementing Fancybox 3, you can easily add your own CSS lines to override the default styling.

I am adding a little padding, adjusting the transition property to accommodate the toggle-in, and placing it out of the viewport so the user can’t see it.  I am also declaring a property for the class I will add to the Fancybox caption when toggled.  This allows us to control the styling and transition when it is in toggled on and off.

I am also adjusting the width of the custom button I plan on creating so it is not fixed like the others.

Adding Javascript to modify Fancybox 3 and its settings

Thanks to the Fancybox 3 documentation, it is incredibly easy to modify how the plugin animates and controls your content.  Normally, Fancybox 3 will work out of the box by simply adding a data-fancybox  attribute to your HTML element, but in this case we need to go a little further to adjust the settings.

In this case, we will be doing two things –

  1. Declaring a custom button for Fancybox 3
  2. Adding a click event to the button which toggles a CSS class

So, how do we do that?

Well, first, we are going to create the button with this Javascript:

Now, we need to ensure that when Fancybox is called that it understands to use our new button.  Let’s call Fancybox and determine which buttons it should use:

Lastly, we need to add a click event on this button, so it knows what to do!

Here we are saying — if this button is ever clicked, see if the caption already has our toggled class, and if not — add it!

That’s it!  You now have a Fancybox 3 plugin that toggles the caption.

Hopefully with this example, you are able to see the flexibility and customization the developers at FancyApps provide to their already stellar plugin.  You could easily develop a custom user-experience that goes much further than a simple Lightbox effect.  Feel free to comment and send me examples!

 

Animate Elements with CSS Animations & JQuery

October 16, 2016

View Project on CodePen

Today, I wanted to feature a technique I have been using which quickly allows me to animate elements on a page with CSS animations.  It will loop through each element on the page  based on a CSS class and intermittently add an animation to that element.  The method has fall-backs for browsers that do not support CSS animations (in that they just show on page load, but do not animate) so you never have to worry about the content not showing on older browsers.  This method also prevents “glitchy” content blips that tend to occur with JQuery class additions on the document loading.

First, we must start with our HTML content:

It contains 4 paragraphs, all with some Lorem Ipsum.  What’s important is that each element is given a class of “animate”, which we will use as our selector.  The class can be given to any element you were hoping to use a CSS animation for, which opens up the ability to constantly add/remove and dynamically pull elements without ever having to worry about the front-end animation suffering.

This is because of the JQuery you will see below:

Fire this JQuery snippet when your document is ready.  Let’s talk a bit about what is happening here —

First, we use the each() selector to grab each element on the page with the “animate” class.  Then, we are saying: “Every 500 milliseconds, add the class ‘animation’ to that element, wait 500 milliseconds, go onto the next element, add the class to that one, and so on, and so forth.”  This function will go through every element with that class, add the animation class, and do this until they are all done.

I like this method because it delays the animation on each element by 500 milliseconds (which you of course can change the timing of), making a nice presentation no matter how many elements you have on the page.

You can, however, choose to simply queue all of the animations at once with this code instead:

Now that we have these core parts set up, the possibilities become endless with CSS.  I wanted to ensure a fallback in case the CSS animations aren’t supported as well, so we will incorporate the new @supports rule.

I am only relying on the -webkit- vendor prefix and full support, but you could open this up to more browsers by incorporating other vendor prefixes.  I find that this works for a majority of my cases (and will only improve), so it is enough for me.  The best part of this approach is that, worst case scenario, elements are given a class with our JQuery function and nothing happens on the front end.  No content is hidden or lost.

Again, let’s beak this down —

First, we are using the rule declaration and nested a few CSS rules.  If animations are supported, then I want to set the initial state of those elements.  In this case, I am going to fade in these elements, so any element with the animate class is going to need to be hidden:

Next, I want to determine what we do when they are animated.  The class “animation” is being added to each element, so let’s determine what that is:

In this case, the keyframes of the animation are being determined by the “slideIn” animation.  It transforms and fades the element in.  In the CSS class, we are able to determine which animation is used, how long it takes, and the state it is in when the animation is done.

You can change any of these elements and that’s the biggest reason I favor this method over any other.  I can update the CSS constantly, change animations, change how long they animate for, what they do, without ever modifying some of the main core code of HTML and JQuery.

If I ever want to animate another element, I can simply add the “animate” class to it and it will follow the same behavior.  This allows for a robust amount of flexibility.

For example, I can adjust the animation for any element by giving it a new CSS rule without ever touching the HTML or JQuery code.

Say I want to have the first paragraph perpetually loop through its animation.  I can do this with one simple new CSS rule:

And now, the first paragraph will run through the animation after 1 second of delay, run for 2 seconds, and loop infinitely.

View the Demo on CodePen

You can make countless rules and animations for all of the elements on the page, and also determine their state before the animation occurs.

I hope this helps with your front-end development processes going forward.  Feel free to explore this approach.  Hopefully, its ability to scale will really make it a routine method in your process.

 

 

Force Reload on a Hash or Anchor Change with JQuery

September 2, 2014

I had a JQuery function that detected if there was a hash/anchor tag appended to the loaded URL.  If there was, it would scroll to the anchor tag on the page.

This was the function:

This was great — the problem was, however, that if for some reason the hash changed but the page remained the same, it wouldn’t scroll to the new anchor. This was expected because DOCUMENT.READY will only fire once.

The most common method of detecting a hash/anchor change is using this function:

This will force a reload whenever a hash tag changes. Now, if the URL changes, the page will reload and it will fire my original function detecting a hash/anchor tag.

For this particular instance, this method worked. It doesn’t always, and this may not apply to your problem, but in this case it made sense. It’s also very well supported.

Good luck!

Fixing Internet Explorer 7 Z-Index Problems JQuery Drop Down and Slider

September 28, 2011

JQuery is delightful. It can practically fix anything.

There has been a huge problem with IE7 properly acknowledging the Z-Index CSS property, especially when it comes to JQuery drop-down menus and JQuery sliders. Often, the drop down menu would be forced behind the slider, and thus render it useless.

I found a nice JQuery hack written by a developer named Vance Lucas. He deserves all the credit for this, I would just like to help share it.

Basically, you need to include that function in any of your JQuery .js folders. It’s basically creating a hierarchy of div tags, starting with the very first one at “z-index:1000;”, and then decreasing it decrementally by 10.

IE7 acknowledges this, and it works pretty damn good.

To see the post made by Vance Lucas, you can visit that here.

Show the man some love!