I am using external JavaScript to show video player on web page like...
<script src='http://player.field59.com/v3/vp/...........'></script>
Here is my code that cut the HTML code which is generated by above script tag and paste into specific container like <div id='dynamic-video-container'></div>
$(document).ready(function(){
if( $("div.subscriber-hide div.html-content div.bimVideoPlayer").length ) {
var video_content = $('<span>').append($('div.subscriber-hide div.bimVideoPlayer').clone()[0]).remove().html();
}
$('div.subscriber-hide div.html-content').remove();
$("div#dynamic-video-container").html(video_content);
});
I am doing this because I am not able to put external code directly into "<div id='dynamic-video-container'></div>" container.
My issue is this sometimes play functionality of video player is not working may be due to loading sequence of external code and code snippet.
Is there any option by which code snippet will execute when external js becomes fully loaded? Can anyone suggest idea to how to do this?
One more thing external code "<script src='http://player.field59.com/v3/vp/...........'></script>" is added by CMS so I am unable to change this line.
Try this
window.onload = function() {
//your code comes here
}
As window.onload is called after all the content and resources of the page are loaded. Hope this helps.
Related
I've got a script (that also used froogaloop2 https://developer.vimeo.com/player/js-api) that changes the play button on a vimeo vid. It works in JSFiddle but can't get it to work on my actual site. Pressing the play button doesn't do anything, the video doesn't play at all. I've got my scripts organized like so, in the <header> tag. The play/pause script is sitting at the bottom before the <body> tag.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/TweenMax.min.js"></script>
<script type="text/javascript" src="js/remodal.min.js"></script>
<script type="text/javascript" src="js/froogaloop2.min.js"></script>
My full code: https://jsbin.com/fawowaleci/edit?html,css,output
Video script: https://jsfiddle.net/uxhxdcwp/5/
Inside modal: https://jsfiddle.net/qhrmtass/14/
Play/Pause script:
$(function () {
var iframe = document.getElementById('video');
var player = $f(iframe);
player.addEvent('ready', function () {
player.addEvent('finish', onFinish);
});
$('.playpause').click(function () {
player.api('paused', function (paused) {
if (!paused) {
player.api('pause');
$(".playpause").removeClass('pause');
} else {
player.api('play');
$(".playpause").addClass('pause');
}
});
});
function onFinish(id) {
$(".playpause").removeClass('pause');
}
});
Update: it as was suggested but no go. I feel its something with the modal code that's messing it up?
There are two big reasons why you see your code working fine on JSBin versus locally:
If you right click the output element and look at how it's structured, you'll see that all your scripts are getting shifted to run within the opening and closing body tag, contrary to how you wrote the code.
I assume you put together your sample based on looking at the documentation on the Vimeo API page. Note the red box at the very top of the page that indicates that you won't be able to run this locally. Host the below code on a web server and you'll be able to see it execute as you're expecting.
Generally, it's a good idea to put all your tags either within the <head></head> tags or the <body></body> tags. See the discussion in the comments at Is it wrong to place the <script> tag after the </body> tag? for a plethora of information and opinion on that front.
I've put together a working sample (that works on my web server and in JSBin) for you at https://jsbin.com/mojopalode/edit?html,css,output.
Edit: To address your attached picture, it looks as though you're still running this from your desktop. Please see point #2 I made above for why this would continue to fail to work on your end. If you drop this on a webserver (as I tested it on), it should work without a problem.
You should put the scripts, after body tag or initialize variables and listeners on $(document).ready({ });
From looking at your code, only problem I can see is you script runs before actual elements are rendered so its not attaching any listeners to the elements.
I have a java script that is embedded in the html file with the script tag and it works fine. javascript code is for smooth scroll into the top of the page when a link is clicked.
<script type="text/javascript">
$(".scroll").click(function(event){
event.preventDefault();
//calculate destination place
var dest=0;
if($(this.hash).offset().top > $(document).height()-$(window).height()){
dest=$(document).height()-$(window).height();
}else{
dest=$(this.hash).offset().top;
}
//go to destination
$('html,body').animate({scrollTop:dest}, 1200,'swing', function() {
$('input#Name_First').focus();
});
});
</script>
But when I try to have it as external java script it doesn't work.
<script type="text/javascript" src="$!{cdnServerPath}css/lp/js/action.js"></script>
code in action.js file
$(".scroll").click(function(event){
event.preventDefault();
//calculate destination place
var dest=0;
if($(this.hash).offset().top > $(document).height()-$(window).height()){
dest=$(document).height()-$(window).height();
}else{
dest=$(this.hash).offset().top;
}
//go to destination
$('html,body').animate({scrollTop:dest}, 1200,'swing', function() {
$('input#Name_First').focus();
});
});
Following are the things I noticed.
I am including the jquery -2.1.1.js file before the action.js is called.
action.js is being loaded- I checked it in the net tab of firebug.
I put a random alert statement in action.js. It is being triggered when the page is being laoded but not when I click the link.
I appreciate any help in getting this thing fixed.
Thanks.
The location of your script include is very important. If you include code in the header, it will not be able to access dom elements until the dom is loaded, however, if you placed it before the closing body tag, it would be able to access the dom elements immediately.
If you must place your include in the <head>, you'll have to wait for the DOMContentLoaded event, which with jQuery can be done using the $.fn.ready method.
$(document).ready(function () {
// your code
});
Many more recent tutorials suggest placing your script includes before the closing body tag to allow your page content to load before the javascript loads because loading javascript is a blocking action, meaning, it will stop the downloading of all other things until it is complete. Adding it to the bottom of course also has the benefit of not needing to worry with the DOMContentLoaded event.
It also helps to have all of your script includes together and style includes together (separately) so that they will download in parallel.
It is kind of theoretical question as it can't be checked right away. The problem is about the possible reasons why the jQuery code doesn't work, however it is loaded on the page now. Also, it DOES what it has to do right after the page is loaded and I copy-paste this script code from the source of the loaded page into the console.
<body>
<div id="id1">...</div>
<div id="id2">some html code goes here... </div>
<script>
jQuery(document).ready(function() {
var el = jQuery("#id1");
var var1 = el.width();
el.css({'margin-top':'10px','margin-bottom':'20px'});
jQuery("#id2").css('margin-top', var1+'px');
});
</script>
<div>and here... </div>
</body>
P.S. The jQuery library is loaded. There are no errors in the Chrome console. The script is in the body tag.
P.P.S. Can it be because of #id1 (contains ) is loaded from another site so document ready fired earlier? Is that exactly the reason?
Any other possible reasons?
Unfortunately, it is hard to check it right away as the access to that page is limited and takes several steps to update by other persons that can't be accessible right away.
However, the possible solution is needed right away.
Added id1 and id2 into the html code.
use window.onload is most often used within the element to
execute a script once a web page has completely loaded all content.
jQuery(window).load(function () {
var el = jQuery("#id1");
var var1 = el.width();
el.css({'margin-top':'10px','margin-bottom':'20px'});
jQuery("#id2").css('margin-top', var1+'px');
});
Got a little problem here. Basically, I'm trying to add a script tag after the page loads.
This is what I am doing:
index.php:
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
function getad()
{
$.post('assets/getad.php', "ad", function(response) {
response = response.replace('document.write','document.getElementById("ad").innerHTML = ');
eval(response);
console.log(response);
});
}
getad();
</script>
<div id="ad"></div>
</body>
</html>
getad.php:
<?php
echo file_get_contents("http://ads1.qadabra.com/t?id=a823aca3-9e3c-4ddd-a0cc-14b497cad85b&size=300x250");
?>
You can find a demo here: http://dev.cj.gy/game/
As you can see, the #ad div DOES get filled with the correct script tag, but it doesnt actually run, If I edit the page to include the script tag right at page load, it does run.
Yes, <script> tags cause execution when parsed as part of the main document; they don't execute from being written to innerHTML.
You can create an executing script element outside of that initial parse using the DOM method of calling createElement('script'), setting its src/content and adding it to the document. This is what jQuery's getScript does.
However it wouldn't do you much good because the next script, that ads1.qadabra.com is document.writeing to the page, also itself calls document.write.
You could work your way around both of these calls at the client side (ie without getad.php), by assigning your own custom function to document.write that, instead of writing to the loading page, attempts to extract the source of the script tag passed to it, and load that in a DOM-created script element.
But in general these are scripts designed to work synchronously at document load time; anything you do to try to force them to run in a way they weren't intended to is likely to be fragile and stop working when the ad network change anything.
If you want to load a third-party ad without pausing the loading of the parent document, I suggest putting it in an iframe.
I'm trying to change the content of the portfolio section of my website. I have a div called .portfolio_box, which contains a small preview of the project (each project div also has a different id). When you click on this div (.portfolio_box) I want the content of the content div (#main_content) to go away and be replaced with the corresponding content.
I found the following tutorial and adjusted the script to my needs:
<script type="text/javascript">
$(document).ready(function()
{
$("#thomasschoof_old").click(function()
{
/*hide( 'fast', function()
{
$('#main_content').load(thomasschoof_old.html,'',showNewContent);
} );
var toLoad = $(this).attr('href')+' #main_content'; */
$('#main_content').hide('fast',loadContent);
$('#page').append('<span id="load">LOADING...</span>');
$('#load').fadeIn('normal');
});
function loadContent()
{
$('#main_content').load('thomasschoof_old.html #project','',showNewContent)
}
function showNewContent()
{
$('#main_content').show('normal',hideLoader);
}
function hideLoader()
{
$('#load').fadeOut('normal');
}
return false;
});
</script>
But when I click on the div #thomasschoof_old nothing happens. I don't know a lot about jQuery or Javascript (just getting into it) and I really can't get it figured out.
You can view the web page here: http://jowannes.com/thomasschoof/portfolio.html
I hope somebody can help me, Thanks in advance!
Thomas
Your problem is, that you wrote your JS code inside scripts tags that are used to load an external script file (jQuery). You script just wont ge executed that way.
src: This attribute specifies the URI of an external script; this can
be used as an alternative to embedding a script directly within a
document. script elements with an src attribute specified should not
have a script embedded within its tags.
From: https://developer.mozilla.org/en-US/docs/HTML/Element/Script
Set up a separate script tag for you code or include it from a second external script-file and see what happens.