Looking for some help on javascript conflicts??

[colletteuk]

Hi,

I am hoping someone here can help me. I have a responsive website built and use flowplayer script to play embedded videos on my site and I use html5lightbox for links to play videos in a lightbox. It works great cross platform except on android tablets.

I have attached picture to show what I mean hopefully that will work. It appears that there is an overlay of a button which will not go away. Here are the scripts I have currently on my site:

<script src="../scripts/jquery.min.js" type="text/javascript"></script> 
<script src="../scripts/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="../scripts/default.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<!--html5lightbox-->
   <script type="text/javascript" src="../scripts/html5lightbox/html5lightbox.js"></script>

   <!-- include flowplayer -->
   <script type="text/javascript" src="../scripts/flowplayer-5/flowplayer.min.js"></script>
   
<script src="../email/validation.js" type="text/javascript"></script>

I wish I had the knowledge to write my javascript but unfortunately my knowledge is very limited and would be grateful if anyone could advise me on best thing to do and if it is a issue with the javascript.

Thank you in advance

mod's note

If you post a comment or create a new thread and it does not appear right away, please do not post again.

Sometimes, legitimate posts get caught in our spam filter.
Be patient; we will review and approve your post promptly (it usually doesn't take more than an hour or so).
Posting again only creates more work for us and delays this process.

[Beverleyh]

There's not much we can do with what you've posted - we'd need a link to the actual page to check out the scripts first hand.

Maybe what you could do in the meantime is locate the image that is being inserted. Is it something that comes as part of the download packs for the scripts you are using? It will most likely be a png file to account for transparency. Check your files for the actual image but also for references to it in CSS and javascript files. You might also find it hardcoded in to a CSS file as a data uri.

Try the developer toolbar under f12 (pretty common for most browsers) and use the "inspect element" feature to see if that brings anything up. You can Google for further help on the browser you're using. It might not be much use on desktop but then again, there might be an empty placeholder or at least a class or id you could look for in the scripts and stylesheets.

Another thing you could do it to check the source websites for demos and watch the video samples provided there. Does the same button appear on Android in the source environment? If so, maybe you could contact the developer? If not, try downloading the scripts again and setup very basic test cases to check for the presence of the icon. Do this with all the scripts you are using until you find out where its coming from.

If you need more help please provide a link and describe exactly what investigations you make yourself.

[colletteuk]

Thank you for your reply Beverleyh,

First apologies for trying to post the post twice I wasn't sure I had click the button, it wasn't until I did it the second time when the flash screen came up and I read it.

I didn't think anyone would have much to go on without looking at my scripts. Unfortunately the website that is being built is restricted and I don't want to put a link on a open forum for it. If anyone is happy to help me have a look at the scripts then I can private message the link if you can do that?? I am willing to learn but I have now tried my best for the last 2 weeks.

I did have a quick look in the web inspector but then again like I say I am a novice when it comes to scripts.

Thank you for trying to help, I will look at your other suggestions.

[colletteuk]

Now have a link to website where you can see the issues. Like I said it works fine cross platform except on androids where you get an overlay of a play button. It looks as though android is loading its default player on top of html5lightbox player and the html5lightbox button remains on the screen or should I say the overlay. I don't know where in the code this would be so would be very very grateful if someone could have a look for me. I have also looked at other light boxes but I just can't to find one that will do media.

Thank you in advance:

http://www.macwebblocks.com/test/notworking.html

[Beverleyh]

But the script still works and the video still plays right? I'm not sure there's anything that can be done to alter the behaviour of the default player in Android via a web page - or maybe install another player and set that as default to see what happens. Or install another browser to compare behaviour. I'm only speculating now though because I don't have access to an Android device. From the Flowplayer forums, it seems to have been mentioned before and only in some versions of the Android OS. If I were you, I would ask the Flowplayer developers directly.

[colletteuk]

Thank you for looking at it for me, much appreciated. I think it is an Android issue as it doesn't matter what browser you use on the tablet it still does it and think you are right in that it is os specific. I am sure they will bring out an update, will just have to learn to code my own lightbox but thank you for your help.