I needed to setup some text search functionality on a page and the client really wanted the searched words to be highlighted.
I found a great library for exactly this over on The Art of the Web.
They do a great job of explaining this library so please check them out to learn more!
When you have a hash link on your page ( href=”#target” ) sometimes the browser scrolls too low and cuts off or puts too close to the top the target element.
You can offset this hash link by hooking into the ‘hashchange’ event.
|
1 2 3 4 5 |
// Allow a hash link to move X pixels above the target location // https://stackoverflow.com/questions/17534661/make-anchor-link-go-some-pixels-above-where-its-linked-to window.addEventListener("hashchange", function () { window.scrollTo(window.scrollX, window.scrollY - 100); }); |
This does NOT resolve linking directly to this hash tag, but will fix the on page hash link.
To do that you can setup the following functions.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
// The function actually applying the offset function offsetAnchor() { if (location.hash.length !== 0) { window.scrollTo(window.scrollX, window.scrollY - 100); } } // Captures click events of all <a> elements with href starting with # $(document).on('click', 'a[href^="#"]', function(event) { // Click events are captured before hashchanges. Timeout // causes offsetAnchor to be called after the page jump. window.setTimeout(function() { offsetAnchor(); }, 0); }); // Set the offset when entering page with hash present in the url window.setTimeout(offsetAnchor, 0); |
Thanks to Eric Olsen over at stack overflow!
I had an issue that was driving me up a wall. Certain fonts, technically only the normal font weight of the Open Sans font, was not printing on the first “print” attempt. After clicking print a second time the page text would print as normal.
This issue was due to how Chrome loads / displays fonts. Feel free to read up on ‘font-display’ and Chromes issue with printing web loaded fonts. The short answer is basically Chrome was trying to reload the font for the print page instead of using the font it used on the screen.
The solution is thankfully VERY simple. Just add “&display=swap” to your Google Font url string in order to avoid this issue. This also has a variety of other speed benefits, so you should ALWAYS be adding display=swap to your Google Web fonts and Google Fonts now supports this by default.
I recently needed to update a form to update through AJAX so the page didn’t reload when submitted. The issue was that we had some images on this form. In the past I have used things like plupload, but that didn’t seem like the right approach in this instance.
At first I looked into the “fetch” api and saw a good post from Tania Rascia, but unfortunately the fetch API still isn’t fully adopted…DAMN YOU MICROSOFT!
Thankfully I was able to find a jQuery version of this same idea over on Makeitweb.com by Yogesh Singh.
I also needed to make sure I sent along post data with the FormData to update the rest of the form. Here is an example of the JS code I ended up using:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
var $agentEditForm = $('#agent-edit-form'); $agentEditForm.submit(function(e){ e.preventDefault(); //disable our button so we don't submit twice $(this).find('button.save-form').prop('disabled', true); // Serialize our form into a usable object var formData = $(this).serializeObject(); //our PHP script we are sending the info to var url = '/update-agent.php'; //Create a FormData object var fd = new FormData(); //get the files from our input[type=file] var files = $('#profile-image')[0].files[0]; //if someone as uploaded an image let's attach it to our formdata if(files){ fd.append('profile_image',files); } // Unfortunately we cannot attach an object to our form data, so lets loop through our formData and attach our variables for(var propertyName in formData) { fd.append(propertyName,formData[propertyName]); } // Send our data off to our server script $.ajax({ url: url, type: 'post', data: fd, contentType: false, processData: false, success: function(response){ if(response != 0){ //success }else{ //fail } // Remember to re-enable our submit button $agentEditForm.find('button.save-form').prop('disabled', false); }, }); return false; }); |
On the server script you can access this data just like any other form submission.
PHP
|
1 2 |
print_r($_FILES); print_r($_POST); |
There we go! Now we can submit our form, including images, to our server script!
NOTE: We are using a custom function to serialize our form data. You can find that function here.
I have been waiting for the day when using <input type=”date” /> would be common…alas, 3 years after the standards were written it is still not supported in IE or Safari.
UNFORTUNATELY we still have to support these browsers…
Traditionally I have been using a third party datepicker (jQuery UI, Bootstrap Datepicker, etc) but I REALLY wanted to just use the default type=”date” this time.
I found a great solution over on Stack Overflow from Kashif Latif.
|
1 2 3 4 5 6 7 8 9 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="http://cdn.jsdelivr.net/webshim/1.12.4/extras/modernizr-custom.js"></script> <script src="http://cdn.jsdelivr.net/webshim/1.12.4/polyfiller.js"></script> <script> webshims.setOptions('waitReady', false); webshims.setOptions('forms-ext', {type: 'date'}); webshims.setOptions('forms-ext', {type: 'time'}); webshims.polyfill('forms forms-ext'); </script> |
BAM! We have a polyfill. As far as I can tell this does the trick.
The Gravity Forms repeater field example is helpful, but has multiple issues that don’t make themselves apparent until you try to implement it.
Thankfully Giorgos Sarigiannidis has a better repeater example that solves some of the most troubling issues of the repeater field.
Here is my example of the same idea, but using a different form as the fields in the repeater. This allows the client to update the fields in the repeater themselves.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
add_filter( 'gform_form_post_get_meta_30', 'jb_add_repeater' ); function jb_add_repeater( $form ) { $field_id = 1000; $another_form = GFAPI::get_form( 35 ); foreach ( $another_form['fields'] as $field ) { $field->id = $field_id += 1; $field->formId = $form['id']; if ( is_array( $field->inputs ) ) { foreach ( $field->inputs as &$input ) { $input['id'] = (string) ( $input['id'] + 1000 ); } } } $repeater = GF_Fields::create( [ 'type' => 'repeater', 'description' => '', 'id' => $field_id, 'formId' => $form['id'], 'label' => 'Attendees:', 'addButtonText' => 'Add Attendee', 'removeButtonText' => 'Remove Attendee', //'maxItems' => 5, 'pageNumber' => 1, 'fields' => $another_form['fields'], ] ); $repeater_exists = false; foreach ( $form['fields'] as $field ) { if ( 'repeater' === $field->type && $field->id === $field_id ) { $repeater_exists = true; } } if ( ! $repeater_exists ) { $form['fields'][] = $repeater; } return $form; } |
Gforms doesn’t have a counter system built in yet so if you want to use a counter with your repeater ( ex: Attendee #1, Attendee #2, etc… ) here is some SCSS code you can use to accomplish that.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.gfield_repeater_items { counter-reset: section; .gfield_label { font-size: 1.6rem; } .gfield_repeater_item { padding-bottom: 20px; border-bottom: 1px solid #e5e5e5; margin-bottom: 30px; .gfield_repeater_buttons { display: none; margin-bottom: 20px; .add_repeater_item { margin-right: 20px; } } &:before { counter-increment: section; content: "Attendee #" counter(section) ":"; color: black; display: block; margin-bottom: 15px; } &:last-child { .gfield_repeater_buttons { display: block; } } } } |
This will look something like this:
