Page 2 of 6 FirstFirst 1234 ... LastLast
Results 11 to 20 of 56

Thread: Changing background color AND playing a sound file on click

  1. #11
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,167
    Thanks
    44
    Thanked 3,240 Times in 3,201 Posts
    Blog Entries
    12

    Default

    What I asked though is, "Does http://www.pslt.biz/mobileApp/dd/index.html work on your smartphone?" That's the first hurdle. If it doesn't work on the smartphone before Phonegap conversion to an app, it's not likely to work after.

    So try that out and see.

    Now as to this error. On the live page, if I do a "View Source" I see (at the very end):

    Code:
    <!-- WiredMinds eMetrics tracking with Enterprise Edition V5.4 START -->
    <script type='text/javascript' src='https://count.carrierzone.com/app/count_server/count.js'></script>
    <script type='text/javascript'><!--
    wm_custnum='7825ab5d984e9e2b';
    wm_page_name='index.html';
    wm_group_name='/services/webpages/p/s/pslt.biz/public/mobileApp/dd';
    wm_campaign_key='campaign_id';
    wm_track_alt='';
    wiredminds.count();
    // -->
    </script>
    <!-- WiredMinds eMetrics tracking with Enterprise Edition V5.4 END -->
    </body>
    </html>
    Did you add that? If not, the server is adding it. In either case, that might be where the error "can't find the index.html file" is coming from. The only other place I think it could be is our trigger links, which use # as their href. These are supposed to be default prevented, so should not fire. But if something else is going wrong, they would fire and their full href would resolve to:

    http://www.pslt.biz/mobileApp/dd/index.html#

    When do you get the error? Is it when the app loads, or when you tap on a sound? If it's when the app loads, it's probably because of that tracking script. If it's when you tap a sound, it could still be the tracking script, but it might be that Phonegap isn't bringing the required scripts (jQuery, the UI, and/or jPlayer) along when converting or is but the smartphone doesn't recognize a tap as a click.

    So again I must stress that if http://www.pslt.biz/mobileApp/dd/index.html doesn't work on the smartphone, we would need to fix that first. Make sure to test whether it does or does not. Though it could happen that the live page works on smartphone but needs the jQuery mobile script and some tweaking to work after Phonegap conversion. But if the live page doesn't work in smartphone, we need to fix that first.


    Some fine points unrelated to its working or not:

    I was playing around with the layout a little more and discovered that using a <br> between the sounds makes a little more space than really looks good. You could get rid of the <br> and use a spacer div instead:

    Code:
    <a class="spanish" data-trigger="guitar" href="p1rj1s_-_rockGuitar.mp3">Guitar</a>
    <a class="trigger" id="guitar" href="#">Guitar</a>
    <div class="spacer"></div>
    <a class="spanish" data-trigger="cromag" href="TSP-01-Cro_magnon_man.mp3">Guitar</a>
    <a class="trigger" id="cromag" href="#">Cro Magnum Man</a>
    Then add to the style section:

    Code:
    .spacer {
    	height: 5px;
    }
    Just looks better that way. And if you're converting it to an app anyway, you don't need this:

    Code:
    <!--[if lt IE 8]>
    <style type="text/css">
    .trigger {
    	display: inline-block;
    	padding-top: 20px;
    	height: 58px;
    }
    </style>
    <![endif]-->
    Last edited by jscheuer1; 07-21-2013 at 05:31 PM. Reason: detail
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  2. #12
    Join Date
    Aug 2010
    Posts
    67
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi John,
    I tested the website using my droid phone and there was no sound from it - which I think you suspected all along. I did some googling and found this https://groups.google.com/forum/#!to...er/46K2eSFnnac but quite honestly I didn't really understand what they were saying so I'm not sure how relevant it is but there seem to be some jplayer/droid issues. My droid phone is running v4.1.2 of droid.

    The additional code at the end of the page was added by my web hosting company I believe. I have asked them to remove it, it's done at run-time I believe. From googling around it appears they do it for all web sites automatically unless you specifically ask them not to - I really don't like that approach and in any case I use Google Analytics so don't need it. The application error saying it couldn't find index.html has gone away, I'm not sure what the problem was. It now looks the same as the website, but when I tap the screen the background changes to yellow but no sound.

    I've removed the commented code testing for IE8 and I'll make the .spacer change in the next few minutes.

    Just an additional comment, I downloaded an app that changes the background color and plays a brief sound clip so I know it can be done on the droid, but I'm running out of ideas on what to try next. I really appreciate your help with this and your explanations of "why", they help me a lot.

    Regards,

    Tony

  3. #13
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,167
    Thanks
    44
    Thanked 3,240 Times in 3,201 Posts
    Blog Entries
    12

    Default

    OK, well looking at that page you linked to, I don't believe we are doing any of the things it says are bad, I will double check though. We could try using the jQuery mobile plugin. I already setup a demo:

    http://home.comcast.net/~jscheuer1/s...ayer/demo3.htm

    See if that works on your droid.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. #14
    Join Date
    Aug 2010
    Posts
    67
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default that worked

    Quote Originally Posted by jscheuer1 View Post
    OK, well looking at that page you linked to, I don't believe we are doing any of the things it says are bad, I will double check though. We could try using the jQuery mobile plugin. I already setup a demo:

    http://home.comcast.net/~jscheuer1/s...ayer/demo3.htm

    See if that works on your droid.
    Hi John,

    That worked using the browser on my droid. Now I'll create the app and see how it goes. I'll get back to you probably later today.

    Thanks again,

    Tony

  5. #15
    Join Date
    Aug 2010
    Posts
    67
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi John,

    Sorry I've been absent for a few days, life got in the way - mother-in-law broke her hip......

    I tried demo3 on my PC and using the browser on my droid phone and it worked both times. So, I took your demo3, created a version on my PC and uploaded to a website at www.pslt.biz/mobileApp/dd3/index.html . This worked when I used my PC, using both IE and Chrome. When I used the browser on my droid phone the sound didn't play, but the text/ graphics showed correctly and responded to a tap - although the yellow background stayed yellow after a tap until I tapped again. The only changes I made to demo3 were to the name of the sound file and the spacing for my speaker image. I created my version twice just in case I did something wrong and had the same result both times. I just don't understand why your demo3 worked on my droid browser and mine didn't......

    I'm not sure how relevant this is as it relates to the app rather than just using the droid browser but before I started corresponding with you I had gone back and forth with phonegap tech support and was able to get the sound working on my app, phonegap said I should use their api - phonegap.js which I did. Unfortunately I can't test that on my PC as the link and the js file are added by phonegap when they create the app - there's a different js file depending on which phone is the target environment apparently.

    Thanks again for your time and any suggestions you may have.


    Regards,

    Tony

  6. #16
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,167
    Thanks
    44
    Thanked 3,240 Times in 3,201 Posts
    Blog Entries
    12

    Default

    You have no test.ogg file, the tracking code is there again and appears to interfere in some browsers by causing an error, you copied my favicon link, you don't need or want that, it could be causing problems. In Opera I was informed that a security certificate for the page had expired and was asked if I wanted to see the page anyway.

    For the .ogg file, either make one as I mentioned before, or comment (red two places) that part out:

    Code:
              $(snd).jPlayer("setMedia", {
                mp3: snd.href//,
                //ogg: snd.href.replace(/\.mp3$/, '.ogg')
              });
    Commenting it out will not help droid if droid requires a .ogg file, but it probably doesn't need one.

    Get rid of the favicon link (near the top):

    Code:
    <link rel="shortcut icon" href="http://home.comcast.net/~jscheuer1/favicon.ico" />
    And do what you can to remove the tracking code:

    Code:
    <!-- WiredMinds eMetrics tracking with Enterprise Edition V5.4 START -->
    <script type='text/javascript' src='https://count.carrierzone.com/app/count_server/count.js'></script>
    <script type='text/javascript'><!--
    wm_custnum='7825ab5d984e9e2b';
    wm_page_name='index.html';
    wm_group_name='/services/webpages/p/s/pslt.biz/public/mobileApp/dd3';
    wm_campaign_key='campaign_id';
    wm_track_alt='';
    wiredminds.count();
    // -->
    </script>
    <!-- WiredMinds eMetrics tracking with Enterprise Edition V5.4 END -->
    It's at the end, but I assume that, as before, it's being added automatically by the server.

    Taking care of all of that may fix the security certificate problem, or it may not. If it doesn't, there's something wrong with your host's security certificate for your domain. Most likely that's coming from the tracking code, as it's the only secure https content on the page. But it might be something else.

    Since you say it worked on the local computer, I'd say the tracking code is the biggest potential culprit.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #17
    Join Date
    Aug 2010
    Posts
    67
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi John,
    Thanks for your comments. I was able to stop the tracking code being added. I made the other changes you suggested, it worked on my PC and no sound on my droid phone. So, I created an ogg version of the test.mp3 file using Free Studio Manager (thanks for the referral to this very handy utility) uploaded it and added back the JS dealing with ogg files. Again it worked on my PC but still no sound on my droid phone. This really is very strange, is there anything I can do to debug on my smart phone? Here's the web page http://www.pslt.biz/mobileApp/dd3/

    Thanks so much for your help with this, I'd be tearing out what little hair I have left trying to figure this out on my own!

    Tony

  8. #18
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,167
    Thanks
    44
    Thanked 3,240 Times in 3,201 Posts
    Blog Entries
    12

    Default

    Well retest my demo in droid:

    http://home.comcast.net/~jscheuer1/s...ayer/demo3.htm

    Make sure it's still working.

    If so, I can see no reason for the problem with your demo, except perhaps that droid has cached it. But if it's an entirely new page and hasn't changed, that shouldn't be a problem. But it did change from when you added the ogg file. So that might be it. If so, make up an entirely new page with everything just like it is on your latest demo and try that. Clear the droid cache and keep your fingers crossed.

    Oh, and other things different are:

    The host

    The css

    The image

    The sound file and the fact that you're using the same sound file for both sounds

    I don't think that any of these could matter. One or more might. When I have more time, I will try hosting it with your page and sound(s) on my site to see if it's the cache or perhaps the host that's the problem. Droid may have cached at some point the ogg file as a 404 Not Found, or the tracking code might be cached on droid. It's hard to say. Can you do a view source in droid? If so, see what it looks like - are all of the latest changes there? Is the tracking code absent?
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  9. #19
    Join Date
    Aug 2010
    Posts
    67
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi John,

    I tested my site with a different droid phone with the same results so I don't think it's a cache issue. I don't think you can do a view source on an android - at least I couldn't find it, but I do know the tracking code has been removed. I agree that none of the other changes seem likely to cause this problem, however I'll create a second sound file and try that.

    I can send you a zipped version of the site so you can try hosting, although I didn't see how to attach a file to a message, should I email it to you? Perhaps you could also email me your site and I can try it on my host. If it works unchanged I'll use that as a starting point and try adding my images, text and sound files one at a time and see if any of them break it. My email is tonybab AT alejandra.net .

    One more thing I'll try is to go back to the original app that plays a sound when running as an app on the droid(ie after phonegap conversion). I'll try merging your code that changes background color with this app that plays sound - assuming I can figure it out.

    Regards,

    Tony
    Last edited by jscheuer1; 07-31-2013 at 04:25 PM. Reason: Format

  10. #20
    Join Date
    Aug 2010
    Posts
    67
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi John,
    Just a quick update - I added a second sound file in mp3 format and converted it to ogg. Same result as before - works on the PC but no sound on the droid. http://www.pslt.biz/mobileApp/dd3/index.html

    Tony
    Last edited by tonybabb; 07-31-2013 at 01:30 PM.

Similar Threads

  1. Problem playing sound file in Opera !
    By spazzer in forum HTML
    Replies: 1
    Last Post: 03-11-2010, 02:51 AM
  2. Button sound for Rollover background-color buttonuttons
    By egghead2000 in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 02-03-2010, 11:14 PM
  3. Changing Text and Background Color
    By Steve Wilbanks in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 01-16-2010, 01:10 PM
  4. tab menu item color not changing on click
    By ashok_kuncha in forum CSS
    Replies: 0
    Last Post: 08-14-2007, 10:41 AM
  5. Swith Content: Changing background-color
    By abbeyvet in forum Dynamic Drive scripts help
    Replies: 5
    Last Post: 05-08-2007, 03:42 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •