The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> A way to have a single link deliver TWO href?
eabigelow
post Oct 13 2011, 03:06 PM
Post #1


Newbie
*

Group: Members
Posts: 13
Joined: 24-August 11
Member No.: 15,242



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...!

This post has been edited by eabigelow: Oct 13 2011, 03:07 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Oct 13 2011, 03:47 PM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



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'"
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
eabigelow
post Oct 13 2011, 04:41 PM
Post #3


Newbie
*

Group: Members
Posts: 13
Joined: 24-August 11
Member No.: 15,242



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...
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Oct 13 2011, 05:06 PM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Add the onclick event handler to the A tag. Change my dummy URL to the one of your choice.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
eabigelow
post Oct 13 2011, 05:25 PM
Post #5


Newbie
*

Group: Members
Posts: 13
Joined: 24-August 11
Member No.: 15,242



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!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
eabigelow
post Oct 13 2011, 05:35 PM
Post #6


Newbie
*

Group: Members
Posts: 13
Joined: 24-August 11
Member No.: 15,242



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




This post has been edited by eabigelow: Oct 13 2011, 05:37 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Oct 13 2011, 05:44 PM
Post #7


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Oct 13 2011, 06:41 PM
Post #8


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
eabigelow
post Oct 14 2011, 04:02 PM
Post #9


Newbie
*

Group: Members
Posts: 13
Joined: 24-August 11
Member No.: 15,242



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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Oct 14 2011, 04:44 PM
Post #10


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Oct 14 2011, 06:50 PM
Post #11


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 04:34 PM