Сообщений в теме: 10

[P.K]

Hi

i need to change the layout of the filter so as to add a div which could be used to expand the filter list options. the layout i wish to have is something like

 

Kindly help as to how i can realize this layout of the filter. I can provide the link and login details

 

thanks

[Cheren-dow]

Search layouts are located in the tmpl folder.

In mod_jbzoo_props or mod_jbzoo_search

 

It depends on what module you are using

[Kess]

I've tried to make something similar on a copy of JBZoo demo and it worked fine.

 

So basically you should set a fixed height on a div with filter options and "overflow: hidden". Then add a trigger element and after pressing it you should set height to auto.

 

I'll try to adapt my code to your layout here so you'll be able to try it.

 

This goes to css:

.filter-fields .filter-inline .element-jqueryui .field {
    overflow: hidden;
    height: 95px;
}

.filter-fields .filter-inline .element-jqueryui .field.expanded {
    height: auto;
}

.toggleheight {
    text-align: center;
    cursor: pointer;
}

And you need a js script too:

jQuery(document).ready(function() {
   jQuery(".filter-fields .filter-inline .element-jqueryui .field").after( "<div class='toggleheight'>&#9660;</div>" );
    jQuery(".toggleheight").click(function(){
        jQuery(this).prev().toggleClass("expanded");
    });
});

In order for this to look properly you should have more than three options in your filters. So try to add this code and more options and we'll see how it works for you.

[P.K]

Hi

This seems to work perfectly but some additions will make it better-

1) If we after clicking the pointer, we click anywhere else it should be again be the fixed height. 

2) Where there are not more then 3 options the pointer is behaving abnormally.

3) I know this is difficult but is there any possibility of reloading the search results and not the complete page. Just want to have an idea. 

 

And it would be better if the pointer vanishes after expanding

 

thanks

[Kess]

Ok, Iv'e changed the script to suit your needs better:

jQuery(document).ready(function() {
    jQuery(".filter-fields .filter-inline .element-jqueryui .field").each(function() {
        if (jQuery(this).find("input").length > 3) {
            jQuery(this).after( "<div class='toggleheight'>&#9660;</div>" );        
        }
    });
    jQuery(".toggleheight").click(function(e){
        jQuery(this).prev().toggleClass("expanded");
        e.stopPropagation();
    });
    jQuery('html').click(function() {
        jQuery(".filter-fields .expanded").removeClass("expanded");
    });
});

This will solve #1 and #2

 

 

For your last request just add this css:

.expanded + .toggleheight {
    display: none;
}

I don't know about #3. I've asked our developers about that.

[P.K]

Hi

I have done all this but the layout as changed and moreover the autocomplete in other search is behaving abnormally. What could be the reason?

 

thanks

[Kess]

Hello,

 

I've looked at your website and was unable to find any problems. Autocomplete works fine and this expandable filter looks ok. Please, describe your problems in more detail. Some screenshots can help too.

[P.K]

Hi

Sorry it is working fine. Just cleared the cache.

another concern is that when the internet speed is slow then the filter is check boxes and then they are converted into the jquery buttons. Can this be corrected?

 

thanks

[Kess]

That's how it works - after the page is completely loaded, jQuery changes checkboxes to buttons. Not much can be done about that. Maybe you can try to make the filters hidden by default and show them at the same time when they are changed to buttons.

[P.K]

Hi Kess

Ya it would be really nice if by some way i could keep the checkboxes hidden until the jquery ui is loaded. Kindly suggest me how to proceed

 

thanks