I would like to link a Mobile-Friendly Version of Help...

This forum is for all Flare issues related to the WebHelp Mobile target and skins

I would like to link a Mobile-Friendly Version of Help...

Postby erinep23 on Wed May 18, 2016 7:01 am

....to my HTML5 Help. I am using Flare 10, and am using tables inside of slideshows to display information. It looks great on the screen....not so much on mobile help. My thought was to have a hyperlink at the top that says "View Mobile Version" and have it linked to a WebHelp Mobile target. Is this possible? Let's say I publish the WebHelp Mobile Target inside the Content folder of the HTML5 project. Which file, then, would I use to hyperlink it? Or is there a better way to proceed?
You do not have the required permissions to view the files attached to this post.
www.erinpassons.com
erinep23
Sr. Propeller Head
 
Posts: 120
Joined: Fri Jun 01, 2012 2:54 pm
Location: Austin, Texas

Re: I would like to link a Mobile-Friendly Version of Help..

Postby Dave Lee on Wed May 18, 2016 7:24 am

The best way is to use responsive design - e.g. use CSS which sets the mobile content to appear on small screens, and the tablet/desktop content (like the slideshow) to appear on large screens.

If you're using a top nav skin (which it looks like you're not), this is quite easy as Flare already includes all the CSS for the Foundation visibility classes.
For example, you could put the slideshow inside a div with the class "show-for-medium-up", and the mobile version in a div class "show-for-small-only".

Unfortunately, I don't think Flare automatically includes these if you use the HTML5 tripane skin, so you'd have to add your own.
Dave Lee
Senior Propellus Maximus
 
Posts: 4936
Joined: Mon Mar 05, 2007 8:33 am
Location: UK

Re: I would like to link a Mobile-Friendly Version of Help..

Postby erinep23 on Wed May 18, 2016 7:44 am

Okay - so I added the CSS code that you wrote to the stylesheet. Now I can add to the slideshow element within the topic "class=show for medium up" and that should keep the slideshows from appearing in mobile devices?
www.erinpassons.com
erinep23
Sr. Propeller Head
 
Posts: 120
Joined: Fri Jun 01, 2012 2:54 pm
Location: Austin, Texas

Re: I would like to link a Mobile-Friendly Version of Help..

Postby ChoccieMuffin on Wed May 18, 2016 8:08 am

Does Flare 10 even support responsive design? @erinep23, you might find this a good excuse for upgrading to 12!
Started as a newbie with Flare 6.1, now using Flare 2017.
Report bugs at http://www.madcapsoftware.com/bugs/submit.aspx.
Request features at https://www.madcapsoftware.com/feedback ... quest.aspx
ChoccieMuffin
Propellus Maximus
 
Posts: 1488
Joined: Wed Apr 14, 2010 8:01 am

Re: I would like to link a Mobile-Friendly Version of Help..

Postby erinep23 on Wed May 18, 2016 8:32 am

Yeah, Flare 10 has responsive design.
www.erinpassons.com
erinep23
Sr. Propeller Head
 
Posts: 120
Joined: Fri Jun 01, 2012 2:54 pm
Location: Austin, Texas

Re: I would like to link a Mobile-Friendly Version of Help..

Postby Dave Lee on Thu May 19, 2016 12:05 am

ChoccieMuffin wrote:Does Flare 10 even support responsive design? @erinep23, you might find this a good excuse for upgrading to 12!


Responsive design isn't a Flare thing though - it this case it's just using some CSS.
You can make a responsive site using notepad. You do not need an upgrade!

What Flare calls responsive design is basically just the HTML5 skins mediums (introduced in v10), and that it bundles in the CSS for Foundation grid (which you could do yourself for free).
Subsequent versions of Flare have improved it slightly, but I wouldn't say it's worth upgrading for this feature alone.
Dave Lee
Senior Propellus Maximus
 
Posts: 4936
Joined: Mon Mar 05, 2007 8:33 am
Location: UK

Re: I would like to link a Mobile-Friendly Version of Help..

Postby dfb on Mon Jun 26, 2017 5:36 pm

erinep23 wrote:Okay - so I added the CSS code that you wrote to the stylesheet. Now I can add to the slideshow element within the topic "class=show for medium up" and that should keep the slideshows from appearing in mobile devices?


Aye. i'd like some confirmation on this too. I'm a little fuzzy on how to leverage the visibility classes.
What do I need to add to my stylesheet vs. what sort of syntax is required in the topic to make stuff hide or show.

I was attempting to research this via another web site and found something that goe me close...

<strong class="visible-for-medium-down">
Here's the stuff I only want to see on tablets and handhelds. This is a slideshow using bullet navigation and showing one slide at a time.
</strong>
<strong class="visible-for-large-up">
Here's the stuff I only Desktop computer users to see. This stuff used to be a slideshow but now it's just a table with hyperlinked images in it.
</strong>

Oddly enough, the first part works but the second part does not. On mobile devices, I'm seeing both table AND slideshow but I should only see one of them.
dfb
Jr. Propeller Head
 
Posts: 7
Joined: Thu Dec 18, 2014 12:21 pm

Re: I would like to link a Mobile-Friendly Version of Help..

Postby Dave Lee on Tue Jun 27, 2017 12:08 am

dfb wrote:
erinep23 wrote:Okay - so I added the CSS code that you wrote to the stylesheet. Now I can add to the slideshow element within the topic "class=show for medium up" and that should keep the slideshows from appearing in mobile devices?


Aye. i'd like some confirmation on this too. I'm a little fuzzy on how to leverage the visibility classes.
What do I need to add to my stylesheet vs. what sort of syntax is required in the topic to make stuff hide or show.


If you build outputs using Flare v12 (and I think v11 and v10), MadCap includes the Foundation visibility classes.

But if you build outputs using Flare 2017r2, MadCap don't include the Foundation visibility classes. So they're removed them - thanks MadCap!
Dave Lee
Senior Propellus Maximus
 
Posts: 4936
Joined: Mon Mar 05, 2007 8:33 am
Location: UK

Re: I would like to link a Mobile-Friendly Version of Help..

Postby dfb on Tue Jun 27, 2017 10:13 am

Hmm. So I'm actually running v12.
Can you hold my hand with some detail here? (see the question in my previous post, pretty please.)

Am I using the right syntax of "<strong class="visible-for-medium-down">" and such??

I'm seeing a fairly diverse phraseology out there for visibility. This web page seemed the gold mine but it's pretty clear I'm missing something that perhaps this page assumes is understood prerequisite.

http://foundation.zurb.com/sites/docs/v ... ility.html

I'm mostly a GUI sort of guy so poking in the HTML like this I go to as a last resort.

TIA,
David
dfb
Jr. Propeller Head
 
Posts: 7
Joined: Thu Dec 18, 2014 12:21 pm

Re: I would like to link a Mobile-Friendly Version of Help..

Postby dfb on Tue Jun 27, 2017 10:48 am

Bah! I figured it out.

I added an unnecessary word.

"visible-for-large-and-up" should have simply been, "visible-for-large-up"

Those pesky conjunctions!
dfb
Jr. Propeller Head
 
Posts: 7
Joined: Thu Dec 18, 2014 12:21 pm

Re: I would like to link a Mobile-Friendly Version of Help..

Postby Dave Lee on Wed Jun 28, 2017 12:28 am

Glad you got it working, but remember if you upgrade to 2017r2 it won't work any more!

An alternative would be to hide it using MadCap's tablet/mobile mediums; e.g. to display an element in desktop only you could have a .show-for-desktop-only class:

Code: Select all
.show-for-desktop-only
{
   display: block;
}

@media tablet
{
   .show-for-desktop-only
   {
      display: none;
   }
}

@media mobile
{
   .show-for-desktop-only
   {
      display: none;
   }
}


It's no substitute for having the Foundation visibility classes though, they're a big loss so if you're using 2017r2.
Dave Lee
Senior Propellus Maximus
 
Posts: 4936
Joined: Mon Mar 05, 2007 8:33 am
Location: UK


Return to WebHelp Mobile

Who is online

Users browsing this forum: No registered users and 1 guest