I'm trying to embed a SurveyMonkey survey into a modal window on my site. I can do this successfully, except that first the modal appears and then there's a delay as the iframe loads the external content (this causes a flickering effect as the iframe and its content resizes the modal window).
In an attempt to fix this, I've tried adding a load/ready event targeting the iframe (it doesn't come with an ID or class, so I've had to settle for targeting .smcx-iframe-container > iframe. I think the iframe gets loaded before the event gets attached, however, as my modal doesn't load at all after doing this revision.
Any help or suggestions would be much appreciated!
Script:
// modal.hide();
(function (t, e, s, n) {
var o, a, c;
t.SMCX = t.SMCX || [], e.getElementById(n) || (o = e.getElementsByTagName(s), a = o[o.length - 1], c = e.createElement(s), c.type = "text/javascript", c.async = !0, c.id = n, c.src = ["https:" === location.protocol ? "https://" : "http://", "widget.surveymonkey.com/collect/website/js/script.js"].join(""), a.parentNode.insertBefore(c, a))
})(window, document, "script", "smcx-sdk");
$('.smcx-iframe-container > iframe').ready(function () {
// modal.show();
});
Generated iframe source:
<div class="smcx-widget smcx-embed smcx-show smcx-widget-light">
<div class="smcx-iframe-container">
<iframe width="100%" height="100%" frameborder="0" allowtransparency="true" src="https://www.surveymonkey.com/r/9HWYSDW"></iframe>
</div>
<div class="smcx-widget-footer smcx-embed-footer">
<a class="smcx-branding" href="https://www.surveymonkey.com/user/sign-up/?ut_source=powered_by&ut_source2=new_website_collector"
target="_blank">
<span class="smcx-powered-by">powered by</span>
</a>
</div>
</div>
I know this is old but this might work for people running into this issue.
var iframe = document.getElementsByTagName("iframe")[0];
iframe.onload = functionAddSomething();
function functionAddSomething(){
//add something here e.g. modal.show();
}
Hopefully that helps someone else if not sorry :)
Related
I have a script that plays a video in a Modal when a thumbnail gets clicked. This only works with the first video mentioned in the html, so I'm trying to use js to grab the particular video whos thumbnail is clicked on.
I have set up a variable in the js called vidcode, and gave it a value of the first video's address (rLdpnu2dDUY) or whatever it's called. I then set up a value 'start' for the link part before, and 'end' for the link part after. Now I have "showVideo = start + vidcode + end" and then innerHTML = showVideo, which works no problems.
So far the injection part works. My problem now is passing the address of the clicked thumbnail into the vidcode variable to play the corresponding video. I have looked on SO, w3, and Google. I have 6 different tries and none work fully.
I can create a link which
- Sets the variable, but then does not call the script.
- Calls the script but does not pass on the variable.
- Click one thumb to set the variable then another thumb to call the script. That one will then work but it's an extra step. At least with this one I know that the variable is being set..
<!--== Standard button but requires var vidcode to be preset in the Modal script ==-->
<img src="https://img.youtube.com/vi/rLdpnu2dDUY/hqdefault.jpg">
<!--== Add onClick to trigger a mini-script which sets the var vidcode early ==-->
<script>function hDSansxhArU(){var vidcode = 'hDSansxhArU';}</script>
<!--== Adding the javascript directly to the link code, yet it does not trigger the Modal script ===-->
<!--== Adding the javascript directly to the link code, to trigger a mini-script, to then call the modal ===-->
<script>function buttt(){var vidcode = 'duBjWlIzpzQ'; modalviewer();}</script>
<!--== Use the video's code as an id, then calling that id immediately and setting it to var vidcode ==-->
<script>
document.getElementById('hDSansxhArU').onclick = function() {
var vidcode = 'hDSansxhArU';
modalviewer()
};
</script>
Spots are commented out when trying something else
function modalviewer(){ //This function usually isn't here
var start = '<iframe width="840" height="472" src="https://www.youtube.com/embed/';
var end = '" frameborder="0" encrypted-media></iframe>';
//var showVideo = start + vidcode + end;
// This part works fine when vidcode gets a value
document.getElementById("button").addEventListener("click", function() {
document.querySelector(".theVideo").innerHTML = showVideo;
document.querySelector(".bg-modal").style.display = "flex";
});
document.querySelector(".bg-modal").addEventListener("click", function() { //.bg-modal to make the surrounding clickable
document.querySelector(".bg-modal").style.display = "none";
document.querySelector(".theVideo").innerHTML = "";
});
};
Expected results:
Click a link and have either
- set that address to variable 'vidcode', or
- set the address gobbledegook to 'vidcode' from here
and either have the modal script in a separate js file or at the bottom of the page.
As a code-newbie, I'm proud to have figured it out so far (with previous help from SO), it just frustrates me that I can only get half of this to work at a time :/.
#CTOverton provided what was needed, although everyone else and in Stop/Pause video when Modal is closed (not using $ sign) contributed with everything that they got me to look up as well. #Phoenix1355 actually started me on the right path despite me not posting any code at all, in turn leading me to learn so much in very little about Javascript and HTML.
This has been plaguing me for at least a week (I've lost track of time making this website), researching, getting other setups, trying overly-complicated setups, being told it can only be done by paying for a hosting plan or having to use Wordpress.. And this Console.log output, sooo helpful omg. Thank you everyone who contributed!
Here is the finished code:
<html>
<head>
<link href="http://www.jolanxbl.ca/snips/modal.css" rel="stylesheet" />
</head>
<body>
<center>
<br><br><br><br><br>
<!--List of videos-->
<img data-vidcode="rLdpnu2dDUY" src="https://img.youtube.com/vi/rLdpnu2dDUY/hqdefault.jpg" width="200px">
<img data-vidcode="hDSansxhArU" src="https://img.youtube.com/vi/hDSansxhArU/hqdefault.jpg" width="200px">
<img data-vidcode="duBjWlIzpzQ" src="https://img.youtube.com/vi/duBjWlIzpzQ/hqdefault.jpg" width="200px">
</center>
<!-- Modal Section 1 -->
<div class="bg-modal">
<div class="modal-content">
<div class="close">+</div>
<div class="theVideo">
<iframe width="840" height="472" src="https://www.youtube.com/embed/rLdpnu2dDUY" frameborder="0" encrypted-media; picture-in-picture allowfullscreen></iframe>
</div>
</div>
</div>
<script>
let vidcode = 'rLdpnu2dDUY';
// Get all elements with classname 'thumbnail'
let thumbnails = document.getElementsByClassName('thumbnail');
// Loop for every element with class
Array.from(thumbnails).forEach(function(element) {
element.addEventListener('click', thumbnailClicked);
});
function thumbnailClicked(event) {
// Event is mouse click event
// target is the img (as that is what you click on)
// dataset is the data attributes of img
vidcode = event.target.dataset.vidcode;
console.log('vidcode: ', vidcode)
//document.querySelector(".gridContainer").addEventListener("click", function() {
document.querySelector(".theVideo").innerHTML = '<iframe width="840" height="472" src="https://www.youtube.com/embed/' + vidcode + '" frameborder="0" encrypted-media></iframe>';
document.querySelector(".bg-modal").style.display = "flex";
}
document.querySelector(".bg-modal").addEventListener("click", function() { //.bg-modal to make the surrounding clickable
document.querySelector(".bg-modal").style.display = "none";
document.querySelector(".theVideo").innerHTML = "";
});
</script>
</body>
</html>
Based on your description I think you are looking for something along the lines of the "data attribute". Data attributes are custom attributes you can assign to any DOM element that contain essentially whatever you want.
In you case if you have a page with lots of thumbnails and you want a specific action to happen when you click on a specific thumbnail, your best bet is if you store that unique identifier (the video id, or are you put it vidcode) on the element you are clicking on.
This can be done like this:
<body>
<!--List of videos-->
<img data-vidcode="rLdpnu2dDUY" src="https://img.youtube.com/vi/rLdpnu2dDUY/hqdefault.jpg">
<img data-vidcode="example2" src="img2.jpg">
<img data-vidcode="example3" src="img3.jpg">
<script>
let vidcode = 'rLdpnu2dDUY';
// Get all elements with classname 'thumbnail'
let thumbnails = document.getElementsByClassName('thumbnail');
// Loop for every element with class
Array.from(thumbnails).forEach(function(element) {
element.addEventListener('click', thumbnailClicked);
});
function thumbnailClicked(event) {
// Event is mouse click event
// target is the img (as that is what you click on)
// dataset is the data attributes of img
vidcode = event.target.dataset.vidcode;
console.log('vidcode: ', vidcode)
}
</script>
</body>
Try passing the vidcode as an parameter for modalviewer function and then use the value.
function modalviewer(vidcode){
var start = '<iframe width="840" height="472" src="https://www.youtube.com/embed/';
var end = '" frameborder="0" encrypted-media></iframe>';
var showVideo = start + vidcode + end;
document.querySelector(".theVideo").innerHTML = showVideo;
};
<div class="theVideo"></div>
Click
<script>
document.getElementById('hDSansxhArU').onclick = function() {
var vidcode = 'hDSansxhArU';
modalviewer(vidcode)
};
</script>
Hope people can help - been using 'Stack Over Flow' for reference for many years now, but this is the first time I'm stuck on some coding. Below is the iFrame, what I would like to happen is when the submit button on the form has been clicked is for it to disappear, but instead the iFrame is still there and within the iFrame it goes to 'How can we help you today?'
Also, when the iFrame disappears a line of text should appear.
<script type="text/javascript">
function removeIFrame() {
var frame = document.getElementById("myIframe");
frame.parentNode.removeChild(frame);
}
</script>
<div style="overflow: hidden;position: relative;height: 970px; width:150%;" onclick="removeIFrame();">
<iframe id="myIframe" src="https://sheersense.freshdesk.com/support/tickets/new" scrolling="no" width="100%" height="1125px" frameborder="0" style="position: absolute; top:-150px"></iframe>
<div id="text_display" style="">Thank you for your ticket, a member of the Sheersense team will be in touch with you shortly.</div>
</div>
Many thanks for the help!
You can find the possible answer in this post-
https://stackoverflow.com/a/3690896/8438534
As mentioned in that answer, if the click is in the iframe area, the iframe context handles the click event, it does not bubble up to the iframe parent. So the div will never register the click event at all if it happened in the iframe area.
try this
function removeIFrame() {
var frame = document.getElementById("myIframe");
frame.remove();
}
window.onload = function() {
var frame = window.myIframe;
var innerDocument = (frame.contentWindow || frame.contentDocument);
if (innerDocument.document) innerDocument = innerDocument.document;
innerDocument.onclick =function() {
removeIFrame();
}
}
I have a unique issue that--while I've seen similar questions and answers--none quite address my challenge.
Currently, I provide a "print" button that loads the print dialog on a browser based on an embedded and hidden iframe. This works just fine, but I don't want to slow down page loading by pulling in the iframe for a large PDF.
So, I want to load an iframe without the source, then write the proper source url if the user clicks the print icon, then reload the iframe, and finally, show the dialog box.
Unfortunately, the print dialog pops up before I can reload the iframe so loads a blank page in the dialog box. On subsequent clicks, the PDF is loaded and ready for print.
<a href='#' id='load_pdf' ><i class='fa fa-2 fa-print'></i></a>
<iframe id="iFramePdf" src="" style="display:none;"></iframe>
<script type="text/javascript">
jQuery(document).ready(function() {
$("#load_pdf").click(loadPDF);
function loadPDF() {
$('#iFramePdf').attr('src', "my.pdf");
// Attempt to reload iframe
$('#iFramePdf').load("my.pdf");
sendPrint('iFramePdf')
}
function sendPrint(elementId) {
var iframe = $(element_id)[0];
iframe.contentWindow.focus();
iframe.contentWindow.print();
}
});
</script>
I've tried the following various methods to reload:
// Attempt 1
$('#iFramePdf').attr('src', function () { return
$(this).contents().get(0).location.href });
// Attempt 2
$('#iFramePdf').attr("src", $('#iFramePdf').attr("src"));
$('#iFramePdf').attr('src', function () { return $(this).contents().get(0).location.href });
// Attempt 3
$('#iFramePdf')[0].contentWindow.location.reload(true);
// Attempt 4
var getMyFrame = document.getElementById(elementId);
getMyFrame.contentWindow.location.reload(true);
I've even tried using jQuery's defer method, but had no luck with that (possibly because I'm lacking knowledge). If I could get any guidance, I'd appreciate it.
try to change this:
function loadPDF() {
$('#iFramePdf').attr('src', "my.pdf");
// Attempt to reload iframe
$('#iFramePdf').load("my.pdf");
sendPrint('iFramePdf')
}
to something like this:
function loadPDF() {
$('#iFramePdf').attr('src', "my.pdf");
}
$('#iFramePdf').load(function(){
sendPrint('iFramePdf')
})
it should work
You can try .promise(). For obvious reasons I can't test it out, but I think 3 seconds should be adequate for the iframe to load. Be aware that this is as syntactically correct as I can get it without testing it out. Adjust the fadeIn(1800) and the delay(1200) accordingly.
HTML
<a href='#' id='load_pdf' ><i class='fa fa-2 fa-print'></i></a>
<p id="msg" style="display: none;">Printing Document...</p>
<div id="printPort" style="opacity: 0; width: 1px; height: 1px;"></div>
jQuery
$(function() {
$("#load_pdf").on('click', loadPDF('my.pdf'));
// Create the iframe, and put it inside #printPort
// Change it's src to the file argument
// Animate the #msg for 3 seconds
var loadPDF = function(file) {
$('<iframe id="iFramePdf" src="blank.html"></iframe>').appendTo("#printPort");
$("#iFramePdf").att('src', file);
return $('#msg').fadeIn(1800).delay(1200).fadeOut();
}
var sendPrint = function(elementId) {
var iframe = $(element_id)[0];
iframe.contentWindow.focus();
iframe.contentWindow.print();
}
// Once the animation is done the promise will resolve and sendPrint will execute on callback.
$.when(loadPDF).done(sendPrint('iFramePdf'));
});
I have been attempting to create social buttons that both capture the current page url automatically and the page description too.
i have gone through numerous questions & answers (found within stackoverflow) and followed the steps but I have come to some sort of problem with the social buttons behavior.
facebook: it pops up a new window and prompts me 'TO ENTER AN URL TO SHARE'. The new page's url is: https://www.facebook.com/sharer/sharer.php?u
twitter: simply asks me: 'WHATS HAPPENING?'. The popup url is: https://twitter.com/intent/tweet?text=&url=about%3Ablank&original_referer=
pinterest: in the description area, it just appends: #Url.Encode(PageTitle)
The popurl is: https://www.pinterest.com/pin/create/button/?url=%40Url.Encode(Request.Url.ToString())&description=%40Url.Encode(PageTitle)
In short, none of the buttons seem to be generating any page url nor descriptions and titles.
Here are my files:
index.html
<a class="soc-facebook popup" href="javascript:window.location=%22http://www.facebook.com/sharer.php?u=%22+encodeURIComponent(document.location)+%22&t=%22+encodeURIComponent(document.title)" title="Share on Facebook..." target="_blank"></a>
<a class="soc-twitter popup" href="javascript:window.location=%22https://twitter.com/share?url=%22+encodeURIComponent(document.location)+%22&text=%22+encodeURIComponent(document.title)" target="_blank"></a>
<a class="soc-pinterest popup" href="http://pinterest.com/pin/create/button/?url=#Url.Encode(Request.Url.ToString())&description=#Url.Encode(PageTitle)" target="_blank" title="Pin it"></a>
<a class="soc-google popup" href="https://plusone.google.com/_/+1/confirm?hl=en&url=<?php if(is_home()){echo home_url();}else{the_permalink();} ?>" target="_blank" title="Plus one this page on Google"></a>
<a class="soc-linkedin soc-icon-last popup" href="http://www.linkedin.com/shareArticle?mini=true&url=<?php if(is_home()){echo home_url();}else{the_permalink();} ?>" target="_blank"></a>
pop.js
$(function() {
// link selector and pop-up window size
var Config = {
Link: "a.popup",
Width: 500,
Height: 500
};
// add handler links
var slink = document.querySelectorAll(Config.Link);
for (var a = 0; a < slink.length; a++) {
slink[a].onclick = PopupHandler;
}
// create popup
function PopupHandler(e) {
e = (e ? e : window.event);
var t = (e.target ? e.target : e.srcElement);
// popup position
var
px = Math.floor(((screen.availWidth || 1024) - Config.Width) / 2),
py = Math.floor(((screen.availHeight || 700) - Config.Height) / 2);
// open popup
var popup = window.open(t.href, "popup",
"width="+Config.Width+",height="+Config.Height+
",left="+px+",top="+py+
",location=0,menubar=0,toolbar=0,status=0,scrollbars=1,resizable=1");
if (popup) {
popup.focus();
if (e.preventDefault) e.preventDefault();
e.returnValue = false;
}
return !!popup;
}
}());
where could i be possibly going wrong?
Thanks!
Here are the urls you should use
For twitter:
https://twitter.com/intent/tweet?text=MyTweetText&via=MyUser&url=http://google.com
For pinterest:
https://www.pinterest.com/pin/create/button/?description=desc&media=someUrlImage&url=http://google.com
You can use this page to create the urls: http://www.sharelinkgenerator.com/
The trick here is to add Open Graph metatags to the page that is being shared. These metatags are used by Facebook to capture page metadata. If you don't include metatags on the page then you can explicitly enter parameters for the Facebook sharer at least.
See this page for a synopsis on how to include these tags:
http://ogp.me/
I'm trying to do a small trick to allow auto playing/stopping of a youtube player embedded inside a bootstrap modal without using YouTube's API (since I i'll be needing more video provides in the future so I want to have a generic solution).
The trick works like that:
A Modal with a YouTube video (iframe) is shown and played [the video has autoplay=1 source]
Once the modal is hidden (hide event) the iframe's src is captured within data-iframe-src attribute on that iframe and the original src of the iframe is set to '', this way the video stops playing.
Once I load back the video (show event) I'm trying to re-assign the src of the iframe from the data-iframe-src attribute but the only thing it sets is ?autoplay=1 I thought it might be because of the URL structure (//youtube...)
I tried to use encodeURIComponent and decodeURIComponent but still no luck.
Here's my code:
$('#modal-video').on('hide show',function(e){
var $iframe = $(this).find('.video-wrap:visible').find('iframe'),
iframe_src = '';
if ( e.type == 'hide' ) {
// Snapshot
$iframe.attr('data-iframe-src', encodeURIComponent( $iframe.attr('src') ) );
// Clear iframe
$iframe.attr('src','');
}
else {
// Show and re-assign the iframe src
$iframe.attr('src', decodeURIComponent( $iframe.attr('data-iframe-src') ) );
}
});
Any ideas?
Why don't you use the callbacks from bootstrap itself?
$(function() {
$('#myModal').on('shown.bs.modal', function (e) {
var src = $('#videowrapper').attr('data-iframe-src');
$('#videowrapper').attr('src', src);
});
$('#myModal').on('hidden.bs.modal', function (e) {
$('#videowrapper').attr('src', '');
});
});
This works as you want it to.
edit:
the data attribute is loaded from jQuery into the src attribute
<iframe id="videowrapper" width="560" height="315" src="" data-iframe-src="https://www.youtube.com/embed/SJTyY2csya8?autoplay=true" frameborder="0" allowfullscreen></iframe>
edit2:
Working example: http://jsfiddle.net/trk9vkat/
Well I have multiple videos in the modal, something like this:
<div id="modal">
<div class="video-wrap video-1">
iframe...
</div>
<div class="video-wrap video-2">
iframe...
</div>
<div class="video-wrap video-3">
iframe...
</div>
I think the issue was with the event names, it should be hide and shown, this way I can use the :visible selector.
And I did not have data-iframe-src set prior to closing the modal, now i've set it in the link the triggers the modal.
So this did the trick:
// Video Trigger
$('.play-video').on('click',function(e){
e.preventDefault();
var id = $(this).data('video-id'),
$video = $('.' + id),
$iframe = $video.find('iframe');
src = $iframe.attr('src');
// Hide all
$('.video-wrap').hide();
// Show selected video
$video.show();
// Show modal
center_modal('modal-video');
// Autoplay video
src = video_autoplay( src );
if ( typeof( $iframe.attr('data-iframe-src') ) == 'undefined' ) {
$iframe.attr('data-iframe-src', src);
}
});
// Show / Hide
$('#modal-video').on('hide shown',function(e){
var $iframe = $(this).find('.video-wrap:visible').find('iframe');
if ( e.type == 'hide' ) {
$iframe.attr('src','');
}
else {
if ( $iframe.attr('src') == '' ) {
$iframe.attr('src',$iframe.attr('data-iframe-src'));
}
}
});
Thanks for your time & help! ;-)