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?
Related
I've got some JavaScript which is making my whole page clickable through what I though was the container element. However, when I tried reducing its size, amd reducing the size of the associated widget, even the footer is clickable. Although the footer doesn't toggle according to the JavaScript code, it does toggle in as far as it reacts to the a href "#" and takes user to the top of the page when they are trying to select an element/link in the footer.
So how can I can I get the footer to stop being clickable? The page itself seems only to react when clicking elements on it, but almost the whole footer area is reacting to href#
<a id="mni" href="#">
<div class="container4" onclick="myFunction(this)">
<div class="nimageone">
<img src="http://4309.co.uk/wp-content/uploads/2020/05/IMG_20200509_165113-1-219x300.jpg" alt="" width="350" height="300" c.class="size-medium wp-image-14178" /></div>
</div>
<script>
function myFunction(x){
x.classList.toggle('change');
}
</script>
</div>
Css
.change
.nimageone img {display:none}
desktop here
You have not included the tree structure of your HTML element comprehensively.
You can achieve what you are trying to do with the following.
<div>
<a id="mni" href="#">
<div class="container4"
onclick="myFunction(this)">
<div class="nimageone"><img
src="http://4309.co.uk/wp-
content/uploads/2020/05/IMG_20200509_165113-1-
219x300.jpg" alt="" width="350" height="300" class="
size-medium wp-image-14178" /></div>
</div>
</a> //remember to close the <a> tag here before the
footer item
/////Your footer item can come below here
<footer>
</footer>
</div>
If you want to adjust the size of the button in the HTML you can set it just like you set the width and the height attributes in the 'img' tag.
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();
});
So I have the below work-flow:
I've got a list of items each having an ng-click event which opens an iframe below the item clicked. Now,
On clicking an item of the list, a div tag below that item displays (initially hidden) which contains an iframe.
Now on clicking another item from the same list, another div tag displays below the recent item clicked, which in turn displays the iframe for the recently clicked item.
The issue that I'm facing is this -
On clicking an item of the list, if any div tag containing the iframe is currently open, it gets closed and the div tag along with the iframe of the recently clicked item displays.
Currently, if any iframe is open, on clicking an other item from the list, a new iframe of the recently clicked item opens along with the initial iframe still remaining open. The initial one getting closed only after I've clicked on it.
What shall I do?
PS: I hope the scenario is clear, let me know if further clarification is required.
Edit-
Posting a jsfiddle link is kinda tough as this question is a part of a huge folder I'm working on. But, I'll post the code here and hope that it will suffice.
HTML:
<div ng-repeat="data in JsonData">
<div class="row" ng-click="getGraph(data.id, $index)">
<div class="col-lg-6 text-left">
<span id="title">Title: {{data.name}}</span><br><br>
<span style="color: #000 !important">
<strong>Id:</strong> {{data.id}}
</span><br/><br>
</div>
<div class="col-lg-4 text-left" style="color: #000 !important;">
<span style="text-align: left; font-size: 13px;">
<strong>Details:</strong> {{data.details}}
</span><br/>
</div>
<div class="iframe col-lg-10 col-lg-offset-2">
<div class="ibox float-e-margins ibox_shadow">
<iframe style="width: 80%; height: 50%; id="targetframe" name="targetframe" allowTransparency="true" scrolling="no" frameborder="0" ng-src="{{graphUrl | trustAsResourceUrl}}">
</iframe>
</div>
</div>
</div>
</div>
And the controller.js code:
$scope.getGraph = function(d,i) {
$scope.graphUrl = 'http://server-url.com:8888/path/to/theGraph?id='+d;
var elem = document.getElementsByClassName(d);
$(elem).toggleClass('class_to_toggle_hide_show');
}
If you post the code it will clear it more. But in the ng-click event you can first say ng-click="youfunction($event)"
and
$scope.yourfunction = function(event){
$(even.target).find("iframe").remove();
//and then your other stuff here
}
I am having hard time to make my Iframe display my html string which happens to be
<div class="center wow fadeInDown">
<iframe src="http://www.asana.com" style="width: 90%; height: 600px;"
name="internal"></iframe>
</div>
I'm currently building a website and have an image as the header, but when I load the page it will jump half way down the page, load the image and then jump back up. How can I make the image load in first to prevent it from jumping?
HTML:
<div class="refocus" id="hero-header">
<div class="refocus-img-bg"></div>
<div class="refocus-img focus-in">
HTML:
</div>
<div class="refocus-text-container">
<div class="t">
<div class="tc">
</div>
</div>
</div>
</div>
<div class="row">
<div class=".col-md-6">
<div id="section1">
<div id = "sub-text">
<h1>Hello</h1>
<br>
<h2>Hello</h2>
<h3><br>Hello.</h3>
</div>
<div id="image">
<img src="images/aboutme.png"/>
</div>
</div>
<div id="buttoncontainer">
<div id="totimeline">▼</div>
</div>
</div>
</div>
Here's a JSFiddle to replicate this.
Thank you in advance.
You can do one of two things for this.
1) Set the dimensions of your image inline. This is actually a recommended method of preventing the very thing you are experiencing where the page jumps around after images load in. By setting the dimensions inline, the browser will already know how tall the image needs to be and will reserve the space for it before it even finishes loading in.
Example:
<img src="http://placehold.it/350x150" height="150" width="350">
2) If you don't prefer to set the dimensions inline, it seems you could also just set the height in your styles ahead of time and that would do the trick as well.
Example:
.refocus-img{
height:150px;
}