Our up/down voting buttons don't do anything on iOS devices (iPhone, iPad). Confirmation that they work fine on Blackberry and other mobile devices. Additionally, they work fine on all desktop browsers, including Safari.

HTML code looks like this:

<div class="vote-arrow downvote" data-vote="-1">&nbsp;</div>
<div class="vote" title="Vote on posts with a comment (affects poster's reputation) or without a comment (anonymous).">0</div>
<div class="vote-arrow upvote" data-vote="1">&nbsp;</div>

jQuery looks like this:

$(document).on('click', '#posts div.vote-arrow', function() {
    if (!$(this).hasClass('no-access'))
    {
        var post = $(this).closest('div.post');
        var id = post.attr('id');
        var postid = post.attr('data-postid');
        $.post('/posts/js_add_vote', { id: postid, vote: $(this).attr('data-vote'), csrf_token: csrf_hash }, function(data) {
            post.find('div.vote').html(data);
        });
        if ($(this).hasClass('upvote'))
        {
            var downvote = $(this).closest('div.votes').find('div.downvote');
            if (downvote.hasClass('downvote-undo'))
            {
                downvote.removeClass('downvote-undo');
            }
            else
            {
                $(this).toggleClass('upvote-undo');
            }
        }
        else if ($(this).hasClass('downvote'))
        {
            var upvote = $(this).closest('div.votes').find('div.upvote');
            if (upvote.hasClass('upvote-undo'))
            {
                upvote.removeClass('upvote-undo');
            }
            else
            {
                $(this).toggleClass('downvote-undo');
            }
        }
        post.find('div.vote-comment').slideUp('fast');
    }
    return false;
});

$(document).on('mouseenter', '#posts div.vote-arrow', function() {
    if (!$(this).hasClass('no-access') && !($(this).parent().find('.upvote-undo, .downvote-undo').length))
    {
        var comment = $(this).closest('div.votes').find('div.vote-comment');
        window["my_vote"] = $(this).attr('data-vote');
        if (window["my_vote"] > 0)
        {
            comment.css('width', '340px').find('input[name="submit"]').val('Up-Vote & Comment');
        }
        else
        {
            comment.css('width', '340px').find('input[name="submit"]').val('Down-Vote & Comment');
        }
        comment.slideDown('fast').find('input[name="comment"]').focus();
    }
    return false;
});

I didn't post the HTML for the vote-comment div, but that's essentially the little dropdown thingy that appears when you hover over an arrow. Not only is that not happening, but just voting up and down does nothing in iOS, so I didn't think that part of the HTML was necessary.

All other jQuery and AJAX seems to work just fine.

Recommended Answers

All 3 Replies

It partially works now by changing

div.vote-arrow:hover { cursor: pointer; }

into

div.vote-arrow { cursor: pointer; }

Yeah, worked for me from my iOS device (just upvoted your last comment)

On another note, I worked on a site several months ago where I had a similar issue. Tried the cursor trick too but eventually with with jQuery Mobile's tap().

http://api.jquerymobile.com/tap/

That seemed to have provided me with 100% compatibility.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.