Jump to content

Archived

This topic is now archived and is closed to further replies.

ratputin

Carousel Links not working on Mobile Device

Recommended Posts

ratputin+    2
ratputin

URL:http://edificeinc.com

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:http://edificeinc.com/cats-administrative-facility-and-bus-maintenance-parking-garage/). 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

Share this post


Link to post
Share on other sites
Rob    547
Rob

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 %?


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
ratputin+    2
ratputin

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...

Share this post


Link to post
Share on other sites
Rob    547
Rob

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 http://www.wordpress.com/extend/plugins


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
ratputin+    2
ratputin

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
 

Share this post


Link to post
Share on other sites
ratputin+    2
ratputin

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.

Share this post


Link to post
Share on other sites
ratputin+    2
ratputin

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:

$link = sprintf('<a class="carousel_image_link" href="%s">%s<span class="list-title">%s</span></a>', $a['link'], $img, $a['title']);

to

$link = sprintf('<a class="carousel_image_link" href="%s">%s</a>', $a['link'], $img);

 
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

Share this post


Link to post
Share on other sites
Rob    547
Rob

Thanks for posting that solution. 


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites

  • Similar Content

    • jdubdigi
      By jdubdigi+
      Onepage plugin is not working on an iphone. The page does not scroll properly and sections are partially missing, any ideas what the problem could be?
    • oseehys
      By oseehys+
      The Grams section of Platform 5, is lacking lots of important features, that DMS multigram was having, there is no space for another user ID asie the default user, that was one of the strongest point of multigrams, because the Hashtag option cannot capture everyone, multiple User ID is the default standard for Instagram,  Also there is no carousel or slide on this one, it means now that if you want to display 18 pictures in one page all will be visible at once thats not good engineering.
      My appeal to the Pagelines Team, guys please let the next update have all the DMS Multigrams features that is missing on Platform 5 Grams, that will bring it to its glory...
       
       
    • kwaoru
      By kwaoru
      Hi,
       
      I have been using DMS and pagelines.
      I am facing to a huge trouble with the appearance of one of my page on mobile (smart phones) built with pagelines.
      However I haven’t come to any solutions to organise either edit the appearance of mobile view to look neat or deactivate the responsive function. 
      Now it looks totally messy on the phone...
       
      1. Is there any way to edit the appearance of the mobile version (responsive theme)?
      2. Is there any way to deactivate responsive function?
       
      If I could receive support from you to go thorough this process I would be happy to be a pro member. 
       
      Looking forward to hearing from you.
    • ivaemer
      By ivaemer+
      I've got the problem with Onepage plugin ..
      First two sections - Intro and Gallery Module are not showing on iPhone and iPad...help asap please
       
       
×