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
Post Reply
erinep23
Sr. Propeller Head
Posts: 124
Joined: Fri Jun 01, 2012 2:54 pm
Location: Austin, Texas
Contact:

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

Post by erinep23 »

....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.
NorthEast
Master Propellus Maximus
Posts: 6354
Joined: Mon Mar 05, 2007 8:33 am

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

Post by NorthEast »

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.
erinep23
Sr. Propeller Head
Posts: 124
Joined: Fri Jun 01, 2012 2:54 pm
Location: Austin, Texas
Contact:

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

Post by erinep23 »

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?
ChoccieMuffin
Senior Propellus Maximus
Posts: 2630
Joined: Wed Apr 14, 2010 8:01 am
Location: Surrey, UK

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

Post by ChoccieMuffin »

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 2023.
Report bugs at http://www.madcapsoftware.com/bugs/submit.aspx.
Request features at https://www.madcapsoftware.com/feedback ... quest.aspx
erinep23
Sr. Propeller Head
Posts: 124
Joined: Fri Jun 01, 2012 2:54 pm
Location: Austin, Texas
Contact:

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

Post by erinep23 »

Yeah, Flare 10 has responsive design.
NorthEast
Master Propellus Maximus
Posts: 6354
Joined: Mon Mar 05, 2007 8:33 am

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

Post by NorthEast »

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

Post by dfb »

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.
NorthEast
Master Propellus Maximus
Posts: 6354
Joined: Mon Mar 05, 2007 8:33 am

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

Post by NorthEast »

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

Post by dfb »

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

Post by dfb »

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!
NorthEast
Master Propellus Maximus
Posts: 6354
Joined: Mon Mar 05, 2007 8:33 am

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

Post by NorthEast »

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