Page 3 of 6 FirstFirst 12345 ... LastLast
Results 21 to 30 of 56

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

  1. #21
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,190 Times in 3,154 Posts
    Blog Entries
    12

    Default

    OK, well you don't need view source in droid to check about the tracking code. Any browser will do for that. I just looked in Opera, and the tracking code is not there. I suppose it is possible that the server somehow detects droid and adds the tracking code for it, or detects touch devices and does something different for them, maybe even something intended to be helpful for touch devices, but that's not in this case.

    Anyways, it's easy to attach files here. But first you need to be in the advanced editor. To do that hit the 'Go Advanced' button located to the bottom left of the quick reply editor, between the 'Post Quick Reply' and 'Cancel' buttons. Once in the advanced aditor, there are a lot more icons above the editiing area, one of them is the attach file icon, it looks like a page with a paper clip next to it. But they're tiny, so if you don't see it, just hover each one to see what they do, they each have tool tips.

    But there are file size limits so it might not work with those sounds included. The file would probably be too big.

    So I will email you mine. I don't need your's unless mine doesn't work on your server.
    - John
    ________________________

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

  2. #22
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,190 Times in 3,154 Posts
    Blog Entries
    12

    Default

    Ah, there's a missing ajax-loader.gif image, I guess from the mobile css. It might or might not be important, I'm really stacked today, later I will find it and find where to put it. Also, I just discovered that in Opera at least, the favicon has somehow been cached for your domain. That's off site from your host, might be an issue.

    As I say, I'm very busy. Later on or over the next few days I will look into these issue more closely.
    - John
    ________________________

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

  3. #23
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,190 Times in 3,154 Posts
    Blog Entries
    12

    Default

    OK, I got some time. The ajax-loader.gif is used by the jquery.mobile-1.3.2.min.css file for markup created by the jquery.mobile-1.3.2.min.js file. So it (the loader image) probably needs to be hosted on the domain with the rest of the files. It's expected to be in a folder named images. I think the reason this caused no problem on my server is that it gave a 302 File Found for the image because of sophisticated handling of missing resource files, whereas yours is giving a 404 Not Found - the more typical reaction in this sort of situation.

    Anyways, I took care of all of that in the latest demo:

    http://home.comcast.net/~jscheuer1/s...emo4/demo4.htm

    Make sure it works on your droid before proceeding.

    If that checks out, you may download it (right click and 'Save As'):

    http://home.comcast.net/~jscheuer1/s...emo4/demo4.zip

    Set that up in it's own folder on on your server and see what happens.
    - John
    ________________________

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

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

    Default

    Quote Originally Posted by jscheuer1 View Post
    OK, I got some time. The ajax-loader.gif is used by the jquery.mobile-1.3.2.min.css file for markup created by the jquery.mobile-1.3.2.min.js file. So it (the loader image) probably needs to be hosted on the domain with the rest of the files. It's expected to be in a folder named images. I think the reason this caused no problem on my server is that it gave a 302 File Found for the image because of sophisticated handling of missing resource files, whereas yours is giving a 404 Not Found - the more typical reaction in this sort of situation.

    Anyways, I took care of all of that in the latest demo:

    http://home.comcast.net/~jscheuer1/s...emo4/demo4.htm

    Make sure it works on your droid before proceeding.

    If that checks out, you may download it (right click and 'Save As'):

    http://home.comcast.net/~jscheuer1/s...emo4/demo4.zip

    Set that up in it's own folder on on your server and see what happens.
    Hi John,
    It seems to be something to do with my server. I tried demo4 on your server using my PC and the droid phone and both worked. I then downloaded demo4, unzipped and uploaded to my server. It worked on my PC and no sound from my droid phone. The site on my server is here http://www.pslt.biz/mobileApp/demo4/demo4.htm .
    I have uploaded a zip of my previous dd3 test, this doesn't include the ajax gif changes but as your demo3 worked on your server using my PC and the droid phone this ought to work too when I try it. It can be found here http://www.pslt.biz/mobileApp/dd3.zip

    Thanks so much for your very patient mentoring with this.

    Tony

  5. #25
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,190 Times in 3,154 Posts
    Blog Entries
    12

    Default

    I uploaded your demo to my server:

    http://home.comcast.net/~jscheuer1/s...s/jplayer/dd3/

    If you have Chrome or Firefox on your droid, I've see here:

    http://android.stackexchange.com/que...ndroid-browser

    that you can type this in the browser's address bar:

    view-source:http://www.pslt.biz/mobileApp/demo4/demo4.htm

    to see the served source code. But that, of course would only be as seen by those browsers, your host might work on droid in those browsers. But if it doesn't it could provide a clue.

    It might even work with android's native browser (Safarir, right?) that's a lot like Chrome. If not, I'd try Chrome, as it's the closest to Safari.

    The bottom line here though is that it's obviously something about your server Just what that might be, I'm not sure. It might be something about how you're uploading to your host, how are you doing that? A view source in droid might help. What would help more are diagnostics, something like Chrome's native developer tools where you can (among other things) see what resources are being loaded and what if any script errors there are, and what the DOM looks like after scripts have acted upon it. In normal Chrome we can access all that by hitting the F12 key, or by activating the "Customize and Control" menu (upper right hand of the browser) and choosing (hovering) Tools, then clicking on Developer tools.

    If you can do that, we could get more diagnostics.

    But I'd say try a different host.

    I have one or two that I have access to that I could upload something like this to just as a test. But we need to get this working for you on some domain you have access to. So the better test for you would be to try other hosts, not me. Out of curiosity, how are you uploading to your host? Is it via FTP or is it some host provided interface?
    Last edited by jscheuer1; 08-01-2013 at 04:51 PM. Reason: clarity
    - John
    ________________________

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

  6. #26
    Join Date
    Aug 2010
    Posts
    67
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi John,
    Sorry I've been missing for a couple of weels but I'm back now.

    So, I followed your advice and have a new server hosted by godaddy. I uploaded demo4 and it works on my PC and using the browser on my droid phone. It can be seen here www.lawenforcementspanish.com/demo4sp/index.html .
    So next step was to convert this to run as a stand-alone app. I had to make a couple of changes - used my smaller sound files and renamed demo4.htm to be index.html . Then I zipped the website and uploaded to PhoneGap Build which should package it as a stand-alone app. When I downloaded to my droid and launched it, it failed saying it couldn't find index.html - which I know is there so I have a request for tech support in to their forum although from past experience they can take several days to respond. UPDATE - I downloaded again and this time it installed and ran, although it didn't play any sounds. I think PhoneGap and jPlayer have issues getting along from looking around the various forums.

    In the meantime I tried the Intel XDK toolkit which should do the same as PhoneGap Build. It took me a while to figure it out but the bottom line is that it works on my droid when using Intel's app-lab as a test environment. I still need to try and understand exactly what I'm seeing with Intel XDK/ app-lab but for now it seems to be working. One thing I noticed with both the PhoneGap created app and the Intel XDK created app is that the speaker icon doesn't show up with either version of the app. Could it be something to do with defining the gif image of the speaker in CSS?

    Thank you so much for your help with this, I'll try fixing the speaker display problem and familiarizing myself with Intel XDK. Maybe I'll even hear back from PhoneGap support.

    Tony
    Last edited by tonybabb; 08-16-2013 at 10:16 AM.

  7. #27
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,190 Times in 3,154 Posts
    Blog Entries
    12

    Default

    Well, I looked at the PhoneGap home page and it says that it takes ordinary javascript, css, and HTML, turning them into an app, so one would think the css image would be OK. I suppose that we could use a regular image. But getting it to layout as well as it does using it as a background image is tricky. I tried a few quick things, but I cannot retain the ability to have longer text wrap and be centered vertically visa vis the image, one or the other, but not both. With your image, which is about the height of a line of text, one or the other of those (no vertical centering) might be OK though:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>jPlayer Demo 6 w/jq-mobile</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">
    .wrapper {
    	margin: 8px;
    }
    .trigger {
    	display: block;
    	padding: 3px 5px;
    	background-color: transparent;
    	width: 255px;
    	text-decoration: none;
    	font: bold 95% verdana, helvetica, arial, sans-serif;
    	border-radius: 15px;
    }
    .trigger img {
    	vertical-align: middle;
    	height: 78px;
    	width: 105px;
    	float: left;
    }
    .spacer {
    	height: 5px;
    	clear: left;
    }
    </style>
    <link rel="stylesheet" href="jquery.mobile-1.3.2.min.css">
    <script src="jquery.min.js"></script>
    <script src="jquery.mobile-1.3.2.min.js"></script>
    <script src="jquery-ui.min.js"></script>
    <script type="text/javascript" src="jquery.jplayer.min.js"></script>
    <script type="text/javascript">
    jQuery(function($){
            var highlight = 'yellow', origcolor = 'transparent';
    	var $s = $('.spanish').each(function(i, snd){
    	$(snd).jPlayer({
            ready: function() {
              $(snd).jPlayer("setMedia", {
                mp3: snd.href,
                ogg: snd.href.replace(/\.mp3$/, '.ogg')
              });
              var playstop = function (e) {
                e && e.preventDefault();
                var $this = $(this);
                if(!$this.data('play')){
                	$this.stop(true, true).css({backgroundColor: highlight});
                	var $playing = $('a[data-playing="true"]');
                	if($playing.length){
                		$playing.trigger('tap');
                	}
                } else {
                	$this.stop(true, true).animate({backgroundColor: origcolor}, 1000);
                }
                $(snd).jPlayer($this.data('play')? "stop" : "play");
                $this.data('play', !$this.data('play'));
                $this.attr('data-playing', $this.data('play'));
              };
              $('#' + this.getAttribute('data-trigger')).tap(playstop);
            },
            ended: function(){
            	$('#' + this.getAttribute('data-trigger')).attr('data-playing', 'false').data('play', false).stop(true, true).animate({backgroundColor: origcolor}, 1000);
            },
            swfPath: "./"
          });
         });
        });
    </script>
    </head>
    <body>
    <div class="wrapper">
    <a class="spanish" data-trigger="guitar" href="p1rj1s_-_rockGuitar.mp3">Guitar</a>
    <a class="trigger" id="guitar" href="#"><img src="speaker3.gif" alt="original image" title="">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="#"><img src="speaker3.gif" alt="original image" title="">Cro Magnum Man Cro Magnum Man Cro Magnum Man Cro Magnum Man</a>
    </div>
    </body>
    </html>
    Note the image dimensions are set in the style section, change these to your own image's dimensions.
    - John
    ________________________

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

  8. #28
    Join Date
    Aug 2010
    Posts
    67
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi John,

    I figured out why the image of the speaker is not being displayed in the background of the div after running the webapp through the Intel XDK. It turns out that the Intel XDK didn't like the url "../demo4sp/audio-30.gif" but it was OK with "audio-30.gif" even though both were pointing to the file in the same folder as the index.html file. The result can be seen here http://www.lawenforcementspanish.com/demo4sp

    So, my next step will be to transplant this working code into my jQuery Mobile app. Actually I tried already and it's not working, I'll try and figure out what's wrong. Thank you so much for your patience and support. The learning curve continues to be really steep but I couldn't have got where I am so far without your guidance.
    Regards,

    Tony Babb

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

    Default

    Hi John,
    Sorry to have to reach out to you again.

    The app is supposed to change the background color and play a sound file when clicked. The working version is here http://www.lawenforcementspanish.com/demo4sp and I transplanted this working code into my webapp http://www.lawenforcementspanish.com/mle which contains some of the final content I'll be using - English/Spanish phrases. I added the working code to the "Age/Weight/Height" page. My thought was to get these two test links/ files working and then I can wrap the working code around the various Spanish expressions on each page. I have spent several hours trying to figure out why the transplanted code doesn't work - there are two problems:
    The image of the speaker doesn't display
    The sound doesn't play

    I copied all the CSS and JS files and the SWF file and included the links so I really don't understand what's going on here. Any assistance would be greatly appreciated.

    Thanks and regards,
    Tony Babb

  10. #30
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,190 Times in 3,154 Posts
    Blog Entries
    12

    Default

    I'm getting:

    Failed to load resource: the server responded with a status of 404 (Not Found) http://www.lawenforcementspanish.com/mle/jquery.mobile-1.3.2.min.js
    Failed to load resource http://localhost:58888/_appMobi/appmobi.js
    Failed to load resource: the server responded with a status of 404 (Not Found) http://www.lawenforcementspanish.com/mle/CSS/audio-30.gif
    Looking at the source code of the page, I see:

    Code:
    <link href="jquery-mobile/jquery.mobile.theme-1.0.min.css" rel="stylesheet" type="text/css"/>
    <link href="jquery-mobile/jquery.mobile.structure-1.0.min.css" rel="stylesheet" type="text/css"/>
    <link href="CSS/layout.css" rel="stylesheet" type="text/css"/>
    <script src="jquery-mobile/jquery-1.6.4.min.js" type="text/javascript"></script>
    <script src="jquery-mobile/jquery.mobile-1.0.min.js" type="text/javascript"></script>
    <!-- from demo 4sp -->
    <script src="jquery.min.js"></script>
    <script src="jquery.mobile-1.3.2.min.js"></script>
    <script src="jquery-ui.min.js"></script>
    <script type="text/javascript" src="jquery.jplayer.min.js"></script>
    <!-- End from demo4sp -->
    That's two versions of jQuery, two versions of jQuery mobile (the second of which is the 404 Not Found), only one, an earlier version, of the mobile css.

    I think you need to get rid of the older code (red), and add (upload) the missing mobile script (highlighted) and link to the mobile styles (jquery.mobile-1.3.2.min.css, which is not even attempted to be linked in there, but should be). The jquery.mobile-1.3.2.min.css file will have to be uploaded as well, unless it's already there.


    I also found the 'missing' audio-30.gif in the mle folder. With the CSS/layout.css file being where it is, the audio-30.gif needs to be in the mle/CSS folder.

    Or the reference to it in the CSS/layout.css file:

    Code:
    background: transparent url(audio-30.gif) 0 center no-repeat;
    needs to be:

    Code:
    background: transparent url(../audio-30.gif) 0 center no-repeat;
    Or You could move the css file to the mle folder and reference it there in the stylesheet link on the page.

    As regards the css file and the image, do only one of these three. The reason one of them must be done is because references to images in css files are relative to the css file.


    Later I see:

    Code:
    <!-- Following are for appmobi and Intel xdk -->
    <!-- the line below is required for access to the appMobi JS library -->
    <script type="text/javascript" charset="utf-8" src="http://localhost:58888/_appMobi/appmobi.js"></script>
    <!-- End appmobi library -->
    So presumably that last one isn't crucial for the page to work. Rather for making a mobile app. But if it is crucial for the page, it needs to be hosted on the server.


    The browser cache may need to be cleared and/or the page refreshed to see changes.

    There could also be other problems.
    - John
    ________________________

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

Similar Threads

  1. Problem playing sound file in Opera !
    By spazzer in forum HTML
    Replies: 1
    Last Post: 03-11-2010, 01: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, 10:14 PM
  3. Changing Text and Background Color
    By Steve Wilbanks in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 01-16-2010, 12:10 PM
  4. tab menu item color not changing on click
    By ashok_kuncha in forum CSS
    Replies: 0
    Last Post: 08-14-2007, 09:41 AM
  5. Swith Content: Changing background-color
    By abbeyvet in forum Dynamic Drive scripts help
    Replies: 5
    Last Post: 05-08-2007, 02: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
  •