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.
Related
My website is essentially all one very long page and I've got an element I'd like to click before the page is loaded (it takes a while because it's so long), but I can't get it to trigger.
To test what could possibly be the cause of problems I made a very basic button that wrote to the console when clicked and during the loading phase it did nothing and then eventually once everything was fully loaded it worked.
The strange part is that looking up possible solutions so this problem, people unanimously say that the javascript gets loaded at whatever line it's written in the code and the link to my .js file is the second thing in the (right after ) so surely it should be loading immediately.
This isn't the full code obviously because the site is quite long, but here are the relevant parts:
"use strict";
function test() {
console.log("testingtesting");
}
function init() {
document.getElementById("buttonName").onclick = test;
}
window.onload = init;
<head>
<title>Title</title>
<script src="script.js"></script>
</head>
<body>
<button id="buttonName">
</body>
Does anyone have an explanation for why it's behaving the way it is and if there's anything I can do to change it?
When using an button you could use this method.
"use strict";
function test() {
console.log("testingtesting");
}
<head>
<title>Title</title>
<script src="script.js"></script>
</head>
<body>
<button id="buttonName" onclick="test()"/>
</body>
And if you did like to start the function as soon as its loaded, you could try a self invoking function.
(function () {
// body of the function
}());
The CODE!
$(document).ready(function() {
test();
$("#buttonName").click(function() {
test();
});
function test() {
console.log("testtest");
}
});
button {
height: 80px;
width: 80px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="buttonName">
How it works.
The question you asked is an interesting one.
I've used jquery. A library of javascript that makes most functions alot easier.
First. It doesn't actually matter (to much) where your script sits.
some people place it in the head if its IMPORTANT And reaaaaly needs to be run at the very beginning.
However for the most part you can put javascript before the closing body tag. This is something google, for SEO, approves of.
$(document).ready(function() The function here is called once the page is ready. Or does it? You'll be surprised to know that as a matter of fact its harder for you to stop the script loading before the page is fully loaded. :)
When the browser encounters a script tag when parsing the HTML, it stops parsing and gets to work on the javascript interpreter, which then ends up running the script. The html wont continue until the script execution is complete just incase you have a 'document.ready' function somewhere. This is the default behavior.
As you've written the rest ill assume you already understand what the rest of the code does.
onclick requires a separate function. But as i stated the script will be loaded much before the page is fully loaded. So you can have the onclick work before. However as the button wouldn't have loaded yet there's nothing for you to click.
Another way of approaching the problem.
function test() {
console.log("testingtesting");
}
button {
height: 80px;
width: 80px;
}
<button id="buttonName" onclick="test()"/>
Unlike your script document.getElementById("buttonName").onclick = test; This function is called in the DOM here <button id="buttonName" onclick="test()"/>
thus not requiring another line for the onclick.
Further reading
https://api.jquery.com/
https://www.innoq.com/en/blog/loading-javascript/
http://www.bardev.com/2013/01/03/browser-script-loading/
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.
How do I take the code from codepen, and use it locally in my text-editor?
http://codepen.io/mfields/pen/BhILt
I am trying to have a play with this creation locally, but when I open it in chrome, I get a blank white page with nothing going on.
<!DOCTYPE HTML>
<html>
<head>
<script> src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="celtic.js"></script>
<link rel="stylesheet" type="text/css" src="celtic.css"></link>
</head>
<body>
<canvas id="animation" width="400" height="400"></canvas>
</body>
</html>
I have copy, pasted and saved the css and js into different files and saved them, then tried to link them into the html file as I have shown above.
I have also included the jquery library as I understand a lot of the codepen creations use it.
The only console error I'm getting is
Uncaught TypeError: Cannot read property 'getContext' of null
which is linking to my js file, line 4
(function(){
var canvas = document.getElementById( 'animation' ),
c = canvas.getContext( '2d' ),
Sorry if this is dumb, but I'm new to all this.
I'm sure this is basic as hell. Any help would be awesome!
Joe Fitter is right, but I think is better to export your pen (use the export to export.zip option for using your pen locally). This will give you a working version of your pen without having to copy and paste the CSS, JavaScript and HTML code and without having to make changes on it for making it work.
Right click on the result frame and choose View Frame source. And you can copy the source code and paste it in your own text-editor.
It seems your javascript is running before the HTML has finished loading. If you can use jQuery put the js inside of this;
$( document ).ready(function() {
// js goes in here.
});
either u can try this....
function init() {
// Run your javascript code here
}
document.addEventListener("DOMContentLoaded", init, false);
looks like you are calling the JS before the DOM is loaded.
try wrapping it in a
$(function() {
// your code here
});
which is the same as
$(document).ready(function() {
// your code here
});
if you are using jQuery.
or you could include the <script> tag after the content, just before the closing body tag, this will ensure the content has been rendered before the JS is executed
Or you could name the function in your JS and execute it onLoad of the body:
<body onLoad="yourFunction();">
To download the computed html of a codepen, go to the codepen of your choice,
then click the "Change View" button and go to the "full page" mode.
Now depends on your browser.
Firefox
display the source code (Cmd+u) and go at the very bottom.
Look for the last iframe and click on the value of the src attribute.
There you go.
Chrome
Right click in the page (not the codepen header) and choose the View FRAME source (not the view PAGE source) option.
There you go.
this seems to be simple.. but I am a bit noobish with jquery, maybe I am doing something silly wrong?
I want to click an image, and on that click, hide another image right next to it.
<script type="text/javascript">
$("#butShowMeSomeUnits").click(function() {
$('#arrowUnitspic').hide();
});
</script>
Id's are correct as per the two images. What am I missing? Debugging it, the code never gets fired...
Thanks
EDIT
I had my control as a nested control on an asp masterpage, and its id was being rewritten. I have now fixed the id, but I still cant get any joy... I also see my markup is being rendered as an "input", would that make a difference?
<head>
<script src="js/jquery.min.1.5.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#butShowMeSomeUnits").click(function () {
$('#arrowUnitspic').hide();
});
});
</script>
</head>
<body>
<input type="image" src="bookings_media/buttons/show-me-some-units.png" onmouseout="this.src='bookings_media/buttons/show-me-some-units.png'" onmouseover="this.src='bookings_media/buttons/show-me-some-units_orange.png'" id="butShowMeSomeUnits" name="ctl00$ctl00$ContentPlaceHolder1$bookings_right_content$butShowMeSomeUnits">
</body>
EDIT
JS Fiddle
If there is any confusion... the JS fiddle I spooled up with the exact code also does not work...
You need to do do on page ready:
<script type="text/javascript">
$(document).ready(function() {
$("#butShowMeSomeUnits").click(function() {
$('#arrowUnitspic').hide();
});
});
</script>
Edit:
The fiddle you provided did not work until I chose jQuery 1.10.1 from the dropdown. You will notice your onmouseover changes the element first, but once you click on the input it does hide the image. Can you verify this works the same for you?
If the answer is no then I don't think you are loading the jQuery library on your page. To check this should work:
if (typeof jQuery != 'undefined') {
alert("jQuery library is loaded!");
}else{
alert("jQuery library is not found!");
}
In addition it might be helpful to see what errors your browser console /dev tools is showing.
Wrap the code in jQuery.ready() event. And also check whether jquery js file is loaded or not.
$(document).ready(function(){
$("#butShowMeSomeUnits").click(function() {
$('#arrowUnitspic').hide();
});
});
You code looks good and works check here
What you might be missisng is either:
to load jQuery script in the head of your page.
to include $(document).ready(function() { //code here }); in case your <img> tags are after the script in the page code. This is so your code loads when page is ready/loaded.
Steps that may help you:
make sure you integrate jQuery lib right. (to check that you might wanna open console on chrome and type $("html").hide(); and see if the current page dissapears)
make sure your custom JS file or code is UNDER the including of jQuery lib.
very good starting point with jQuery is to put everything in $(document).ready() as below example:
$(document).ready(function(){
$("img").click(function(){
$("img").hide();
$(this).show();
});
});
As usual, I want to alert users to unsaved changes when leaving a page. I have this test page:
<html>
<head>
<title>Testing</title>
<script language="JavaScript1.1" src="https://127.0.0.1:8443/scripts/base.js"></script>
<script language="JavaScript1.1" src="https://127.0.0.1:8443/scripts/edit.js"></script>
<script language="JavaScript1.1">window.onbeforeupload=moveAway</script>
</head>
<body onLoad="init()">
Google
</body>
</html>
The moveAway function is defined in "edit.js" like this:
function moveAway ()
return "foo";<br>
}
The event doesn't fire, or at least it just leaves the page silently (using IE8, Firefox 15, and Chrome 20). I've tried breakpointing the function in Firebug and it never gets to the breakpoint. I've tried it from the web server (an SSL server, the test version of which runs at 127.0.0.1:8443) and I've tried opening the file directly with the browser (which is why I used absolute URLs for the first two <script> tags). I've tried removing the "src=" attribute from the script tags.
On the other hand, this page has an example which does work (at least in Firefox):
https://web.archive.org/web/20211028110528/http://www.4guysfromrolla.com/demos/OnBeforeUnloadDemo1.htm
There is also a very similar example at MSDN which also works:
http://msdn.microsoft.com/en-us/library/ms536907%28VS.85%29.aspx
I really can't see the difference between what they do and what I'm doing. can anyone tell me why their code works and mine doesn't?
use jQuery bind function.. it works great for me..
see bellow
$(window).bind('beforeunload', function() {
return "Want to leave?";
});
onbeforeupload , really ? it should be onbeforeunload. Is that a spelling mistake, or is that how your actual code is ?
You have a syntax error, the function should be:
function moveAway () {
return "foo";
}