ansaurus

Question

Javascript Noob Question. Need Help With Simple Script

Answer 1

+1 A:

You have two things trying to happen when you click on the hyperlinks:

HREF navigation
onclick event handler running

Your return false; effectively "stops" the event handler from doing anything else so you're good there. However, storing the image's address in the HREF is probably a bad idea. Try something like this instead:

<ul>
    <li>
    <a href="#" img="images/cat.jpg" onclick="showPic(this); return false;" title="A Cat">Cat</a>
    </li>
    <li>
    <a href="#" img="images/night.jpg" onclick="showPic(this); return false;" title="Night">Night</a>
    </li>
    <li>
    <a href="#" img="images/coke.jpg" onclick="showPic(this); return false;" title="Coke">Coke</a>
    </li>
    <li>
    <a href="#" img="images/sport.jpg" onclick="showPic(this); return false;" title="Sports">Sport</a>
    </li>
    <li>
    <a href="#" img="images/mnms.png" onclick="showPic(this); return false;" title="MnM's">MnM's</a>
    </li>
    <li>
    <a href="#" img="images/kid.jpg" onclick="showPic(this); return false;" title="A Kid">Kid</a>
    </li>
</ul>

with your javascript functiong being something like this:

function showPic(whichpic) { 
    var source = whichpic.getAttribute("img"); 
    var placeholder = document.getElementById("placeholder"); 
    placeholder.setAttribute("src",source);
}

Jaxidian 2010-04-18 15:02:12

Hey Jaxidian, I have tried this new code but now all the script is doing is just updating the link in the url bar to http://example.com/image_gallery.html#. The picture I am clicking on is not being displayed on its own page or in place of the placeholder image. I really appreciate the reply. Do you have another solution? Thanks again.

2010-04-18 15:10:34

Then you have some other problem (perhaps your file paths are wrong). This solution works. See here: http://jaxidian.org/so.htm

Jaxidian 2010-04-18 15:15:21

WTF is the -1 for? This is a working solution... :-/

Jaxidian 2010-04-18 15:16:13

Hey Jaxidian, Thanks the script is now working. :) The problem was the link to my javascript function: <script type="text/javascript" src="scripts/showPic.js"></script> For some reason, the function was not being called correctly and nothing was happening. When I put the function in the html file right under the body tag, it works great now. Thank you very much! Lol I was stuck for days. I am not sure why the -1 is there. I did not do that. I tried voting it up but it said I have to have at least 15 reputation points. Thanks again man.

2010-04-18 15:30:56

Wasn't me who minused, but custom attributes on elements are generally not a good idea.

npup 2010-04-18 15:33:33

@npup: Why? They seem like a pretty common practice from what I've seen.

Jaxidian 2010-04-18 15:37:35

@three3 - If your question is answered, can you mark it as such please?

Jaxidian 2010-04-18 15:40:58

If the solution works and the questioner is happy with it, then it should be voted up, or at least shouldn't be voted down. +1 from me.

Abbas 2010-04-18 16:12:57

@Jaxidian For me it's not primarily about validation, even if that can be annoying too. @SpliFF mentions a few tings in his answer in [this thread](http://stackoverflow.com/questions/994856/so-what-if-custom-html-attributes-arent-valid-xhtml). I pretty much subscribe to his view. Moreover, there is already an attribute (`class`) that can serve the purpose for many of the cases where people resort to custom attributes. It's not just for style but also for "general purposes". [Here](http://www.w3.org/TR/html401/struct/global.html#adef-class)'s what the spec says about that. Best /npup

npup 2010-04-18 16:41:07

@npup: I can definitely see that as being an acceptable viewpoint, but I cannot see that as being something that you should be going around as saying is *the right way* of doing it. Yes, it's a right way. Yes, you can argue that it's your preferred way. But there is not a clear right/wrong here. Now something I will buy is that maybe it's *more right* to use HTML5's data attribute previx (see answer here: http://stackoverflow.com/questions/994856/so-what-if-custom-html-attributes-arent-valid-xhtml )

Jaxidian 2010-04-19 19:08:48

@Jaxidian Sorry if i stepped on a sore toe or something :) Didn't mean to "go around" *saying things* (God forbid). Yet.. when there are alternatives (that are even mentioned in the spec - currently `class` and in HTML5 `data`), it's hard for me to see the point in using custom attributes that (depending on your ability to see into the future) run the risk of clashing with future standardized attribute names.

npup 2010-04-19 20:35:59

@npup: Oh, no worries with stepping on a sore toe. I'm enjoying this conversation! :-) I was just interpreting your "generally not a good idea" statement as "that's probably the wrong way". As for using `class`, yes, it's a *legal* way to do it but it just feels wrong to me. In all actuality, either way is probably a shortcut - our various HTML elements are not meant to be data structures to hold whatever data we want. For this we should use hidden input elements or dynamic javascript, right? :-P

Jaxidian 2010-04-19 21:29:18

@Jaxidian Yeah I feel abit uneasy about storing "real" data in (non input) HTML elements. But when I "need to" I find some comfort in that line in the spec (*For general purpose processing by user agents*) and go for that when possible. This is opposed to inventing an attribute of my own to store stuff. What's happening in HTML5 is that `data` is suddenly used for something, by spec! Since it seems to be just a container, it might not really wreck anything, but it's an example of a custom attribute name that is probably pretty common (good name :)) , and suddenly becoming non-custom.

npup 2010-04-20 07:13:31

Answer 2

A:

Thanks Jaxidian. Worked Great. Solved.

2010-04-18 15:44:42

As well as thanking the person who helped you out, please could you consider accepting that answer (click the empty tick mark besides the answer)? Thanks =)

David Thomas 2010-04-18 15:52:07

I at least got a chuckle out of this! :-)

Jaxidian 2010-04-19 19:09:44

Answer 3

A:

The example looked like it should be working.

Though, when one gets unexpected form submit or unexpected following links in this way (unexpected because your form's onsubmit or your a's onclick has a return false; in it), it is often due to your javascript code raising an exception, and the return false; is skipped.

See:

<a href="www.example.com" onclick="alertOrFollow(this); return false;">alert or follow?</a>
<script type="text/javascript">
    function alertOrFollow(elem) {
        throw new Error('npup'); // try commenting this line out and things work as expected
        alert(elem.href)
    }
</script>

Your posted example looked fine i think, but maybe if your live version has some small differences? I'd suspect the placeholder element is not found, and setting the src attribute on it raises the exception that wrecks it.

npup 2010-04-18 15:44:51

ansaurus

tags:

views:

answers:

Javascript Noob Question. Need Help With Simple Script

related questions