I want to make it so that the code automatically refreshes a DIV that displays an RSS Feed from last.fm to display the current music playing on my spotify.
This:
<script>
<div id="rss" style="height:25px;">
<iframe src="http://us1.rssfeedwidget.com/getrss.php?time=1400505489628&x=http%3A%2F%2Fws.audioscrobbler.com%2F1.0%2Fuser%2Flukeassassin%2Frecenttracks.rss&bc=333333&bw=1&bgc=transparent&m=1&it=false&t=(default)&tc=333333&ts=15&tb=transparent&il=true&lc=FF0000&ls=28&lb=false&id=false&dc=333333&ds=14&idt=false&dtc=284F2D&dts=12" border="0" hspace="0" vspace="0" frameborder="no" marginwidth="0" marginheight="0" align="center" style="border:0; padding:0; margin:0; width:600px; height:500px; text-align:center;" id="rssOutput"></iframe>
</div>
</div>
</script>
This is what it displays on the page:
I would use javascript to fill the div with the information you want.
Then using an interval you can reload the contents every X seconds
Example: http://jsfiddle.net/T7cZU/3/
Javascript:
$( document ).ready(function() {
ReloadData()
setInterval(function(){ReloadData()}, 1500);
});
function ReloadData(){
$( "#result" ).load( "http://numbersapi.com/random/trivia", function() {});
}
HTML:
<div id="result">
Original content
</div>
or you could simply reload your iframe:
setInterval(function(){
document.getElementById('frame_id').contentWindow.location.reload();
}, 1500);
Updated fiddle with both methods of updating: http://jsfiddle.net/T7cZU/5/
Related
I have the html like below:
<html>
<body>
<div>Welcome.</div>
<iframe src='otherpagecontent' width='594' height='334'>
#docuemnt
<html>
<body>
<div style='color:yellow'>
This should not show in fullscreen.
</div>
<div style='color:yellow'>
This should not show in fullscreen.
</div>
<div id='fullscreen' style='color:blue;'>
This should go fullscreen only.
</div>
<div style='color:red'>
This should not show in fullscreen.
</div>
<div style='color:red'>
This should not show in fullscreen.
</div>
</body>
</html>
</iframe>
<iframe src='diffirentpage'>
#docuemnt
<button onclick="launchFullscreen(document.getelementByID('fullscreen'));">Launch Fullscreen</button>
</iframe>
</body>
</html>
In JS:
this.launchFullscreen= function (element) {
var requestFullScreen = (element.requestFullScreen || element.mozRequestFullScreen || element.webkitRequestFullScreen || element.msRequestFullscreen);
requestFullScreen.apply(element);
}
Result in Request for fullscreen was denied because of FeaturePolicy directives.
How can I get this <div id='fullscreen'> to go fullscreen?
Should I change the CSS for this <div>, or bind the request from somewhere else?
PS: This work fine on Chrome, but issue occur on Firefox.
Yes, you should use CSS for this.
You can't force the user into full-screen by F11; however, you can make your div full screen by using the following CSS
div {width: 100%; height: 100%;}
This will of course assume your div is child of the tag. Otherwise, you'd need to add the following in addition to the above code.
div {position: absolute; top: 0; left: 0;}
from:How do I make a div full screen?
You might try this
<iframe src="myurl.in"
frameborder="0"
marginheight="0"
marginwidth="0"
width="100%"
height="100%"
scrolling="auto"></iframe >
from: https://www.geeksforgeeks.org/how-to-set-fullscreen-iframe/
I'm using an iframe video system with tabs to separate them, the problem I had was that all iframes loaded when you entered that section. I found this answer among many others that could not solve the problem of simultaneous loading To Load a video embed using "onclick" function to optimize a web page but now the problem I have is that using the solution by jquery to choose option 1 (iframe) loads normally but if I press option 2 both continue loading, ie, option 1 continues loading under the other that was pressed.
The system where I'm applying it is Datalife Engine on a .tpl file, and jquery 1.8.2 that I can change it to a more current one but the result is the same
<script>
$(document).ready(function() {
$("#myButton").on("click", function() {
var $iframe = $("#myIframe");
$iframe.attr("src", "https://www.youtube.com/embed/6wUxpFu9Wvo");
$iframe.show();
});
});
$(document).ready(function() {
$("#myButton1").on("click", function() {
var $iframe = $("#myIframe");
$iframe.attr("src", "https://www.youtube.com/embed/6wUxpFu9Wvo");
$iframe.show();
});
});
</script>
<script language="javascript" type="text/javascript">
$(function(){
$('.close').click(function(){
$('iframe').attr('src', $('iframe').attr('src'));
});
});
</script>
<iframe id="myIframe" width="560" height="315" style="display:none;" src="" frameborder="0" allowfullscreen></iframe>
<button id="myButton" class="close">Load video</button>
<iframe id="myIframe1" width="560" height="315" style="display:none;" src="" frameborder="0" allowfullscreen></iframe>
<button id="myButton1" class="close">Load video</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
The final result is that option 1 is still loading below another option, I was trying options to reload iframes but those who bring videos with autoplay continue to load below the new chosen one
You can use the same iFrame and change it's src on click of several buttons.
Following is an example similar to yours with one iFrame and 3 buttons. Each button loads a different video in the same iFrame. I am using youtube video id to differentiate the videos.
$(function() {
$(".myButton").on("click", function() {
var videoId = $(this).data('video-id');
var $iframe = $("#myIframe");
$iframe.attr("src", "https://www.youtube.com/embed/" + videoId);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<iframe id="myIframe" width="560" height="315" src="" frameborder="0" allowfullscreen style="border: 1px solid black;"></iframe>
<br />
<button id="button1" class="myButton" data-video-id="6wUxpFu9Wvo">Load video 1</button>
<button id="button2" class="myButton" data-video-id="z5jnpb_lp4w">Load video 2</button>
<button id="button3" class="myButton" data-video-id="6wUxpFu9Wv2">Load video 3</button>
I am using fullpage.js for my website. About fullpage.js everything working fine. I want to open an div on click of pagniation. I am able to open div on click which contains YouTube video. But when div is visible browser scroll will be disabled I am not getting where I go wrong.
here is sample of my code:
$(document).ready(function() {
$('#fullpage').fullpage({
verticalCentered: false,
css3:false,
navigation: true,
normalScrollElements: '.text',
navigationTooltips: ['tooltip1', 'tooltip2', 'tooltip3'],
onLeave: function(index, nextIndex, direction){
var prevIndex = index - 1;
var currentIndex = nextIndex - 1;
$('#section'+currentIndex).css('transform', 'scale(1.2)');
$('#section'+currentIndex).css('transition', 'all 5s ease-in');
setTimeout(function(){
$('#section'+prevIndex).css('transform', 'scale(1)');
$('#section'+prevIndex).css('transition', 'all 0.2s ease-in');
},500);
},
});
});
in jquery.fullpage.js
var li = '<li><span>' + tooltip + '</span>';
function :
function displayDetails(id)
{
$('#text').show();
}
HTML code:
<style>
#text {
position: absolute;
display:none;
z-index:999;
top: 300px;
width:100%;
height: auto;
}
</style>
<div id="text">
<iframe width="480" height="270" class="video" src="https://www.youtube.com/embed/6iNFimn4wFA" frameborder="0" allowfullscreen></iframe>
<iframe width="480" height="270" class="video" src="https://www.youtube.com/embed/jsd-mNTIukM" frameborder="0" allowfullscreen></iframe><br>
<iframe width="480" height="270" class="video" src="https://www.youtube.com/embed/ylD-WFvRZkM" frameborder="0" allowfullscreen></iframe>
<iframe width="480" height="270" class="video" src="https://www.youtube.com/embed/g2YzRTAstPo" frameborder="0" allowfullscreen></iframe><br>
<iframe width="480" height="270" class="video" src="https://www.youtube.com/embed/98NqtVG-hFU" frameborder="0" allowfullscreen></iframe>
<iframe width="480" height="270" class="video" src="https://www.youtube.com/embed/O4weBTRCFzU" frameborder="0" allowfullscreen></iframe><br>
<iframe width="480" height="270" class="video" src="https://www.youtube.com/embed/UVzEOsHT7XA" frameborder="0" allowfullscreen></iframe>
</div>
<div id="fullpage">
<div class="section" id="section0"></div>
<div class="section" id="section1"></div>
<div class="section" id="section2"></div>
<div class="section" id="section3"></div>
<div class="section" id="section4"></div>
</div>
This code opens div as expected but scrolling to see last contents is not working. Instead of video if I enter text scroll works perfectly. As soon as I add video in div scroll stops working. I haven't set overflow property for #text. Please help me out.
I found this worked
function testing(){
//forcing fullPage.js to recalculate dimensions.
setTimeout(function(){
fullpage_api.reBuild();
}, 500);
};
for me this didn't work
$.fn.fullpage.reBuild();
First of all, you should be using scrollOverflow:true rather than normalScrollElements.
scrollOverflow:
(default false) defines whether or not to create a scroll for the section in case its content is bigger than the height of it. When set to true, your content will be wrapped by the plugin. Consider using delegation or load your other scripts in the afterRender callback. In case of setting it to true, it requires the vendor plugin jquery.slimscroll.min and it should be loaded before the fullPage.js plugin. For example:
Then, fullPage.js is calculatingn the height of your sections on page load.
If the videos are not displayed on page load, fullPage.js won't know the content is changing until you tell it so.
Try this:
function displayDetails(id){
$('#text').show();
//forcing fullPage.js to recalculate dimensions.
$.fn.fullpage.reBuild();
}
More about the reBuild method in the docs:
reBuild()
Updates the DOM structure to fit the new window size or its contents.
Ideal to use in combination with AJAX calls or external changes in the
DOM structure of the site.
See this example I made for you
For react users, this is the solution I found, that works best.
You need to save the fullpageApi from the render method, in state.
And then, take advantage of the useEffect to call the rebuild method.
I was using it inside the render(), but then I was getting a lot of weird behaviours, because the rebuild() was being called in every other page state update.
const [fullPageApi, setFullPageApi] = useState<fullpageApi>();
useEffect(() => {
if (fullPageApi){
setTimeout(function () {
fullPageApi.reBuild();
}, 1000);
}
}, [fullPageApi]);
// (...)
// Component example
<ReactFullpage
scrollOverflow
navigation
render={({ fullpageApi }) => {
if (!fullPageApi) setFullPageApi(fullpageApi);
return (
<ReactFullpage.Wrapper>
<YourComponent />
</ReactFullpage.Wrapper>
);
}
}
/>
Right now i want to make a simple jQuery function so when this function is called the iframe height is changing.
Here is my code:
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
function ChangeHeightF1()
{
$("#inneriframe").css({"height":"350px;"});
alert('The height was changed!');
}
</script>
<div id="outerdiv">
<iframe src="http://beta.sportsdirect.bg/checkout/onepage/" id="inneriframe" scrolling="no" target="_parent"></iframe>
</div>
Here is the code of the button which is in the content of the iframe:
<button type="button" onclick="parent.ChangeHeightF1();">Click me to change Height!</button>
So my questions is how it's possible to change the iframe height on button click inside the content which is holding the iframe.
Also what CSS i have to place on "outerdiv" div element so when the iframe height is changing it will change the height of the div holding the iframe as well ?
Thanks in advance!
You can use window.parent.document as a context in jQuery selector, and then manipulate CSS values.
$(":button").click(function(){
$('#inneriframe, #outerdiv', window.parent.document).css({"height":"350px"});
})
This should work. If you want to re size back to previous height, let me know.
http://jsfiddle.net/ko3pyy8c
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
$('#more').click(function(){
$('#inneriframe').animate({height:'500px'}, 500);
$('#more').text('Go Back');
});
});
</script>
<style type = "text/css"/>
#inneriframe {
height: 350px;
overflow: hidden;
}
</style>
<div id="outerdiv">
<iframe src="http://beta.sportsdirect.bg/checkout/onepage/" id="inneriframe" scrolling="no" target="_parent"></iframe>
</div>
<br/>
Change Height
it can help you
<a href='#'>click me</a>
<div id="outerdiv">
<iframe src="http://beta.sportsdirect.bg/checkout/onepage/" id="inneriframe" scrolling="no" target="_parent"></iframe>
by using jquery
$('a').click(function(){
$('iframe').css('height','600px');
});
I have 2 thumbnail links, and when they are clicked on they open up videos in a lightbox style. My goal is to get them to play when they open and pause when they are closed (they close when the background area is clicked on).
My HTML code is here:
<body>
<div id="page">
<br /><br /><br /><br /><br />
<a id="1" class="thumbnail"rel="nofollow"><img class="img1" src="Resources/thumb1.jpg"/></a>
<a id="2"class="thumbnail"rel="nofollow"><img class="img1"src="Resources/thumb2.jpg" /></a>
<div class="backdrop"></div>
<div class="Video"id="vid1" >
<iframe allowscriptaccess="always" class="youtube-player" type="text/html" width="560" height="315" src="http://www.youtube.com/embed/7xHXpebWtus?enablejsapi=1" allowfullscreen="" frameborder="0" id="iframe1"> </iframe>
</div>
<div class="Video"id="vid2">
<iframe allowscriptaccess="always" class="youtube-player" type="text/html" width="560" height="315" src="http://www.youtube.com/embed/PnAsZ1Roxj4?enablejsapi=1" allowfullscreen="" frameborder="0" id="iframe2"> </iframe>
</div>
<br /><br /><br /><br />
<h1>More To Come</h1>
</div>
And my Javascript:
$(document).ready(function(){
$('.thumbnail').click(function(){
var $id = $(this).attr('id');
$('.backdrop, #vid'+ $id).animate({'opacity':'.50'}, 300, 'linear');
$('#vid'+ $id).animate({'opacity':'1.00'}, 300, 'linear');
$('.backdrop, #vid'+ $id).css('display', 'block');
});
$('.backdrop').click(function(){
close_box();
});
});
function close_box()
{
$('.backdrop,.Video').animate({'opacity':'0'}, 300, 'linear', function(){
$('.backdrop,.Video').css('display', 'none');
});
};
I should probably mention that I am quite new to these languages!
You can use YouTube Player API for iframe Embeds. Here is the reference to it. Instead of placing iFRAME tag, you create empty DIV with ID and SCRIPT tag with some JavaScript code. The code then generates an iFRAME and places it on the DOM, removing early created DIV and SCRIPT tags. This allows you to manipulate the player in the SCRIPT tag. Here is the working example in jsFiddle.
P.S. Also please pay attention to the "Requirements" section.
You need to use YouTube API.
Here is tutorial