Changes don’t work on my page

  • Resolved communi3

    (@communi3)


    7 years ago

    I’ve installed TC Custom JavaScript with the following code:
    (function($){

    if ( matchMedia( ‘only screen and (min-width: 700px)’ ).matches ) {

    $(‘.roll-project’).each(function(){

    var projItem = $(this).find(‘.project-item ‘);
    var itemCount = projItem.size();
    var itemWidthTotal = projItem.width()*itemCount;
    var visibleSpace = $(this).width()-itemWidthTotal;

    if(itemCount < 5 && itemWidthTotal < $(this).width()){

    $(this).css({
    ‘margin-left’: visibleSpace/2+’px’
    });

    }

    });

    }

    })(jQuery);

    I’m using template Sydney and my wordpress version is 4.9.4–es_ES
    I can work with the plugin but changes not work. I want put on the middle the images when I’m on ‘PROYECTOS’ and I click on ‘-Escaleras-‘ or ‘Barandillas’
    Thanks

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Author Tiny Code

    (@tinycode)

    Please check the condition: if(itemCount < 5 && itemWidthTotal < $(this).width())
    Is it correct? I tried to log the values then I see itemCount > 5.

    • This reply was modified 7 years ago by Tiny Code.
    Thread Starter communi3

    (@communi3)

    Thank’s for your answer. But don’t work. I want to center the results when I click on every buttons (‘Escaleras’, ‘Barandillas’) When I have all the results is not a problem, but when I select one Button I have a lot of margin right.

    Thank’s

    Plugin Author Tiny Code

    (@tinycode)

    In your JS code, the quotes is not correct, it cause error (you can check the error in console log). Please try to use double quote

    Thread Starter communi3

    (@communi3)

    Thanks. I’ve put the same code to TC Custom JavaScript:
    (function($){

    if ( matchMedia( ‘only screen and (min-width: 768px)’ ).matches ) {

    $(‘.roll-project’).each(function(){

    var projItem = $(this).find(‘.project-item ‘);
    var itemCount = projItem.size();
    var itemWidthTotal = projItem.outerWidth()*itemCount;
    var visibleSpace = $(this).outerWidth()-itemWidthTotal;

    if(itemCount < 5 && itemWidthTotal < $(this).width()){

    $(this).css({
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
    ‘margin-left’: visibleSpace/2+’px’
    });

    }

    });

    }

    })(jQuery);

    ———AND I ADD THIS CSS———————-
    @media only screen and (max-width: 768px){
    .panel-grid-cell {
    display: table-cell;
    vertical-align: middle;
    padding-left: 10px;
    padding-right: 10px;
    }
    }

    @media only screen and (min-width:768px){
    .project-wrap{
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
    }

    .roll-project.fullwidth .project-item {
    width: 50%;
    }

    }

    ————–THE RESULT IN PROJECTS IS———————–
    https://rfserveis.com/
    I don’t want 2 columns in pc and tablet because the margin is really big.

    Thanks

    Plugin Author Tiny Code

    (@tinycode)

          if(itemCount < 5 && itemWidthTotal < $(this).width()){
      
        $(this).css({
              max-width: 480px;
    margin-left: auto;
    margin-right: auto;
          'margin-left': visibleSpace/2+'px'
        });
        
      }

    Please correct your code, the css should has quotes, like this:

            $(this).css({
              'max-width': '480px';
              'margin-left': 'auto';
              'margin-right': 'auto';
              'margin-left': visibleSpace/2+'px'
        });

    And the condition if(itemCount < 5 && itemWidthTotal < $(this).width()) always is false. Please check it.

    Plugin Author Tiny Code

    (@tinycode)

    The theme which you using is hard to custom. It use JS to set absolute position.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Changes don’t work on my page’ is closed to new replies.