I have been searching all over the internet, went through stackover flow like crazy and solved half my problem, i am trying to size an iframe when you click a link to load the full size of a page, i have gotten it to work in IE but in FF nothing happens it just stay the same height,
Code that work for IE
function calcHeight() {
var the_height = 0;
//find the height of the internal page
if (/Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent)) { //test for Firefox/x.x or Firefox x.x (ignoring remaining digits);
the_height = document.getElementById('class').contentDocument.body.offsetHeight + 140;
}
else {
the_height = document.getElementById('class').contentWindow.document.body.scrollHeight + 18;
}
document.getElementById('class').height = the_height + "px";
}
Iframe code
<iframe src="iframback.html" name="class" id`="class" width="100%" height="auto" scrolling="no" frameborder="0" onload="calcHeight();" allowtransparency='true'></iframe></td>
Any help would be greatly appreciated i cannot figure this one out!
This is a link to the test page you are suppose to be able to click on 'Ohio Conceal Handgun License (CHL)' and have the code show next to it and have the IFRAME expand down like it does in IE.
Thanks!
http://www.dualactiontactics.com/Update/7/Training.html
You are using id` instead of id in your iframe, first change this
<iframe src="iframback.html" name="class" id`="class" width="100%" height="auto"
scrolling="no" frameborder="0" onload="calcHeight();" allowtransparency='true'></iframe>
id`="class" to id="class"
and in js change statement
document.getElementById('class').height = the_height + "px";
to
document.getElementById('class').height = the_height;
or
document.getElementById('class').style.height= the_height + "px";
Related
I am a beginner JS user, and I am trying to get a video to play on fullscreen and replace an invisible div further down on the page. I started with a guide from Chris Ferdinandi.
In his guide, the video replaces the image that is clicked. I would like to have the div later down on the page to be replaced on the click.
Any guidance would be great!
HTML
<a data-video="480459339" class="stylsheetref" href="#" target="">Watch the Tour</a>
<div id="video-replace"></div>
Javascript (modified from this guide)
<script>
if (!Element.prototype.requestFullscreen) {
Element.prototype.requestFullscreen = Element.prototype.mozRequestFullscreen || Element.prototype.webkitRequestFullscreen || Element.prototype.msRequestFullscreen;
}
// Listen for clicks
document.addEventListener('click', function (event) {
//Set invisible Div (new code added by me)
var videonew = '#video-replace');
// Check if clicked element is a video link
var videoId = event.target.getAttribute('data-video');
if (!videoId) return;
// Create iframe
var iframe = document.createElement('div');
iframe.innerHTML = '<p>x</p><iframe width="560" height="960" src="https://player.vimeo.com/video/' + videoId + '?rel=0&autoplay=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>';
var video = iframe.childNodes[1];
// Replace the image with the video
event.target.parentNode.replaceChild(video, videonew);
// Enter fullscreen mode
video.requestFullscreen();
}, false);
</script>
There are problems in your code.
var videonew = '#video-replace'); there's an orphan ), since you are using this in the `replaceChild``method I assume you want the variable to reference to an element.
So change it to
var videonew = document.querySelector('#video-replace');
Pro tip: Using the Developer console during development can help you figure out such errors in your code.
<iframe id="payframe" src="~" width="100%" height="3000" frameborder="0" scrolling="no" onload="scroll(0, 0);"></iframe>
my current iframe code is like above. its height is set as 3000 not along the content. To fix this and match with content length, in my HTML page which will be inserted in to iframe, I wrote like this.
$(document).ready(function() {
autoResize();
});
function autoResize(){
var newheight;
var newwidth;
newheight = document.getElementById("register_apply").contentWindow.document.body.scrollHeight;
parent.document.getElementById("register_apply").height = (newheight) + "px";
}
register_apply is the id for the wrapper, which contains all content. After making iframe height 0 I tried but it doesn't work. Is there any that I have to modify?
I am looking for a code which does a simple task. below is the task
let's say my site is http://www.url.com
I want when my user go to this site they see a box on top of the page which shows my site name and also my contact details and also a countdown timer.
below this line I want to show the exact same website of few different URL and I want to set a timer as well so that these few websites rotate and that timer on top shows how long it is until the next refresh and next website. I want only this part of the webpage to refresh and I want the top line to be still.
http://i58.tinypic.com/s6t84h.jpg
you can see what I want in the image above.
I was told that it can be done using iframe but I don't know how to do it and I also don't want scroll
I appreciate if you could help me
I found this solution and it seems to be working. I just need the countdown timer and also I want to crop out let's say 200px of top of each website and like shift it up because one page doesn't show all the content I want unless using scrolling and I don't want that.
<!DOCTYPE html>
<html>
<body>
<div align="center" style="border:4px solid red ">
<div style="color:#0000FF">
<h3>some content<color:#0000FF/h3>
<h3>some more content<color:#0000FF/h3>
</div>
</div>
<iframe id="rotator" src="http://www.zcast.ir" width="100%" height="600" scrolling="no" border="0" ></iframe>
<script>
// start when the page is loaded
window.onload = function() {
var urls = [
"http://www.zcast.ir",
"http://www.tgju.org",
"http://www.on3.ir",
"http://www.goldinfo.ir",
"http://www.zarban.ir",
];
var index = 1;
var el = document.getElementById("rotator");
setTimeout(function rotate() {
if ( index === urls.length ) {
index = 0;
}
el.src = urls[index];
index = index + 1;
// continue rotating iframes
setTimeout(rotate, 5000);
}, 5000); // 5000ms = 5s
};
</script>
</body>
</html>
Yes absolutely you can do that using iframe
1) set iFrame scrolling attribute to no:
<iframe src="/default.asp" width="200" height="200" scrolling="no">
</iframe>
read more: iFrame attr (w3Schools)
2) setTimeout for the timer: - see more
3) Reload the iframe from parent window - see more
You can use style position:fixed; and top:0; to place the div on top of your page:
<div style="position:fixed;top:0;"> some content here </div>
so thats it! :)
You can use iframe but, be sure that target website may disallow iframe embed. You can use following code;
var websites = new Array(
"http://www.hurriyet.com",
"http://www.milliyet.com",
"http://www.amazon.com"
);
var counter = 0;
var sTimeOut = setInterval(function () {
var index = counter%(websites.length);
$("#website_div").html($('<iframe src="' + websites[index] + '" width="500" height="500" border="0" scrolling="no"/>' ));
counter++;
}, 5000);
Put your websites in list, and it will rotated.
Here is a working demo: Demo
I am creating a custom WYSIWYG from scratch using JavaScript. All of it is working fine (like inserting pictures), but when I click on submit and the content gets added to my database, the YouTube video gets inserted like this:
<div><br></div><div><br><div><br></div></div>
I have created a JavaScript file that the WYSIWYG parses to:
function iImage(){
var imgSrc = prompt('Enter image location', '');
if (imgSrc != null){
richTextField.document.execCommand('insertimage', false, imgSrc);
}
}
function iVideo(){
var urlPrompt = prompt("Enter Youtube Url:", "http://");
var urlReplace = urlPrompt.replace("watch?v=", "embed/");
var embed = '<iframe src="'+urlReplace+'" allowfullscreen="true" width="480" frameborder="0" height="390">';
if($.browser.msie){
richTextField.document.createRange().pasteHTML(embed);
}else{
richTextField.document.execCommand("Inserthtml", false, embed);
}
}
function submit_form(){
var theForm = document.getElementById("blogForm");
theForm.elements["blogbody"].value = window.frames['richTextField'].document.body.innerHTML;
theForm.submit();
}
You can see that my iImage function works, but not my iVideo.
Can anyone help?
Just to let you know i have edited my script to this...
function iVideo(){
var urlPrompt = prompt("Enter Youtube Url:", "http://");
var urlReplace = urlPrompt.replace("http://www.youtube.com/watch?v=", "http://www.youtube.com/embed/");
var embed = '<iframe src="'+urlReplace+'" allowfullscreen="true" width="480" frameborder="0" height="390"></iframe>';
if($.browser.msie){
richTextField.document.createRange().pasteHTML(embed);
}else{
richTextField.document.execCommand("Inserthtml", false, embed);
}
}
but still no joy
I have got it. This is the code below
function iVideo(){
var urlPrompt = prompt("Enter Youtube Url:", "http://");
var urlReplace = urlPrompt.replace("watch?v=", "embed/");
var embed = '<iframe title="YouTube video player" src="'+urlReplace+'" allowfullscreen="true" width="480" frameborder="0" height="390">';
if(embed != null){
richTextField.document.execCommand("Inserthtml", false, embed);`
}
}
It working on my sites right now.
Ultimate
The reason you don't see a Youtube.com is because it will be added by you upon uploading. In the form where you write content you intend to upload to your site, You are to click on a Add Video link which will tricker off the first line in the code to popup a window requesting you to submit your Youtube video link, which looks something like http://youtube.com/theVideoLink. The link you add will then be placed where you have src="'+urlReplace+'" that is.
Well, I am a begginner at javascript, but I don't see anywhere were it adds youtube.com to it, all I see is the watch?v=.
As I said, a beginners opinion.
Are you able to first try a hardcoded/static version like below first?
- might be just syntax or one of your variables not set.
<script type="text/javascript">
function iVideo(){
var youtubeiframe='<iframe type="text/html" width="640" height="385" src="http://www.youtube.com/embed/AsbagZvkrbo" frameborder="0"></iframe>';
richTextField.document.execCommand ("insertHTML", false, youtubeiframe);
}
</script>
I have an Iframe that links to another html page. The iframe is contained within a div. I found some code that would auto adjust the high depending on the contents of the iframe. This code works fine in firefox and older versions of internet explorer but its not adjusting the height in v7 or later.....
Javascript:
<script type="text/javascript">
function changeContent(){
document.getElementById('right').innerHTML = window.frames['contentFRAME'].document.getElementsByTagName('html')[0].innerHTML;
}
</script>
HTML:
<div class="fl" id="right">
<iframe class="newsFrame" id = "contentFRAME" name = "contentFRAME" src ="news.html" onLoad = "changeContent()"></iframe>
</div>
Can anyone help.....
Try this
function resizePanel() {
window.console.log("ran the resize panel function");
var frame = document.getElementsByTagName('iframe')[0];
if(frame != null) {
frame.style.height = frame.contentWindow.document.body.scrollHeight + "px";
}
}