SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member modernrelic's Avatar
    Join Date
    Jun 2012
    Location
    NW Illinois, USA
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Nav Bar Question (CSS or JS?)

    Hi all. First time posting, so I hope this is in the right place.

    I'm working on a site (single page layout), and I'm trying to create a single-line horizontal menu, with no sub-items. I'd like to make each anchor link play a sound AND swap images onClick. Is this possible to do using pure CSS? I'd prefer not to use JS, but am willing if that is the only/best way.

    I've made an unsuccessful attempt using JS, but I don't know it very well, and I am stumped. If anyone wants to have a look at that attempt, there is a jsFiddle here: http://jsfiddle.net/tBpMV/2/

    The sound and image swap work fine, but clicking the links does not take you anywhere. There is a small JS script on the bottom of the html that controls the image swap. If I delete that code, the links begin working, but then there's no image swap. I've tried everything I can think of to get it working, but no joy.

    So anyway, I'm hoping there's a way to accomplish this without the JS. I'd sure appreciate any advice/input.

    Thanks in advance!

  2. #2
    SitePoint Zealot
    Join Date
    Mar 2012
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by modernrelic View Post
    Hi all. First time posting, so I hope this is in the right place.

    I'm working on a site (single page layout), and I'm trying to create a single-line horizontal menu, with no sub-items. I'd like to make each anchor link play a sound AND swap images onClick. Is this possible to do using pure CSS? I'd prefer not to use JS, but am willing if that is the only/best way.

    I've made an unsuccessful attempt using JS, but I don't know it very well, and I am stumped. If anyone wants to have a look at that attempt, there is a jsFiddle here: http://jsfiddle.net/tBpMV/2/

    The sound and image swap work fine, but clicking the links does not take you anywhere. There is a small JS script on the bottom of the html that controls the image swap. If I delete that code, the links begin working, but then there's no image swap. I've tried everything I can think of to get it working, but no joy.

    So anyway, I'm hoping there's a way to accomplish this without the JS. I'd sure appreciate any advice/input.

    Thanks in advance!
    Hey,

    I'm quite a beginner in CSS, but I just now browsed around the web trying to find a way to do this. Here is a fiddle I tried, but it didn't quite work. The onclick works, but I can't quite get the audio.

    For more about "onclick" events, you can check this out.

    I'm not sure if the following HTML5 will be of aid in terms of audio (taken from here.)?

    Code:
    <audio src="http://modernrelic.com/mmn/amp-on-off.mp3" controls preload="auto" autobuffer></audio>
    Right now when I was Googling, different people around the web said this is impossible with CSS, but I don't know about that as I'm quite new with CSS. Perhaps one of the CSS gurus here can confirm whether or not this is possible with CSS or a mixture of CSS and something other than Javascript?

  3. #3
    SitePoint Member modernrelic's Avatar
    Join Date
    Jun 2012
    Location
    NW Illinois, USA
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, Pamela! At this point, I'm inclined to agree that CSS alone won't work. What I still can't figure out is why using JS works for the audio and image swap, but prevents the anchor links from working.

    I probably should have posted that question instead. I was thinking the two bits of JS I'm currently using were conflicting in some way. But when I remove the bit that runs the audio, the links are still borked. So it seems to be tied to that one small bit of code at the bottom of my html. Frustrating.

  4. #4
    . shoooo... silver trophy logic_earth's Avatar
    Join Date
    Oct 2005
    Location
    CA
    Posts
    9,013
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    There you are.
    Code:
    $('ul.navigation li a').click(
    function(e) {
    e.preventDefault(); // prevent the default action
    Logic without the fatal effects.
    All code snippets are licensed under WTFPL.


  5. #5
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,734
    Mentioned
    31 Post(s)
    Tagged
    1 Thread(s)
    1) CSS wont work, because even if it allowed you to bring in the sound file, it wont START playing it. Thats just not what the language is for. Even when you embed a video ( or in this case sound) it's usually a flash or js player behind it.
    1.a) Yeah, HTML5 provisions for this but not all browser support HTML5 that wouldn't be a REAL solution

    As far as your .js is concerned ... have you checked for a "return false;" Returning false aborts the default action (going to the link in this case).

    ADDENDUM:
    LogicEarth actually took the time to look at the js fiddle and still beat me to the punch..hahah

  6. #6
    SitePoint Member modernrelic's Avatar
    Join Date
    Jun 2012
    Location
    NW Illinois, USA
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow, am I embarrassed! The line was commented for me and everything and I still didn't see it! Sheesh!

    Logic Earth, I bow down to you. You've saved the day!

    Many many thanks! And Dresden, thanks for taking the time to provide your input as well!

    Now, how do I get this paper bag off my head?


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
  •