Log in

View Full Version : Resolved Nav Bar Question (CSS or JS?)


tonyd
06-13-2012, 03:25 PM
EDIT: PROBLEM SOLVED.

Hi all. I've been visiting the forums here for a while now, but this is my first post. I wasn't sure whether to post this here, or in the JS forum, so moderators, please feel free to move this if it's in the wrong 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!
bernie1227
06-13-2012, 09:42 PM
Hi Tonyd,
As far as I can see, your problem (I think) is that the JavaScript is causing the fact that when you click the link, it will play the sound and change the picture, but the problem is that the link is only being used to do that, rather then functioning as a link. In other words, this is the kind of thing I'm thinking you need to put in the js:



<html>

<head>
<script*type="text/javascript">
{
****document.getElementById('myAnchor').innerHTML="Visit*Google"
****document.getElementById('myAnchor').href="http://www.google.com"
}
</script>
</head>

<body>
****<p id="myAnchor">Visit*Google</p>
****
</body>

</html>

Please tell me if this works
***********
*******
tonyd
06-13-2012, 10:15 PM
Hi Bernie. Thanks very much for responding!

I plugged your code in, but unfortunately it didn't solve the issue for me. Now, as I'm pretty much a js novice, I could very well have done something wrong in adding the code. So, it may work perfectly well.

The upside is that someone just pointed out the problem to me a short while ago. In that piece of code I mentioned in my original post, there was one line that was causing the entire issue. I deleted the following:

e.preventDefault();

That was the culprit. :o

I should have posted that entire bit here instead of just linking to the jsFiddle.

Anyway, thanks for taking the time to look into my problem! Much appreciated! :)
bernie1227
06-13-2012, 10:34 PM
Glad to be of help! Please set the thread to resolved by editing the original thread and setting the prefix to resolved
tonyd
06-13-2012, 10:59 PM
Will do!