About filters…

[isnaj]

Hi again,

I have a lot of categories I want to display as filters with my portfolio.
On smartphones, it is not very beautiful because I have a long list of filters, they fill all the screen.

Is there a way on smartphone to allow user to use all these filters, with a more esthetic and simpler way (like the “floating” one which seems to not work with smartphones) ?

Thank you.

[SeaTheme]

Hi,

If there are too many tags for filter, there is not good solution, because the mobile screen size is not big enough. You could try to use the css to show floating filter on mobile, go to Aside / General Settings / Custom Css,Paste the style code to Custom Css

@media (max-width: 480px) {
.filter-floating ul {width: 300px;}
.responsive-ux .hidden-phone.filter-floating-triggle,
#header.mobile_active ~ #main-wrap #logo-page, 
#header.mobile_active ~ #main-wrap .filter-floating {display: block !important;}
}

Cheers!
Bwsm – uiueux.com

[isnaj]

I will try this later, and keep you updating. Thank you )

[isnaj]

Hi,

I tried this, and it is better. But I have 3 questions now :

1.
Filter button is fixed on smartphones even if I made it floating. How can i do to make it floating on smartphones ?

2.
When I press filter button to show filters, I’m not able to press filter button again to mask filters. How can I do it ?

3.
A little display problem… How can I fix it ? http://hpics.li/1d16a56

Thank you for support

[SeaTheme]

This reply has been marked as private.

[isnaj]

Where am I supposed to send you these informations confidentially ?

[isnaj]

Oh ok, found it.
You need my wordpress login that’s right ? FTP too ?

[SeaTheme]

This reply has been marked as private.

[isnaj]

This reply has been marked as private.

[SeaTheme]

This reply has been marked as private.

[isnaj]

This reply has been marked as private.

[SeaTheme]

1) edit the portfolio mod, activate “Filter Fixed”

2)

3) update the Custom Css:

.filter-floating ul { text-align: left; background-color: #fafafa; width:600px; }
@media (max-width: 480px) {
.responsive-ux .hidden-phone.filter-floating-triggle,
#header.mobile_active ~ #main-wrap #logo-page, 
#header.mobile_active ~ #main-wrap .filter-floating {display: block !important;}
.filter-floating ul { width: 240px; }
}

[SeaTheme]

2) changed 2 file:
2.1)
js/custom.theme.js
add to line 434

if(jQuery('.filter-floating').length) {
			 
			jQuery('.filter-floating').on({ 'touchstart click' : function(){ 
				if(jQuery(this).find('ul').is(":visible")){
					jQuery(this).find('ul').css('display','none');
				} else {
					jQuery(this).find('ul').css('display','block');
				}
				 
				return false;
			} });
		}

2.3)
css/pagebuild.css
line 541-555, change / add:

.touch .filter-floating ul {
	display: none;
}
.filter-floating ul li {
	float: none;
}
.no-touch .filter-floating:hover ul,
.touch .filter-floating ul {
	opacity: 1; visibility: visible; z-index: 999;
	-webkit-transform: translateX(-20px);
	-moz-transform: translateX(-20px);
	-ms-transform: translateX(-20px);
	-o-transform: translateX(-20px);
	transform: translateX(-20px);
}

[isnaj]

Wonderful, better than I expected.
Thank you…

[isnaj]

Oops, I’ve just seen a little bug.
On smartphone, when I click on a tag, it closes filter choice but it does not filter my pictures at all.
On computer it works like a charm.

[SeaTheme]

fixed

js/custom.theme.js file update:

if(jQuery('.filter-floating').length) {
			 
			jQuery('.filter-floating-triggle').on({ 'touchstart click' : function(){ 
				if(jQuery(this).siblings('ul').is(":visible")){
					jQuery(this).siblings('ul').css('display','none');
				} else {
					jQuery(this).siblings('ul').css('display','block');
				}
				 
				return false;
			} });
		}

another thing, better re-organize the categories. I noticed you choose all category in portfolio mod, you need add a category(make other listed tag as it’s sub-categories), choose it in in portfolio mod.

[isnaj]

Ok, thank you for your advices.
On smartphone, filter button is hidden by menu bar on the top. Could filter button go down on the screen ?

Thank you. Amazing support ;).

[isnaj]

See this.

[isnaj]

Hi,

I also noticed that on iPhone 4S, it displays not very well.
I’m sorry to add work for you…

[SeaTheme]

Add it to custom css or last line of style.css

@media (max-width: 400px) {
.filter-floating ul { width: 220px!important; }
}

[isnaj]

Hi,

I’m very close to have what I want. I’ve got just one little problem.
On smartphones like iPhone 4, or 4S, my website have a very strange behavior : it crashes, or fails to launch…

Can you help me with that ? Thank you for your support.

[SeaTheme]

please re-paste your wp-admin(url/user/pass) as private reply, I’ll log in to check it. (I removed the password for security
)

[isnaj]

This reply has been marked as private.

[SeaTheme]

There are so many images in home page. The page is too heavy for mobile device. I added a pagination option.

[isnaj]

Indeed, it solved the crash problem.
But when I select a filter, it works only for the current page. I’m so sorry to add you more work again and again… Thank you… I appreciate your help.

[isnaj]

In fact, when I select a filter it works but people have to visit each page with pagination to be able to see pictures filtered. Is there a way to gather every filtered pictures ?

[SeaTheme]

Yes, the filter only works for current page, there is not solution.

[Author]

Posts