Support

  1. joris stolker
  2. General
  3. Thursday, June 08 2017, 11:48 AM
  4.  Subscribe via email
Hi guys,

I would like to make buttons from the checkboxes in the search in the frontend.
Like this site:
https://warmonderhof.nl/echt-warmonderhof/oud-studenten/warmonderhoffers-wereldwijd

Now the easy profile is a little bit different in code and a tiny customization would make it allot easyer.


<label>
<input type="checkbox">
Labelname
</label>


Easyer to style would be to span the Label.



<label>
<input type="checkbox">
<span>Labelname<span>
</label>


I than can use css like this:


label span {
color:#fff;
font-size:14px;
display:block;
border:1px solid #F26F37;
padding:5px;
cursor:pointer;
font-weight:normal;
background: #C6E0ED;
background-image: linear-gradient(to bottom, #FF0000 0px, #f94848 100%);
}

input[type="checkbox"]:checked + span {
background-color:#C6E0ED;
background-image: linear-gradient(to bottom, #C6E0ED 0px, #C6E0ED 100%);
}



Now i have no idea how to grab it and style this label, and change label if checked.
This would be a really easy update but a core change if i do it if i am not mistaken.

Is it something for an update or can you tell me what file i need to change?

Thank you so much!
Easy Profile Support Accepted Answer
Admin
Hi,
this is highly not recommended.

I think the best way is to manage this via a simple javascript like this:
jQuery(document).ready(function(){
var check_button_class = 'btn btn-default btn-xs'; // you can customize here
var check_button_class_active = 'btn-success'; // you can customize here
jQuery('label.checkbox').each(function(){
var self = jQuery(this);
var active = self.find('input').prop('checked');
self.hide();
if(active) self.after('<span class="'+check_button_class+' '+check_button_class_active+'" data-checkbox="'+self.find('input').attr('id')+'">'+self.text()+'</span>');
else self.after('<span class="'+check_button_class+'" data-checkbox="'+self.find('input').attr('id')+'">'+self.text()+'</span>');
});
jQuery('.btn[data-checkbox]').each(function(){
var self = jQuery(this);
self.click(function(){
self.toggleClass(check_button_class_active);
var checkbox = jQuery('#'+self.attr('data-checkbox'))
checkbox.attr("checked", !checkbox.attr("checked"));
checkbox.change();
});
});
});

something like this not require CSS style. In the above function we manage style of buttons with already existing Bootstrap classes, of course you can customize it.

NOTE: function like this will works for all checkboxes in your site, so we recommend you to add some other selector, for example if you need this only for search module then replace "'label.checkbox" with ".jsn_search_module label.checkbox"
  1. more than a month ago
  2. General
  3. # 1
joris stolker Accepted Answer
Pro
Hi Guys,

It took a while but now i added this javascript.
Its awesome!

Thanks!
  1. more than a month ago
  2. General
  3. # 2
  • Page :
  • 1


There are no replies made for this post yet.
However, you are not allowed to reply to this post.

Request Support

Support is currently Offline

Support Availability

Working days: Monday to Friday. The support staff is not available on weekends; in the most of cases tickets will not be answered during that time.

Reply time: Depending on the complexity of your support issue it's usually between a few minutes and 24 hours for paid members and about one week for free members. When we expect longer delays we will notify you.

Guidelines

Before you post: read the documentation and search the forums for an answer to your question.

When you post: include Site Details if you request a support (you can use the form below the reply in Site Details tab).

Auto Solved Question: If after a week the author of the post does not reply to a request by moderator, the question will be marked as resolved.

Language: only English

Easy ProfileĀ® is not affiliated with or endorsed by Open Source Matters or the Joomla Project. Joomla is Free Software released under the GNU/GPL License.