I think I would not show the All Countries option, so maybe use a checkbox control instead?
To show the flags instead of labels, and also hide the input button:
.searchandfilter[data-sf-form-id="14110"] .sf-field-taxonomy-project_company > ul > li {
margin-right: 20px;
float: left;
}
.searchandfilter[data-sf-form-id="14110"] .sf-field-taxonomy-project_company > ul > li > input {
display: none;
}
.searchandfilter[data-sf-form-id="14110"] .sf-field-taxonomy-project_company > ul > li > label {
color: rgba(0,0,0,0);
height: 64px;
width: 64px;
max-height: 64px;
overflow: hidden;
}
.searchandfilter[data-sf-form-id="14110"] .sf-field-taxonomy-project_company > ul > li > input[value="austria"] + label {
background: url(https://www.martabak.vip/wp-content/uploads/2021/01/blue.png);
}
.searchandfilter[data-sf-form-id="14110"] .sf-field-taxonomy-project_company > ul > li > input[value="belgium"] + label {
background: url(https://www.martabak.vip/wp-content/uploads/2021/01/red.png);
}
.searchandfilter[data-sf-form-id="14110"] .sf-field-taxonomy-project_company > ul > li > input[value="france-property"] + label {
background: url(https://www.martabak.vip/wp-content/uploads/2021/01/grey.png);
}
AnonymousInactive
https://prnt.sc/vodelo Hi, by default I want to active Projections taxonomy when a user comes to this page. Is it possible then how?
here is my code:
<?php
/*
Template Name: analysis
*/
get_header();
$ourCurrentPage = get_query_var('paged');
$args = array(
'post_type' => 'analysis',
'post_status' => 'publish',
'posts_per_page' => 10,
'taxonomy' => 'projections',
'paged' => $ourCurrentPage
);
$args['search_filter_id'] = 1605;
$the_query = new WP_Query( $args );?>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/venobox/1.9.1/venobox.min.css" integrity="sha512-e+0yqAgUQFoRrJ4pZigQXpOE0S7J9IGwmgH801h4H5ODqOCG8/GRfXHQ+9ab754NL79O7wDwdjwY3CcU8sEANg==" crossorigin="anonymous" />
<style>
.f1p{display:flex;flex-wrap:wrap;max-width:900px;margin:auto;}.grant-parent{width:30%;margin:1%;padding:15px;background:#fff;border:1px solid #e5e5e5;border-radius:4px;}.heding.ccount{font-size:15px;margin-bottom:0px;}.pagination{width:100%;}
</style>
<div class="f1b-main" style="padding-top:30px;">
<?php echo do_shortcode('[searchandfilter id="1605"]'); ?>
<div class="f1p">
<?php if ( $the_query->have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<?php $image = get_field( 'image' );?>
<div class="fl grant-parent">
<P class="heding ccount"><?php echo get_field( "date" );?></P>
<?php
foreach((get_the_terms( $post->ID, 'analysis' )) as $category){
echo "<p><a class='venobox' data-gall='$category->name' href='$image' data-title='the_title()'><img src='$image' /></a></p>";
}
?>
<p class="heding ccount" title="<?php the_title(); ?>"><b><?php the_title(); ?></b></p>
</div>
<?php endwhile; ?>
<div class="pagination">
<h2><?php echo paginate_links(array(
'total' => $the_query->max_num_pages
));
?></h2>
</div>
<?php else : ?>
<div class="not-found">
<p><?php _e( 'Sorry, no products matched your criteria.'); ?></p>
</div>
<?php endif; ?>
<?php wp_reset_postdata(); ?>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/venobox/1.9.1/venobox.min.js" integrity="sha512-6mm1Gra+9mSztlk6Q45F1soEHmkduyd2ponCIWNo5pr0lgcr8d79GQjQ3Nw0uRR3/+y/OZGklAi38yE1QSNpCw==" crossorigin="anonymous"></script>
<script>
jQuery('input[value="projections"]').trigger( "click" );
jQuery('.venobox').venobox();
(function($) {
"use strict";
jQuery(document).on("sf:ajaxfinish", ".searchandfilter", function() {
jQuery('.venobox').venobox();
});
}(jQuery));
</script>
<?php do_action( 'kadence_single' );
get_footer();
AnonymousInactive
Hi Trevor,
Thanks for your response.
I tried above approach but it isn’t triggering code after ajax refresh.
Basically there are 2 drop down, and I want ‘continue’ button to be disabled unless user selects a valid value in both of the dropdowns.
As soon as user selects first dropdown, page is refreshed and button is active.
Here’s the code that I am adding in page header. Please let me know if I am missing anything obvious. Thanks
<script type="text/javascript">
jQuery(document).ready(function( $ ){
jQuery("input[value='Continue']").css('background-color','#eee').prop('disabled',true);
});
jQuery(document).on("sf.ajaxformfinish",".searchandfilter",function(){
"use strict";
alert('form is changed');
jQuery('.searchandfilter .sf-field-post-meta-year').on('change', function() {
a = jQuery('.sf-field-post-meta-year option:checked').val();
console.info(a);
console.info(b);
if((typeof a === "undefined") || (typeof b === "undefined") || (a.length == 0) || (b.length == 0)){
console.info('disabled');
jQuery("input[value='Continue']").css('background-color','#eee').prop('disabled',true);
}
else{
console.info('enabled');
jQuery("input[value='Continue']").css('background-color','#F96714').prop('disabled', false);
}
});
jQuery('.searchandfilter .sf-field-tag').on('change', function() {
b = jQuery('.sf-field-tag option:checked').val();
console.info(a);
console.info(b);
if((typeof a === "undefined") || (typeof b === "undefined") || (a.length == 0) || (b.length == 0)){
console.info('disabled');
jQuery("input[value='Continue']").css('background-color','#eee').prop('disabled',true);
}
else{
console.info('enabled');
jQuery("input[value='Continue']").css('background-color','#F96714').prop('disabled', false);
}
});
});
});</script>
You could use CSS for each, maybe like this, I think:
input[value="beige"] + label {
background-color: #f5f5dc !important;
color: transparent;
}
input[value="africa-where"] + label:hover {
cursor: pointer;
}
.searchandfilter li[data-sf-field-input-type="checkbox"] label {
height: 50px;
width: 100px;
}
I paste the code in to a code area, and the " you see is your browser trying to render a double quote. t depends what you are copying and pasting into. A rich text editor would cause that, but a proper text or code editor should not. Be carefuly, because rich text editors convert double quotes into those more curly smart quotes, which will not work.
Also, that image is HUGE. You need scaled down versions!! All the same size, and use that size in the following code (I assumed here that it would be 50x100px):
input[value="africa-where"] + label {
background-image: url("http://ecotripmatch.noventum.us/wp-content/uploads/2017/09/Africa1.jpeg") !important;
background-size: cover;
color: transparent;
}
input[value="africa-where"] + label:hover {
cursor: pointer;
}
.searchandfilter li[data-sf-field-input-type="checkbox"] label {
height: 50px;
width: 100px;
}
If they DO match the size, then you would not need the background-size: cover; line.
If you want to hide the checkbox, this would then do that:
.searchandfilter li[data-sf-field-input-type="checkbox"] input {
display: none;
}
AnonymousInactive
Okay, is that the only code I put or do I need other code? I am asking because that code by itself does nothing. And what is "
input[value="africa-where"] + label {
background-image: url(“http://ecotripmatch.noventum.us/wp-content/uploads/2017/09/Africa1.jpeg”);
}
It was an example. You put the values that your checkboxes have. For example …
Africa has a label of Africa, but its value (if you look at the page code) is africa-where, so the CSS rule would be:
input[value="africa-where"] + label {
background-image: url(...);
}
AnonymousInactive
Why would I use input[value="United States"] + label
What does that do? Why United States and what is "
How is that code supposed to help?
Could you not change:
input[type=checkbox] + label
to:
input[value="United States"] + label
or whatever?
Why not use CSS like this:
li.sf_file_post_meta_Colors > ul > li > input[value="G"] { .... }
