2

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.

3
Contributors
3
Replies
37
Views
3 Years
Discussion Span
Last Post by JorgeM
2

It partially works now by changing

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

into

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

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.

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.