In the code below you can see the "89%". I would like to replace that number with the value from a TextBox from my Website. How is this possible, been Looking for solutions online but havent suceed so far. The code below is used for a html i frame.
<head>
<style type="text/css">
.outer {
position: relative;
width: 600px;
height: 400px;
}
canvas {
position: absolute;
}
.percent {
position: absolute;
left: 50%;
transform: translate(-50%, 0);
font-size: 80px;
bottom: 0;
}
</style>
</head>
<body>
<div class="outer">
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<canvas id="secondContainer" width="600" height="400"></canvas>
<p class="percent">
89%
</p>
</div>
</body>
I tried the following solution. I have the orignal Website and two iframes. On the first iframe (html1) you can find a graph, which consits of the code above (and more code), where I would like to put in the number of the text box (instead of 89% --> see code above)). I then put up another ifram (html2) from where I would like to Access the TextBox, since from the original Website this doesnt seem to work. As a result I have the code below which is from iframe1. Am I on the wrong path at all or is i it a coding mistake Im doing?
<p class="percent">
<script>
$( document ).ready( function(){
var iframe = document.getElementById("#html2");
var elmnt = iframe.contentWindow.document.getElementsByTagName("#input4");
});
</script>
</p>
Related
I'm trying to create a button that when clicked brings up a pop up window with an iframe source embedded.
However, at the moment the iframe shows up right below the button when clicked. What I need is for the iframe to show up as a window in the center of the screen.
$(function() {
$('#button').click(function() {
if (!$('#iframe').length) {
$('#iframeHolder').html('<iframe id="iframe" src="https://fixr.co/event/831401916?compact=true&theme=dark" width="700" height="450"></iframe>');
}
});
});
<button id="button">Button</button>
<div id="iframeHolder"></div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
It's just a matter of positioning your iframe container relative to the viewport. There are many ways of doing this, and the best one depends on what else is happening in your page. Here's a solution assuming that the page appears just as you've shown it. See the full page demo for a better view.
Protip: Update your jQuery version. 1.x is very old. You can often update to 3.x with no code changes. Of course, if this is all you're using it for you don't really need jQuery anyway.
$(function() {
$('#button').click(function() {
if (!$('#iframe').length) {
$('#iframeHolder').html('<iframe id="iframe" src="https://fixr.co/event/831401916?compact=true&theme=dark" width="700" height="450"></iframe>');
}
});
});
body {
position: relative;
min-height: 100vh;
}
#iframeHolder {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<button id="button">Button</button>
<div id="iframeHolder"></div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
I have a few images on my page. I'm finding that the page starts to render before the images have been loading (which is good), but that the visual effect is not great. Initially the user sees this:
--------hr--------
text
Then a few milliseconds later the page jumps to show this:
--------hr--------
[ ]
[ image ]
[ ]
text
Is there a simple way that I can show a grey background image of exactly the width and height that the image will occupy, until the image itself loads?
The complicating factor is that I don't know the height and width of the images in advance: they are responsive, and just set to width: 100% of the containing div. This is the HTML/CSS:
<div class="thumbnail">
<img src="myimage.jpeg" />
<div class="caption">caption</div>
</div>
img { width: 100% }
Here's a JSFiddle to illustrate the basic problem: http://jsfiddle.net/X8rTB/3/
I've looked into things like LazyLoad, but I can't help feeling there must be a simpler, non-JS answer. Or is the fact that I don't know the height of the image in advance an insurmountable problem? I do know the aspect ratio of the images.
Instead of referencing the image directly, stick it within a DIV, like the following:
<div class="placeholder">
<div class="myimage" style="background-image: url({somedynamicimageurl})"><img /></div>
</div>
Then in your CSS:
.placeholder {
width: 300;
height: 300;
background-repeat: no-repeat;
background-size: contain;
background-image: url('my_placeholder.png');
}
Keep in mind - the previous answers that recommend using a div background approach will change the semantic of your image by turning it from an img into a div background. This will result in things like no indexing of these images by a search crawler, delay in loading of these images by the browser (unless you explicitly preload them), etc.
A solution to this issue (while not using the div background approach) is to have a wrapper div to your image and add padding-top to it based on the aspect ratio of the image that you need to know in advance. The below code will work for an image with an aspect ratio of 2:1 (height is 50% of width).
<div style="width:100%;height:0; padding-top:50%;position:relative;">
<img src="<imgUrl>" style="position:absolute; top:0; left:0; width:100%;">
</div>
Of course - the major disadvantage of this approach is that you need to know the aspect ratio of the image in advance.
There is a really simple thing to check before you start looking into lazy-loading and other JavaScript. Make sure the JPEG images you are loading are saved with the 'progressive' option enabled!
This will cause them to load the image iteratively, starting with a placeholder that is low-resolution and faster to download, rather than waiting for the highest resolution data before rendering.
It's very simple...
This scenario allows to load a profile photo that defaults to a placeholder image.
You could load multi CSS background-image into an element. When an avatar photo fails, the placeholder image appears default of div.
If you're using a div element that loads via a CSS background-image, you could use this style:
#avatarImage {
background-image: url("place-holder-image.png"), url("avatar-image.png");
}
<div id="avatarImage"></div>
Feel free to copy this:
<script>
window.addEventListener("load", function () {
document.getElementById('image').style.backgroundColor = 'transparent';
});
</script>
<body>
<image src="example.example.example" alt="example" id="image" style="background-color:blue;">
</body>
I got this from here: Preloader keeps on loading and doesnt disappear when the content is loaded.
Apart from all solutions already mentioned, the last solution would be to hide the document until everything is loaded.
window.addEventListener('load', (e) => {
document.body.classList.add('loaded');
});
body {
opacity: 0;
}
body.loaded {
opacity: 1;
}
<div id="sidebar">
<img src="http://farm9.staticflickr.com/8075/8449869813_1e62a60f01_b.jpg" />
<img src="https://www.nla.gov.au/sites/default/files/pic-1.jpg" />
<img src="https://www.nla.gov.au/sites/default/files/pic-2.jpg" />
<img src="https://www.nla.gov.au/sites/default/files/pic-3.jpg" />
<img src="https://www.nla.gov.au/sites/default/files/pic-4.jpg" />
<img src="https://www.nla.gov.au/sites/default/files/pic-5.jpg" />
<img src="https://www.nla.gov.au/sites/default/files/pic-6.jpg" />
</div>
Or show some animation while everything is loading:
window.addEventListener('load', (e) => {
document.body.classList.add('loaded');
});
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 70px;
height: 70px;
-webkit-animation: spin 2s linear infinite;
/* Safari */
animation: spin 2s linear infinite;
position: absolute;
left: calc(50% - 35px);
top: calc(50% - 35px);
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
body :not(.loader) {
opacity: 0;
}
body .loader {
display: block;
}
body.loaded :not(.loader) {
opacity: 1;
}
body.loaded .loader {
display: none;
}
<div class="loader"></div>
<div id="sidebar">
<img src="http://farm9.staticflickr.com/8075/8449869813_1e62a60f01_b.jpg" />
<img src="https://www.nla.gov.au/sites/default/files/pic-1.jpg" />
<img src="https://www.nla.gov.au/sites/default/files/pic-2.jpg" />
<img src="https://www.nla.gov.au/sites/default/files/pic-3.jpg" />
<img src="https://www.nla.gov.au/sites/default/files/pic-4.jpg" />
<img src="https://www.nla.gov.au/sites/default/files/pic-5.jpg" />
<img src="https://www.nla.gov.au/sites/default/files/pic-6.jpg" />
</div>
The only thing I can think of, to minimize the jump effect on your text, is to set min-height to where the image will appear, I would say - set it to the "shorter" image you know of. This way the jump will be less evident and you won't need to use lazyLoad or so... However it doesn't completely fix your problem.
Here's one naive way of doing it,
img {
box-shadow: 0 0 10px 0 rgba(#000, 0.1);
}
You can manipulate the values, but it creates a very light border around the image that doesn't push the contents. Images can load at whatever time they want, and you get a good user experience.
Here is what I did with Tailwind CSS, but it's just CSS:
img {
#apply bg-no-repeat bg-center;
body.locale-en & {
background-image: url("data:image/svg+xml;utf8,<svg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'><text x='50%' y='50%' style='font-family: sans-serif; font-size: 12px;' dominant-baseline='middle' text-anchor='middle'>Loading…</text></svg>");
}
body.locale-fr & {
background-image: url("data:image/svg+xml;utf8,<svg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'><text x='50%' y='50%' style='font-family: sans-serif; font-size: 12px;' dominant-baseline='middle' text-anchor='middle'>Chargement…</text></svg>");
}
}
You can find the width and height of the images in the developer tools console, for example in Chrome you can click the cursor icon in the developer tools console and when you hover on the page it will highlight all the properties of the elements in the page.
This will help you find the width and height of the images, because if you hover on top of your images it will give you the dimensions of the image and other more properties. You can also make an individual div for each image and make the div relative to the images width and height. You can do it like this:
The main div will contain the images and also the background-div which is below the image.
HTML:
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div class=".mainDiv">
<div class="below"></div>
<img src="https://imgix.bustle.com/uploads/image/2020/2/13/da1a1ca4-95ec-40ea-83c1-4f07fac8b9b7-eqb9xdwx0auhotc.jpg" width="500"/>
</div>
</body>
</html>
CSS:
.mainDiv {
position: relative;
}
.below {
position: absolute;
background: #96a0aa;
width: 500px;
height: 281px;
}
img {
position: absolute;
}
The result will be that .below will be below the image and so when the image has trouble loading the user will instead see the grey .below div. You cannot see the .below div because it is hidden below the image. The only time you will see this is when the loading of the image is delayed. And this will solve all your problems.
I have got a way. But you will need to use JavaScript for it.
The HTML:
img = document.getElementById("img")
text = document.getElementById("text")
document.addEventListener("DOMContentLoaded", () => {
img.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAA1BMVEWIiIhYZW6zAAAASElEQVR4nO3BgQAAAADDoPlTX+AIVQEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADwDcaiAAFXD1ujAAAAAElFTkSuQmCC";
text.innerHTML = "Loaded but image is not";
});
window.onload = function() {
img.src = "https://media.geeksforgeeks.org/wp-content/uploads/20190913002133/body-onload-console.png";
text.innerHTML = "Image is now loaded";
};
#img {
width: 400px;
height: 300px;
}
<hr>
<img id="img" src="https://media.geeksforgeeks.org/wp-content/uploads/20190913002133/body-onload-console.png">
<p>Here is the Image</p>
<p id="text">Not Loaded</p>
My HTML:
<html>
<head>
<link rel="stylesheet" href="C:\Users\coeconsultant3\Desktop\Loadingexample\abccss.css">
<title></title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(window).load(function () {
$("#loader").fadeOut("slow");
})
</script>
</head>
<body>
<div id="loader"></div>
<div id="page1">
<p>
<h1>Hello World !!!
</h1>
</p>
</div>
</body>
</html>
CSS for loader :
#loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('C:/Users/coeconsultant3/Desktop/Loadingexample/page-loader.gif') 50% 50% no-repeat rgb(249,249,249);
}
I have used script which does different behaviour:
When I use div id = loader, it shows directly the hello world.
When I use div class = loader, it just shows loading gif image and does not go through the page.
I want to know the error for this program
Your code works perfectly fine. And for information $(document).ready() is better to use.
The way you've linked your CSS, I assume you're directly opening the HTML file, i.e. by double clicking on the file (correct me if I'm wrong). If this is the case then you've to correct your jQuery linking to:
<script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Two problems with your both scenarios :
Problem 1 : When you apply class="loader" :
Here the problem is that when you use class="loader" your css applies to the div. and in javascript you are using $("#loader") instead of $(".loader")
Problem 2 : When you apply id="loader" :
Here the problem is that you remove the class="loader" and add id="loader" so your css will not be applied to the div.
Solution :
Update your div with class as mentioned below :
<div id="divloader" class="loader"></div>
Update your javascript as mentioned below :
<script type="text/javascript">
$(window).load(function () {
$("#divloader").fadeOut("slow");
})
</script>
problem: you are missing a semicolon ; at the end of the function
change to
$(window).load(function () {
$("#loader").fadeOut("slow");
});
and add this too
$(document).ready(function(){
$("#page1").fadeIn(3000)
});
don't forget to give style="display:none;" for div page1
Hope it helps..!!
Instead of
$(window).load(function () {
//your code
});
use
$(document).ready(function(){
//your code
});
This gives the fadeIn effect you wish to have:
$(document).ready(function(){
$('body').css('display', 'none');
$("body").fadeIn("slow");
});
And here's a Fiddle.
Hope this helps!
Try this:
HTML:
<div id="dvLoading"></div>
CSS:
#dvLoading
{
background:#000 url(images/loader.gif) no-repeat center center;
height: 100px;
width: 100px;
position: fixed;
z-index: 1000;
left: 50%;
top: 50%;
margin: -25px 0 0 -25px;
}
SCRIPT:
<script>
$(window).load(function(){
$('#dvLoading').fadeOut(2000);
});
</script>
Here is a reference and demo.
Here, my code works fine in IE10 but the scroll bar appears in chrome as well as the firefox.
it navigates to the link only when it is clicked by the border of the iframe. Moreover, the iframe is not clickable. Help me out....
<style>
.icon-remove-sign {
position: absolute;
top: 0;
right: 0;
</style>
$(document).ready(function(){
$('i.icon-remove-sign').on('click',function(e){
e.preventDefault();
pdfID = $(this).closest('.imagewrap')[0].id;
$('#dialog').dialog('open');
alert('Deleting '+pdfID+'');
$(this).closest('.imagewrap')
.fadeTo(300,0,function(){
$(this)
.animate({width:0},200,function(){
$(this)
.remove();
});
});
});
});
<div class="imagewrap">
<iframe src="http://team358.org/files/website/Basic_HTML_Tutorial.pdf#scrollbar=0&scrolling=0" width="150" height="100" scrolling="no"></iframe>
<i class=" icon-remove-sign"></i>
</div>
The scrollbar belongs to the PDF plugin, not to the <iframe>. So, as far as I know, you cannot control its appearance using HTML or CSS. That is also why the link only works when you click on the border : the border still belongs to the HTML page, but the PDF plugin doesn't delegate the clicks it receives back to the browser (I can't imagine how it could!)
Also, putting an <iframe> inside an <a> tag ? I've never seen that before and I'm not sure why you would want to do this.
Maybe you want to set your iframe to be the target of your link, like this ?
<iframe width="100%" height="100%" name="pdf_frame"></iframe>
<a href="http://team358.org/files/website/Basic_HTML_Tutorial.pdf"
target="pdf_frame">HTML Tutorial</a>
http://jsfiddle.net/p75wM/2/
EDIT : now that I understood your question, I think you'll find good information here : (also check out the update to that post)
<style>
.iframe_thumb {
position : relative;
overflow : hidden;
}
.iframe_thumb a {
position : absolute;
top : 0;
left : 0;
width : 100%;
height : 100%;
z-index : 10;
}
.iframe_thumb .delete {
postion : absolute;
top : 5px;
right: 0;
z-index : 11;
}
</style>
<div class="iframe_thumb">
<iframe src="http://team358.org/files/website/Basic_HTML_Tutorial.pdf#scrollbar=0&scrolling=0" width="100" height="100" scrolling="no"></iframe>
<img src="images/delete.png" />
</div>
Use a container div with style
<style>
#container{width: 500px; height: 300px; overflow: hidden;}
iframe{width: 518px; height: 318px;}
</style>
<body style="margin:0px; padding:0px; overflow:hidden;">
<div id="container">
<a href="http://team358.org/files/website/Basic_HTML_Tutorial.pdf">
<iframe src="http://team358.org/files/website/Basic_HTML_Tutorial.pdf" frameborder="0" scrolling="no" >
</iframe></a>
</div>
How can I make my iframe fill the window and not display any scrollbars?
This works for IE6, I would like to get it to work for all browsers if possible:
<iframe name=iframe1 src="theSiteToShow.html" width="100%" height="100%" frameborder="0" marginheight="10" marginwidth="10"></iframe>
<script type="text/javascript">
function resizeIframe() {
var height = document.documentElement.clientHeight;
height -= document.getElementById('frame').offsetTop;
// not sure how to get this dynamically
height -= 20; /* whatever you set your body bottom margin/padding to be */
document.getElementById('frame').style.height = height +"px";
};
document.getElementById('frame').onload = resizeIframe;
window.onresize = resizeIframe;
</script>
You should be able to do this using CSS only, without any need for javascript. The following works for me in IE6+, Google Chrome and Safari:
<style type="text/css">
body {
margin: 0;
overflow: hidden;
}
#iframe1 {
position:absolute;
left: 0px;
width: 100%;
top: 0px;
height: 100%;
}
</style>
<iframe id="iframe1" name="iframe1" frameborder="0"
src="theSiteToShow.html"></iframe>
Your frame margins should be set in the body of theSiteToShow.html.
UPDATE
Following your comment, I used the following as a test page:
<html>
<head>
<style type="text/css">
body {
margin: 0;
overflow: hidden;
}
#iframe1 {
position:absolute;
left: 0px;
width: 100%;
top: 0px;
height: 100%;
}
</style>
</head>
<body>
<iframe id="iframe1" src="http://stackoverflow.com" frameborder="0"></iframe>
</body>
</html>
Tested in IE6+, Chrome, Safari and Firefox, it works just fine and fills the entire window.
I was having the same issues with the scroll bars as well as the No Context Menu showing up, even though all these elements had been disabled. After a few days of trying to solve them, I stumbled on this post, which helped a bit, but led me onto finding a post on flexible webplayers with three code examples. Here're the links:
http://virtualplayground.d2.pl/?p=367#comment-224
Download package
Use the index file if you want a blank sheet to work from, replace your existing code in your exported .html file (from Unity export), replace the 'unityObject.embedUnity' link with your own link to your .html file located on your server.
To embed the player in your page using an iframe add:
Lock and load.
Hope this helps.
^_^