having trouble with mobile index in adobe muse.

[jhmac]

I have finished my magazine and is up on the app store. it is just an iPad version. Now I am trying to get a mobile version going. I was wondering if anyone has used muse and has a mobile version up and working with no problems. I am having problems with the baker reading the mobile index page. There are two index pages, iPad version in a root folder and an mobile index in a folder labeled phone. I did manage to see it one time but it went haywire and started showing one of the magazine pages as the index. Any help would be appreciated.

sorry if this is not a baker issue.

[jhmac]

I have been troubleshooting the problem. I download the issue, open it and double tap the screen and the index.html shows up. If you touch to navigate to one of the pages on the index it shows it takes the place of the index page instead of navigating to it. This is only when it shows, I can not get it to show most of the time. I hope that makes sense.
If I just simply archive the issue and re-download it with out changing anything the index does not show up.
I hope that make sense.
Again any help would be appreciated.

[folletto]

It's very hard to tell without more information, or the code of the page.
Please read Problems and Debugging and report back, to start. :)

[jhmac]

Thanks for the reply.
I have tried it in version 4.2 from bakerframework.com download and in github download. Both are doing the same thing.
It works fine on the iPad version with no problems. I am sure the problem lies with how I have two sets of files for iPad and iPhone show in the images below. There is an index.html in the root folder and an index.html in the phone folder. I have two sets of files because I am using Adobe muse and it does two separate file structures instated of a responsive design is css.

here are the log files

2013-11-19 09:16:33.773 Baker[4179:70b] ====== Baker Newsstand Mode enabled ======
2013-11-19 09:16:38.397 Baker[4179:70b] [AppDelegate] Push Notification - Device Token, review: Error Domain=NSCocoaErrorDomain Code=3010 "remote notifications are not supported in the simulator" UserInfo=0xb415550 {NSLocalizedDescription=remote notifications are not supported in the simulator}
2013-11-19 09:16:38.787 Baker[4179:70b] [BakerShelf] Newsstand - Added Storied Magazine 2013-10-01 09:00:00 +0000
2013-11-19 09:16:40.605 Baker[4179:70b] App Store request failure: Error Domain=SSErrorDomain Code=2 "Cannot connect to iTunes Store" UserInfo=0xb443840 {NSLocalizedDescription=Cannot connect to iTunes Store}
2013-11-19 09:16:41.631 Baker[4179:70b] [BakerShelf] 'Storied Magazine' is Connecting...
2013-11-19 09:16:45.127 Baker[4179:70b] [BakerShelf] 'Storied Magazine' is Downloading...
2013-11-19 09:17:04.083 Baker[4179:4d03] [BakerShelf] Newsstand - File is being unzipped to /Users/libbystory/Library/Application Support/iPhone Simulator/7.0.3/Applications/2FB06A2B-45FF-4A4B-AC1B-F36C9E718D4D/Library/Caches/Newsstand/2F593109-F2F2-41F7-87C2-5DB034E97CBE
2013-11-19 09:17:05.970 Baker[4179:4d03] [BakerShelf] Newsstand - Removing temporary downloaded file /Users/libbystory/Library/Application Support/iPhone Simulator/7.0.3/Applications/2FB06A2B-45FF-4A4B-AC1B-F36C9E718D4D/Library/Caches/bgdl-4179-8d48bac9444f32b6.hpub
2013-11-19 09:17:05.973 Baker[4179:70b] [BakerShelf] 'Storied Magazine' is Ready to be Read.
2013-11-19 09:17:07.887 Baker[4179:70b] [BakerBook] 'book.json' parsed successfully. Book 'Storied Magazine' created with id 'storied-magazine-e96bfc489be5f'.
2013-11-19 09:17:07.888 Baker[4179:70b] [BakerView] Init book view...
2013-11-19 09:17:07.907 Baker[4179:70b] [BakerView] Device Screen (WxH): 320.000000x568.000000.
2013-11-19 09:17:07.915 Baker[4179:70b] [BakerView] Status: page (null) @ scrollIndex (null)px.
2013-11-19 09:17:07.990 Baker[4179:70b] [BakerView] Loading book from path: /Users/libbystory/Library/Application Support/iPhone Simulator/7.0.3/Applications/2FB06A2B-45FF-4A4B-AC1B-F36C9E718D4D/Library/Caches/Newsstand/2F593109-F2F2-41F7-87C2-5DB034E97CBE
2013-11-19 09:17:07.991 Baker[4179:70b] [BakerView] Pages in this book: 62
2013-11-19 09:17:07.991 Baker[4179:70b] [BakerView] Screenshots stored at: /Users/libbystory/Library/Application Support/iPhone Simulator/7.0.3/Applications/2FB06A2B-45FF-4A4B-AC1B-F36C9E718D4D/Library/Caches/screenshots/storied-magazine-e96bfc489be5f
2013-11-19 09:17:07.997 Baker[4179:70b] [BakerView] Set size for orientation: portrait
2013-11-19 09:17:08.536 Baker[4179:70b] [BakerView] Set size for orientation: portrait
2013-11-19 09:17:08.848 Baker[4179:70b] [IndexView] Set IndexView size to 320x568
2013-11-19 09:17:12.907 Baker[4179:70b] [BakerView] Loading: cover.html
2013-11-19 09:17:12.907 Baker[4179:70b] [IndexView] Set IndexView size to 320x568
2013-11-19 09:17:14.862 Baker[4179:70b] [BakerView] Page is a link with scheme file:// --> load internal link
2013-11-19 09:17:14.914 Baker[4179:70b] [BakerView] ERROR: CurrPage failed to load content with error: Error Domain=NSURLErrorDomain Code=-999 "The operation couldn’t be completed. (NSURLErrorDomain error -999.)" UserInfo=0xb4925d0 {NSErrorFailingURLKey=file:///Users/libbystory/Library/Application%20Support/iPhone%20Simulator/7.0.3/Applications/2FB06A2B-45FF-4A4B-AC1B-F36C9E718D4D/Library/Caches/Newsstand/2F593109-F2F2-41F7-87C2-5DB034E97CBE/cover.html, NSErrorFailingURLStringKey=file:///Users/libbystory/Library/Application%20Support/iPhone%20Simulator/7.0.3/Applications/2FB06A2B-45FF-4A4B-AC1B-F36C9E718D4D/Library/Caches/Newsstand/2F593109-F2F2-41F7-87C2-5DB034E97CBE/cover.html}
2013-11-19 09:17:15.186 Baker[4179:70b] [BakerView] Loading: intro.html
2013-11-19 09:17:16.241 Baker[4179:70b] [IndexView] Set size for IndexView to 320x135 (constrained from 5775x135)
2013-11-19 09:17:21.636 Baker[4179:70b] [BakerView] Toggle bars visibility
2013-11-19 09:17:31.866 Baker[4179:70b] [BakerView] Page is a link with scheme file:// --> load internal link

[folletto]

That's very weird indeed. How do you swap between the two?

[jhmac]

I believe it does it with a bit of JS

  <script type="text/javascript">
   Muse.Redirect.redirect('tablet', '', 'phone/index.html', '');
</script>

  <meta http-equiv="Content-type" content="text/html;charset=UTF-8"/>
  <meta name="generator" content="7.0.314.244"/>
  <title>Home</title>
  <meta name="viewport" content="width=5775 height=135"/>
  <link media="only screen and (max-device-width: 370px)" rel="alternate" href="http://storiedmagazine.com/phone/index.html"/>

[folletto]

Then... you're not using Baker's index unfortunately, that's Muse code, I can't help much. It might even be conflicting with the native Baker index, if you have specified it in book.json.

You might want to turn that down and use Baker's, or try to fix it.

[jhmac]

I am not sure I quite understand. The two index.html pages are the exact same file. where in baker does it point to index.html Do you think there is a way to choose specifically the index.html in the root folder only. or maybe change the name to something else instead of index? I am not sure i am making sense.

[folletto]

Yes, that's correct. Have a read of the documentation: https://github.com/bakerframework/baker/wiki/Adding-an-Index-Bar-to-your-publication
More generally, the wiki here on GitHub, has more informations: https://github.com/BakerFramework/baker/wiki/

In short: if there's an index.html file in the book root, it will be picked up as index by Baker. This will conflict with any automated component that tries to work with the same gesture / page.

[jhmac]

I am at a loss for now, I have been working on it all day. is there anyway to change the name of the page baker will pick up to something like nav.html instead of index.html?

[jhmac]

never mind, I found it. Let's see what kind of chaos I can create for myself.

[MaverickWar]

When you finish this, can you post what you did please, I was considering trying this muse and have had a few issues in the past getting a mag working with the mobile version also? In my case it was with the in5 plugin. Any chance you could post some fixes or walkthroughs on here for anyone else that may hit this issue with muze.

Thanks and well done, your mag looks good, is muse easy? Even for non devs?

[jhmac]

yes, muse is extremely easy. Assuming I get the mobile version working I would highly recommend it. It has quite a few JS user interactive widgets built in that you just drag and drop. I am the only one in our business that knows a decent amount of html. i am trying to make it where the designer can layout the magazine for print and redo it in muse. we have used indesign publishing suite but it was cumbersome to us. Our magazine was done in Illustrator and copy and pasted into muse due to problems with getting the fonts we wanted to work in muse. I have that ironed out now.
I am keeping notes of the steps and I will be glad to post them. My last step is getting the index to show up on the mobile version. I will try changing the name of the page baker looks for for the index and report back.

[jhmac]

Please forgive Me I am not familiar with how github works. I referenced this issue and I think I closed it. I have written a small how to on tweaks get get iPad and mobile version working when using muse. @folletto where would be an appropriate place to publish it?

[MaverickWar]

I would very much be interested in seeing this. Good work indeed!

[jhmac]

I hope this is okay to post this here.
Pay no attention to the numbering toward the bottom. I messed it up and got tired to trying to figure it out. I am not used to posting on Github. There should be 8 steps.
You should not have to do a index/home page on the mobile version, just leave that page blank.

IPAD/root index.html———

1. Remove — for not allowing redirect to mobile index

<script src="scripts/museredirect.js?4231348958" type="text/javascript"></script>

  <script type="text/javascript">
   Muse.Redirect.redirect('tablet', '', 'phone/index.html', '');
</script>

1. Add height to meta name “view port” — for index to show properly

   <meta name="viewport" content="width=5775 height=130”/>
   

2. Remove — for not allowing redirect to mobile index

   <link media="only screen and (max-device-width: 370px)" rel="alternate" href="http://storiedmagazine.com/phone/index.html"/>
   

3. Remove class and ID for this div — for index to show properly

Change from

<div class="position_content" id="page_position_content">

to

<div class="" id="">

1. Remove vertical spacer div — for index to show properly

<div class="verticalspacer"></div>

1. Add — commented line of JS -- for index to show on mobile version

 <script src="scripts/museutils.js?117816282" type="text/javascript"></script>
  <script src="scripts/jquery.tobrowserwidth.js" type="text/javascript"></script>  <!-- Add this here to scripts at the bottom of the  page -->
  <script src="scripts/jquery.watch.js?4199601726" type="text/javascript"></script>

1. Add — commented line of JS -- for index to show on mobile version

<script type="text/javascript">
   $(document).ready(function() { try {
Muse.Utils.transformMarkupToFixBrowserProblemsPreInit();/* body */
$('.browser_width').toBrowserWidth();/* browser width elements */  <!-- Add this here to scripts at the bottom of the  page -->
Muse.Utils.prepHyperlinks(true);/* body */
Muse.Utils.fullPage('#page');/* 100% height page */
Muse.Utils.showWidgetsWhenReady();/* body */
Muse.Utils.transformMarkupToFixBrowserProblems();/* body */
} catch(e) { Muse.Assert.fail('Error calling selector function:' + e); }});
</script>

1. on ipad/root — index.css -- for index to show properly

.html
{
    background-color:rgba(0,0,0,0.27);  ———— /* Change to anything you want */
}

#page
{
    z-index: 1;
    width: 5775px;
    height: 130px; /* Add height of the size of your index page mine just happens to be 130px*/
    padding-bottom: 0px;
}

#page_position_content
{
    Remove Page Position 
}

/* On first #uxxxx */
/* Add — the height of your index page. */
/* ex.  */
#u3296
{
    z-index: 2;
    width: 5775px;
    height: 130px;   /* Add height of the size of your index page mine just happens to be 130px */
    position: relative;
}

that should do it. let me know if you have any questions.

[folletto]

That's great! :D

[jhmac]

Oh I forgot,
there is a work around to getting web fonts to show show up inside your app. I will work that up first chance I get. I did it several weeks ago and have not thought of it since. I know we found the type kit fonts that we wanted to use in muse on fontsquirrel.com, downloaded a package, put it in the font folder and changed the name of the fonts in the downloaded Font Squirrel css or xml(i forget) to match the ones that muse gave them. An example of this is font squirrel called it "crimsonRoman" and muse gave it the name "crimson-text". Just change the name in the font squirrel file to "crimson-text", the muse name, and it worked. The fonts showed up perfect in the app.
My files are at work, I will work up something like I did for above.

[MaverickWar]

Thank you jhmac for all the work you put in here! Much appreciated, I'm sure as others give Muse a go, it will be appreciated by even more.

[jhmac]

You are welcome. I am glad I could finally do a little something for the baker community.

[folletto]

May I suggest maybe to post the solution also on the new tracker, since this one will be closed at some point? :)

New is here: https://github.com/bakerframework/baker/issues

[jhmac]

good idea, I will do that as soon as I am able to put the type kit work around info on there.