We Keep Coding

How to detect parent scroll event out of iframe => get iframe-position-fixed-polyfill work

First a short introduction to understand my problem.
My company uses a restricted community system for the intranet, which does not allow the use of javascript in pages. You can only place code through an internal editor and javascript will be deleted automatically after saving. My workaround is to use the community page as parent page and load my content, located on a sharepoint, through an iframe. This is not elegant but works perfect, no problems and I am able to use javascript. I have asked our IT and got the permission for this.
What I want to do
I want to add a vertical menu bar, which stays in a fixed position on the left side. Solution one is to code this menu bar in each parent page using html and css. This works fine, but if I have changes on the menu I have to update the code in each parent page. This is time consuming and could be error prone.
More elegant would be to save the menu bar in a seperate file and load this file in each page. While the parent page could not use javascript I have to load it through the iframe page.
iframe call inside parent page:
<iframe src="https://sharepoint.abc.com/index.aspx"></iframe>
loading the menu through the iframe page "index.aspx":
<div id="includedMenuBar"></div>
<script src="demo/js/jquery-3.2.1.js"></script>
<script>
$(function(){
$("#includedMenuBar").load("menubar.aspx");
});
</script>
This works perfect, but now the used css position: fixed; and top: 100px; for the menu orientate at the iframe page index.aspx. If I now scroll the parent page the menu bar is fixed to the iframe page but scrolls, because the iframe pages moves throug the scrolling of the parent page.
To solve this I tried iframe-position-fixed-polyfill which works perfect but needs the same domain for parent and iframe page. But my parent page loads from the company intranet and my iframe page loads from a sharepoint. So I need a cross-domain-communication.
A solution could be a cross-domain-event-handler like PostEvent. But I could not place any javascript on the parent page.
Problem
How can I get the iframe-position-fixed-polyfill work even if I need a cross-domain-communication and can not place any javascript inside the parent page?
Maybe there is a simpler solution for a fixed menu bar loaded through the iframe page I do not see?
Thanks a lot for your help.
Best regards,
Michael

Oh my god. Keep it simple should be the device. My solution which works for me. Load the menubar through another iframe in the parent page. Make this iframe fixed through an enclosed div.
<div style="position: fixed; top: 385px">
<iframe src="menubar.html" style="border: currentColor; border-image: none; overflow: hidden;" width="110" height="300"></iframe>
</div>
No scipt language is necessary.

Lightbox overlay remains after closing, page 100% height

Hei, I am using Wordpress and a theme called Stockholm.
The problem is that whenever I click on the image a lightbox appears. When closing the lightbox or clicking outside the lightbox, I would assume the darker overlay to disappear, but it doesn't do that. it stays and it won't let me click anywhere else. I can't find the fault neither in js or css.
This is the page:
http://plaaditood.ee/portfolio_page/vaana-moisa-tolla-kuur-looduskivi-paigaldus-80-m2/
Another issue is with the height of the webpage. It doesn't have enough content to fill the height 100%. Making the body's min-height: 100% didn't work.
Thank you for any responses.

In regards to the lightbox not closing the grey overlay, it seems like you have the prettyphoto javascript twice on your page.
<script type='text/javascript' src='http://plaaditood.ee/assets/themes/stockholm/js/plugins.js?ver=4.2.2'></script>
<script type='text/javascript' src='http://plaaditood.ee/assets/plugins/js_composer/assets/lib/prettyphoto/js/jquery.prettyPhoto.js?ver=4.3.4'></script>
That may be what is causing the issue. You may also double check your implementation if after you remove one of the instances and it still doesn't fix the problem.
http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/documentation
In regards to the footer not staying to the bottom of the screen when there isn't as much content to push it to the bottom, you may try this:
http://www.cssstickyfooter.com/

you might try adding the following jQuery , provided that there will only be one lightbox open at any time:
$(document).on("click", ".pp_close", function(){
$(".pp_overlay").fadeOut();
});

ScrollSpy show wrong active tab when used with JS tabbed content

I have a project in which I use ScrollSpy and I have a section with tabbed content. The problem is that the script from this tabbed content blocks ScrollSpy showing the correct active item in the nav bar. This tabbed content is in the 3rd section of the page, all goes well until I select 4th menu item and from there on all goes wrong. I think that ScrollSpy is looking for the hidden tabs and somehow counts them too. Is there a way of forcing ScrollSpy to skip searching in one particular section and just move on? Or do you have any other idea on this? Here's the link to the problematic page http://oz.zz.mu/HongKongExpats/ maybe it will help you.
PS. The menu works correctly, it scrolls to the correct section, it only show the wrong menu item as active.
PPS. ScrollSpy it's showing as active the last menu item because I have to have body height: 100%, but I've managed to hide that with a last hidden menu item.

try this: jsfiddle
if Scrollspy highlight final element, you can add
height: 100%
to html and body tag

Removing a particular Javascript action from a responsive theme

I have a responsive theme. When viewing the website on small screen, it shows "menu" and you have to tap it to see the menu items. What I want to do is show the menu items straight without the user having to tap "menu" before seeing them. I tried using Firebug to see what triggers it and tried removing that. But that messes up my whole site in desktop view as well.
Here is the link. If someone could point me in the right direction by telling me what code to remove that'd be great. Your help is really appreciated.

I believe it is hidden via css. So to initially show that menu when the browser is mobile go into the bootstrap-responsive.css file on line :1424 and change 'display:none' to 'display:block'. Just to be clear this is the code your looking for.
nav#main_menu.smooth_menu ul {
display: none;
background:#fff;
}
It is in the #media (max-width: 767px) media query.
That should initially show the menu when a user is on a mobile browser while keeping the toggle functionality.

Add the below <script> in your page inside <head>. What it does is simulate a click on "menu" at startup.
<script>
$(document).ready(function() {
jQuery('.zn_menu_trigger a:visible').click();
});
</script>

iFrame reloading

I have a page with two iframes - sidebar and content. The sidebar has links that targets the content iframe, so any links that are clicked on the sidebar will load on the content iframe.
I would like the sidebar to refresh whenever a page on the content iframe is loaded. What code would I need to add to the "content" pages to do this?
Any help is greatly appreciated!

Providing they're in the same domain, you should be able to do something like this:
window
.parent
.document
.getElementById('id_of_sidebar')
.contentWindow
.location
.reload()
Written in a cascading style because that's the way I like it. Feel free to put the whitespace wherever you like. :)
Disclaimer: I have not tested the above.