DarrylR

Michael,

Updating to jQuery 1.12.2 (per your suggestion offline) enabled the scripts to run in the iFrame! Thanks for pointing out jQuery issue #13936 (https://bugs.jquery.com/ticket/13936). The guided tour now runs in IE from within Advanced iFrame. Unless you see any issues with our shortcode (sent offline), I think we can mark this as resolved.

Thanks,
Darryl R.

Michael, I just emailed you a link. Thanks in advance. -Darryl R.

Michael,

There could very well be more than one jquery loaded, since I’m confident that our theme leverages jquery. This might explain why IE is able to run the scripts correctly when I visit the subpage directly. However, it doesn’t explain why Chrome and Safari users don’t have any issues. Are these two browsers less sensitive (or better able to sort out the multiple versions)?

Is there anything that I can do within the Advanced iFrame settings to tell the browser to isolate the page? It doesn’t need anything from the parent page, including scripts and styles, and should function entirely independently.

Thanks,
Darryl R.

Here’s the latest… I am able to visit the subpage directly in IE, and have the zurb joyride guided tour working automatically on page load and on demand from a button. The earlier problem that I had playing the tour from a button stemmed from the fact that the script had to return false to prevent the page from posting back.

So I went back to the WordPress site and opened the page that includes an iFrame with the subpage, and I discovered the following:

1. I had to include the type=”text/javascript” attribute in my script tag in order for IE to even consider running the script. Basically, IE doesn’t support the <script> tag without the ‘type’ attribute.
2. When I add an alert to the script that was supposed to run on page load, the alert is never displayed.
$(document).ready(function () {
$(window).load(function () {
alert(“Window is loaded.”); <-This alert isn’t displayed.
…
3. However, alerts from a function that doesn’t use jquery syntax are displayed:
function ShowTour() {
alert(“Started ShowTour().”); <-This alert is diplayed.

4. In the debugger, I finally saw the error
‘$’ is undefined
which explains why the scripts that leverage jquery aren’t running.

5. I also saw the error
Access is denied.
on this line: if ( parent && parent.frameElement )
when the page loads.

Does IE support jquery? According to Google Analytics, only a small percentage of our site’s visitors use IE, so I’m ready to install a browser detection plugin to tell IE users to use Chrome (or anything but IE).

You know, there is something weird going on, and it may not have anything to do with Advanced iFrame. I visited the subpage directly in IE, and the experience was better (e.g. at least our zurb joyride guided tour [which runs in jquery] actually plays on page load), but there was still some unexpected behavior (e.g. the tour doesn’t play when I click the button that should launch it via a javascript function in the same script block on the page).

I’d appreciate any thoughts, recognizing that it’s probably not Advanced iFrame’s problem.

Thanks,
Darryl R.

I thought maybe it was the relative references to the scripts and stylesheets (example below).

<script src=”../Scripts/jquery-1.10.1.js” type=”text/javascript”></script>

However, I tried changing these to absolute references (e.g. ‘src=”https://www2.domain.com/appName/scripts/jquery-1.10.1.js”&#8216;), but this had no effect.

Darryl R.

Michael,

You called it. When I looked at the console, I discovered 6 errors (text below). The first error suggests that IE cannot access the scripts on our login page, so I’m assuming that it can’t access scripts on any of the subsequent pages. The other messages suggest that IE can’t access scripts from our theme (Inceptio).

SCRIPT5: Access is denied.
File: Login_m.aspx, Line: 1, Column: 1

SCRIPT5: Access is denied.
File: share_button.php, Line: 1, Column: 1

SCRIPT5: Access is denied.
File: tweet_button.64a917b4a230f163048902c783e1530f.en.html, Line: 1, Column: 1

SCRIPT5: Access is denied.
File: fastbutton, Line: 1, Column: 1

SCRIPT5: Access is denied.
File: xd_arbiter.php, Line: 1, Column: 1

SCRIPT5: Access is denied.
File: postmessageRelay, Line: 1, Column: 1

Michael,

Thanks for the prompt reply. I’m using Advanced iFrame v7.0.2, and the closest thing to an error that happens in IE is the fact that it displays the “Only secure content is displayed” dialog when the page loads. This is strange because both the parent page and the page in the iFrame are accessed via SSL.

I’ll look for the URLs to the demo pages in the documentation. I hadn’t tried that.

Thanks,
Darryl

I realize that this one is weird, and that is probably why no one has responded. I tried to replicate the problem on a publicly accessible site running the same theme with the same activated plugins, and it didn’t occur. It only occurs on our staging site. Has anyone else experienced this behavior? I thought for sure it was a conflict with another plugin, but it doesn’t appear to be.

Thanks!

I can add two instances of the carousel displaying posts from the same category to the same page without issue. The problem occurs if I try to add an identical instance of the carousel to another page.

Thanks!

Thanks, Aldo. I’ll look out for it.

Yes. It’s resolved. Thanks again.

Aldo, honestly, I think you anticipated everyone’s needs with this plugin.

I added a global container named “pis_posts_in_sidebar-3-container” for the widget using the “Add a global container with this CSS class” field in the Extras section. Then I prepended the styles with that class as follows, and it worked:

.pis_posts_in_sidebar-3-container .pis-ul {
list-style: none;
margin: 0;
padding: 0;
}
.pis_posts_in_sidebar-3-container .pis-ul li {
border-bottom: 1px solid #e5e5e5;
}
.pis_posts_in_sidebar-3-container .pis-ul li > p {
margin-bottom: 10px;
}
.pis_posts_in_sidebar-3-container .pis-ul li > p > a, .pis_posts_in_sidebar-3-container .pis-ul li > p > a > * {
color: #333;
}
.pis_posts_in_sidebar-3-container .pis-ul li > p > a {
display: block;
padding: 8px 0px 0px 11px;
background: url(../wp-content/themes/inceptio/images/bullets/list-arrow.png) no-repeat left 1.166em;
}
.pis_posts_in_sidebar-3-container .pis-ul li > p > a:hover {
color: #2A8FBD;
}

The styles above only affect the widget on the blog-overview page, and the other widget is unaffected!

Thanks,
Darryl R.

Hello, Aldo,

I achieve the appearance that I want using this CSS:

.pis-ul {
list-style: none;
margin: 0;
padding: 0;
}
.pis-ul li {
border-bottom: 1px solid #e5e5e5;
}
.pis-ul li > p {
margin-bottom: 10px;
}
.pis-ul li > p > a, .pis-ul li > p > a > * {
color: #333;
}
.pis-ul li > p > a {
display: block;
padding: 8px 0px 0px 11px;
background: url(../wp-content/themes/inceptio/images/bullets/list-arrow.png) no-repeat left 1.166em;
}
.pis-ul li > p > a:hover {
color: #93ac12;
}

However, when I prepend the ID selector (like the example below) in our theme (Inceptio), the list reverts to a standard unordered list, suggesting that the ID isn’t valid. When I tried it in the Twenty Fifteen theme, it worked. Is it possible that Inceptio strips out the prepended ID?

#pis_posts_in_sidebar-2 .pis-ul {
list-style: none;
margin: 0;
padding: 0;
}
#pis_posts_in_sidebar-2 .pis-ul li {
border-bottom: 1px solid #e5e5e5;
}
#pis_posts_in_sidebar-2 .pis-ul li > p {
margin-bottom: 10px;
}
#pis_posts_in_sidebar-2 .pis-ul li > p > a, #pis_posts_in_sidebar-2 .pis-ul li > p > a > * {
color: #333;
}
#pis_posts_in_sidebar-2 .pis-ul li > p > a {
display: block;
padding: 8px 0px 0px 11px;
background: url(../wp-content/themes/inceptio/images/bullets/list-arrow.png) no-repeat left 1.166em;
}
#pis_posts_in_sidebar-2 .pis-ul li > p > a:hover {
color: #93ac12;
}

You can see the page with the ID selector prepended in the Inceptio theme at https://sandbox2.mindandhand.com/blog-overview/. Let me know if it would be helpful to see it in the Twenty Fifteen theme (where it works).

Thanks,
Darryl R.

I tried the following syntax examples, and neither worked:

#pis_posts_in_sidebar-3 ul.pis-ul li > p > a:hover {
color: #2A8FBD;
}

#pis_posts_in_sidebar-3.pis-ul li > p > a:hover {
color: #2A8FBD;
}