Mobile detection doesn't work on colorbox-load or colorbox-inline links; the check is altogether missing from the Javascript.

CommentFileSizeAuthor
#3 colorbox-mobile-on-load-and-inline-2223247-3.patch1.24 KBdrupalninja99
#2 colorbox-mobile-on-load-and-inline-2223247-2.patch0 bytesdrupalninja99
#1 colorbox-mobile-on-load-and-inline-2223247-1.patch1.24 KBLanny Heidbreder
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Lanny Heidbreder’s picture

Lanny Heidbreder CreditAttribution: Lanny Heidbreder commented
Title: Mobile detection doesn't work (on colorbox-load links?) » Mobile detection doesn't work on colorbox-load or colorbox-inline
Issue summary: View changes
FileSize
colorbox-mobile-on-load-and-inline-2223247-1.patch1.24 KB

Patch attached.

drupalninja99’s picture

drupalninja99 CreditAttribution: drupalninja99 commented
FileSize
colorbox-mobile-on-load-and-inline-2223247-2.patch0 bytes

You will want to add a whitespace filter on your editor, I am re-attaching without the whitespace problems (I hope).

drupalninja99’s picture

drupalninja99 CreditAttribution: drupalninja99 commented
FileSize
colorbox-mobile-on-load-and-inline-2223247-3.patch1.24 KB

Sorry bad diff, here is the patch.

Lanny Heidbreder’s picture

Lanny Heidbreder CreditAttribution: Lanny Heidbreder commented

drupalninja99, I have pored over your #3 patch and my #1 patch for several minutes and run a diff between them, and don't see a difference in the whitespace. What's the difference and what did I do wrong?

drupalninja99’s picture

drupalninja99 CreditAttribution: drupalninja99 commented

Does your editor strip out trailing whitespace? Git complains if there is trailing whitespace.

Lanny Heidbreder’s picture

Lanny Heidbreder CreditAttribution: Lanny Heidbreder commented

My #1 patch and your #3 patch are identical in every way. They both end with a comma on line 40 followed by a line break, and line 41 has no characters, including whitespace. They are both 1,268 bytes in size. They appear identical in both TextEdit and Sublime Text on a Mac, and I have opened them each in a hex editor (Hex Fiend) and the hex editor says explicitly that they are identical.

Did you possibly reupload a renamed version of my patch instead of yours? Did you try applying your patch the same way you applied mine to see if it worked better for you?

Lanny Heidbreder’s picture

Lanny Heidbreder CreditAttribution: Lanny Heidbreder commented
Lanny Heidbreder’s picture

Lanny Heidbreder CreditAttribution: Lanny Heidbreder commented
Status: Active » Needs review

The status has been wrong all this time.

leendertdb’s picture

leendertdb CreditAttribution: leendertdb commented
Status: Needs review » Reviewed & tested by the community

I just stumbled upon this same issue where native colorboxes used by for example node image fields work with the mobile detection, but custom links using the colorbox-load did not.

I have reviewed the patch and applied it, and I can confirm that it's working properly now. Thanks @75th Trombone!

Updating the status to RTBC.

OMD’s picture

OMD CreditAttribution: OMD commented

has this patch been applied to version 7.x-2.9?

leendertdb’s picture

leendertdb CreditAttribution: leendertdb commented

@10,

Nope, unfortunately it hasn't been committed (yet). You should apply this one manually.

Anonymous’s picture

Anonymous (not verified) CreditAttribution: Anonymous commented

Was this committed in 7.x-2.10?

frjo’s picture

frjo CreditAttribution: frjo commented
Title: Mobile detection doesn't work on colorbox-load or colorbox-inline » Add mobile detection to colorbox-load and colorbox-inline

  • frjo committed 029ea76 on 7.x-2.x authored by 75th Trombone 
    Issue #2223247 by drupalninja99, 75th Trombone: Add mobile detection to...
frjo’s picture

frjo CreditAttribution: frjo commented
Status: Reviewed & tested by the community » Fixed

Committed to 7.x-2.x, thanks!

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.

SocialNicheGuru’s picture

SocialNicheGuru CreditAttribution: SocialNicheGuru commented
Related issues: +#1996584: max-width doesn't work on mobile devices
David Sabaté’s picture

David Sabaté CreditAttribution: David Sabaté commented

I'm reopening this issue because I think that applying mobile detection "as it is" for the colorbox-inline links does not properly work.

The problem is that, mobile detection skips colorbox loading and thus it directly opens the link. With inline content this link is usually pointing to a hidden part of the code and thus the result is the page reloading and just showing the same content. An example would be the code included in the colorbox documentation:

<a class="colorbox-inline" href="?width=500&height=500&inline=true#id-of-content">Link to click</a>

<div style="display: none;">
<div id="id-of-content">What ever content you want to display in a Colorbox.</div>
</div>

I don't know which would be the best way to solve this but, applying mobile detection to inline links, creates a bigger problem than the issue it is addressing.

stefank’s picture

stefank CreditAttribution: stefank commented

Hi @David Sabaté,

Regarding your issue, you can change the width and height and that will sort it out, the colorbox will display on mobile. You can set it to width=50&height=50. I have tested it and it works. You can add a mobile detection function, which would change the url based on device(desktop, mobile). You can use the function from the module https://www.drupal.org/sandbox/stefank/2317543.
Remember to switch off the mobile detection.
Hope that helps.

grossmann’s picture

grossmann CreditAttribution: grossmann commented

I support @David Sabaté in his statement, that mobile detection is not completly working with inline (or in my case a combination of views and picture) as the link goes to something like
<a href="/someurl?maxWidth=80%25&maxHeight=80%25&inline=true&title=someimagetitle#picture-colorbox-SkCnW5Fwjx"><picture>picture code</picture></a>
And clicking this is indeed not loading any image!

KSchaos’s picture

KSchaos CreditAttribution: KSchaos as a volunteer commented

Had the same problem using this link to access content from a div on the loaded page:
<a href='?width=500&height=100&inline=true#show-review-msg'>Button Text</a>
On mobile it would do nothing but reload the current page, though it worked on desktop browser.

My workaround was to use an inline method instead, which worked on mobile and desktop:

<a href='#' onclick='jQuery.colorbox( { inline : true, href : "#message-container", width: 350, height: 200 });'