I am using squarespace (in retrospect a poor idea because of the difficulty of customizing with code), and I need to be able to identify the vimeo iframe within this div so I can use it in some javascript calls. However, the javascript does not recognize any such iframe element existing. I feel like either it's impossible to identify the iframe as it is currently shoved into the div (by squarespace), or I am missing a selector. Any help or pointers would be appreciated.
Here's the iframe I am trying to embed into squarespace:
<iframe src="http://player.vimeo.com/video/135481337?api=1&player_id=player1&wmode=opaque" width="500" frameborder="0" id="player1" class="vimeo" height="281"></iframe>
Here's the embedded iframe:
<div class="sqs-video-wrapper" data-load="false" data-html="<iframe src="http://player.vimeo.com/video/135481337?api=1&player_id=player1&wmode=opaque" width="500" frameborder="0" id="player1" class="vimeo" height="281"></iframe>" data-provider-name="" >
</div>
And here is my javascript:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
alert("this alert is working");
// Enable the API on each Vimeo video
jQuery('iframe.vimeo').each(function(){
Froogaloop(this).addEvent('ready', ready);
});
function ready(playerID){
Froogaloop(playerID).addEvent('play', play(playerID));
Froogaloop(playerID).addEvent('finish', onFinish);
}
function play(playerID){
alert(playerID + " is playing!");
}
function onFinish() {
document.write('<style>.yui3-lightbox2-content {display: none !important;}</style>');
}
});
</script>
I've taken this from a working example of this api as seen in this link.
Related
I have a custom list from a different sharepoint site (still the same domain) that I would like to display on my work site without the header (at a minimum, but getting rid of the ribbon would be nice too). I have attempted 4 methods without success listed below:
1) I can't even get it to work on a normal page by adding ?isdlg=1 to the end of my url (ie ..allitems.aspx?isdlg=1)
2) since I mostly work with SQL and not HTML I am sure I may have screwed up some of my tags.
<div class="ms-dlgFrameContainer">
<iframe width="1400" height="600" id="DlgFramee" class="ms-dlgFrame" frameborder="0" src="myurl.aspx">
<html class="ms-dialog">
<head>
<style type="text/css">
.ms-dialog #titleAreaBox { display:none }
</style>`
3) to hide the header of the page inside the iframe.
<script type="text/javascript">
document.getElementById("myiframe1").contentWindow.document.getElementById("titlerow").style.display = "none"; </script>`
4) Most promising. When I add
<iframe id="myiframe1" src="myurl" width="1000" height="450" frameborder="1"></iframe>
<style>
#titleAreaBox { display: none }
</style>
in the same CEWP as my iframe, it removes the title area for current page and not the page in the iframe. This exactly what I want except I want it to do that for the page inside the iframe.
5) I did this as well even just trying to change header color but didn't notice any change. I looked up the correct webpart ID.
<style type="text/css">
#MSOZoneCell_WebPartWPQ2 .ms-WPHeader
{ background-color: pink; }
</style>
You could try below jQuery script, I just hide suiteBarTop in demo.
<iframe id="myiframe" width="1400" height="600" id="DlgFramee" class="ms-dlgFrame" frameborder="0" src="/sites/tst/SitePages/Home.aspx"></iframe>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(function () {
$('#myiframe').load(function () {
$(this).contents().find('#suiteBarTop').hide();
});
})
</script>
I'm trying to hide an element in same-origin iframe. However, this son of a bi*ch blinks for a few ms before getting hidden. So what I did was added display: none and remove it after iframe is loaded - great. But now, when user clicks inner page link of iframe, which also contains element to be hidden, it still blinks (because display:none is now removed). I need to detect when to add it again, i. e. just before another page starts to load.
Testing here: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_script
Here is what I tried:
<html class="js">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
html.js #iframeID
{
display: none;
}
</style>
<script>
$(document).ready(function()
{
$('#iframeID').on('load', function()
{
$('#iframeID').contents().find('a').on('click', function()
{
$('html').addClass('js');
console.log('click');
});
console.log('loaded');
$('#iframeID').contents().find('#mySidenav').remove();
$('html').removeClass('js');
});
});
</script>
</head>
<body>
<iframe id="iframeID" height="800px" width="800px" src="https://www.w3schools.com/" ></iframe>
<script>
</script>
</body>
</html>
However, there are some a elements that don't load another page. In this example, try clicking on "TUTORIALS" at the top of that iframed webpage - it just opens up dropdown, not loads another page.
What should I do?
I noticed that "TUTORIALS" link has href="javascript:void(0)". Maybe I should be somehow selecting all a links without such href? But not sure if it's fool proof.
You can make use of load event on the iframe as such,
$('iframe').on('load', function(){
console.log('Iframe Loaded');
});
The iframe's load event is also called every time it's src changes.
$(document).ready(function(){
$('.iFrame_class').load(function(){
console.log('frame loaded');
});
});
Alternatively on start load solution:
Custom attribute for iframe:
iframe class="iFrame" src="some site" started="0"
Put this code to iframed page:
window.parent.$('.iFrame').attr("started","0"); //makes iframe started attr to false on page load
$(document.body).on("click","a", function() {
window.parent.$('.iFrame').attr("started","1");// makes iframe started attr to true for all clicked links
});
And listen; is started attribute changed to 1 on parent page?
I fixed the damn blinking by making 2 iframes and showing 2nd while 1st one is loading. While 1st one is loading, it's also hidden, becomes unhidden after it finishes loading. Anyway, here is my code, should help someone:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
iframe.js
{
display: none;
}
iframe.unclickable
{
pointer-events: none;
}
</style>
<script>
$(document).ready(function()
{
$('#iframeID1').on('load', function()
{
$('#iframeID1').contents().find('a[href!="javascript:void(0)"]').filter('a[target!="_blank"]').filter('a[target!="_top"]').filter('a[target!="_parent"]').on('click', function()
{
$('#iframeID1').addClass('js');
$('#iframeID2').removeClass('js');
});
$('#iframeID1').contents().find('#mySidenav').remove();
$('#iframeID1').removeClass('js');
$('#iframeID2').addClass('js');
$('#iframeID2').contents().find('html').html($('#iframeID1').contents().find('html').html());
});
});
</script>
</head>
<body>
<iframe id="iframeID1" height="800px" width="800px" src="https://www.w3schools.com/" class="js"></iframe>
<iframe id="iframeID2" height="800px" width="800px" src="https://www.w3schools.com/" class="js unclickable" ></iframe>
<script>
</script>
</body>
</html>
index.html
<object id="battle" data="battle.html"></object>
has a animation I want to show, but when the animation is finnish I want it to close.
I have tried making the webpage disappear and it did work but the screen after it was unclickable
battle.html
document.getElementById("battlebody").style.display="none";
!The image! This code is played when the animation is done. Basically I made a border around it to tell where it is while invisible.
Well I was wondering if it is possible to edit the <object> markup in index.html not in battle.html like I have done.
an example
index.html
<body>
<object id="battle" data="battle.html"></object>
</body>
the battle.html
<body>
<button id="" onclick="closing(); ">close</button>
<script>
function closing() {
window.close()
</script>
</body>
I kinda want to make the object close but it doesn't work that way so making the object display:none; but for that too work you will need to add that js code to the index.html, but the index.html does not read into the <object>
You can just use the window.parent.postMessage method.
Targeted page
<html>
<body>
<script>
setTimeout(function() {
parent.postMessage('close-me', '*');
}, 2000);
</script>
</body>
</html>
index.html
window.onmessage = function(e){
if(e.data === 'close-me'){
console.log("should remove");
obj.parentNode.removeChild(obj);
}
};
object{border:1px solid}
<object id="obj" data="data:text/html; charset=utf8, %3Chtml%3E%3Cbody%3E%3Cscript%3EsetTimeout(function()%7Bparent.postMessage('close-me'%2C'*')%3B%7D%2C2000)%3B%3C%2Fscript%3E%3C%2Fbody%3E%3C%2Fhtml%3E"></object>
*Im trying to Open multiple links in same Iframe, as well as changing the divsstyle.visibility(Visibility is working for me) but adding window.open I get nothing. I have the original address in a div id="testing" name="wordp" *
<head>
<script type="text/javascript">
function wordpaboutme() {
var showme2 = document.getElementById("testing");
showme2.style.visibility = "visible";
var changeme = document.getElementById("testing");
changeme.window.open.('http://mysite.com/main/about-me/','wordp');
}
</script>
<body>
<div id="testing" name="wordp" class="bloger" ><iframe src="http://mysite.com/main/" frameborder="0" scrolling="no" width="990" height="800" >
<p>Your browser does not support iframes.</p>
</iframe>
</div>
window.open opens a popup window. It doesn't change what's in an iframe.
To open a different page in an iframe, consider changing the "src" attribute of the iframe with JQuery
Also, as Collin Grady has mentioned in the comment, it is an even simpler method to specify the iframe id in the "target" attribute of the link, to do the job.
I'm using a plugin called Prettyphoto, when you initiate the plugin you can pass a parameter called social_tools where you can enter in html that loads Twitter and Facebook buttons.
The default html in the js file itself works no problem, I can also add in html into the js file and it works.
But when I try and add the code where I initiate the plugin it stops working.
All I end up seeing is }); }); outputted on the screen, as if something is not closing correctly somewhere.
Im working locally.
Here is my code
<script type="text/javascript" charset="utf-8">
$(document).ready(function(pp_settings){
$("a[rel^='prettyPhoto']").prettyPhoto({
social_tools: '<div class="twitter">Tweet<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></div><div class="facebook"><iframe src="//www.facebook.com/plugins/like.php?locale=en_US&href={location_href}&layout=button_count&show_faces=true&width=500&action=like&font&colorscheme=light&height=23" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:500px; height:23px;" allowTransparency="true"></iframe></div>'
});
});
</script>
Here you can see the list of parameters, if you scroll down to customization, at the end you will social_tools
http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/documentation
Thanks
The <script> element actually ends at the 1st use of </script>, despite its placement or usage inside a String literal.
A common trick to prevent this is to break it up:
'...</' + 'script>...'
Does this also not work?
var options = {social_tools: '<div class="twitter">Tweet<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></div><div class="facebook"><iframe src="//www.facebook.com/plugins/like.php?locale=en_US&href={location_href}&layout=button_count&show_faces=true&width=500&action=like&font&colorscheme=light&height=23" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:500px; height:23px;" allowTransparency="true"></iframe></div>'};
$(document).ready(function(pp_settings){
$("a[rel^='prettyPhoto']").prettyPhoto(options);
});