I have two links - each should load a different HTML file respectively into an iframe. They will be loaded into the same javascript collapse area. I want each link to load the designated file into the iframe when clicked.
My problem is that IF one html file is loaded into the open (show) collapse area, the collapse area will toggled closed if I click on the second link. I suppose I need an if/then js script but am unsure of the proper logic and syntax?
It should operate logically as expected:
1) If the collapse area is closed (which it is by default), when any link is clicked, it should OPEN and then load in the iframe contents (HTML file)
2) If I click the second link while the collapse is open, it should STAY open (not toggle closed) and simply load in the second iframe contents (HTML file)
What I have below works fine for 'loading' the proper content, but it toggles by default. So if I have the area open with content loaded, it closes if I click the second link.
here are my snippets:
LINK 1
LINK 2
<div id="content" class="collapse">
<p><iframe id="process_frame" overflow="hidden" scrolling="no" frameborder="0" height="280" width="100%"></iframe></p>
</div>
Any suggestions or samples would be helpful... Thank You
I'm going to use websites to demo a solution for your question. The snippet doesn't display the results but you can view a fiddle here. A second solution is here (shown in second snippet); it is specific to your two files. You may have to add a path.
These are fairly primitive solutions but as you are only switching between two files, perhaps this may suffice for your needs.
(I set a background colour for the div (not the iframe).. remove this if you wish..)
function togglediv(filename) {
var frme = document.getElementById("process_frame");
var file2 = filename;
if (file2 == " " || filename == undefined) {
frme.src = "http://www.richmondinnireland.com";
file2 = frme.src;
} else {
frme.src = filename;
file2 = frme.src;
}
//console.log(file2)
// display frame is hidden
if (frme.style.display == 'none') {
frme.style.display = 'block';
frme.src = file2;
}
}
#content {
background-color: lightgrey;
height: 280px;
overflow: auto;
}
#process_frame {
height: 280px;
overflow: auto;
width: 100%;
z-index: 0;
}
LINK 1
LINK 2
<br><br>
<div id="content" class="collapse">
<iframe id="process_frame" overflow="hidden" scrolling="no" frameborder="0" height="280" width="100%"></iframe>
</div>
<script>
</script>
#process_frame {
height: 280px;
overflow: auto;
width:100%;
}
#file1,
#file2 {
display: inline-block;
margin: 5px;
}
File 1
File 2
<div id="content" class="collapse">
<iframe id="process_frame" overflow="hidden" scrolling="no" frameborder="0" height="280" width="100%"></iframe>
</div>
<script>
function togglediv(num) {
var frme = document.getElementById("process_frame");
var fileid = num;
var filename = "html_file_";
var filetoget = '"' + filename + num + ".php" + '"';
console.log(filetoget);
// check if frame is hidden
if (frme.style.display == 'none') {
frme.style.display = 'block';
frme.src = getfile;
} /*else {
//frme.style.display = 'none';
}*/
}
</script>
Related
in my react application I have an iframe which is loaded with HTML document and content of it exceeds 1 page. on pressing Ctrl+p I want to print it in several pages but the print preview only shows one page.
how it should be handled to recognize that the content of iframe is more than one A4 page?
the DOM in chrome devtool looks like
<div class="article-container">
<iframe style="">#document
/* hundreds of <p> tags */
</iframe>
</div>
the structure in react app is like
<div className="article-container">
<FrameText content={content} status={!this.state.editStatus} />
</div>
and the FrameText
class FrameText extends React.Component<Props> {
iframe: HTMLIFrameElement;
compinentDidMount(){
window.addEventListener('beforeprint',(e)=>{console.log(e);})
}
/* other stuff*/
render() {
const { status } = this.props;
return <iframe ref={(ref) => (this.iframe = ref!)} style={!status ? { display: 'none' } : {}} />;
}
so here when the ctrl+p is pressed I get the event and the iframe document is in the event. Also, I have the content of iframe in the local state too.
I could not find anywhere that when this event is triggered what can I do with it to manipulate or somehow tell the print preview that the content is long.
Also, the css is
#media print {
.article-container {
background-color: white;
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
margin: 0;
padding: 15px;
font-size: 14px;
line-height: 18px;
}
}
Your print media query will not work on iframe inner content that is the reason iframe size is ignored while printing If you want to apply specific print styles to iframe then you have to reference from outside via appropriate method(whether js or html) I am writing a sample to reference styles to iframe there may exist other implementations for it to
let cssLink = document.createElement("link");
cssLink.href = "style.css";
cssLink.rel = "stylesheet";
cssLink.type = "text/css";
frames['iframe1'].document.head.appendChild(cssLink);
I was able to print multiple pages in an iframe by capturing the CTRL P event, giving focus to the iframe then initiating printing on the iframe.
<iframe id="iframe" name="iframe" src="2.html"></iframe>
<script src="https://code.jquery.com/jquery.min.js"></script>
<script>
$(document).bind("keyup keydown", function (e) {
if (e.ctrlKey && e.keyCode === 80) {
window.frames["iframe"].focus();
window.frames["iframe"].print();
return false;
}
return true;
});
</script>
Need help to display a cached image (service worker) when no internet connection, in place of my iframe - herewith my not working attempt in fiddle
<https://jsfiddle.net/hrax5doq/10/>
In fiddle I used an external image location just as an example but how do I use a cached imaged url in my code
Like this :
if (window.navigator.onLine) {
d.innerHTML = '<iframe id="iframe" src="https://maps.google.it/maps?q=Inprint Printers,25+Watermeyer+st,eMalahleni,Mpumalanga,1035&output=embed" allowfullscreen></iframe>';
} else {
d.innerHTML = '<img scr="https://upload.wikimedia.org/wikipedia/commons/2/23/User-Chaza93-Offline.png">';
}
iframe {
width: 100%;
height: 600px;
scrolling: no;
marginheight: 0;
marginwidth: 0;
frameborder: 0;
border: 0;
}
<div id="d"></div>
I'm using the fullscreen.js script and in one of my screens I will have a fullscreen Vimeo video. Apparently this will cause issues in FF and prevents me from scrolling up or down as soon as I reach the screen with the video. The issue was submitted to the GitHub page of the script but the author dismissed it as it's a FF issue (https://github.com/alvarotrigo/fullPage.js/issues/803).
I'm using all this with foundation CSS for the responsive video:
<div class="flex-video widescreen vimeo">
<iframe src="<?php the_sub_field('video') ?>"
width="400"
height="225"
frameborder="0"
webkitAllowFullScreen
mozallowfullscreen
allowFullScreen></iframe>
</div>
The bug is this one: https://bugzilla.mozilla.org/show_bug.cgi?id=779286 but I don't see that it was solved on FF 36 on Mac. The issue is not happening on chrome either.
Here is an example of the issue by someone else on the GitHub thread: http://jsbin.com/tunove/1/edit?html,output
The Issue:
The Mozilla bug you are looking at actually refers to the fullscreen mode API, an unrelated API that was fixed. I think the bug report you are looking for is this one:
Bug 1084121 - Mouse wheel event is captured by iframe and not propogated.
Steps to reproduce:
I have a div in which I manually capture mousewheel events, and use
that to scroll the div. Inside of this div, I have an embedded youtube
video, in an iframe.
Actual results:
While scrolling, if the mouse is over the iframe, scrolling no longer
works, because all mouse events, including mouse wheel events, are
captured by the iframe, and are not sent to the parent window.
Expected results:
The mouse wheel event should have been propagated to the parent
window. This is the behavior in chrome and safari.
Since the iframe is on a different domain, there does not appear to be
any feasible workaround for this.
This bug report is still open, and does not appear to be in the process of being implemented.
Also, according to the bug report, this behavior is not defined by any specification.
For what it's worth, I gave this bug report a vote to increase the importance. I agree, this is a user experience problem.
Workarounds:
Unfortunately, as far as directly fixing the wheel event issue goes, the suggestions in that GitHub issue are about all we have for cross-origin iframes. If the framed content were on the same domain or otherwise under your control, you could add another event listener inside the iframe, but Same-Origin Policy prevents this cross-domain.
The only options available to prevent the iframe from stealing the wheel events for cross-origin frames are:
Cover most or all of the iframe with transparent divs.
Use pointer-events: none; on the iframe. This will also prevent clicking on the video at all, so it has the same effect as covering the entire video with a transparent div.
Other Options:
This issue is apparently limited to the wheel events as it is possible to scroll a parent document while scrolling over an iframe.
<iframe src="data:text/html;charset=utf-8,%3Chtml%3E%3Cbody%3E%3Cp%3EScroll%20over%20this.%3C/p%3E%3C/body%3E%3C/html%3E" style="width: 100%; height: 100px;"></iframe>
<div style="background: red; width: 20px; height: 5000px;"></div>
fullPage.js is not structured this way, but if a parent element to the iframe were actually a scrollable element, it would be possible to listen for the scroll event and react to that.
It's a little shaky, but here's an example of something similar using the scroll event instead of the wheel event.
Example (JSFiddle):
var autoScrolling = false;
$('.wrap').on('scroll', function(e) {
if (autoScrolling) {
return;
}
//Get this element and find the number of children.
var $this = $(this);
var children = $this.children('.pane').length;
//Find the height of each pane, and the current position.
var paneHeight = this.scrollHeight / children;
var position = this.scrollTop / paneHeight;
var positionRound = Math.round(position);
//Find the target position.
var positionOff = position - positionRound;
var toShow = null;
if (positionOff < 0) {
toShow = positionRound - 1;
}
else if (positionOff > 0) {
toShow = positionRound + 1;
}
//If scrolling to a new pane, find the next one.
if (toShow !== null) {
autoScrolling = true;
$this.animate({
scrollTop: paneHeight * toShow
}, {
duration: 1000,
complete: function() {
setTimeout(function() {
autoScrolling = false;
}, 500);
}
});
}
});
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.wrap {
height: 100%;
width: 100%;
overflow: auto;
}
.pane {
width: 100%;
height: 100%;
position: relative;
}
iframe {
background: white;
border: 0;
outline: 0;
display: block;
position: absolute;
width: 80%;
height: 80%;
left: 10%;
top: 10%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrap">
<div class="pane" style="background: red;">
<iframe src="data:text/html;charset=utf-8,%3Chtml%3E%3Cbody%3E%3Cp%3EScroll%20over%20this.%3C/p%3E%3C/body%3E%3C/html%3E"></iframe>
</div>
<div class="pane" style="background: green;">
<iframe src="data:text/html;charset=utf-8,%3Chtml%3E%3Cbody%3E%3Cp%3EScroll%20over%20this.%3C/p%3E%3C/body%3E%3C/html%3E"></iframe>
</div>
<div class="pane" style="background: blue;">
<iframe src="data:text/html;charset=utf-8,%3Chtml%3E%3Cbody%3E%3Cp%3EScroll%20over%20this.%3C/p%3E%3C/body%3E%3C/html%3E"></iframe>
</div>
</div>
Basically, I'm trying to make a link that, when pressed, will hide the current body div tag and show another one in its place, unfortunately, when I click the link, the first body div tag still appears. Here is the HTML code:
<div id="body">
<h1>Numbers</h1>
</div>
<div id="body1">
Body 1
</div>
Here is the CSS code:
#body {
height: 500px;
width: 100%;
margin: auto auto;
border: solid medium thick;
}
#body1 {
height: 500px;
width: 100%;
margin: auto auto;
border: solid medium thick;
display: hidden;
}
Here is the JavaScript code:
function changeDiv() {
document.getElementById('body').style.display = "hidden"; // hide body div tag
document.getElementById('body1').style.display = "block"; // show body1 div tag
document.getElementById('body1').innerHTML = "If you can see this, JavaScript function worked"; // display text if JavaScript worked
}
NB: CSS tags are declared in different files
Have you tried
document.getElementById('body').style.display = "none";
instead of
document.getElementById('body').style.display = "hidden";?
just use a jquery event listner , click event.
let the class of the link is lb... i am considering body as a div as you said...
$('.lb').click(function() {
$('#body1').show();
$('#body').hide();
});
Use the following code:
function hide {
document.getElementById('div').style.display = "none";
}
function show {
document.getElementById('div').style.display = "block";
}
You can Hide/Show Div using Js function. sample below
<script>
function showDivAttid(){
if(Your Condition)
{
document.getElementById("attid").style.display = 'inline';
}
else
{
document.getElementById("attid").style.display = 'none';
}
}
</script>
HTML -
Show/Hide this text
Set your HTML as
<div id="body" hidden="">
<h1>Numbers</h1>
</div>
<div id="body1" hidden="hidden">
Body 1
</div>
And now set the javascript as
function changeDiv()
{
document.getElementById('body').hidden = "hidden"; // hide body div tag
document.getElementById('body1').hidden = ""; // show body1 div tag
document.getElementById('body1').innerHTML = "If you can see this, JavaScript function worked";
// display text if JavaScript worked
}
Check, it works.
Consider using jQuery. Life is much easier with:
$('body').hide(); $('body1').show();
try yo write
document.getElementById('id').style.visibility="hidden";
i have some very simple js (i'm still learning) that basically reads the elements of a form and creates a url string that is passed to an imaging server, that in turn renders the image.
var imgURL = "site.com/path/to/image";
var product = "BirthdayCard_End" + "?&";
var page = 2;
var format;
var data;
function setPage(inputID)
{
page = inputID;
setJPG();
}
function FormValues()
{
var str = '';
var elem = document.getElementById('form1').elements;
for(var i = 0; i < elem.length; i++)
{
str += "$" + elem[i].id + "=" + elem[i].value + "&";
}
data = str;
}
function genPDF()
{
var format = "fmt=pdf&mediaMargin=48&bleedMargin=48&printerMark=1,1,1,1,1,Illustrator,.25,1";
fullURL = imgURL + product + data + format;
window.open(fullURL);
}
function setJPG()
{
FormValues();
var format = "imageRes=200&fmt=jpg&wid=550&page=" + page;
fullURL = imgURL + product + data + format;
document.getElementById('lblValues').innerHTML = fullURL;
document.getElementById('image').src = fullURL;
}
i'm trying to figure out how to show a simple loader like this (http://fgnass.github.com/spin.js/#v1.2.5). how do I add something to the setJPG() function so that it pops up the loader everytime it is initialized, and then fades away once the image is loaded?
You guys are making this way more complicated than it needs to be. Put your image in a div and set the background of the div to be an animated gif.
<div style="background-image: url('spinner.gif')"><img src='bigImage.jpg'></div>
No need to use any JS at all, the image will simply load over the background spinner.
Suggested solution
For images, using a "loading spinner" is problematic. See below.
Instead of a spinner, first send a low resolution (consider B&W too) of the image. This SO question tells how.
Spinners for image loading
A problem with showing a spinner while you're waiting for an image to be displayed is that the browsers do not reliably tell your JS when the image has loaded.
And if it doesn't fire then you're left looking at the spinner forever...
See the docs for the jQuery load event --
Caveats of the load event when used with images
A common challenge developers attempt to solve using the .load() shortcut is to execute a function when an image (or collection of images) have completely loaded. There are several known caveats with this that should be noted. These are:
It doesn't work consistently nor reliably cross-browser
It doesn't fire correctly in WebKit if the image src is set to the same src as before
It doesn't correctly bubble up the DOM tree
Can cease to fire for images that already live in the browser's cache
The easiest way to do it is to create two div one over the other.
One div with the spinner covering the div with the content, and then when the page finishes loading to display the div with the content over it.
On this example I use it on window.load, so you might need to modify the event to be on image load. The rest should work fine.
CSS:
#preloader {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:white;
opacity:0.3;
z-index:2;
}
#spinner_container {
position:absolute;
width:100%;
top: 50%;
left:0px;
height:1px;
overflow:visible;
opacity: 1;
background: transparent;
}
#spinner {
width: 31px;
height:31px;
margin-left:-15px;
position:absolute;
top:-15px;
left:50%;
display:block;
}
HTML
<div id="preloader">
<div id="spinner_container">
<img id="spinner" src="/content/images/spinner_squares_circle.gif" alt="" />
</div>
</div>
<div id="wrapper">
content
</div>
jQuery
$(window).load(function(){
$('#preloader').fadeOut(100, function() {
$('body').css('overflow','auto');
$(this).remove();
});
});
If you are using Spectre css, you can add this div to add a spinner :
<link href="https://cdnjs.cloudflare.com/ajax/libs/spectre.css/0.3.1/spectre.min.css" rel="stylesheet"/>
<div class="loading"></div>
I wrote loader code in a separate file so it will be reusable
file: Loader.js
export const elementString = {
loader:'loader' // class name that I used in renderLoader function
}
export const renderLoader = parent =>{
const loader = `
<div class='${elementString.loader}'>
<svg>
<use href="img/icons.svg#icon-cw"></use>
</svg>
</div>
`;
parent.insertAdjacentHTML('afterbegin', loader);
};
export const clearLoader=()=>{
const loader = document.querySelector(`.${elementString.loader}`);
if(loader){
loader.parentElement.removeChild(loader);
}
}
file: style.css
.loader {
margin: 5rem auto;
text-align: center; }
.loader svg {
height: 5.5rem;
width: 5.5rem;
fill: #F59A83;
transform-origin: 44% 50%;
animation: rotate 1.5s infinite linear; }
#keyframes rotate {
0% {
transform: rotate(0); }
100% {
transform: rotate(360deg); } }
file: icons.svg
<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="icon-cw" viewBox="0 0 20 20">
<title>cw</title>
<path d="M19.315 10h-2.372v-0.205c-0.108-4.434-3.724-7.996-8.169-7.996-4.515 0-8.174 3.672-8.174 8.201s3.659 8.199 8.174 8.199c1.898 0 3.645-0.65 5.033-1.738l-1.406-1.504c-1.016 0.748-2.27 1.193-3.627 1.193-3.386 0-6.131-2.754-6.131-6.15s2.745-6.15 6.131-6.15c3.317 0 6.018 2.643 6.125 5.945v0.205h-2.672l3.494 3.894 3.594-3.894z"></path>
</symbol>
</defs>
</svg>
file: app.js
renderLoader(document.querySelector('.results'));// .results is the parent of my searchlist which I am shoing in the view
await state.search.getResults();
clearLoader();
file: app.html
<body>
<div class="container">
<div class="results">
<ul class="results__list">
</ul>
</div>
</div>
</body>
Just add a spinning gif to the chart div, it will be replaced automatically by google chart when loaded. Like this,
""