Develop Reference

Prevent iframe from auto reloading when new iframe is added to parent

I have a function of code that loads a card with an iframe when a button is clicked. Here's a small snippet of it:
document.getElementById("apps").innerHTML += `
<div id="${appname}" class="app" style="display:block;">
<div id="${appname}header" class="card ${object[appname].color}" style="width: ${object[appname].cardw}; height: ${object[appname].cardh};">
<div class="card-content white-text">
<span class="card-title center black-text">${object[appname].name}</span>
<iframe id="${object[appname].repo}frame" src="custom/${object[appname].repo}/index.html" scrolling="no" style="width: ${object[appname].framew}; height: ${object[appname].frameh}; transform: scale(${object[appname].scale});
transform-origin: 0 0;"></iframe>
</div>
</div>
</div>
`;
The problem is, apps contains multiple iframes, and when i add a new one all the other ones reload. This is a very big deal, as i am using a text editor and i dont want it to reload. I'd prefer a simple solution, but i can be hacky too. How would I stop the iframe from reloaded when another iframe is added to the parent?

jQuery append html loading randomly on page reresh

I have a this problem:
I use a jquery plugin fullPage.js by Alvaro Trigo on my website. The plugin script automatically inserts the html structure in certain elements... in my html I have:
<div class="section fp-auto-height-responsive" id="slider-section">
<div class="slide" id="co-delame-section">
<div class="slide-wrapper">
...
</div>
</div>
</div>
And when the page is loading, javascript generates extra html tags and css, so it looks like:
<div class="section fp-auto-height-responsive fp-section active fp-completely" id="slider-section" data-anchor="About" style="height: 638px;">
<div class="fp-slides">
<div class="fp-slidesContainer" style="width: 100%;">
<div class="slide fp-slide fp-table active" id="co-delame-section" style="width: 100%;">
<div class="fp-tableCell" style="height:638px;">
<div class="slide-wrapper">
</div>
</div>
</div>
</div>
</div>
</div>
I want to append more slides (slide class) for a certain page resolution, so that when user is on mobile with smaller screen, the extra slides won't load.
I do it with this javascript code:
$.get("http://marketingo.cz/wp-content/themes/twentysixteen-child/slider_cs.html", function (data) {
$("#slider-section").append(data);
});
And there is the problem... it works in about 50% page loads, the problem is that sometimes it appends the slides after the fullPage generates the structure, so that the appended slides are out of the slider structure... like this:
<div class="section fp-auto-height-responsive fp-section active fp-completely" id="slider-section" data-anchor="About" style="height: 638px;">
<div class="fp-slides">
<div class="fp-slidesContainer" style="width: 100%;">
<!-- the right place of a slide -->
<div class="slide fp-slide fp-table active" id="co-delame-section" style="width: 100%;">
<div class="fp-tableCell" style="height:638px;">
<div class="slide-wrapper">
</div>
</div>
</div>
</div>
</div>
<!-- appended slides out of slider blocks -->
<div class="slide" id="jsme-partner">
</div>
<div class="slide" id="vase-problemy">
</div>
</div>
So it looks the fullPage.js script runs before the slides are appended, but in the html head tag I firstly put the script to append the slides and fullPage is loaded after...
But what is really weird is that sometimes it loads correctly, sometimes not. Clearing the cache on refresh helps sometimes, but I can't say if there is any pattern with deleting the cache.
You can check it on http://marketingo.cz/en/?stack-overflow#About and give it a few refreshes with cache clearing to see...
The questions is - how can I ensure that the html is appended before the fullPage plugin modifies the code so that the appended sliders will be in a same container?
Thanks for a help! :)

Easy.
Just initialice fullPage.js after you append the slides by using the $.get callback.
$.get("http://marketingo.cz/wp-content/themes/twentysixteen-child/slider_cs.html", function (data) {
$("#slider-section").append(data);
//initialice fullPage.js here:
$('#fullpage').fullpage();
});

social media url,s not loading from the html iframe

i am trying to open a facebook and twitter url in an iframe but its not loading even though its loading the other url,s like in the code w3school is able to load.
facebook
<iframe src="http://www.facebook.com/" height="900"></iframe>
</div>
<div class="col-md-4 col-lg-4" ng-controller=twitter-controller>
twitter
<iframe src="http://www.w3schools.com" height="900"></iframe>
</div>
<div class="col-md-4 col-lg-4" ng-controller="instagram-controller">
instagram
<iframe src="http://www.twitter.com" height="900"></iframe>

external <iframe> blog being overlapped by current blog footer template?

I have embedded an iframe blog space to my shopify blog. Problem is that when the page loads up now the footer overlaps how the actual page should look rather than just tagging on to the end of the container or <div>.
Can anyone help? I'm pretty new and novice to this and have followed many threads trying to rectify but the result stays the same.
This is the embedded code that is in the content:
<iframe src="https://bedfordguitars.exposure.co/?embed=true" style="width: 100%; height: 550px; margin-bottom: 0px; border: solid 1px #ccc; border-radius: 2px;">
</iframe><br />
<!-- <div class="grid"> <div class="unit legal-content"> <div> --> {{ page.content }} <!-- </div> </div> </div> -->

Youtube video inside iframe not hiding in Safari 5.1

I have 3 tabs on my site. Inside 2nd (hidden) div contains a YouTube video in an iframe. When I click on second tab(containing video) video starts playing. On click of either 1st or 3rd tab (containing images) content area still show video.Whereas it should show images for respective tabs. Video is not hiding in Safari 5.1
How can I achieve this?
CODE::
3 tabs content (html)
<div class="view-content clearthis">
<div id="photos">
<div class="nav">
<a class="hide-divs" id="prev" href="#">Prev</a><a id="next" href="#">Next</a></div>
<div id="gallery">
<asp:PlaceHolder ID="phRoomPhotoGallary" runat="server"></asp:PlaceHolder>
</div>
</div>
<div id="video">
<div id="pnlVideo" runat="server">
<iframe id="objVideo" width="667" height="344" src="<%=RoomVideoURL %>" frameborder="0" title="<%=RoomName %>" allowfullscreen></iframe>
</div>
</div>
<div id="floor">
<asp:Image ID="imgFloorPlan" runat="server" Height="344" Width="667" />
</div>
</div>
3 tabs
enter code here
<ul class="clearthis">
<li id="tabPhoto" runat="server"><a id="linkPhotoTab" class="photostab" href="#photos" title="<%=RoomName %>">PHOTOS</a></li>
<li id="tabVideo" runat="server"><a id="linkVideoTab" href="#video" title="<%=RoomName %>">VIDEO</a></li>
<li id="tabFloor" runat="server" style="margin-right: 0px;"><a id="linkFloorTab" href="#floor" title="<%=RoomName %>">FLOOR PLAN</a></li>
</ul>

I've seen some pretty ridiculous answers about attempting to fix this problem in Safari. Instead, try adding:
"wmode=opaque"
as the first GET variable in the url for the youtube video.
(eg: src="http://www.youtube.com/embed/pPBLF2Ffbaw?wmode=opaque&rel=0")
Worked for me in a similar situation.