Page 1 of 1

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

Posted: Wed May 18, 2016 7:01 am
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?

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

Posted: Wed May 18, 2016 7:24 am
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.

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

Posted: Wed May 18, 2016 7:44 am
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?

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

Posted: Wed May 18, 2016 8:08 am
by ChoccieMuffin
Does Flare 10 even support responsive design? @erinep23, you might find this a good excuse for upgrading to 12!

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

Posted: Wed May 18, 2016 8:32 am
by erinep23
Yeah, Flare 10 has responsive design.

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

Posted: Thu May 19, 2016 12:05 am
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.

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

Posted: Mon Jun 26, 2017 5:36 pm
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.

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

Posted: Tue Jun 27, 2017 12:08 am
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!

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

Posted: Tue Jun 27, 2017 10:13 am
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

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

Posted: Tue Jun 27, 2017 10:48 am
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!

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

Posted: Wed Jun 28, 2017 12:28 am
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.