Help - Search - Members - Calendar
Full Version: A way to have a single link deliver TWO href?
HTMLHelp Forums > Programming > Client-side Scripting
eabigelow
Hi--

I have a link that has an mp3 sound as its href:

CODE
<a href="sounds/genealogy.mp3" class="track track-default">this is a link</a>


Unfortunately, I also need that same link to go to a part on the site (href=#dombo) so that the sound plays on that part of the site.

Does anyone know how to accomplish this? I am imagining it would be with javascript, but honestly, I do not know.

Any help would be greatly appreciated. Many thanks...!
pandy
You can. But I think you should keep the URL to the other page in the href and let JS do the mp3 bit (it's better that way if JS isn't available).

Just add

CODE
onclick="location.href = 'http://example.com'"
eabigelow
Hi--

Many thanks for your reply. It is much appreciated!

The framework of my current code is a bit complex. I did not want to make my first post too code-heavy, thinking I could get what I needed and apply it without bothering people with excessive of code. But it appears I was wrong not to include it!

So if you will forgive my omission, here is the code context for the href links I mention above (just one sample!). You can see that I have a jPlayer in place providing the container for the sections:

CODE
<article id="page_5">
              <div class="box" id="page4">
                        <a href="#page_1" class="close"></a>
                    <div class="wrapper pad_bot1">
                        <div class="grid_14">
                            <h2>services</h2>
                            <div class="tabs2">
                             <div id="jquery_jplayer"></div>

        <!-- Using the cssSelectorAncestor option with the default cssSelector class names to enable control association of standard functions using built in features -->

        <div id="jp_container">
                                <ul class="nav grid_17 prefix_2 omega">
                                 <li><a href="sounds/genealogy.mp3" class="track track-default">alien genealogy</a></li>
                                    <li><a href="sounds/translation.mp3" class="track">alien texts translation</a></li>
                                    <li><a href="#dombo">future life regression </a></li>
                                    <li><a href="#horticulture">alien removals</a></li>
                                    <li><a href="#clips">want to date an alien?</a></li>
                                </ul></div>
                                
                                
                               <div id="greenhouse" class="tab-content grid_17 prefix_2 omega">
                                    <div class="wrapper">
                                    <span  class="left marg_right1">
                                 <a><img src="images/HANDanimation.gif" alt="" width="137" height="110"></a>
                                    </span>
                                      <p class="color1">Are you related to aliens? Do you think you might be?</p>
                                        <p class="pad_bot2"><font color="white">Using patented A.G.T. (Alien Genealogy Technology®)...</p>
                                    </div>
                                    <p></p>
                                    <div class="pad_bot1">
                                    </div>
                                    <p></p>
                                </div>


The first href
CODE
href="sounds/genealogy.mp3" class="track track-default"
links to the first sound file, but it should ALSO link to the href="#greenhouse" (<div id="greenhouse" class="tab-content grid_17 prefix_2 omega">).


Again, many thanks for any help on this...
pandy
Add the onclick event handler to the A tag. Change my dummy URL to the one of your choice.
eabigelow
QUOTE(pandy @ Oct 13 2011, 04:47 PM) *

You can. But I think you should keep the URL to the other page in the href and let JS do the mp3 bit (it's better that way if JS isn't available).

Just add

CODE
onclick="location.href = 'http://example.com'"




Do I need to set this up in some way beforehand with javascript? I have tried this particular approach and it does not seem to work...

Many thanks!
eabigelow
Perhaps I am doing it wrong? This is what I have tried, with variations of it, as well...

CODE
<a href="sounds/genealogy.mp3" class="track track-default" onclick="location.href = '#greenhouse'">


pandy
No, it's I who am totally confused. For some reason I was thinking pupups. No, you can't do it that way. The same window can't load two URLs at the same time. Sorry. blush.gif

Maybe it's possible with a function. Must think a little.
pandy
I don't think this can be done in the way you want. I'm sorry that I confused you (and myself). I tried with loading the mp3 in a hidden iframe, but page jump occurred for some reason I can't figure out.

You'd also have to handle that some browsers can (and will) play the mp3 and some can't.
eabigelow
Thanks so much for your replies and for giving this a try. I keep thinking there has to be a way--maybe a javascript function so that when you do an onclick it will make two things happen at once, or one after the other?
pandy
That's what I tried, directing a hidden iframe to the mp3, but that made the page jump away from the anchor... But you could give it a try.
pandy
Hey, if you add a time lapse between the loading of the mp3 in the iframe and the changing of the URL of the page to the anchor it could work.

Look at this and see what you think. Now I load a page in the iframe, but you could load the mp3 and make the iframe invisible. I don't know if I like it, but it seems to work. The BR tags are just to make the page long enough to scroll.

HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>

<script type="text/javascript">
<!--

function doDa()
{
document.getElementById('ifr').src = 'http://google.com';
setTimeout("window.location = '#here'",300);
}

//-->

</script>
</head>


<body>


<a href="#here" onclick="doDa(); return false">Click me</a>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<p id="here">HERE</p>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<iframe src="http://htmlhelp.com" name="ifr" id="ifr" width="200" height="200"></iframe>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

</body>
</html>
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2014 Invision Power Services, Inc.