Web object, border and scroll bar issues

Hi all!

I've searched high and low for a solution to this and come close, but not quite there yet.  I've published a swf in Captivate 5.5 and inserted it into Articulate as a Web object following Brian Batt's tutorial instructions.

The Cp output is 650 x 360 and I'm inserting the web object at a custom size (not the full slide) using those exact dimensions.

The first problem that I had was that even though the object window was the size that I wanted, the animation itself was smaller than it ought to be and tucked up in the top left corner.  The rest of the web object window had a white fill.

I then 'fixed' this issue by changing the 650x360 dimensions within the index.html file to width "100%" and height "100%".  That at least centered the animation in the window, but it didn't get rid of the white border.  It also added a scroll bar for some inexplicable reason.

I then followed Dave Moxon's instructions for creating an index and subindex file to remove the white border (http://www.articulate.com/forums/articulate-presenter/4234-removing-border-web-object.html).  This helped somewhat, but there is still a scrollbar and white at the top and bottom of the bottom of the object window (see below).  Unfortunately, I need this to be seemless.

Note: I can remove the scroll bar by changing the src dimensions in the subindex file to "99%" width and height, but this then swaps the scroll bar for more white on the right side of the window.

Anybody know what 'trick' am I missing? 

Can I make the white bit transparent or get rid of entirely? 

Is there a better way to lose the scroll bar than the 99% solution?

I see that you can't attach more than one file per post, so I've attached the index.html file and will add the sub index.html file in a new post below.

Thanks

Paul

16 Replies
Apryl Cox Jackson

I know it's been a while since you posted, Paul. But I encountered the same problem with the scrollbar when using Dave Moxon's solution today and thought I'd share my workaround in case it helps you in the future or someone else.

In the subindex.html file, use width="100%" and height="100%". As Paul mentions above, this should center the object and make it fill up the entire place holder. For more info on creating the subindex.html file, see https://player.vimeo.com/video/143914206 . The difference in that video and Dave's method is to save this file as subindex.html and then to create an index.html file with his code: http://www.articulate.com/forums/articulate-presenter/4234-removing-border-web-object.html .

Now, to get rid of the scroll bars. In the index.html file, use scrolling="no". (Dave Moxon's example uses the value "auto" for scrolling.)

Paul Smit

Hi all!

Apryl, I hope you're still subscribed to this post.  Your solution - changing the scrolling value from "auto" to "no" worked like a charm!  Thank you for the tip.

As an extra note to all those still fighting this issue, even after using the index and subindex files and changing the scrolling value, I've still found a white border on either side of some web objects.  The weird part is that I have a whole bunch of Captivate web objects, all published with the same size and settings, but only some of them had the border while others seemed fine.

On closer inspection of the web object placeholder, I noticed a white strip down the side of the shape on the same objects that were showing a border when published.  For some reason, this strip is added (on a whim) when the placeholder is created, making the placeholder bigger than it should be.

The Fix: Just crop the placeholder as you would a normal image in PowerPoint, to cut off the white strip.  And, say bye-bye annoying white borders!

Hope this helps someone out there...

Rachel Nickson

Hi everyone,

I'm not sure if anyone is still looking at this post, but I didn't want to start a new thread.

I'm not sure where Dave Moxon's orignial tutorial is, but I'm having problems (which I think are similar) with Captivate web objects.

I've created two html notepad files which are as follows:

I am still seeing a top border on my video (which is a short screen capture demo) - I changed the scrolling from "auto" to "no" after seeing the posts above, but don't know how to remove the mahoosive border around the top and bottom of my demo! The index seems to have removed the side borders.

Any one got any simple suggestions? Or suggestions that can be made to sound simple for a complete novice!?

Many thanks in advance.

Rachel!

Paul Smit

Hi Rachel,

Firstly, given your files' resolution (400 x 500), I take it that you're not wanting to fill the whole slide.  If you are wanting to fill the slide, then your original Captivate dimensions aren't right and you may have to start again.

Looking at your html files, the index file is spot on.  I suggest one change to the the sub-index code though - see what happens when you change the width and height values to "100%", rather than fixed sizes of 450 and 550 respectively.  You should do this to all 4 values in the sub-index file.  This should make the simulation fill the web object frame.

Then, when you add the web object, make sure that you've selected "display in slide" and in the Window Size drop-down select Custom rather than Full Slide.  The dimensions of your web object should match those of the swf file (i.e. 400 x 500).

You can change the size of the web object placeholder after adding it, either by holding Shift and clicking and dragging on the corners, as you would for any PPT object, or by selecting the slide and clicking on Web Object in the Articulate ribbon.  If you resize the placeholder, just make sure that you maintain the same aspect ratio (i.e. constrain the proportions) or your simulation will come out all warped.

Another thing, make sure that your web object placeholder is completely blue.  Any white edges should be cropped off.

Hope this helps!

Paul

Paul Smit

Yes, when you publish the course, all web objects are duplicated and filed in the data folder.  The course then calls them up when they're needed.  It should be a relative path (rather than an absolute one), so as long as you don't change the location of the web object files within the published folder as a whole, presenter should be able to find them.

How are putting the published course online?  Have you uploaded them all together in the same structure that they were in when originally published (i.e. are the player.html, player folder and data folder all on the same level)?

Another thought (not sure if this will make any difference) is to check the web object's file name.  Avoid funny characters if possible.

Rachel Nickson

Hi Paul,

Thank you for coming back to me so quickly.

I embed the web object (which strangely I can preview offline!) and then publish the articulate file.

I then zip the file and upload it to Moodle, then unzip and then select the 'player'.

This is the print screen I get - I'm just not sure what else to do?

I've not moved any files or got any funny characters!

Thanks!

Paul Smit

Hi Rachel,

Does the rest of the course (the non-web object parts) work?  

Unfortunately, I've got no clue how Moodle works, so I won't be able to help you there, but I can give you a bit more input about web objects.  Not sure how useful it will be...

When I work with Cp and web objects, I publish the Cp simulation to my hard drive and then add it as a web object from there.  In other words, and I'm not sure if you're doing this or not, I don't store the Cp simulation online first and then link to it.  Although, this is also an option (I think!).  The difference there is that the online one stays where it is and is called up by presenter from where it is stored.  I don't think that it is copied into the data folder at publishing time, but don't quote me on that.

No matter which web object route you take, the Articulate Presenter preview will work offline. Although, you may get some error messages when running the content off your hard drive.  Once it's online, the messages disappear.

Where are you storing the published Captivate files?

Sorry, if this isn't particularly helpful, but Moodle is a popular platform, so maybe someone else has seen this problem before.

Paul Smit

No problem Rachel. 

Just one more suggestion:

Start with all of the web objects on your computer's hard drive and embed them into powerpoint from there.  Publishing the course should then package the web objects and the launch files together nicely in one place.  Then you can upload the published folder to your shared work drive and link to it via Moodle.  I doubt this will allow for SCORM tracking, but as long as Moodle can find the player.html file, Articulate should sort out the rest.  That's the theory anyway.

Good luck.