Home Forums Aside WordPress Theme About filters…

This topic contains 26 replies, has 2 voices, and was last updated by  BWSM 2 years, 1 month ago.

Viewing 27 posts - 1 through 27 (of 27 total)
  • Author
    Posts
  • #8191

    isnaj
    Participant

    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.

    #8198

    BWSM
    Keymaster

    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
    Twitter Facebook

    #8203

    isnaj
    Participant

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

    #8251

    isnaj
    Participant

    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

    #8257

    BWSM
    Keymaster
    This reply has been marked as private.
    #8258

    isnaj
    Participant

    Where am I supposed to send you these informations confidentially ?

    #8259

    isnaj
    Participant

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

    #8263

    BWSM
    Keymaster
    This reply has been marked as private.
    #8264

    isnaj
    Participant
    This reply has been marked as private.
    #8265

    BWSM
    Keymaster
    This reply has been marked as private.
    #8266

    isnaj
    Participant
    This reply has been marked as private.
    #8267

    BWSM
    Keymaster

    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; }
    }
    #8269

    BWSM
    Keymaster

    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);
    }
    #8273

    isnaj
    Participant

    Wonderful, better than I expected.
    Thank you…

    #8274

    isnaj
    Participant

    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.

    • This reply was modified 2 years, 2 months ago by  isnaj.
    #8283

    BWSM
    Keymaster

    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.

    #8295

    isnaj
    Participant

    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 ;).

    • This reply was modified 2 years, 2 months ago by  isnaj.
    #8299

    isnaj
    Participant

    See this.

    • This reply was modified 2 years, 2 months ago by  isnaj.
    • This reply was modified 2 years, 2 months ago by  isnaj.
    #8323

    isnaj
    Participant

    Hi,

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

    #8332

    BWSM
    Keymaster

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

    @media (max-width: 400px) {
    .filter-floating ul { width: 220px!important; }
    }
    • This reply was modified 2 years, 2 months ago by  BWSM.
    #8569

    isnaj
    Participant

    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.

    #8582

    BWSM
    Keymaster

    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
    )

    #8586

    isnaj
    Participant
    This reply has been marked as private.
    #8588

    BWSM
    Keymaster

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

    • This reply was modified 2 years, 1 month ago by  BWSM.
    #8593

    isnaj
    Participant

    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.

    #8594

    isnaj
    Participant

    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 ?

    #8597

    BWSM
    Keymaster

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

Viewing 27 posts - 1 through 27 (of 27 total)

You must be logged in to reply to this topic.