I didn't initially expect to need to call in anything but Iframes but clearly I was wrong. here is my code and you can see why its breaking its the script inside the script-/script whats a way to get around this?
$ad_blocks =
array(
array(
'<iframe data-aa="16301" src="//ad.a-ads.com/16301?size=728x90" seamless frameBorder="0" scrolling="no" style="width:728px; height:90px; border:0px; padding:0;overflow:hidden" allowtransparency="true"></iframe>',
'<iframe data-aa="16302" src="//ad.a-ads.com/16302?size=468x60" seamless frameBorder="0" scrolling="no" style="width:468px; height:60px; border:0px; padding:0;overflow:hidden" allowtransparency="true"></iframe>',
'<div class="A-Ads-Responsive"><iframe data-aa="16303" src="//ad.a-ads.com/16303?size=320x50" seamless frameBorder="0" scrolling="no" style="width:320px; height:50px; border:0px; padding:0;overflow:hidden" allowtransparency="true"></div></iframe>',
),
array(
'<div><script type="text/javascript" src="http://ads1.qadabra.com/t?id=290bf071-762b-4000-9599-32f9a3daf628&size=728x90"></script></div>',
'<div><script type="text/javascript" src="http://ads1.qadabra.com/t?id=d7f3bbc3-9ef1-4558-98a1-4c8051e2dc99&size=468x60"></script></div>',
'<div class="A-Ads-Responsive"><iframe data-aa="16303" src="//ad.a-ads.com/16303?size=320x50" seamless frameBorder="0" scrolling="no" style="width:320px; height:50px; border:0px; padding:0;overflow:hidden" allowtransparency="true"></div></iframe>',
),
);
//Get a random ad block, and store it in $rotate.
$random_key = mt_rand(0, count($ad_blocks) - 1);
$rotate = $ad_blocks[$random_key];
//These units contain the ad codes for the three sizes.
$ad_size1 = $rotate[0];
$ad_size2 = $rotate[1];
$ad_size3 = $rotate[2];
?>
<div class="col-lg-7">
<div class="A-Ads-Container">
<script>
//This function makes sure the code is executed after page is loaded.
if ($(window).width() >= 768) {
$('.col-lg-7, .A-Ads-Container').html('<?=$ad_size1?>');
} else if (($(window).width() < 800) && ($(window).width() >= 500)) {
$('.col-lg-7, .A-Ads-Container').html('<?=$ad_size2?>');
} else {
$('.col-lg-7, .A-Ads-Container').html('<?=$ad_size3?>');
}
</script>
</div>
</div>
Though I'm not sure exactly what you're trying to accomplish, you are weaving tags, and this will cause unpredictable behavior. For example, this array element
<div class="A-Ads-Responsive"><iframe data-aa="16303" src="//ad.a-ads.com/16303?size=320x50" seamless frameBorder="0" scrolling="no" style="width:320px; height:50px; border:0px; padding:0;overflow:hidden" allowtransparency="true"></div></iframe>
should instead be
<div class="A-Ads-Responsive"><iframe data-aa="16303" src="//ad.a-ads.com/16303?size=320x50" seamless frameBorder="0" scrolling="no" style="width:320px; height:50px; border:0px; padding:0;overflow:hidden" allowtransparency="true"></iframe></div>
Notice the order of the closing div and iframe tags.
Related
I want to make a changable iframe images. I tried lot but cannot find a way to fix my code. Please help me fix my code or if there any other method please let me know.
HTML
<iframe class="img-responsive center-block element-spacing-md" id="banner" width="970" height="250" frameborder="0" scrolling="no" allowfullscreen="true" style="width: 970px; height: 250px;" ></iframe><iframe class="img-responsive center-block element-spacing-md" id="banner" width="970" height="250" frameborder="0" scrolling="no" allowfullscreen="true" style="width: 970px; height: 250px;" ></iframe>
JS
var image = new Array ();
image[0] = '"//s0.2mdn.net/dfp/370694/4408939339/1629903098931/index.html"';
image[1] = '"//s0.2mdn.net/dfp/370694/4823240283/1652207585517/index.html"';
image[2] = '"//s0.2mdn.net/dfp/370694/4823240283/1652207585517/index.html"';
var size = image.length
var x = Math.floor(size*Math.random());
var output='src='+image[x];
console.log(output);
document.getElementById("banner").innerHTML = output;
If anyone need to make a iframe that changes when reloading try this..
Thanks!
html
<iframe class="img-responsive center-block element-spacing-md" id="banner" width="970" height="250" frameborder="0" scrolling="no" allowfullscreen="true" style="width: 970px; height: 250px;" src=></iframe>
js
var image = new Array ();
image[0] = "//s0.2mdn.net/dfp/370694/4408939339/1629903098931/index.html";
image[1] = "//s0.2mdn.net/dfp/370694/4823240283/1652207585517/index.html";
image[2] = "//s0.2mdn.net/dfp/370694/4823240283/1652207585517/index.html";
var size = image.length
var x = Math.floor(size*Math.random())
var output=image[x];
console.log(output)
document.getElementById("banner").src=output;
I am trying to control an overlay function in HTML with an external js file and a second HTML page where the buttons are on.
So far it works when the buttons are on the same page. But I can not trigger the overlay from page 1 on page 2.
So the streaming page is the page where the viewer will be able to look and interact.
<div id="overlay" onclick="turnOverLayOff()">
<div id="textContainer"><iframe src="https://docs.google.com/forms/d/e/1FAIpQLSe5NWLPhYiLqM2YIUPCsVk3RB5h660Wei9eDGyKUhMMIB4iZw/viewform?embedded=true" width="640" height="415" frameborder="0" marginheight="0" marginwidth="0">Laden…</iframe> </div>
</div>
<iframe width="560" height="315" src="https://www.youtube.com/embed/5A9v-n53LtI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<script src="overlay.js"></script>
Then the JS file is
function turnOverLayOn(){
document.getElementById('overlay').style.display = 'block';
}
function turnOverLayOff(){
document.getElementById('overlay').style.display = 'none';
}
The second page from where I want to control the streamingpage from :
<div id="overlay" onclick="turnOverLayOff()">
<div id="textContainer">Test tekst whatever </div>
</div>
<div>
<button onclick="turnOverLayOn()">Click here to turn ON </button>
</div>
<iframe width="560" height="315" src="https://www.youtube.com/embed/5A9v-n53LtI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<script src="overlay.js"></script>
As a means of signalling between the pages/tabs within the same browser you can use the BroadcastChannel api as mentioned in the comment above.
As demonstration - two basic HTML pages, both establish a connection to a common Broadcast Channel and one listens for messages from the other.
In the following the Video elements and iframes are commented out and replaced with simple text.
The getStyle function simply allows access programmatically to styles set on a named element and is used here to determine. The Javascript can be written to a single file and included in both pages as per the external.js...
Page 1 - the page being controlled
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<title>Page 1: streamingpage</title>
<style>
#overlay{display:block}
</style>
</head>
<body>
<div id='overlay'>
<div id='textContainer'>
<!--<iframe src='https://docs.google.com/forms/d/e/1FAIpQLSe5NWLPhYiLqM2YIUPCsVk3RB5h660Wei9eDGyKUhMMIB4iZw/viewform?embedded=true' width='640' height='415' frameborder='0' marginheight='0' marginwidth='0'>Laden…</iframe>-->
IFRAME CONTENT - docs.google.com
</div>
</div>
<!--<iframe width='560' height='315' src='https://www.youtube.com/embed/5A9v-n53LtI' title='YouTube video player' frameborder='0' allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture' allowfullscreen></iframe>-->
VIDEO-YouTUBE
<script>
const getStyle=(n,css)=>{
let style;
if( window.getComputedStyle ){
style = window.getComputedStyle( n, null ).getPropertyValue( css );
} else if( n.currentStyle ){
css = css.replace(/\-(\w)/g, function ( strMatch, p1 ){
return p1.toUpperCase();
});
style = n.currentStyle[ css ];
} else {
style='';
}
return style;
}
let oChan=new BroadcastChannel( 'tabs' );
oChan.addEventListener('message',(e)=>{
//inspect messages as they arrive
console.log( e.data );
let div=document.getElementById('overlay');
div.style.display=getStyle(div,'display')=='block' ? 'none' : 'block';
});
</script>
</body>
</html>
Page 2 - the page doing the controlling
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<title>page2: controller</title>
<style>
#overlay{display:block}
</style>
</head>
<body>
<div id='overlay'>
<div id='textContainer'>Test tekst whatever </div>
</div>
<div>
<button id='toggler'>Click here to turn ON</button>
</div>
<!--<iframe width='560' height='315' src='https://www.youtube.com/embed/5A9v-n53LtI' title='YouTube video player' frameborder='0' allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture' allowfullscreen></iframe>-->
VIDEO-YouTUBE
<script>
const getStyle=(n,css)=>{
let style;
if( window.getComputedStyle ){
style = window.getComputedStyle( n, null ).getPropertyValue( css );
} else if( n.currentStyle ){
css = css.replace(/\-(\w)/g, function ( strMatch, p1 ){
return p1.toUpperCase();
});
style = n.currentStyle[ css ];
} else {
style='';
}
return style;
}
let oChan=new BroadcastChannel( 'tabs' );
sendmessage=function( data ){
oChan.postMessage( { 'data':data } )
};
let bttn=document.querySelector('button#toggler');
bttn.addEventListener('click',e=>{
let div=document.getElementById('overlay');
div.style.display=getStyle(div,'display')=='block' ? 'none' : 'block'
/*
send a message - the payload can be tailored to suit your needs and processed within the listener on page 1
this simply sends the `display` status of the local DIV but you can send whatever is meaningful/helpful.
*/
sendmessage( { state:getStyle(div,'display') } );
});
</script>
</body>
</html>
I have a bit of code that automatically starts a video after clicking on an overlay image. The trouble is that the after clicking, the entire page moves up to the top while video plays further down the page. What is the cause and how can I prevent that from happening and allow the video to play where it is originally clicked?
Here is a link to the codepen (scroll down to see video): https://codepen.io/NewbCake/pen/qMMQZo
It depends on Jquery and Fitvids
Thank you for any help!
HTML
<section>
<div class="video-intro">
<div class="image">
<div class="play-button btn"></div>
<a href="#" id="btn_play" class="btn">
<img src="http://placekitten.com/960/540" alt="play video" />
</a>
</div>
<iframe src="https://player.vimeo.com/video/66991893?api=1&title=0&byline=0&portrait=0&color=57c0d4" width="960" height="540" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>
</section>
CSS
section {
display:grid;
grid-template-columns:10vw 500px;
margin-top:300px;
}
/* video intro */
.video-intro {
grid-column: 2 ;
box-shadow:0px 0px 7px #ddd;
margin:0 auto 50px !important;
width:90%;
position:relative;
max-width:960px;
.image {
position:absolute;
top:0;
left:0;
z-index:20;
img {
width:100%;
height:auto;
}
JS
$(function(){
var $parent = $('.video-intro'),
$f = $parent.find('iframe'),
$image = $parent.find('.image'),
f = $f[0],
url = $f.attr('src').split('?')[0];
window.addEventListener('message', function(e){
var d = JSON.parse(e.data);
}, false);
$('.btn').click(function(){
var $t = $(this);
runCommand('play');
$image.hide();
});
function runCommand(cmd){
var data = {method : cmd};
f.contentWindow.postMessage(JSON.stringify(data), url);
}
// fitvids
$('.video-intro').fitVids();
});
Try using javascript: instead of # :
<a href="javascript:" id="btn_play" class="btn">
I am trying to switch iframes in html which contains video references. Kindly help me with this. Actually i want to check the value i pass through textarea and then according to that value i want to switch frames.
HTML
<iframe id="i1" name="iframeswitch" src="nice-to-meet-you.html" style="float: left;
position:relative;
height:350px;
width:500px;
margin-left:-25px;"
scrolling="no" frameborder="0">
<p>Your browser does not support iframes.</p>
</iframe>
<iframe id="i3" name="iframeswitch" src="your-name.html" style="float: left;
position:relative;
height:350px;
width:500px;
margin-left:-25px;"
scrolling="no" frameborder="0">
<p>Your browser does not support iframes.</p>
</iframe>
<iframe id="i2" name="iframeswitch" src="deaf-you.html" style="float: left;
position:relative;
height:350px;
width:500px;
margin-left:-25px;"
scrolling="no" frameborder="0">
<p>Your browser does not support iframes.</p>
</iframe>
<iframe id="i4" name="iframeswitch" src="you-work-where.html" style="float: left;
position:relative;
height:350px;
width:500px;
margin-left:-25px;"
scrolling="no" frameborder="0">
<p>Your browser does not support iframes.</p>
</iframe>
i made these iframes display:none; in my css. and i want them to be displayed in a div named virtual.
javascript
<script>
function myFunction() {
var text=document.getElementById('me').value;
if(text="nice to meet you")
{
document.getElementById('i1').style.display="block";
}
else if(text="are you deaf")
{
document.getElementById('i2').style.display="block";
}
else if(text="what is your name")
{
document.getElementById('i3').style.display="block";
}
else if(text="where you work")
{
document.getElementById('i4').style.display="block";
}
else
{}
}
</script>
Your code is a great example why not to use inline CSS, imagine one day you find out your iframe should be width:600px; instead of 500 ...harsh time.
You don't need 4+ iframes, but only one.
<input id=me type=text>
<iframe id=myIframe scrolling=no frameborder=0>Get a Browser</iframe>
CSS:
#myIframe {
float : left;
position : relative;
height : 350px;
width : 500px;
margin-left : -25px;
}
Now, having only one iframe you can build an Object with your associations:
var text2src = {
"nice to..." : "nice.html",
"want some" : "want.html",
"good night" : "night.html"
};
and on input change you can than modify the iframe src:
var me = document.getElementById("me");
var ifr = document.getElementById("myIframe");
me.oninput = function(){
var val = this.value.toLowerCase();
if(text2src.hasOwnProperty(val)) ifr.src = text2src[val];
};
I want to remove the script which i wrote that nakes the use of the class i.e. UiUx3DSSVFlow. Without hardcoding this internal class, how to make use of their parent #thumbs?
I should not any more make use of the specific classes in my script. In the future those classes could change to any other class name. I need the same functionality in another way without using the internal class names
HTML:
<!--Thumbs Image-->
<div id="thumbs">
<div class="UiUx3DSSVFlow">
<img src="http://cdn1.iconfinder.com/data/icons/nuvola2/48x48/actions/thumbnail.png">
</div>
<div class="UiUx3DSSVFlow">
<img src="http://cdn1.iconfinder.com/data/icons/nuvola2/48x48/actions/thumbnail.png">
</div>
<div id="Video" class="UiUx3DSSVFlow">
<div class="video_gallery">
<div>
<iframe src="http://www.youtube.com/embed/iwqoOfZf4hc" allowfullscreen="" frameborder="0" height="250" width="250"></iframe>
</div>
</div>
</div>
<div id="Video" class="UiUx3DSSVFlow">
<div class="video_gallery">
<div>
<iframe src="http://www.youtube.com/embed/iwqoOfZf4hc" allowfullscreen="" frameborder="0" height="250" width="250"></iframe>
</div>
</div>
</div>
</div>
<p><a class="tprev" href="#">Prev</a>
<p><a class="tnext" href="#">Next</a>
CSS:
#thumbs{
border:1px solid red;
width:100%;
}
#thumbs div{display:inline-block; }
#larger{
border:1px solid black;
width:100%;
}
#larger div{display:inline-block; }
jQuery:
function thumbs(i,incr){
var num_thumbs=2;
if(i===null){
i=$("#thumbs").prop('data-index'),
i+=num_thumbs*incr;
}
i=Math.max(1,Math.min(i,$('#thumbs .UiUx3DSSVFlow').length-num_thumbs+1));
$("#thumbs").prop('data-index',i);
$('#thumbs .UiUx3DSSVFlow').hide();
$('#thumbs .UiUx3DSSVFlow:nth-child(n+'+i+'):nth-child(-n+'+Number(i+num_thumbs-1)+')').show();
}
$("#thumbs").prop('data-index',1);
$([['next',1],['prev',-1]]).each(function(){
var that=this;
$('.t'+that[0]).click(function(){
thumbs(null,that[1]);
});
});
$('.tprev').click();
http://jsfiddle.net/T657N/33/
jsFiddle demo
review your HTML, CSS knowledge before jumping into JS!
You cannot have multiple ID inside one document!
A div element (as it's by default a block element) does not need the width:100%;
display: inline-block is best suitable and xbrowser for <span> elements, for other browsers you'll need to use some sort of hax like:
display:inline-block;
*display:inline;
zoom:1;
HTML:
<div id="thumbs">
<div>
<img src="http://cdn1.iconfinder.com/data/icons/nuvola2/48x48/actions/thumbnail.png">
<img src="http://cdn1.iconfinder.com/data/icons/nuvola2/48x48/actions/thumbnail.png">
</div>
<div>
<iframe src="http://www.youtube.com/embed/iwqoOfZf4hc" allowfullscreen="" frameborder="0" height="250" width="250"></iframe>
<iframe src="http://www.youtube.com/embed/iwqoOfZf4hc" allowfullscreen="" frameborder="0" height="250" width="250"></iframe>
</div>
</div>
<p><a class="tprev" href="#">Prev</a>
<p><a class="tnext" href="#">Next</a>
CSS:
#thumbs{border:1px solid red;}
#thumbs div{display:inline;}
jQuery:
var $tDiv = $('#thumbs div');
var tDivsN = $tDiv.length;
var c = 0;
function display(){
c= c===-1? tDivsN-1 : c%tDivsN;
$tDiv.hide().eq(c).show();
}
display();
$('.tprev, .tnext').on('click',function(e){
e.preventDefault();
var myCLass= $(this).hasClass('tnext') ? c++ : c--;
display();
});