Slider to select

[Tim]

Hi guys.
I’d like to alter filter bar’s “time”-filter by adding a slider function to slide through the day.
Can you give me a hint how to do it and where (which file) to look to start with it?

Much appreciated.

Tim

[Nico]

Howdy Tim,

Welcome to our support forums and thanks for reaching out to us! Interesting question here, I’ll help you out with it 🙂

I guess the simplest way to do it is via JavaScript. You can remove the check-boxes html (or drop-down or autocomplete field) and inject the slider code in it’s place. Please note that the input name should be the same (tribe_timeofday) and the values should be the same as well (allday, 06-12, etc). Does this makes sense to you?

Please let me know about it,
Best,
Nico

[Tim]

Hi Nico.

Are we talking about editing in the file filter-scripts.js ?
I don’t find a checkboxes.html.

Thanks for clarifying!
Tim

[Nico]

Hey Tim,

Thanks for following up!

I was just suggesting to do it via JavaScript but without editing the actual plugin files. For example if you are using checkboxes for the time filter:


//check if the time filter is present
if ( jQuery('#tribe_events_filter_item_timeofday').length > 0 ) {

var $time_filter_group = jQuery('#tribe_events_filter_item_timeofday .tribe-events-filter-group');

// remove the checkboxes
$time_filter_group.find('ul').remove();

// insert new control - just as a sample I insert the same html
$time_filter_group.append('

• All Day
• Morning
• Afternoon
• Evening
• Night

');

}


You can add this code to your theme’s javascript file or insert it via functions.php like this:


add_action('wp_head','insert_custom_js');
function insert_custom_js ( ) { ?>

jQuery(document).ready(function($) {

// paste code here

});

This works for small snippets and it's not the recommended method to add javascript files to the theme (more info here).

Please let me know if you still have any doubts on this,
Have a great weekend,
Nico

[Tim]

Dear Nico.

I have altered the functions.php by entering the latter code and instead of the comment

// paste code here

I have added the upper code sample of yours.

Unfortunately this totally breaks the appearance of the header on my site.

Any further suggestions? (I’m using the enfold theme.)

Tim

[Nico]

Hey Tim,

Sorry, I’ve just update the snippet, seems some < and > where not correctly encoded. I just changed that in my previous reply, Can you please try again?

The script as I passed is an example for you to explore the possibilities and craft your custom solution! Visually it won’t do much as it removes the filters DOM and then adds it back again.

Please let me know if it works now,
Best,
Nico

[Support Droid]

This topic has not been active for quite some time and will now be closed.

If you still need assistance please simply open a new topic (linking to this one if necessary)
and one of the team will be only too happy to help.

[Author]

Posts