In jqtouch, I'm calling several pages using ajax, in very vanilla fashion:
<li class="arrow"><a href="folder/another/somepage.html" >BRAVIA HDTVs</a><small class="counter">2</small></li></li>
I'm trying to use a video player (sublime player) on the remote pages. In order to do that, I use the js provided by sublime: //script type="text/javascript" src="http://cdn.sublimevideo.net/js/something.js">
Then on my remote pages, to play the video I just put the code in a video class, which is defined by the js.
When I put this script in the head of my index page, things work great on iOS devices. But the videos won't play in Android - the javascript isn't being called. I can only play the video if I put it on the main index page, rather than the remote pages.
Any help? Speak to me like the village idiot, please - thanks -
Which version of jqTouch? The Beta 2 (also known as version 109) linked to on their home page is broken with Android, get the lastest version from GitHub for the best android support. Note: look at the demo for how the formating of html changed between 109 and 161.
jQtouch 1.0-b4-rc does not work with Android when using jQuery. The internal links in your site won't work. You have to use Zepto for it to work with Android.
Related
I have a WordPress installation and I share some links like the following to students watching courses - presentations online.
https://emgncv.net/wp-content/uploads/2020/10/108_I_Interpretation_Case_Study.mp4
The big issue that I am facing here is that I want to find a piece of code (probably Javascript or Jquery) to add "On document ready" so when students load the presentations on their browsers not being able to download the video from the 3-dots menu on the right bottom corner of the media player. Please, view the screenshot attached.
For the records, I have noticed this only on Google Chrome and Microsoft Edge. Mozilla does not offer such a download option.
What I have already tried is the following:
$('video').attr('controlsList', 'nodownload');
FYI, I have placed this code in a section where my WordPress theme provider lets me add some custom JS code. The section works pretty fine. I have already implemented others functions and everything works properly.
Do you have any ideas on what I will need to look at to achieve the following by default when my students load their courses on browsers?
Thank you so much in advance,
George.
I'm fairly competent with HTML and am working with Bootstrap for the first time, but I can't seem to get the mobile collapsible menu working on Chrome on the desktop (and presumably some other browsers).
Safari on iOS 7 with default mobile responsiveness shows the menu fine when clicked, but nothing happens when you click it in Chrome on the PC when the browser is resized to a mobile-like width.
Sorry if it has been said before - just went through the code and couldn't really understand why it wasn't working! :(
First time on SO and can't figure out how to put my HTML in here, so here it is.
Thanks peeps :)
You have linked jQuery from Google CDN and hosting your website from Dropbox. Dropbox does not allow external linking of script and font files.
So you are getting an error on your page:
Host the jQuery file on your website and link (internal linking). Like for example put jQuery in JS folder and link:
<script src="js/jquery.min.js"></script>
Problem will be gone. Hope this helps!
Issue
I have a strange issue with jQuery Mobile wrapped in Phonegap on iOS. My app consists of two pages, the second page being AJAX-loaded. On both pages I have images with a relative source like this
<img src="../images/myImage.png" />
On the first page, the image is displayed correctly. On the second page, the image is not found.
Explanation
I checked the src of both images with Weinre. It seems like Phonegap uses the data-url of the jQuery Mobile page div as prefix to the relative source. This works on page 1
file://path/to/app/html/../images/myImage.png
but not on page 2
file://path/to/app/html/page2../images/myImage.png
Why does Phonegap use the data-url on iOS?
Environment
What confuses me is that this problem only occurs in iOS Phonegap. It works fine in any browser and in Android Phonegap. It is a very basic "Hello World" like app with a standard jQuery Mobile page.
Solutions
I tried using the base tag, didn't work. I tried setting up the project again from scratch, didn't work. Any ideas?
I found the answer myself. Apparently jQuery Mobile identifies linked resources as external, if they don't have a file name suffix like ".html". My files were named without any suffixes.
I've successfully integrated Flowplayer into my Drupal installation using the video and flowplayer. I upgraded flowplayer files to the latest release 3.2.7 and all works ok, but not on iPad - iPod Touch.
I loaded the js for the iPad plugin in the Flowplayer module like this:
drupal_add_js(drupal_get_path('module', 'flowplayer') . '/flowplayer/example/flowplayer.ipad-3.2.2.js');
and I see that it is loaded fine.
then in Flowplayer js I had this line
$(selector + ':not(.flowplayer-processed)').addClass('flowplayer-processed').flowplayer(settings.basePath + settings.flowplayerSwf, config);
I changed this in this way:
//I added the first line because in the example it worked that way
$(selector + ':not(.flowplayer-processed)').attr('url', config.clip.url);
$(selector + ':not(.flowplayer-processed)').addClass('flowplayer-processed').flowplayer(settings.basePath + settings.flowplayerSwf, config);
//then i add ipad support (the selctor is hardcoded to maike things work)
$f('flowplayer-video').ipad();
In this way, on my iPod touch (I think it's the same on iPad) I see the player but the video doesn't start (there is some kind of blocked overlay).
You can look at the site here
EDIT - now i got it working thanks to teddy suggestion. now i'll try to find out how to setup my script so that it returns byte-range headers.
If anyone knows how to do this, please post here.
The server that serves the actual MP4 video to the iPad must support the HTTP header called byte-range.
I would try using an alternate video source from another server, as a proof-of-concept to see if this is the cause of the problem.
Here is an MP4 video served with the byte-range header: http://mediaelementjs.com/media/echo-hereweare.mp4
I'm using jQuery on a client's vCard site - http://chrismward.com/beta - to switch between pages.
It all works great on the computer, but when I try on my iPhone: no dice.
I'm using jQuery 4.0 and here is the only js file I'm using on the site (other than jQuery from the Google CDN) - http://chrismward.com/beta/resource/js/main.js
If anyone can help me, I'd greatly appreciate it.
Thanks,
-Giles
Regular JavaScript animations (using setTimeout/setInterval) don't work very well in Mobile Safari; you need to use CSS Animations to get decent results. You might want to try creating an iPhone-optimised version of the site using jQTouch (which uses CSS animations).
They appear to work fine in the iPhone Simulator. Which means, if they are too slow on an iPhone, they are just too slow. Use CSS animations like Steve Harrison suggests. You probably want the -webkit-transition property. Here's an example you can try.