I'm trying to create IFrame element within parent div. this is my javascript code:
var e = document.createElement('iframe');
e.setAttribute('src', 'http://www.example.com/);
e.setAttribute('scrolling', 'no');
e.style.border = "none";
e.style.overflow = "hidden";
e.style.overflowX = "hidden";
e.style.overflowY = "hidden";
var c = document.getElementById('parentDiv');
c.appendChild(e);
When I'm use this script in another site (emmbeded code), I'm getting this result:
<div>
<div id="parentDiv">
<iframe src="http://www.example.com/" scrolling="no" style="width: 250px; height: 60px; border: medium none; overflow: hidden;">
</iframe>
<iframe src="http://www.example.com/" scrolling="no" style="width: 250px; height: 60px; border: medium none; overflow: hidden;">
</div>
<script type="text/javascript" src="http://example.com/path" >
</div>
As you can see, the previous code is creating two IFrames (instead of one) and I'm don't know why.
Why this is happens?
Related
I need to parse a string. The string is a callback from an adserver, and this is the format
<div style="background-color: yellow">
<div>
<div style="left: 10px; width: 100%; height: 0px; position: relative; padding-bottom: 80%;"><iframe allowfullscreen="" frameborder="0" src="https://www.youtube.com/embed/5DkrwfY2jw4" style="top: 0px; left: 0px; width: 100%; height: 100%; position: absolute;"></iframe></div>
</div>
</div>
I need to remove the parent div only if he style has yellow as background color. Of course I cannot use jquery.
I try to transform the string in an HTML fragment using
var div = document.createElement('div');
div.innerHTML = a.response.html;
var elements = div.childNodes;
but I cannot find a way to check for the presence of the attribute and, if true, remove the parent node keeping the childs.
The div itself shouldn't be a problem, so you can just set the background to transparent if its original background color is yellow:
var s = `<div style="background-color: yellow">
<div>
<div style="left: 10px; width: 100%; height: 0px; position: relative; padding-bottom: 80%;"><iframe allowfullscreen="" frameborder="0" src="https://www.youtube.com/embed/5DkrwfY2jw4" style="top: 0px; left: 0px; width: 100%; height: 100%; position: absolute;"></iframe></div>
</div>
</div>`
var div = document.createElement('div');
div.innerHTML = s; // replace with response...
if (div.childNodes[0].style.backgroundColor == 'yellow') div.childNodes[0].style.backgroundColor = 'transparent'
document.body.appendChild(div);
Here's a fiddle
you can iterate over the childNodes and check if the div has a specific style.
function checkandAppend(nodes) {
for(node in nodes){
if (nodes.hasOwnProperty(node))
if(nodes[node].getAttribute("style") == 'background-color: yellow')
{
if(nodes[node].childNodes[0].nodeType == 3) // some browser interpret line break as first child
document.querySelector("body").appendChild(nodes[node].childNodes[1]);
else
document.querySelector("body").appendChild(nodes[node].childNodes[0]);
}
else
{
document.querySelector("body").appendChild(nodes[node]);
}
}
}
var div = document.createElement('div');
div.innerHTML = '<div style="background-color: yellow"> <div> <div style="left: 10px; width: 100%; height: 0px; position: relative; padding-bottom: 80%;"> <iframe allowfullscreen="" frameborder="0" src="https://www.youtube.com/embed/5DkrwfY2jw4" style="top: 0px; left: 0px; width: 100%; height: 100%; position: absolute;"></iframe> </div> </div> </div>'
checkandAppend(div.childNodes);
Since the style is set inline, you can simply read the style property of the div. Create a div, insert the HTML, then check the first div. I guess that you want to insert this in the document, so if the first div has been set to yellow, insert its first div child node (i.e. the second in the tree) in the document. Otherwise, insert the first div.
This method is not robust, but without further information on how to select the div, or what to do with it once selected, there's not much more you can do.
I've replaced the iFrame with some text, I don't think it's relevant to the answer.
var response = '<div style="background-color: yellow"><div><div style="left: 10px; width: 100%; height: 0px; position: relative; padding-bottom: 80%;">iframe</div></div></div>';
var div = document.createElement('div');
div.innerHTML = response;
var divs = div.getElementsByTagName('div');
if (divs[0].style.backgroundColor == 'yellow') {
document.body.appendChild(divs[1]);
} else {
document.body.appendChild(divs[0]);
}
You could replace the if..else with:
document.body.appendChild(divs[+(divs[0].style.backgroundColor == 'yellow')]);
but that might be a bit obfuscated.
JavaScript:
var insertImage = function(src, alt) {
var html = '<div contenteditable="false"><img ' + 'src="'+src+'" alt="'+alt+'" onclick="imageClick()" /></div>';
document.execCommand('insertHTML', false, html);
};
HTML:
<body>
<div id="yq_editor_content" style=" width: 100%; height: 100%; -webkit-overflow-scrolling: touch; overflow: hidden; background-color:lightblue;" contenteditable="true">
</div>
<div id="yq_editor_footer"></div>
</body>
But after I perform the JavaScript function, I get the HTML that div has no contenteditable, as below:
I guess you want something like this?
https://jsfiddle.net/_jserodio/ywe48rwy/
JavaScript, CSS and HTML
var insertImage = function(src, alt) {
var img = '<img ' + 'src="'+src+'" alt="'+alt+'"/>';
document.querySelector('#yq_editor_content').innerHTML += img;
};
document.querySelector('#insert').addEventListener("click", function() {
insertImage('http://cdn.sstatic.net/Sites/stackoverflow/img/favicon.ico', 'so');
}, false);
#insert {
width: 25px;
heigth: 25px;
cursor: pointer;
}
<div id="yq_editor_content" style=" width: 100%; height: 100%; -webkit-overflow-scrolling: touch; overflow: hidden; background-color:lightblue;" contenteditable="true">
Hello, try to edit this!
</div>
<div id="yq_editor_footer">
<img id ='insert' src="http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/256/Actions-insert-image-icon.png" alt="insert image icon">
</div>
I want to play a youtube embed video and pause it on a cerain time, beside show an hidden ad and start the video after the ad has been clicked. could anyone tell me where is the error?
var time_cok = 7.25;
var adhac_mod = 10;
var adhac_tm_min = 20;
var adhac_tm_max = 25;
function setCookie(e,t,a){var r=new Date;r.setTime(r.getTime()+24*a*60*60*1e3);var n="expires="+r.toUTCString();document.cookie=e+"="+t+"; "+n+"; path=/"}function getCookie(e){for(var t=e+"=",a=document.cookie.split(";"),r=0;r<a.length;r++){for(var n=a[r];" "==n.charAt(0);)n=n.substring(1);if(0==n.indexOf(t))return n.substring(t.length,n.length)}return""}function randomIntFromInterval(e,t){return Math.floor(Math.random()*(t-e+1)+e)}function setAdHac(){var e=getCookie("adhac");if(!e){var t={width:"100%",height:"100%",opacity:"0",position:"absolute","z-index":"9998"},a={"minwidth":"400px","max-width":"700px","min-height":"280px",margin:"110px 0 auto",overflow:"hidden","text-align":"center",visibility:"hidden","zindex":"9999"};document.getElementById("ytplayer").innerHTML+="<div></div>",jQuery("#below-ad").css(t),jQuery("#below-ad > div").css(a),jQuery("#belowad").prependTo("#ytplayer"),setCookie("adhac",1,time_cok)}}function onYouTubeIframeAPIReady(){player=new YT.Player("player",{events:{onStateChange:onPlayerStateChange}})}function onPlayerStateChange(e){if(e.data==YT.PlayerState.PLAYING){var t=1e3*randomIntFromInterval(adhac_tm_min,adhac_tm_max);if(2==adhac_mod){var a=player.getDuration(),r=0;60>=a?r=randomIntFromInterval(35,50):a>60&&100>=a?r=randomIntFromInterval(30,40):a>100&&160>=a?r=randomIntFromInterval(20,25):a>160&&(r=randomIntFromInterval(10,15));var n=a*(r/100),t=1e3*Math.round(n)}setTimeout(function(){setAdHac()},t)}}var ytplayer=document.getElementById("ytplayer");if(ytplayer)if(0==adhac_mod)setAdHac();else{var tag=document.createElement("script");tag.src="https://www.youtube.com/iframe_api";var firstScriptTag=document.getElementsByTagName("script")[0];firstScriptTag.parentNode.insertBefore(tag,firstScriptTag);var player}
Here is the HTML code
<!--Youtube Video-->
<div id="ytplayer" style="position: relative; display: inline-block;"><iframe id="player"title="YouTube video player"src="https://www.youtube.com/embed/5PGEWejcmNU?enablejsapi=1&showinfo=0" width="560"
height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>
<!--AD-->
<div id="below-ad" style="width: 100%; position: relative;"><div style= min-width: 400px; max-width: 700px; min-height: 280px; margin: 0 auto; overflow: hidden; text-align: center; visibility: hidden; zindex:9999;">
AD SCRIPT HERE
</div>
I have two buttons set up as onclicks that use JS to connect to other pages that are internal to my website. These pages connected to only run php that is displayed in tables. This tanle data is then displayed in the iframe set up in the JS. My problem is I can't get the iframe to align using css or through styles in my html. I can move it around using css but I can't get it to line up either directly under the buttons, or in the center of the page.
<div class="center">
<button onclick="myFunction1()">Illustrators</button>
<button onclick="myFunction2()">Tech Writers</button>
</div>
<script>
var iframeExists = false;
function myFunction1() {
var x
if (!iframeExists) {
x = document.createElement("IFRAME");
iframeExists = true;
} else {
x = document.getElementsByTagName("IFRAME")[0];
}
x.setAttribute ("src", "http://www.oldgamer60.com/Project/Illustrators.php");
document.body.appendChild(x);
}
function myFunction2() {
var x;
if (!iframeExists) {
x = document.createElement("IFRAME");
iframeExists = true;
} else {
x = document.getElementsByTagName("IFRAME")[0];
}
x.setAttribute("src", "http://www.oldgamer60.com/Project/TechWriters.php");
document.body.appendChild(x);
}
</script>
CSS
iframe {
border: 0px solid #ffffff;
margin: auto;
width: 300px;
Height: 200px;}
Try this make few changes like
HTML
<button onclick="myFunction1()">Illustrators</button>
<button onclick="myFunction2()">Tech Writers</button>
<div id="myiframe-div">
</div>
</div>
and instead of
document.body.appendChild(x);
use
document.getElementById("myiframe-div").appendChild(x);
If you want the iframe and buttons to align in the center, then have this HTML and CSS (along with your already good JavaScript):
<div class="center">
<p>
<button onclick="myFunction1()">Illustrators</button>
<button onclick="myFunction2()">Tech Writers</button>
</p>
</div>
iframe {display: block; /*new*/
margin: auto;
border: none; /*revised*/
width: 300px;
height: 200px;}
div.center p {text-align: center;} /*new*/
I am creating an image collage/patchwork. I'm using masonry.js to lay out the content how I need, and a script I found on this very site to change the div contents randomly (between two images).
However, I would like a simple way to animate this image switch, but my javascript/jquery knowledge is very limited.
Below is the complete code for my site:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="jquery.masonry.min.js"></script>
<style>
#container {
width: 350px;
height: 420px;
border: solid 1px #000;
}
.item {
width: 105px;
height: 105px;
margin: 0;
float: left;
}
.item_2 {
width: 245px;
height: 105px;
margin: 0;
float: left;
}
.item_3 {
width: 245px;
height: 210px;
margin: 0;
float: left;
}
</style>
<script type="text/javascript">
var logSwitch =[
"<img src='apps/TRA-100.gif' />",
"<img src='apps/logistics.gif' />",
];
setInterval(function() {
var i = Math.round((Math.random()) * logSwitch.length);
if (i == logSwitch.length) --i;
$("#logistics").html(logSwitch[i]);
}, 5 * 1000);
</script>
</head>
<body>
<div id="container">
<div class="item_3"><img src="apps/auto.gif" /></div>
<div class="item"><div id="logistics"><img src="apps/TRA-100.gif" /></div></div>
<div class="item"><img src="apps/marine.gif" /></div>
<div class="item"><img src="apps/its.gif" /></div>
<div class="item_2"><img src="apps/Entertain.gif" /></div>
<div class="item_2"><img src="apps/meteor.gif" /></div>
<div class="item"><img src="apps/aviation.gif" /></div>
</div>
<script type="text/javascript">
var $container = $('#container');
$container.imagesLoaded(function(){
$container.masonry({
columnWidth : 300
);
});
</script>
</body>
</html>
Can anyone advise we what direction to head in? This fiddle: (http://jsfiddle.net/jWcLz/1/) looks quite simple, but I have no idea how to implement it.
Thanks in advance.
Right now you replace the HTML within #logistics, but nothing is done to make it fade. The way the demo jsfiddle you linked to works is by calling fadeOut() on the parent element and when that's done calling a fadeIn() function on that same element, while also giving it new content.
Here's how you can do the same thing in your code:
Replace...
$("#logistics").html(logSwitch[i]);
...with...
$('#logistics').fadeOut(500, function() {
$(this).html(logSwitch[i]).fadeIn(500);
});
Edit: if you don't want the content to be switched randomly, don't make it random! Instead, set i outside of setInterval() and then just change i within it.
var i = 0;
setInterval(function() {
i++;
if (i == logSwitch.length) {
i = 0;
}
$('#logistics').fadeOut(500, function() {
$(this).html(logSwitch[i]).fadeIn(500);
});
}, 5000);