Develop Reference

On click Iframe need to load

When loading the page automatically iframe also loading, it must not have to do like that
When i click button, then only iframe need to load but in iframe there is url
Can you give me example in jsfiddle, please
<input type="button">Load</input>
<div class="copy">
<iframe id="font" src="${SubscriptionUrl }" frameborder="0" height="500px" width="100%"></iframe>
</div>

You can hide your iframe onload and then display when clicked.
<button id="btnLoad" type="button">Load</button>
<div class="copy">
<iframe style="display:none;" id="font" src="${SubscriptionUrl }" frameborder="0" height="500px" width="100%"></iframe>
</div>
<script>
const btnLoad= document.getElementById('btnLoad');
btnLoad.addEventListener("click", function(){
document.getElementById("font").style.display = "block";
});
</script>

Use an <a>nchor and an <iframe>. No JavaScript required.
Set a [name] attribute for <iframe>
ex. <iframe name="iframe0" src="about:blank" ...></iframe>
Set the <a>nchor [href] attribute to the url of intended destination.
ex. <a href="https://www.example.com" ...>...</a>
Set the <a>nchor [target] attribute to the <iframe> [name] attribute.
ex. <a href="https://www.example.com" target="iframe0"...>...</a>
Demo
html,
body {
height: 100%;
width: 100%;
font: 400 16px/1.5 Consolas;
}
.btn {
text-align: center;
}
a {
text-decoration: none;
}
<button class='btn'>
VIDEO
</button>
<figure class='box'>
<iframe name='frame0' src="about:blank" frameborder="0" width="480" height="270"></iframe>
</figure>

Initially set one attribute to iframe .While clicking button take the attribute from the iframe and set that to iframe src.
Just Check the fiddle

Is it possible to mute and unmute sound from <object> and <embed>

So I have an <object> and <embed> (which is the fallback) loaded into a html file (index.html)
like so:
<object id="glitch"
data="skull/Glitch"
width="100%" height="100%"
style="overflow:hidden; width: 100%; height: 100%; overflow-y: hidden;">
<embed id="glitch-embed"
src="skull/Glitch"
width="100%" height="100%">
</embed>
Error: Embedded data could not be displayed.
</object>
Inside the object is an <audio> tag that plays when the glitch happens I want to know if I can mute and unmute the audio tag inside the object and embed via a button in the index.html file how would one go about doing this?
Here is my button in the index.html it also controls other sounds in the index
Html:
<a href="#" class="mute-button MuteOff link">
<i id="mute-icon" class="fa fa-volume-up"></i>
</a>
js
$('.mute-button').on('click tap touch', function() {
var $this = $(this);
if( $this.hasClass("MuteOn") ) {
audio1.volume=1.0;
audio2.volume=1.0;
audio3.volume=1.0;
audio4.volume=1.0;
audio5.volume=1.0;
$this.removeClass("MuteOn").addClass("MuteOff");
$('#mute-icon').removeClass("fa fa-volume-off").addClass("fa fa-volume-up");
} else {
audio1.volume=0.0;
audio2.volume=0.0;
audio3.volume=0.0;
audio4.volume=0.0;
audio5.volume=0.0;
$this.removeClass("MuteOff").addClass("MuteOn");
$('#mute-icon').removeClass("fa fa-volume-up").addClass("fa fa-volume-off");
}
});
Thanks in advance
site I'm working on with this problem: https://ui-unicorn.co.uk

How to change url on click without refreshing the page?

I have designed a page containing my youtube videos. When you click on the title, embedded videos change on the right division. But the problem is url, I want users to share the video they want. If they press back button they can go back to previous video. I know we can have all these by html 5 history api, but I am new to this and after all my efforts I am not able to solve these problems. Please help.
Following is the code:
Youtube Videos Page
<style type="text/css">
body{
margin: 0px;
}
#leftdiv{
background-color: #A9F5D0;
float: left;
height:100%;
width: 30%;
}
#rightdiv{
background-color: #F8E0F1;
float: left;
height: 100%;
width: 70%;
}
#lectname{
padding:10px;
font-family: "comic sans ms";
}
</style>
<div id="container">
<div id="leftdiv">
<div id="lectname">
<p id="lectname1">Lec 01: What is Signal?</p>
<p id="lectname2">Lec 02: What is an Analog Signal?</p>
<p id="lectname3">Lec 03: What is Digital Signal?</p>
<p id="lectname4">Lec 04: Need of Digital Signal</p>
<p id="lectname5">Lec 05: Introduction to Digital Electronics</p>
<p id="lectname6">Lec 06: Switch and Bits Intuition</p>
</div>
</div>
<div id="rightdiv">
<iframe width="480" height="270" src="https://www.youtube.com/embed/M0mx8S05v60" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<script type="text/javascript">
var lectureVideos = {
lectname1: "https://www.youtube.com/embed/M0mx8S05v60",
lectname2: "https://www.youtube.com/embed/F5h3z8p9dPg",
lectname3: "https://www.youtube.com/embed/jRL9ag3riJY",
lectname4: "https://www.youtube.com/embed/izBaDRyqnBk",
lectname5: "https://www.youtube.com/embed/2xXErGeeb_Q",
lectname6: "https://www.youtube.com/embed/RF9I6UzI4Rc"
}
var videoLinks = document.getElementsByClassName("videoLink");
for(var i=0; i<videoLinks.length; i++){
videoLinks[i].onclick=function(){
document.getElementById("videoFrame").src=lectureVideos[this.id];
}
}
</script>

You're correct that you should be using history API. Reading the docs here will help.
The basic idea is when one of your links is clicked, you should only call history.popState.
Then you setup a window.onpopstate function to handle the video change. This way, no matter if a user clicks the link, back, or forward button, the video change function will be called.
Here is demo code (although the url change doesn't work properly in jsfiddle because its in an iframe)
And here is a working example.
// when a video link is clicked, change the URL
var onVideoLinkClick = function(e){
// did we click on a link with class "video"?
if( e.target.tagName == 'A' && e.target.classList.contains('video')){
var videoID = e.target.getAttribute('href');
// change the url
history.pushState(
{videoID: videoID}, // data
e.target.innerText, // title
'video-'+videoID // url path
)
changeVideo(videoID)
e.preventDefault();
}
}
// change the playing video to a new video ID
var changeVideo = function(videoID){
var src = 'https://www.youtube.com/embed/'+videoID;
document.getElementById("videoFrame").src = src;
}
// triggered when clicking on a video using the back/forward browser button
var onUrlChange = function(e){
changeVideo(e.state.videoID)
}
// bind the event listners
window.addEventListener('click', onVideoLinkClick);
window.onpopstate = onUrlChange;
With the following HTML
<div id="container">
<div id="leftdiv">
<div id="lectname">
<p><a class="video" href="M0mx8S05v60">Lec 01: What is Signal?</a></p>
<p><a class="video" href="F5h3z8p9dPg">Lec 02: What is an Analog Signal?</a></p>
<p><a class="video" href="jRL9ag3riJY">Lec 03: What is Digital Signal?</a></p>
<p><a class="video" href="izBaDRyqnBk">Lec 04: Need of Digital Signal</a></p>
<p><a class="video" href="2xXErGeeb_Q">Lec 05: Introduction to Digital Electronics</a></p>
<p><a class="video" href="RF9I6UzI4Rc">Lec 06: Switch and Bits Intuition</a></p>
</div>
</div>
<div id="rightdiv">
<iframe id="videoFrame" width="480" height="270" frameborder="0" allowfullscreen></iframe>
</div>
</div>

Soundmanager 360Ui doesn't initialized sometimes after refresh page

Im trying to initialize a 360Ui audio player with soundmanager 2.
In the first page load, players appeared as it was expected. Then if i refresh the page with Ctrl+R or By clicking on the refresh button soundmanager seems not to be initialized.
I have create these divs:
<div id="pl1" class="ui360" >
<a id="a1" href="#"></a>
</div>
<div id="pl2" class="ui360">
<a id="a2" href="#"></a>
</div>
<div id="pl3" class="ui360">
<a id="a3" href="3"></a>
</div>
and on the main.js when the page being loaded this code will be executed.
$(function(){
$('#designed-by,#pl1,#pl2,#pl3').hide();
// Loading audio players.
loadpls();
soundManager.setup({url:'../audioPlayer/soundmanager/swf'});
});
Also here is the loadpls() function:
function loadpls(){
// Loading audio players
$.ajax({
url: '../admin/classes/classController.php',
type: 'POST',
data: {method:'loadAudioPl'},
dataType: 'json',
error: function(jqXHR, error, errorThrown){console.log(jqXHR+" "+error+" "+errorThrown);},
success: function(json){
if(json.status == 1){
if(json.url1 != ''){
$('#a1').attr("href", json.url1);
$('#pl1' ).offset({top: json.y1, left: json.x1});
$('#pl1').show();
}
if(json.url2 != ''){
$('#a2').attr("href", json.url2);
$('#pl2' ).offset({top: json.y2, left: json.x2});
$('#pl2').show();
}
if(json.url3 != ''){
$('#a3').attr("href", json.url3);
$('#pl3' ).offset({top: json.y3, left: json.x3});
$('#pl3').show();
}
}
}
});
}
Ok. Lets suppose now that its the first time that we visit the page. And we make an 'inspect element' in player's icon. We could see that the soundmanager initialized successfully by seeing the code above:
<div id="pl1" class="ui360" style="display: block; top: 0px; left: -100px; background-image: none;">
<div class="sm2-360ui">
<canvas class="sm2-canvas" width="50" height="50"></canvas>
<span class="sm2-360btn sm2-360btn-default"></span>
<div class="sm2-timing alignTweak"></div>
<div class="sm2-cover"></div>
</div><a id="a1" href="http://dev.phoebe/audioPlayer/soundmanager/_mp3/rain.mp3" class="sm2_link"></a>
</div>
There are times that if we refresh that page, the audio player disappear and now the results of the 'inspect element' somewhere in the page show us this:
<div id="pl1" class="ui360" style="display: block; top: 0px; left: -100px; background-image: none;">
<a id="a1" href="http://dev.phoebe/audioPlayer/soundmanager/_mp3/rain.mp3"></a>
</div>
I translate that behavior as a non initialation of soundmanager but i cannot explain it further more. Also, something else that i considered is that if i let the console (Ctrl+Shift+I) open, the player appeared more times after the refresh.

So finally it seems that i fixed it.
Here is how.
There was indeed a problem with initialization of soundmanager and probably because i used such a code :
<div id="pl1" class="ui360" >
<a id="a1" href="#"></a>
</div>
The problem here is that in href="" attribute there is no .mp3 extension file and thats why soundmanager couldn't initialized. So by changing that code into the above one, without test.mp3 exist, seems to work as expected.
<div id="pl1" class="ui360" >
<a id="a1" href="test.mp3"></a>
</div>

mail sites in iframe?

<style>
.address_bar
{
width:1100px;
color:#333333;
font-family:Verdana, Geneva, sans-serif;
}
\#browser
{
width:90%;
}
</style>
<script language="javascript" type="text/javascript">
function go_to_page()
{
var url = document.getElementById("address").value;
//window.open(url,"browser");
document.getElementById("browser").src = url;
}
</script>
<body>
<div>
<div style="float:left;">
<input type="text" name="address" id="address" class="address_bar" value="http://"/>
</div>
<div style="float:left;">
<input type="button" name="go" id="go" value="Go >> " onclick="go_to_page()"/>
</div>
<div>
<iframe name="browser" id="browser" style="height:750px;">
</iframe>
</div>
</div>
</body>
In above example if I want to open
1. http://mail.yahoo.com
2. http://www.gmail.com
then It automatically removes the iframe. what I do? I want every site is open in same iframe.

These sites have what is called a frame breakout, to prevent them being loaded in a frame. There are some scripts to disable frame breakout, with varying results.
Of course, loading 3rd party sites in an frame within your own website is kind of stealing, and profiting of their success, but I trust that you just want a way to check both of your e-mail accounts.

You can't. For security reasons, these websites won't load if they "know" they are in an iframe.