cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
matt5834
Community Participant

Targeting the iFrame using Javascript in the new UI

Jump to solution

Hi-

I've been using this very important piece of javascript in my custom javascript file:

var iFrame = window.top.document.getElementById('window_content');

iFrame.setAttribute("scrolling","no");

It is not working when the new UI is enacted. I'm guessing it might have something to do with the ID of the iFrame in the new UI but I cannot figure it out.

I have uploaded the Javascript file via the Theme Editor

Please help!

Best ,

Matt

Tags (2)
39 Replies
matt5834
Community Participant

Kenneth-

I am having one problem still: for some reason the javascript is not working on the iframes located in Assignments.   It works perfectly on content pages but not Assignments. Is there something in your Javascript that I can check?

Thank you!

Matt

matt5834
Community Participant

When I leave my old javascript in the document it works on Assignments but not Content Pages

var iFrame = window.top.document.getElementById('window_content');

iFrame.setAttribute("scrolling","no"); 

The first one that comes to mind is with nested lists.

Let's say you want this:

2015-10-28_21-30-27.png

The HTML is supposed to be

<ol>

<li>Outer list item 1</li>

<li>Outer list item 2

<ol>

<li>Inner list item 1</li>

<li>Inner list item 2</li>

</ol>

</li>

<li>Outer list item 3</list>

</ol>

What Canvas returns when you create a list and use the indent button to nest the inner list is this

<ol>

<li>Outer list item 1</li>

<li>Outer list item 2</li>

<ol>

<li>Inner list item 1</li>

<li>Inner list item 2</li>

</ol>

<li>Outer list item 3</list>

</ol>

It looks right on the screen, but it's not valid HTML. The inner list belongs to one of the items in the outer list.

But when you nest an unordered list inside an ordered list, it really goes haywire

2015-10-28_21-31-03.png

Is properly generated as

<ol>

<li>Outer list item 1</li>

<li>Outer list item 2

<ul>

<li>Inner list item 1</li>

<li>Inner list item 2</li>

</ul>

</li>

<li>Outer list item 3</list>

</ol>

But what Canvas gives is

<ol>

<li>Outer list item 1</li>

<li>Outer list item 2</li>

<ul>

<li>Inner list item 1</li>

<li>Inner list item 2</li>

</ul>

<li>Outer list item 3</list>

</ol>

and when you save it, it becomes

2015-10-28_21-31-53.png

When you insert certain links, you get an empty ID tag. For example, here's an external link to a page in my Statistics Wiki. The id="" cannot be blank and there are multiple links on the page with empty ids, so the validator was throwing duplicate id errors. The target attribute shouldn't be blank.

<a id="" class="" title="" href="https://people.richland.edu/james/m113/wiki/Types_of_Statistics" target="">Types of Statistics</a>

There are probably others, but those are the ones that pop up the most frequently for me. They were enough to cause the Google XML parser to refuse to parse it. Browsers are more forgiving, but that doesn't mean you should take advantage of it -- especially if you're all about standards like Canvas claims to be.

Matt,

I only have the new UI in beta, but I added an alert to the code I gave you that runs before adding the scrolling to the iframe just to make sure it was running every time and that the iframe existed before the code ran:

if ($('#window_content').length > 0) {

    alert('iframe exists');

}

$('#window_content').attr('scrolling', 'no');

I added your iframe code to an assignment and opened it in Safari on an iPad and I refreshed the page over a dozen times and the code is running every time. I am not entirely sure what the intended outcome is but as far as I can tell, everything should be being applied. The issue may be something beyond just the scrolling. Can you provide a screenshot or recording of what it looks like when it works and when it does not?

Thanks for the examples, I should have thought of the lists one, that is something that I had noticed but had come to accept. I will have to do some digging and see if I can figure anything out.

BKINNEY
Community Contributor

I just realized that this exactly duplicated the original example. I guess I didn't actually read it. So, consider this another vote for fixing the editor. It ought to be trivial [http://www.tinymce.com/forum/viewtopic.php?id=8533 ]. To reiterate, if you nest lists, the html is supposed to look like this:

<ol>

    <li>a

          <ol>

              <li>b</li>

          </ol>

    </li>

</ol>

But the editor does this:

<ol>

     <li>a</li>

     <ol>

          <li>b</li>

</ol></ol>

Not sure which is right? Click below.

W3 reference

It's something I had to work hard to get around when creating an Editor Button LTI tool that uses a lists as a quick and easy way to generate glossaries and FAQs. I complained about it at the time. Here is paste of the information I provided, to no avail: [pasted from an email dated 11/19/12]

According to the Tiny MCE site, the most recent version has an option :smileyalert: to correct the nesting. Not sure how much that would help, but I'd like to give it a try. I linked to the page in my bug report, but here it is again:

http://www.tinymce.com/forum/viewtopic.php?id=8533 .

In part because this has never been addressed, I've never shared my Editor Button with anyone, not even on our campus, but I still use it on my own sites (see screenshot).

matt5834
Community Participant

Thanks Kenneth.

Here is what I can tell you.

On a desktop everything works as expected.

My custom iframes include other code to make them "responsive" so that the content being shown in the iframe changes size (the content is responsive).

For this to work on iOS the iframe has to be set to scrolling: no;  

Currently in iOS your javascript file works perfectly on content pages.  It does not work on Assignment pages. However, when I us my old javascript function instead of your code it works perfectly on Assignment pages but NOT on Content pages.

(See above for my javascript function)

Is there something in your javascript that does not target Assignment pages? 

Thank you so much for your help!


Matt

As I mentioned before, I added code to alert me that it was working on assignment pages and tested that a dozen times in Safari on an iPad running iOS 9.1 without any problems. I have tested the code an additional 6 times this time using the Safari developer tools to verify that each time the properties are being set. Every time the code is loading on the assignments page and adding the no scrolling attribute to the iframe.

Just to clarify, I used the file I attached above to run the script and the code that you posted above to create the iframe and everything is working for me.

<iframe id="window_content" style="position: absolute; top: 0; left: 0; width: 1px; min-width: 100%;" src="https://www.yciw.net/_1aiPad/" width="300" height="100%" name="window_content"></iframe>

Here is a screenshot of what I see on the iPad

IMG_0647.jpg

If you want to send me a copy of your JavaScript, I would be happy to look and see if anything else you have is interfering, beyond that I don't know what to tell you.

matt5834
Community Participant

Ok, thank you so much Kenneth. I believe I have found the cause of the problem. On my assignments I am using an External Tool. I have the tool set to load in a new window. When I change the same assignment to not use an External Tool it works correctly as in your example.

Any thoughts on why this might be happening?

Thank you!!

IMG_1452.PNG

I have added the .ic-framed-lti-tool class to the list of areas to look for user content. I had not realized that an external tool assignment would not have the same parent div as any other assignments. The attached version has the new class as well as your code to change the scrolling on line 22. Anyone else will want to replace that code with whatever they need to run. Let me know if this one fixes it.