How do I properly update JWPlayer from 6.x to 7.2.4 - embed

In the previous version of JWplayer 6.12, the following worked flawlessly.
<div id="video_0">Loading player</div>
<script type="text/javascript">
<!--//--><![CDATA[// ><!--
jwplayer('video_0').setup({
file: '/assets/super-cool-funtime-rah-rah.mp4',
image: '/assets/super-cool-funtime-rah-rah.jpg',
width: 600,
height: 338
});
//--><!]]>
</script>
<script type="text/javascript" src="/jwplayer-6.12/jwplayer.js"></script>
However, upon downloading and unzipping 7.2.4, I attemtped the above. I changed only the version of the JWPlayer that was called.
I've run into a few minor problems:
clicking the video no longer starts it
various icons are missing
My code does not seem so different that what is exampled from their site. What am I missing? How do I properly construct the above code, allowing it to play with 7.2.x?

Your code looks fine. The issue is likely with how you are hosting the files. Make sure all the contents of the zip are added to the folder where you host jwplayer.js.
What happens if you change the script location to use our CDN? This way you don't have to download any zips or host the player assets yourself. It's also a lot clearer which version you are using:
<script type="text/javascript" src="//ssl.p.jwpcdn.com/player/v/7.2.4/jwplayer.js"></script>

Related

Smooth Scroll Not Working using JQuery in Shopify Theme Debut

I can not get smooth scrolling using JQuery working in Shopify theme Debut.
I have added the following code above the </body> tag in the theme.liquid file
<script>
$(document).ready(function() {
$('.smooth-scroll').on('click', function(evt) {
evt.preventDefault();
$('html, body').animate(
{ scrollTop: $($(this).attr('href')).offset().top},
300
);
});
});
</script>
The HTML jumps to the correct div id, however, no smooth scrolling is present.
Website: https://bunc.bike/pages/test
Is anyone able to explain what I am doing wrong?
Thanks.
I see that you're including jQuery in your theme via the vendor.js file. That file is inluded via a <script> tag with a defer="defer" attribute.
From javascript.info:
The defer attribute tells the browser that it should go on working with the page, and load the script “in background”, then run the script when it loads.
I suspect that if you either:
Included your code snippet in the question in your vendor.js file, OR
Removed the defer="defer" attribute from the vendor.js file's <script> tag
You'd be scrolling very smoothly indeed.
I've proved my thesis with this little gif. The reason it works AFTER I paste your code into the terminal, is because the browser has parsed and loaded the vendor file, and jQuery is available in the browser's js environment.

Mathjax templates dont work on local computer

I have started to use Mathjax to develop a desktop app. I have found a very nice collection of examples and templates at: https://www.tuhh.de/MathJax/test/examples.html
However, whenever I download the HTML code of these files (with Ctrl+U) and copy it into a Notepad++ file (with .html suffix), they don't work on any local computer i have tried so far.
Just replace the relative path :
<script type="text/javascript" src="../MathJax.js?config=MML_HTMLorMML-full"></script>
to
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=MML_HTMLorMML-full"></script>
(see here to choose a cdn : http://docs.mathjax.org/en/latest/start.html)
or download the js files to embed them localy.
I tried the Ctrl+s with several computers and browsers, but it also doesn't work even when i change the source. I am explicitly interested in the following code: https://www.tuhh.de/MathJax/test/sample-dynamic.html
Here, the webpage can dynamically give an output in the MathJax format.

CSS DROPDOWN MENU not working from WEBsite but OK on developer machine [duplicate]

I downloaded the barebone example of Twitter's bootstrap and customized it. I tested it locally (with WAMP server) and everything works perfectly, both the CSS and the JScript.
I uploaded the files to my webhosting service and the JScript just doesn't work. I noticed it because dropdown boxes stopped working.
I searched and found other persons with the same problem but they all are using ruby and I'm not. Just the play CSS+JScript provided by bootstrap. Besides they said the solution was to include the bootstrap.js first and then the jquery.js. Well I tried it and it didn't work, I even included the not minified .js and still it didn't work.
I'm using the same browser (Chrome) for local and remote testing. I also tried different hosting services and the problem occurred in both.
Help is much appreciated.
Other similar questions:
Javascript features work on localhost but not when deployed to Heroku
twitter bootstrap drop down suddenly not working
The issue might be that you load boostrap.js before jQuery. Locally your browser may be using a cached copy of Jquery, so it works there but not on your live site. Try fixing it by switching those two lines in your code:
<script src="/code4pt/styles/js/bootstrap.js"></script>
<script src="/code4pt/styles/js/jquery.js"></script>
I know this is very strange but I think I got the solution. Previously I was using the (supplied) jQuery 1.7.2 minified. Now I changed it to use the jQuery 1.8.0 not minified. It just started to work... Another thing I did was to convert all files' encoding to UTF8 (I think this was the real problem/solution)
I had the same problem. In IE, the site was working on localhost but not when hosted on a different server. Adding the following meta tag fixed it.
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
I had the exact same problem, so was relieved to find this post and others like it. My resolution was similar. I pulled my hair out for half a day trying all different things. Walked the dog. Had half a dozen beers. Slept on it. Had breakfast. Recopied back the stylesheets at top, and the js from the bottom from the local html to the server php, and then for some unknown reason it started working again. The only points which seem useful for others going through the same:
Try and get back to a working scenario - in my case the index.html was working on the server but not the index.php. Getting these the exact same was key.
Try on different browsers just in case something strange is going on.
Make sure you keep clearing the browser cache (e.g. right click on the reload button in Chrome and choose 'Empty Cache and Hard Reload')
Inspect your bootstrap css and js versions. Change them forward and backward in version until you get success. Chances are, the version that came with your bootstrap theme download is the most likely one to work.
I was having simular issues before. The tabs function was working fine in my HTML site, but would not work when coded into a Wordpress theme. All of the source URLS were being generated dynamically with Wordpress's .
The tabs finally began working when I added all JS links (except for Modernizr into the footer instead of the header.
Back to basics: If Debug is set to true on the local machine and false on the deployment environment as it should be, make sure your .min.js files are not overriding customizations you have made to the non-minified versions of .js files (applies to .css as well).
You can also turn Debug off on the local machine and you should see the same issues.
Late to the party but I found out that my issue was that the Bootstrap.js was not being pushed out during deployment.
In addition to the very useful suggestions by #dialex and #Darrell , I will add that if none of that works, you can review any code that you might be linking to, ie. via require ('page.php');, for duplicates. Duplicated .js links tend to cause these issues.
I ran into this on a site I built and uploaded to Amazon S3. Worked fine on my local machine and even my local server, but didn't work when served from Amazon. The console in Firefox (but not Chrome) showed it was failing to load bootstrap.min.css (et. al) because their MIME type was not text/css.
I had to use the S3 console to force change their types to text/css, clear caches, and reload. Voila!
I'm using Codeigniter. I solve these issues by changing my base_url in config.php.
Previous :
$config['base_url'] = 'http://localhost/public_html';
Changes to :
$config['base_url'] = 'http://(my intranet server ip adress)/public_html';
Had the same problem
In my .html files I had this line
<link th:rel="stylesheet" th:href="#{/webjars/bootstrap/4.0.0-2/css/bootstrap.min.css} "/>
After changing it to this
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
Everything works fine. I guess that internally webjars have http and changing css link to start with https solved my problem

Mathjax equations displaying 3 times (Jekyll)

I created a website using Jekyll and added MathJax support like so:
<script type="text/x-mathjax-config">
MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
</script>
<script type="text/javascript"
src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
in the _layouts/default.html file.
and I have a *.md file in _posts with
---
layout: post
title: 1st post
---
<div class="Math">
$$y=x^2$$
</div>
Hello
The equation appears 3 times when I view it in Chrome on my laptop, but it only appears once on Chrome for Android. The site can be seen here: http://texasflood.github.io/
How can I make the equation appear only once?
EDIT:
OK, the problem suddenly disappeared - I don't know why. The strange thing is when I reverted to older commits where the problem was originally not present, the equations were still appearing multiple times, so I don't think it's my actual code. Could anyone shed some light onto this?
A new version (2.5.1) of MathJax was released this morning, and there was a glitch with the file transfer, so the CDN was temporarily left with mixed versions, which caused the tripling of mathematics in some configurations. Your code is not at fault. The issue should be resolved at this point, so if you are still having the problem, try clearing your browser cache and restart the browser. If the problem persists, please report it on the MathJax Issue tracker. There is already an issue there that you could use.

Another Firefox relative path conundrum

Ok.
So I know this is probably a stupid question, but I've been traversing SO and Google for the last many hours for an answer and found nothing.
I'm currently creating a HTML5 mobile app using JQM 1.2.0 and Google Maps js V3 - just to set the context.
My problem occurs when I try to test the page in FF 18 desktop version. In every other browser, be it mobile or desktop, I'm not having any problems. Also, I have tried on both localhost as well as the server I'm deploying to, and it's the same result.
In my HTML file I have a relative link to css and js files:
<script src="js/general.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/mobile.css"/>
while my links to JQM etc. are absolute as I use a CDN:
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
When I use Firebug, I can see that the files with a absolute path are loaded fine, while the relative path links are ignored - or at least I think so, as nothing shows up in neither the Console or the Net pane.
When I check the Html pane in Firebug, it appears as if it has included a tag pr default (with the correct URL), but not if I try to view page source using the regular FF methods. Even though, I have tried to include a explicit base tag to my header and it changes nothing.
So, to sum up: relative path works fine in all browsers except FF, it it happens on both my server and localhost.
Update:
Tried moving the files to the root dir, but it didn't help.
Also, when trying to view the content of the js or css file in Firebug (pressing the arrow to the left of the tag in index.html), it just says:
Reload the page to get source for: http://localhost/~u040800/app/general.js
which, of course does not change after reload.
Nevermind - stupid mistake on my side!!
Note to self: when developing, do make sure that your add-ons are disabled before asking SO! otherwise, you make a complete ass of yourself!!
Yes, it is correct - I forgot to disable Ad-Blocker...
#robertc: Sorry to have wasted your time.