CODEWITHSUNDEEP
javascriptjqueryiosipad
Sidriel
Sidriel

Reputation: 1150

jQuery - $(this) on iPad

I ran through the following Javascript to create a click function to toggle an active state and expand an element to show the full text.

$ = jQuery.noConflict();
$( document ).ready( function() {
    $(".toggle_container").hide(); 

    var toggle = function(el, direction) {
        if (direction === 'open') {
            var content = $(el).toggleClass("active").prev();
            var curHeight = content.height();
            content.css('height', 'auto');
            var autoHeight = content.height();
            content.height(curHeight).animate({height: autoHeight}, 100).promise().then(setTimeout(function(){content.removeClass("limited")}, 650));       
        } else {    
            var content = $(el).toggleClass("active").prev();
            content.height(curHeight).animate({height: '70px'}, 100).promise().then(function(){content.addClass("limited")});
        }
    }

    jQuery(".togglefeaBtn").on("click", function(){             
        if ($.trim($(this).text()) === 'Read MORE') {
            $(this).text('Close');
            toggle(this, 'open');
        } else {
            $(this).text('Read MORE'); 
            toggle(this, 'close');
        }       
        return false; 
    });
});

The issue that I've noticed is that when loaded on an iPad $(this), when in the click function, or $(el), when in the toggle function return a blank value, however, $(this).text('...') works perfectly.

Is there an issue with the way I'm using the click function, or do touch devices require a different set up?

Upvotes: 0

Views: 72

Answers (2)

Sidriel
Sidriel

Reputation: 1150

After continuing to wrestle with this issue, I opted to take a much simpler route and scrap the Javascript method to animate the reveal and just use CSS Transform with max-height. The code got a lot smaller, and works nearly everywhere.

$ = jQuery.noConflict();
$( document ).ready( function() {
    $(".toggle_container").hide(); 

    jQuery(".togglefeaBtn").on("click", function(){             
        if ($.trim($(this).text()) === 'Read MORE') {
            $(this).text('Close');
            $(this).toggleClass("active");
            $(this).prev().css('max-height', '500px');
            $(this).prev().removeClass("limited");
        } else {
            $(this).text('Read MORE');
            $(this).toggleClass("active");
            $(this).prev().css('max-height', '70px');
            $(this).prev().addClass("limited");
        }       
        return false; 
    });
});

Upvotes: 0

Josh Meads
Josh Meads

Reputation: 151

Shouldn't it be toggle($(this), 'close'); not this? The context of this hasn't been defined.

You can also change $(el) to just be el.

var $ = jQuery.noConflict();
$( document ).ready( function() {
    $(".toggle_container").hide(); 

    var toggle = function(el, direction) {
        if (direction === 'open') {
            var content = el.toggleClass("active").prev();
            var curHeight = content.height();
            content.css('height', 'auto');
            var autoHeight = content.height();
            content.height(curHeight).animate({height: autoHeight}, 100).promise().then(setTimeout(function(){content.removeClass("limited")}, 650));       
        } else {    
            var content = el.toggleClass("active").prev();
            content.height(curHeight).animate({height: '70px'}, 100).promise().then(function(){content.addClass("limited")});
        }
    }

    jQuery(".togglefeaBtn").on("click", function(){             
        if ($.trim($(this).text()) === 'Read MORE') {
            $(this).text('Close');
            toggle($(this), 'open');
        } else {
            $(this).text('Read MORE'); 
            toggle($(this), 'close');
        }       
        return false; 
    });
});

Upvotes: 1

Related Questions