Skip to content
Advertisement

Jquery – Opacity toggle and pointer action cancelling not working on mobile

I’m building a calorie calculator and ran into some issues. I want to filter based on certain diets. The elements that do not fit the description get greyed out, and become unclickable. All works fine on desktop, none of these however take effect on mobile. I have no idea why, I tried playing around with opacity, fadeout and css settings but nothing seems to do the trick.

here’s the js:

$(document).ready(function (){ 

// Dropdown menu icon animation up/down toggle.

$('.dropbtn').on('click', function() {
    $('#myDropdown').slideToggle();
    $(this).find('i').toggleClass('fa-sort-up fa-sort-down')
});

$(".soups, .desserts, .teas").hide();

// Hover animation ITT FOLYTASD

$("#maindish, #soups, #desserts, #teas").hover(function() {
    $(this).fadeTo("slow", 1);
    $(this).css('visibility', 'visible')
}, function() {
    $(this).fadeTo("slow", 0.5);
    $(this).css('visibility', 'visible');
});



//Main dish

$("#maindish").click(function() {
    var visibility = $("#maindish").is(":visible");
    if (visibility) {
        console.log("not visible");
    } else {
        console.log("visible");
    }
    //$(".soup, .desserts, .teas").hide();
    $(".maindish").slideToggle("fast");
    $("#maindish").toggleClass("visible");

    $(".soups, .desserts, .teas").slideUp();
    $("#soups, #desserts, #teas").removeClass("visible");

});

//soup

$("#soups").click(function() {
    var visibility = $("#soups").is(":visible");
    if (visibility) {
        console.log("not visible");
    } else {
        console.log("visible");
    }
    $(".maindish, .desserts, .teas").slideUp();
    $(".soups").slideToggle("fast");
    $("#soups").toggleClass("visible");
    $("#maindish, #desserts, #teas").removeClass("visible");
});

//teas

$("#teas").click(function() {
    var visibility = $("#teas").is(":visible");
    if (visibility) {
        console.log("not visible");
    } else {
        console.log("visible");
    }
    $(".maindish, .desserts, .soups").slideUp();
    $(".teas").slideToggle("fast");
    $("#teas").toggleClass("visible");
    $("#maindish, #desserts, #soups").removeClass("visible");
});

//desszerts

$("#desserts").click(function() {
    var visibility = $("#desserts").is(":visible");
    if (visibility) {
        console.log("not visible");
    } else {
        console.log("visible");
    }
    $(".maindish, .teas, .soups").slideUp();
    $(".desserts").slideToggle("fast");
    $("#desserts").toggleClass("visible");
    $("#maindish, #teas, #soups").removeClass("visible");
});

$(document).ready(function() {
    $(".ingredients i").click(function() {
        var calories = $(this).parent().data("calories");
        var carbs = $(this).parent().data("carbs");
        var fat = $(this).parent().data("fat");
        var proteins = $(this).parent().data("proteins");
        var totalNum = $("#total");
        var totalCarbs = $("#totalCarbs");
        var totalFats = $("#totalFats");
        var totalProteins = $("#totalProteins");
        var currentCalories = +totalNum.html();
        var currentCarbs = +totalCarbs.html();
        var currentFats = +totalFats.html();
        var currentProteins = +totalProteins.html();
        var pressed = $(this).hasClass("clicked");
        if (isNaN(currentCalories)) {
            currentCalories = 0;
        }
        if (pressed) {
            $(this).removeClass("clicked");
            $(this).addClass("fa-plus");
            totalNum.text(+(currentCalories - calories).toFixed(1));
            totalCarbs.text(+(currentCarbs - carbs).toFixed(1));
            totalFats.text(+(currentFats - fat).toFixed(1));
            totalProteins.text(+(currentProteins - proteins).toFixed(1));
        } else {
            $(this).addClass("clicked");
            totalNum.text(+(currentCalories + calories).toFixed(1));
            totalCarbs.text(+(currentCarbs + carbs).toFixed(1));
            totalFats.text(+(currentFats + fat).toFixed(1));
            totalProteins.text(+(currentProteins + proteins).toFixed(1));
        }
    });
});

// plus button hover effect

// $("td i").hover(
//     function() {
//         $(this).removeClass('fa-plus');
//         $(this).addClass('fa-plus-circle');
//     },

//     function() {
//         $(this).removeClass('fa-plus-circle');
//         $(this).addClass('fa-plus');

//         if ($(this).hasClass("fa-times-circle")) {
//             $(this).removeClass('fa-plus');
//         }

 
      
//     });


// plus button click effect

$("td i").click(function() {
    $(this).removeClass('fa-plus');
    $(this).removeClass('fa-plus-circle');
    $(this).toggleClass("fa-times-circle");

  

});

$(".fa-times-circle").click(function() {

  $(this).removeClass('fa-plus-circle');
  $(this).addClass('fa-plus'); 
});





//  Filters + Description text setup

//  Filters + Description text setup

$(document).on('click', '.diet-filter-button', function () {
     var map = {
        vegan: {
            attr: 'vegan',
            desc: 'veganDescription'
        },
        vegeterian: {
            attr: 'vegetarian',
            desc: 'vegetarianDescription'
        },
        gluten: {
            attr: 'glutenfree',
            desc: 'glutenFreeDescription'
        },
        lactose: {
            attr: 'lactoseFree',
            desc: 'lactoseFreeDescription'
        },
        addedSugar: {
            attr: 'noAddedSugar',
            desc: 'noAddedSugarDescription'
        }
    },
    diet = $(this).data('diet'),
    filtered = $(this).hasClass("filtered");

    if (filtered) {
        $(this).removeClass("filtered");
        $(".ingredient:not([" + map[diet]['attr'] + "])").css('visibility', 'visible').fadeTo(1000, 1).css("pointer-events", "auto");
        $("#" + map[diet]['desc']).css("opacity", "0");
        $(this).css('visibility', 'visible')
    } else {
        $(this).addClass("filtered");
        $(".ingredient:not([" + map[diet]['attr'] + "]").css('visibility', 'visible').fadeTo(1000, 0.5).css("pointer-events", "none").fadeTo("slow", 0.5);;;
        $("#" + map[diet]['desc']).fadeTo("slow", 1);;
        $(this).css('visibility', 'visible')
    }
});

});

And the html:

<div id="VeganNoBaseSauce"></div>


                <!-- BASES -->
                <div><img class="headingimage" src="http://www.padthai.decorolux.com/wp-content/uploads/2018/03/ikonok-06.png"></div>
                <table>
                    <tr>
                        <th width="15%">Bases</th>
                        <th width="20%"></th>
                        <th width="15%" style="font-weight:normal">Calories</th>
                        <th width="15%" style="font-weight:normal">Carbs</th>
                        <th width="15%" style="font-weight:normal">Fat</th>
                        <th width="15%" style="font-weight:normal">Protein</th>
                        <th width="5%" style="font-weight:normal">Add</th>
                    </tr>
                    <tr vegetarian vegan lactosefree glutenfree soyfree sugarfree noaddedsugar>
                        <td><img src='http://www.padthai.decorolux.com/wp-content/uploads/2018/03/base_toppings_extra.png'></td>
                        <td>Rice Noodle</td>
                        <td>517.2</td>
                        <td>76.1</td>
                        <td>14.4</td>
                        <td>20.8</td>
                        <td class="ingredients" data-calories="517.2" data-carbs="76.1" data-fat="14.4" data-proteins="20.8"><i class="fa fa-plus" style="font-size:20px;"></i></td>
                    </tr>
                    <tr class="ingredient" vegetarian lactosefree soyfree sugarfree noaddedsugar>
                        <td><img src='http://www.padthai.decorolux.com/wp-content/uploads/2018/03/base_toppings_extra2.png'></td>
                        <td>Egg Noodle</td>
                        <td>510.5</td>
                        <td>66.1</td>
                        <td>14.1</td>
                        <td>29.8</td>
                        <td class="ingredients" data-calories="510.5" data-carbs="66.1" data-fat="14.1" data-proteins="29.8"><i class="fa fa-plus" style="font-size:20px;"></i></td>
                    </tr>
                    <tr class="ingredient" vegetarian vegan lactosefree glutenfree soyfree sugarfree noaddedsugar>
                        <td><img src='http://www.padthai.decorolux.com/wp-content/uploads/2018/03/base_toppings_extra3.png'></td>
                        <td>Vermicelli</td>
                        <td>506.9</td>
                        <td>76.9</td>
                        <td>14.1</td>
                        <td>18.1</td>
                        <td class="ingredients" data-calories="506.9" data-carbs="76.9" data-fat="14.1" data-proteins="18.1"><i class="fa fa-plus" style="font-size:20px;"></i></td>
                    </tr>
                    <tr class="ingredient" vegetarian vegan lactosefree soyfree sugarfree noaddedsugar>
                        <td><img src='http://www.padthai.decorolux.com/wp-content/uploads/2018/03/base_toppings_extra4.png'></td>
                        <td>Whole Grain Noodle</td>
                        <td>476.6</td>
                        <td>53.8</td>
                        <td>16.6</td>
                        <td>28.0</td>
                        <td class="ingredients" data-calories="476.6" data-carbs="53.8" data-fat="16.6" data-proteins="28"><i class="fa fa-plus" style="font-size:20px;"></i></td>
                    </tr>
                    <tr class="ingredient" vegetarian vegan glutenfree soyfree sugarfree noaddedsugar>
                        <td><img src='http://www.padthai.decorolux.com/wp-content/uploads/2018/03/base_toppings_extra5.png'></td>
                        <td>White Rice</td>
                        <td>514.8</td>
                        <td>72.4</td>
                        <td>14.8</td>
                        <td>23.0</td>
                        <td class="ingredients" data-calories="514.8" data-carbs="72.4" data-fat="14.8" data-proteins="23"><i class="fa fa-plus" style="font-size:20px;"></i></td>
                    </tr>
                    <tr class="ingredient" vegetarian vegan lactosefree glutenfree soyfree sugarfree noaddedsugar>
                        <td><img src='http://www.padthai.decorolux.com/wp-content/uploads/2018/03/base_toppings_extra6.png'></td>
                        <td>Brown Rice</td>
                        <td>516.0</td>
                        <td>70.1</td>
                        <td>16.0</td>
                        <td>22.9</td>
                        <td class="ingredients" data-calories="516" data-carbs="70.1" data-fat="16" data-proteins="22.9"><i class="fa fa-plus" style="font-size:20px;"></i></td>
                    </tr>
                    <tr class="ingredient" vegetarian vegan lactosefree glutenfree soyfree sugarfree noaddedsugar>
                        <td><img src='http://www.padthai.decorolux.com/wp-content/uploads/2018/03/base_toppings_extra7.png'></td>
                        <td>Vegetable Base</td>
                        <td>106.6</td>
                        <td>14.2</td>
                        <td>1.8</td>
                        <td>8.4</td>
                        <td class="ingredients" data-calories="106.6" data-carbs="14.2" data-fat="1.8" data-proteins="8.4"><i class="fa fa-plus" style="font-size:20px;"></i></td>
                    </tr>



                </table>

                <!-- TOPPINGS -->
                <div><img class="headingimage" src="http://www.padthai.decorolux.com/wp-content/uploads/2018/03/ikonok-07.png"></div>
                <table>
                    
                    <tr>
                        <th class="green" width="15%">Toppings</th>
                        <th class="green" width="20%"></th>
                        <th class="green" width="15%" style="font-weight:normal">Calories</th>
                        <th class="green" width="15%" style="font-weight:normal">Carbs</th>
                        <th class="green" width="15%" style="font-weight:normal">Fat</th>
                        <th class="green" width="15%" style="font-weight:normal">Protein</th>
                        <th class="green" width="5%" style="font-weight:normal">Add</th>
                    </tr>
                    <tr class="ingredient" lactosefree glutenfree soyfree sugarfree noaddedsugar>
                        <td><img src='http://www.padthai.decorolux.com/wp-content/uploads/2018/03/base_toppings_extra8.png'></td>
                        <td>Chicken</td>
                        <td>65.9</td>
                        <td>0.2</td>
                        <td>14.4</td>
                        <td>12.9</td>
                        <td class="ingredients" data-calories="65.9" data-carbs="0.2" data-fat="1.5" data-proteins="12.9"><i class="fa fa-plus" style="font-size:20px;"></i></td>
                    </tr>
                    <tr class="ingredient" lactosefree glutenfree soyfree sugarfree noaddedsugar>
                        <td><img src='http://www.padthai.decorolux.com/wp-content/uploads/2018/03/base_toppings_extra10.png'></td>
                        <td>Pork</td>
                        <td>166.4</td>
                        <td>0.1</td>
                        <td>14</td>
                        <td>10</td>
                        <td class="ingredients" data-calories="166.4" data-carbs="0.1" data-fat="14" data-proteins="10"><i class="fa fa-plus" style="font-size:20px;"></i></td>
                    </tr>
                    <tr class="ingredient" vegetarian vegan lactosefree glutenfree sugarfree noaddedsugar>
                        <td><img src='http://www.padthai.decorolux.com/wp-content/uploads/2018/03/base_toppings_extra9.png'></td>
                        <td>Smoked Tofu</td>
                        <td>50.1</td>
                        <td>0.4</td>
                        <td>2.9</td>
                        <td>5.6</td>
                        <td class="ingredients" data-calories="50.1" data-carbs="0.4" data-fat="2.9" data-proteins="5.6"><i class="fa fa-plus" style="font-size:20px;"></i></td>
                    </tr>
                    <tr class="ingredient" lactosefree glutenfree soyfree sugarfree noaddedsugar>
                        <td><img src='http://www.padthai.decorolux.com/wp-content/uploads/2018/03/base_toppings_extra11.png'></td>
                        <td>Beef</td>
                        <td>120.8</td>
                        <td>0.3</td>
                        <td>8.4</td>
                        <td>11.0</td>
                        <td class="ingredients" data-calories="120.8" data-carbs="0.3" data-fat="8.4" data-proteins="11"><i class="fa fa-plus" style="font-size:20px;"></i></td>
                    </tr>
                    <tr class="ingredient" lactosefree glutenfree soyfree sugarfree noaddedsugar>
                        <td><img src='http://www.padthai.decorolux.com/wp-content/uploads/2018/03/base_toppings_extra12.png'></td>
                        <td>Duck</td>
                        <td>111.2</td>
                        <td>0.2</td>
                        <td>7.2</td>
                        <td>11.4</td>
                        <td class="ingredients" data-calories="111.2" data-carbs="0.2" data-fat="7.2" data-proteins="11.4"><i class="fa fa-plus" style="font-size:20px;"></i></td>
                    </tr>
                    <tr class="ingredient" lactosefree glutenfree soyfree sugarfree noaddedsugar>
                        <td><img src='http://www.padthai.decorolux.com/wp-content/uploads/2018/03/base_toppings_extra13.png'></td>
                        <td>Prawn</td>
                        <td>107.5</td>
                        <td>2.4</td>
                        <td>1.1</td>
                        <td>22</td>
                        <td class="ingredients" data-calories="107.5" data-carbs="2.4" data-fat="1.1" data-proteins="22"><i class="fa fa-plus" style="font-size:20px;"></i></td>
                    </tr>
                </table>

And here’s a live link where I am trying to test it.

https://www.padthaiwokbar.com/Calorie/Hun/

Advertisement

Answer

The problem is : you have some elements on a top/z-index of the buttons like #vegetarianDescription, #glutenFreeDescription, #noAddedSugarDescription, #lactoseFreeDescription, #veganDescription with opacity and #dietDescriptionTexts as well .. you need to use display : none; for them or use z-index : -1 or max-width :0 when you trying to hide them

You can take a look at https://stackoverflow.com/a/273076/3385827

User contributions licensed under: CC BY-SA
1 People found this is helpful
Advertisement