We Keep Coding

How do I reference this embedded iframe from javascript

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&amp;player_id=player1&amp;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.

Resizing an iframe to fit content on multiple pages

Could somebody please show me how to fit an iframe to the content within? I have this because I am using one iframe on my website that when a link is clicked displays different pages and I would love for the iframe to fit to the content within as at the moment the iframe is too long for some page's content but too short for other page's content and it cuts the page off.
I do not really have much code to show which is relevant or that will be any help, however in line with the rules on Stack below is the code that I have so far.
I have seen some questions on here regarding the same thing but none that I really understand.
<iframe id="preview-frame" src="http://airforceadvice.com/PCS" name="preview-frame" frameborder="0" scrolling="no">
</iframe>

Add this to your head section
<script language="javascript" type="text/javascript">
function resizeIframe(obj) {
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
</script>
And change your iframe to this:
<iframe name="Stack" src="http://stackoverflow.com/" frameborder="0" scrolling="no" id="iframe" onload='javascript:resizeIframe(this);' />
Is this what you're looking for?

Embed PDF at full height

My question ... is it possible to embed a PDF in a HTML document where the height is always 100%. The problem is the actual height of the pdf could vary and the layout needs to respond to this.

There are several ways to embed PDF in HTML.
One would be to use PDFObject. The below example works out of the box in firefox, you'll find further instructions for most browsers on their website.
<object data="myfile.pdf" type="application/pdf" width="100%" height="100%">
<p>It appears you don't have a PDF plugin for this browser.
No biggie... you can <a href="myfile.pdf">click here to
download the PDF file.</a></p>
</object>
Or you could use the google drive viewer to display any PDF (and quite a few more file types):
<iframe src="http://docs.google.com/viewer?url=[http://PATH-TO-YOUR-FILE.pdf]&embedded=true" width="600" height="780" style="border: none;"></iframe>
Using the drive viewer your visitors don't need any additional software/plugin to view the files.
You can then adjust the height of the PDF container with css. i.e
#yourcontainer { height: 100vh; }

None of the above answers worked for me.
The following worked across every platform I needed it to (ie, I didn't test IE).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width">
</head>
<body>
<object data="pdf.pdf" type="application/pdf" style="min-height:100vh;width:100%"></object>
</body>
</html>

You must to set width\height a container
<div style="width: 100%; height: 100%">
<embed id="frPDF" height="100%" width="100%" src="http://eurecaproject.eu/files/5013/9885/7113/example4.pdf"></embed>
</div>
Look example

body {
margin: 0; /* Reset default margin */
}
iframe {
display: block; /* iframes are inline by default */
background: #000;
border: none; /* Reset default border */
height: 100vh; /* Viewport-relative units */
width: 100vw;
}
<iframe src="http://docs.google.com/viewer?url=[http://PATH-TO-YOUR-FILE.pdf]&embedded=true" width="600" height="780" style="border: none;"></iframe>

Make sure you use <object> - EMBED vs. OBJECT
<object data="file.pdf" type="application/pdf" width="100%" height="100%"></object>

I like the functionality that comes with the html objects for PDFs as opposed to some libraries like PDF.js for light projects. This is definitely not the best answer but I'm currently using JQuery with Bootstrap in an Angular 6 app so I modify height after the the view loads.
I set
<object id="pdf" data="path.pdf" type="application/pdf" width="100%"></object>
then in my component I adjust the height based on the ratio of the width to height.
For example, an 8 x 11.5 document would give the height 1.4375 x the width.
ngAfterViewInit(): void {
var width = $("#pdf").width();
$("#pdf").prop("height", width * 1.4375 + "px");
}
Saw this post and figured I would post. Hope this helps and please correct me if you think this is bad coding practices.

Javascript; Calling src within the script?

I'm making a simple affiliate ad rotation JavaScript. I'm still new to JavaScript and don't fully understand it so bear with me.
Google's adsense is split into 2 parts, one to set the variables, and the next to get the script. Then Amazon has an iframe to get it's ad's. All I want to do is use a random number from 1 to 2 (will be larger later) that will randomly select one of them to display on my localhost.
<script type="text/javascript"><!--
/* Custom footer */
select = rand(2);
if(select == 1){
google_ad_client = "-----------";
google_ad_slot = "---------";
google_ad_width = ---;
google_ad_height = --;
//get this google
<script ...src="http://pagead2.googlesyndication.com/pagead/show_ads.js
} else {
<iframe src="http://rcm.amazon.com/e/cm?t=------&o=1&p=48&l=ur1&category=amazonhomepage&f=ifr" width="728" height="90" scrolling="no" border="0" marginwidth="0" style="border:none;" frameborder="0"></iframe>
}
</script>

You need to use document.write("<html>or text</html") to write html out to the page, though for the iframe i would suggest putting it inside another div
<script type="text/javascript"><!--
/* Custom footer */
var select = Math.floor(Math.random()*2);
if(select == 1){
google_ad_client = "-----------";
google_ad_slot = "---------";
google_ad_width = ---;
google_ad_height = --;
//get this google
document.write("<script ...src='http://pagead2.googlesyndication.com/pagead/show_ads.js' />");
} else {
document.getElementById('adContainer').innerHTML('<iframe src="http://rcm.amazon.com/e/cm?t=------&o=1&p=48&l=ur1&category=amazonhomepage&f=ifr" width="728" height="90" scrolling="no" border="0" marginwidth="0" style="border:none;" frameborder="0"></iframe>');
}
</script>

You need to use document.write("stringtowritetodocument"); in order to get JavaScript to write anything to the document.
So, inside your if:
document.write('<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>');
Also, once this grows in complexity, you may need to look out for this:
JavaScript's document.write Inline Script Execution Order
What you want may also be accomplished better with some server-side code, if that is available to you.

Have you tried Document.Write()?
e.g. Document.Write("<p>Your HTML Here</p");

Google Maps not functioning for me

My Google maps code is all squared away and valid, but it doesn't load on the page. Here is the page in question, I have full availability to code, not sure why it's breaking:
http://whs.rjuhsd.us/calendar/map
The Gmaps JS is in the header, with the correct key. Sensor is set to true, and the element is defined in the document, displayed properly, in the right spot and available to the user.
Halp?

Looks like you have conflict between jQuery and Prototype.
Use the noConflict mode of jQuery.
PS: Why are you using both?

Chetan is right, you are running into a conflict between jquery and Prototype. I see that you have called jquery.noConflict() once, but then after that you import jquery again into your document, thus undoing the noConflict:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
</script>
... snip ...
<!-- following scripts are for the jwPlayer installations oct.09 -->
<script type="text/javascript" src="/scripts/swfobject.js"></script>
<script type="text/javascript" src="scripts/jwplaylist/jquery-1.3.2.min.js">
</script>
Is there any reason why you didn't just update the swfobject.js to use the earlier version of jquery?

I see two links to google maps, but I assume you want to display a google map as part of this page right?
There's an empty DIV on your page:
<div id="map_canvas" style="width: 500px; height: 300px;"></div>
Maybe this is where you intended to embed the map? If so, you can try to replace it with the following:
<div id="map_canvas" style="width: 500px; height: 300px;"><iframe width="500" height="300" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=2551+Woodcreek+Oaks+Blvd.+Roseville,+CA,+95747&sll=37.0625,-95.677068&sspn=41.767874,58.535156&safe=on&ie=UTF8&t=h&hq=&hnear=2551+Woodcreek+Oaks+Blvd,+Roseville,+Placer,+California+95747&ll=38.764056,-121.330884&spn=0.015209,0.020106&z=16&output=embed"></iframe><br /><small>View Larger Map</small></div>