Page 4 of 6 FirstFirst ... 23456 LastLast
Results 31 to 40 of 56

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

  1. #31
    Join Date
    Aug 2010
    Posts
    67
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi John,
    Thanks for the feedback and explanation.
    I moved the speaker image to the CSS folder and it now displays correctly. I uploaded the missing jquery.mobile-1.3.2.min.js and now the sound plays correctly and the background color changes also, this can be seen here http://www.lawenforcementspanish.com/mle2 then select the Age/Weight/Height menu item. However I noticed that when I added the ....1.3.2.min.js library the menu page formatting changed - the original and correct formatting can be seen here http://www.lawenforcementspanish.com/mle . I have no idea what caused the formatting change.

    Regarding the appmobi.js - yes that's needed for the mobile app as far as I understand so I think I should leave it in.

    As for the multiple jQuery/ jQuery Mobile links you highlighted in red they came from the jQuery Mobile template in Dreamweaver. I tried commenting them out here http://www.lawenforcementspanish.com/mle3 but as I suspected I lost all formatting of the menu page so I think they have to stay.

    I'm at a bit of a loss to know what I should try next, it feels as though we're almost there in the mle2 version, above, if only I could get back the original formatting as shown in the mle version.

    Thanks again for your assistance with this, I truly appreciate your time and patient explanations.

    Tony Babb

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

    Default

    Hi John,
    I've been going over the problems I reported in my previous note and confirmed the test results - specifically that including the jquery mobile 1.3.2 js library caused the formatting of the menu on the first page to be changed. This change can be seen when the menu first loads which is very puzzling as looking at your code I don't see where the js library is called until the text is clicked. If you could point me in the right direction I'd really appreciate it.

    The version that plays a sound and changes background color can be seen here http://www.lawenforcementspanish.com/mle2, it also has the menu format changed. I created another version which is the same as mle2 but I commented out the call to the 1.3.2 js library on line 15, this can be seen here http://www.lawenforcementspanish.com/mle4

    Thanks,

    Tony Babb

  3. #33
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,920
    Thanks
    43
    Thanked 3,187 Times in 3,151 Posts
    Blog Entries
    12

    Default

    I'm not exactly sure about which files do which, but the mobile css and the mobile js files work together. And they appear to be version dependent. That is the css of one version cannot be mixed with the css of another version. Ideally you use one version's css and js and no other css and js for jQuery mobile on a page. Once you see how the page is laying out like that, you can use your own stylesheet to tweak things.
    - John
    ________________________

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

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

    Default

    Quote Originally Posted by jscheuer1 View Post
    I'm not exactly sure about which files do which, but the mobile css and the mobile js files work together. And they appear to be version dependent. That is the css of one version cannot be mixed with the css of another version. Ideally you use one version's css and js and no other css and js for jQuery mobile on a page. Once you see how the page is laying out like that, you can use your own stylesheet to tweak things.
    Thanks, that makes sense. When I added jQuery...1.3.2 this was to add the ability for sound to play and change the background color, unfortunately it affected the layout. So, just what calls does your code make to the 1.3.2 js library? I'm thinking if I can identify them then I can extract them alone from 1.3.2 and create a separate external js file just containing those routines(sorry if I'm not using the correct term here) and I can link to that instead of 1.3.2 and hopefully these will not affect the layout of the menu. I'm assuming there's something in 1.3.2 that is being triggered by the existing menu and causing the layout problem as the layout problem exists before any item is clicked to create a sound. Does that make sense?

    As a backup approach I'm also looking at the new Intel XDK cross platform developer kit (released a few days ago) that seems to support the html5 Audio tag so I'll try using that to create a new app from scratch with the menu and sound, if that works I should have a consistent js and css as they all come from the Intel new XDK.

    I really appreciate all the time you've put into this, I never in my wildest dreams thought I'd take a couple of months or more on this issue, there is just so much software I'm unfamiliar with but I will get this working. Thanks again,

    Tony

  5. #35
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,920
    Thanks
    43
    Thanked 3,187 Times in 3,151 Posts
    Blog Entries
    12

    Default

    At one point I was thinking along those same lines, of extracting routines so as not to be tied to the css. But it is the css that allows the routines to work. It creates a canvas, if you will, upon which the mobile device events can be interpreted. Some of it can be changed, tweaked, but other parts must remain.

    But to answer your question, all it's used for is to detect tap.
    - John
    ________________________

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

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

    Default js library search sequence controllable?

    Quote Originally Posted by jscheuer1 View Post
    At one point I was thinking along those same lines, of extracting routines so as not to be tied to the css. But it is the css that allows the routines to work. It creates a canvas, if you will, upon which the mobile device events can be interpreted. Some of it can be changed, tweaked, but other parts must remain.

    But to answer your question, all it's used for is to detect tap.
    Ok, that's what I expected - it detects the tap action. Yet, when I load the app the menu is already displayed incorrectly before I tap anything and the only difference between the correct formatting and the incorrect formatting is the inclusion of the 1.3.2 js library. So I'm wondering if there's something in the app that calls a js library item in the 1.3.2 library when it should be calling it from another js library? Is there any way I can control which order the js libraries are searched? If so I could make the 1.3.2 library the last one that is searched.

    Thanks again,

    Tony

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

    Default

    John, I've been searching some more (stackoverflow actually) and found some discussions about .noconflict which I think allows the user to switch between multiple jquery libraries. I don't really understand a lot of it but I'll keep looking. Could this be the right direction do you think?

    Thanks,

    Tony

  8. #38
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,920
    Thanks
    43
    Thanked 3,187 Times in 3,151 Posts
    Blog Entries
    12

    Default

    No, it's for multiple versions of jQuery itself, not for multiple versions of the mobile plugin.

    But this has got me to thinking. If you're happy with the older css, you should be able to use the older version js as well. It almost has to be able to detect a tap. It probably uses a different syntax. The beauty of the newer version is that it not only detects a tap, but also detects a click if that's the kind of device being used. But I don't think you require that, or do you?

    The odd thing is that, most mobiles will also send a click event to the browser when tapping, so you shouldn't need any mobile css or js. But I believe we tried that and it didn't work.

    There's also an event we could try - touchstart. Generally a tap will send a touchstart event. I'm not sure if we tried that or not.

    When I get a little more time, I'll work up a demo of it.
    - John
    ________________________

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

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

    Default

    Hi John,

    When I started this app I used the JQM template supplied with Dreamweaver CS6, this included the CSS and JS libraries and I was happy with the functionality i.e. just detect a tap. Below are the links created in the template:

    <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"/>
    <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>

    I found an unminimized version of the ....structure....css file, I've been unable to find an unminimized version of the ....theme....css file. I also found an unminimized version of the jquery-mobile-1.0.js file and the jquery-1.6.4.js file. If it helps, I have uploaded the three unminimized versions of these files I found, they can be found here:

    http://www.lawenforcementspanish.com...query-1.6.4.js

    http://www.lawenforcementspanish.com....mobile-1.0.js

    http://www.lawenforcementspanish.com...ucture-1.0.css

    In the meantime I'll continue looking at your previous demo and see if I can identify the routines it uses in 1.3.2 and try extracting them to a separate linked js file.

    Thanks so much for you ongoing interest and assistance. This seems to be a very popular topic with almost 9,000 views so far so maybe I'm not alone with this problem!!

    Regards,

    Tony
    Last edited by tonybabb; 09-19-2013 at 12:46 PM.

  10. #40
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,920
    Thanks
    43
    Thanked 3,187 Times in 3,151 Posts
    Blog Entries
    12

    Default

    OK, here's a demo that attempts to use the touchstart event directly instead of jQuery mobile's tap:

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

    See if that works in Android. If that works, it's good news because I took both the mobile js and css off the page. If not, I can try tweaking it.

    Oh, and here's another version:

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

    Try it if the first one is no good.
    Last edited by jscheuer1; 09-19-2013 at 01:36 PM. Reason: add second version
    - 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
  •