Jump to content


Photo
- - - - -

Carousel Links not working on Mobile Device

carousel mobile iOS iPad iPhone Android

  • Please log in to reply
7 replies to this topic

#1 ratputin

ratputin

    Advanced Member

  • Members

  • 66 posts

Posted 30 August 2013 - 06:13 PM

URL:

Please Login or Register to see this Hidden Content

Pagelines Framework Version: 2.4.4
WordPress 3.6

 

We are experiencing a bit of strangeness with the carousels that are used throughout the Portfolio section of this site (ref:

Please Login or Register to see this Hidden Content

). They work fine on a desktop/laptop, however if viewed using an iOS or Android device, the thumbnail must be "held" in order for a dialog box to open to launch the link associated with it. Any ideas on where to troubleshoot this?

Thanks in advance,
~ ratputin



#2 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 31 August 2013 - 05:42 AM

Hi,

 

What's the image source? Posts, Categories, NextGen or somthing else?'

 

Is the CSS for adding that background by any chance set in PX versus EM or %?



#3 ratputin

ratputin

    Advanced Member

  • Members

  • 66 posts

Posted 31 August 2013 - 12:24 PM

Hi,

 

What's the image source? Posts, Categories, NextGen or somthing else?'

 

Is the CSS for adding that background by any chance set in PX versus EM or %?

 

 

Posts. And the background is whatever came with the install...PX I believe...



#4 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 31 August 2013 - 03:52 PM

Well, the background was modified, so I'm concerned about that. However, it turns out the carousel wasn't really designed to be responsive. So, that's likely the reason.

 

As for fixing it, I'd recommend replacing the non-responsive slider with one that is responsive.  You can find some at

Please Login or Register to see this Hidden Content



#5 ratputin

ratputin

    Advanced Member

  • Members

  • 66 posts

Posted 31 August 2013 - 08:24 PM

Rob,

I stand corrected (for some reason I read your question as if it pertained to the carousel thumbnail backgrounds). I used the page-lines-template-theme as a child and modified the carousel CSS to:

 

 

.section-carousel .thecarousel {
background-color: #706f73;
background-image: -moz-linear-gradient(top, #e9e9e9, #706f73);
background-image: -ms-linear-gradient(top, #e9e9e9, #706f73);
background-image: -webkit-gradient(linear,0 0,0 100%,from( #e9e9e9),to( #706f73));
background-image: -webkit-linear-gradient(top, #e9e9e9, #706f73);
background-image: -o-linear-gradient(top, #e9e9e9, #706f73);
background-image: linear-gradient(top, #e9e9e9, #706f73);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e9e9e9', endColorstr='#706f73', GradientType=0);
border: 1px solid #e9e9e9;
}
 
It was predominately a color change.
 
As to the responsive nature, why would the links fail in the iPad horizontal mode (1024px X 768px or 2048px X 1536px)? I'd understand if it were an issue in the vertical mode as the @media selector would come into play...
 
KO
 


#6 ratputin

ratputin

    Advanced Member

  • Members

  • 66 posts

Posted 31 August 2013 - 08:28 PM

Nevermind, i just realized the "titles" are based on the hover. As the touch devices have no notion of hover and only a single action can be assigned to a tap, the script defaults to the hover upon the tap. So...do you know where in the script I could remove the hover? If it becomes "static" then I think I could get the link to work.



#7 ratputin

ratputin

    Advanced Member

  • Members

  • 66 posts

Posted 31 August 2013 - 09:00 PM

For those that would like to know a band-aid fix, and can forgo the Titles on the hover...do the following and it will work on touch screens:
 
1. Find the section.php file at page lines > sections > carousel > section.php
 
2. Change line (approx 283) from:

Please Login or Register to see this Hidden Content

to

Please Login or Register to see this Hidden Content

 
3. Save the file.
 
Please keep in mind that making this edit will remove the titles from showing on hover, and that the change will need to be made after every Pagelines update. (I tried to copy the carousel folder into my child theme's section folder, but it was ignored by the framework. If anyone can help with THAT issue, I would appreciate it.)
 
As to the issue of the carousel not being responsive, I plan to hide via @media selectors for anything under 960px.
 
Hope this actually helps someone.
 
KO



#8 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 31 August 2013 - 10:26 PM

Thanks for posting that solution.