I have an IP webcam and upload an image to a weather service. I then capture that image to display in my webpage. In order to do that I searched for some code that would refresh the image without refreshing the page. I found some code (sorry, I don't know who to acknowledge) that I adapted ……..
<script>
var reimg
window.onload=function () {
reimg=document.getElementById('re')
setInterval(function () {
reimg.src=reimg.src.replace(/\?.*/,function () {
return '?'+new Date()
})
},60000)
}
</script>
The next bit is, to a great extent, probably overkill but I have been trying to get it to work (how I want it to look) on all browsers...
<iframe frameborder=0 marginwidth=0 marginheight=0 border=0 width="360" height="270" style="overflow:
hidden;border:0;margin:0;width:360px;height:270px;max-width:100%;max-height:100%"
src="http://icons.wunderground.com/webcamramdisk/g/l/Gluepack/1/current.jpg?" id="re" scrolling="no"
allowtransparency="true">If you can see this, your browser doesn't understand IFRAME. However, we'll
still link
you to the file.</iframe>
It works fine in Firefox, reducing the 640 x 480 original image to fit. However, in IE and Chrome only the centre top part of the image is shown (i.e. the image is not reduced to fit). Is there any additional code required to ensure it displays correctly (i.e. how I want it, reduced to fit) in IE and Chrome or is it not possible?
How images are displayed is really up to the browser, there is not standard for that. The easiest solution would be to create an HTML file that contains the javascript and a <img> tag for the image instead of loading the image directly into the iframe:
<!DOCTYPE HTML>
<html><head>
<script>
window.onload = function() {
var reimg = document.getElementsByTagName('img')[0];
setInterval(function () {
reimg.src = reimg.src.replace(/\?.*/, function () {
return '?'+new Date()
});
}, 60000);
};
</script>
<style type="text/css">
* { margin: 0; padding: 0; }
img { width: 360px; height: 270px; }
</head><body>
<img src="http://icons.wunderground.com/webcamramdisk/g/l/Gluepack/1/current.jpg?">
</body></html>
Save this as "webcam.html" or whatever:
<iframe frameborder=0 marginwidth=0 marginheight=0 border=0
width="360" height="270" style="overflow: hidden; border:0;
margin:0; width:360px; height:270px; max-width:100%; max-height:100%"
src="webcam.html" id="re" scrolling="no"
allowtransparency="true">...</iframe>
Related
I've been tasked with creating a sort of Kiosk to display in an office, the Kiosk is suppose to cycle through the various advertising videos that I've been given, this part is easy enough as I found another post about that, however after each video they want a news stream to play for 10 minutes, then for the kiosk to go to the next video, and continue like this. the stream I'm trying to use is the embedded iframe for the sky news YouTube stream
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/9Auq9mYxFEE?controls=0"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
I've tried a few things like trying to hide the existing element and show the other, but unfortunately I've never used HTML before being tasked with this so it's going about as well as can be expected
This is what I'm doing to display and cycle through the videos
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
{
box-sizing: border-box;
}
#video {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
max-height: 100%;
max-width: 100%;
background-color: black;
}
</style>
</head>
<body>
<video src="Video1.mp4" id="video" autoplay></video>
<script>
var vidElement = document.getElementById('video');
var vidSources = [
"Video1.mp4",
"video2.mp4",
"Video3.mp4"
];
var activeVideo = Math.floor((Math.random() * vidSources.length));
vidElement.src = vidSources[activeVideo];
vidElement.addEventListener('ended', function(e) {
// update the active video index
activeVideo = (++activeVideo) % vidSources.length;
if(activeVideo === vidSources.length){
activeVideo = 0;
}
// update the video source and play
vidElement.src = vidSources[activeVideo];
vidElement.play();
});
</script>
</body>
</html>
I've tried adding to the existing script to preform the task of hiding the stream, by either setting the display of the element to none or by changing the hight and width to 0, neither of which worked for me. so either,
<iframe src="https://www.youtube.com/embed/9Auq9mYxFEE?controls=0&autoplay=1" title="YouTube video player" id="youtubeplay" frameborder="0"</iframe>
<script>
document.getElementById("youtubeplay").style.display = 'none';
</script>
or
<iframe src="https://www.youtube.com/embed/9Auq9mYxFEE?controls=0&autoplay=1" title="YouTube video player" id="youtubeplay" frameborder="0"</iframe>
<script>
var liveElement = document.getElementById('youtubeplay');
liveElement.display = 'block'
liveElement.style.max-height = '0%';
liveElement.style.max-width = '0%';
</script>
I haven't gotten as far as trying to change the video back after 10 minutes as my attempts at hiding the video to start with didn't work, any help would be appreciated.
Please also let me know if this is the completely wrong way of trying to do something like this.
Have you tried doing it with jquery like this:
`$("#youtubeplay").removeAttr("hidden");
setTimeout(function(){
$("#youtubeplay").prop("hidden", "true");
},600000)`
The code is deleting attribute hidden from the element with the id "youtubeplay" and after 10 minutes (60'0000 milliseconds) adds it back so the video disappears, I hope you know jQuery but if you don't here's a code in regular JavaScript:
document.getElementById("youtubeplay").removeAttribute("hidden");
setTimeout(function(){
document.getElementById("youtubeplay").setAttribute("hidden", "true");
},600000)
Why is the following page un-printable on google chrome? JSFiddle
<!doctype html>
<html>
<head></head>
<body>
<iframe id="f" src="http://placehold.it/350x1500?q=1"></iframe>
<script>
window.addEventListener("resize",function () {
var f = document.querySelector("#f");
f.src = f.src+"1";
f.style.height="2000px";
});
</script>
</body>
</html>
If you can't replicate the issue, I am using Google Chrome 55.0.2883.95 (Official Build) (64-bit), and my screen size is 1920x1080
Even more interesting, it still can't print when you have display: none set. JSFiddle
<!doctype html>
<html>
<head></head>
<body>
<iframe id="f" src="http://placehold.it/350x1500?q=1" style="display: none"></iframe>
<script>
window.addEventListener("resize",function () {
var f = document.querySelector("#f");
f.src = f.src+"1";
f.style.height="2000px";
});
</script>
</body>
</html>
Update
The f.style.height is not necessary, the main issue is the iframe src change (a widget needs a size parameter in its location)
It's something to do with your resize handler. If you remove that code, it works fine. I believe you can accomplish what you're looking for in a CSS media query instead:
<iframe id="f" src="https://placehold.it/350x1500?q=1"></iframe>
#media print {
#f { height: 2000px }
}
https://jsfiddle.net/7x9sdf79/1/
Im using PrettyPhoto Version 3.1.5 in a prestashop site, and am attempting to add a pinterest button, I would ideally not like to have to change the code in the js file itself.
For some reason media and url is still coming back as undefined...
<script type="text/javascript">
$(document).ready(function() {
{literal}
var photo_options = { social_tools: '<div class="twitter">Tweet<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></' + 'script></div><div class="facebook"><iframe src="//www.facebook.com/plugins/like.php?locale=en_US&href={location_href}&layout=button_count&show_faces=true&width=500&action=like&font&colorscheme=light&height=23" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:500px; height:23px;" allowTransparency="true"></iframe></div><div class="pinterest"><img border="0" src="http://assets.pinterest.com/images/PinExt.png"; title="Pin It" /></div>' };
{/literal}
$("a[rel^='prettyPhoto']").prettyPhoto(photo_options);
});
</script>
Here is part of the generated html after you click on the image...
<div id="pp_full_res">
<img id="fullResImage" src="/modules/gallery/img/2bf766b19efd5410fa795f452b401186.jpg" style="height: 365px; width: 486px;">
</div>
I tried $('#fullResImage').attr('src') but still nothing
I have been trying to get this to work for a while but to no avail. ive tried various scripts but im clearly doing something wrong :(
I have a menu on the left of the page, which contain (same server) href links of which their target is an iframe on the right of the page.
it sends the page to the iframe fine, but the iframe height does not change.
Can someone please assist me :(
here is my code:
html
<link rel="stylesheet" type="text/css" href="jquery.pageslide.css">
<script type="text/javascript" src="jquery/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
function sizeIframeToContent(id) {
// resize iframe to be the height of the content
try {
var frame = document.getElementById(viewcontent);
innerDoc = (frame.contentDocument) ?
frame.contentDocument : frame.contentWindow.document;
var objToResize = (frame.style) ? frame.style : frame;
objToResize.height = innerDoc.body.scrollHeight + 10 + 'px';
//objToResize.width = innerDoc.body.scrollWidth + 10 + 'px';
}
catch (err) {
console.log(err.message);
}
}
.... menu link
<div class="menuOut" onMouseOver="this.className='menuIn'" onMouseOut="this.className='menuOut'">
- Forum Adverts </div>
.... iframe html
<div id=maincontain>
<iframe id="viewcontent" frameborder="0">
</iframe>
</div>
CSS
#maincontain {
width: 85%;
float: none;
margin-left: 12%;
}
#viewcontent {
width: 100%;
padding-top: 15px;
float: none;
}
The iframe just stays about 300px height unless I specify a bigger height manually.
the pages being loaded in, all have 800px+ heights.
Thanks.
The iframes' height is not influenced by the content. That's how iframes work.
If you need to shrink or grow them, you need to do that manually. Read more here:
http://www.mattcutts.com/blog/iframe-height-scrollbar-example/
http://www.456bereastreet.com/archive/201112/how_to_adjust_an_iframe_elements_height_to_fit_its_content/
Have you tried JQuery?
You could use:
$("#viewcontent").height($("#viewcontent").contents().find("html").height());
And just call that on whatever event you want the iframe to resize on. I've got it working on keyup for one of my own projects. Here's the jsFiddle.
Please try the below script:
<script language="JavaScript">
<!--
function autoResize(id){
var newheight;
var newwidth;
if(document.getElementById){
newheight=document.getElementById(id).contentWindow.document .body.scrollHeight;
newwidth=document.getElementById(id).contentWindow.document .body.scrollWidth;
}
document.getElementById(id).height= (newheight) + "px";
document.getElementById(id).width= (newwidth) + "px";
}
//-->
</script>
<iframe src="test.html" width="100%" height="200px" id="my_frame" marginheight="0" frameborder="0" onLoad="autoResize('my_frame');"></iframe>
you Should have the source file with in your domain.this is already discussed
Click here
for Cross Domain iframe Resizing please
Click here
JavaScript would probably do it, I have searched but found nothing to do with maxWidth. Only resizing images out of the blue.
What I need is a piece of JavaScript code to resize an image if it's too big(defined in a variable.)
Is there some reason why you can't use the max-width CSS property to do what you want, like:
<img src="myImage.png" style="max-width: 600px;">
...or even better:
<style>
.widthConstrained {
max-width: 600px;
}
</style>
...
<img src="myImage.png" class="widthConstrained">
Edit:
If you must use JavaScript for compatibility reasons, I suggest that you use something like the code specified in this question to check the total image width after it loads, and clamp it down if needed, roughly like:
var img = $("img")[0]; // Get my img elem
$("<img/>") // Make in memory copy of image to avoid css issues
.attr("src", $(img).attr("src"))
.load(function() {
if (this.width > maxWidth) {
$(img).width(maxWidth);
}
});
I take it you have a <img /> tag in your webpage.
To shrink images that are too large, simply insert the width and height attribute, along with your image source and a alt, along with a ID.
<head>
<script type="text/javascript" />
function pie()
{
var pathToImage = "bla/bla/Image.jpg";
document.GetElementByID(Image1).setAttribute("src",pathToImage);
}
</script>
</head>
<body onload=Pie() >
<img ID="Image1" alt="random Image" width="300px" Height="200px" />
</body>