how to stop page jump, but still play sound?

low tech · 02-13-2013, 04:09 AM

Hi all

I'm trying to play a single short sound --- it works --- but the page jumps to bottom (i'm using chrome).

How can I stop the page jump?

Doing this stops the page jump, but also stops the sound!

Code:

if(e.preventDefault){
 e.preventDefault();
		} else {e.returnValue = false;
	}

My html

Code:

<div id="audioPlay" onclick="playSound();">

function playSound() {
document.getElementById("audioPlay").innerHTML='<embed src=\"linkto_soundfile\" hidden=\"true\"  />';
}

any ideas?

LT

Old Pedant · 02-13-2013, 04:27 AM

Just move the focus to where you want it in the playSound function!

Example:

Code:

<a name="backHere"></a>
<div id="audioPlay" onclick="playSound();">...</div>

...

function playSound() {
    document.getElementById("audioPlay").innerHTML=
        '<embed src=\"linkto_soundfile\" hidden=\"true\"  />';
    location.href = "#backHere";
}

Other ways possible, but that looks like it would do what you want.

Old Pedant · 02-13-2013, 04:32 AM

By the by, a sneaky way I do this:

Code:

<a href="someFile.wav" target="hiddenFrame"> Play sound </a>

<iframe name="hiddenFrame" style="width: 100%; height: 100ps; display: none;"></iframe>

Or you can pass in the file name and parse the query string:

Code:

<a href="playSound.html?file=someFile.wav" target="hiddenFrame"> Play sound </a>

<iframe name="hiddenFrame" style="width: 100%; height: 100ps; display: none;"></iframe>

And then your "playSound.html" (or it could be ".php" or ".asp" page! which might have advantages) looks at the query string and figures out what file to load and play.

low tech · 02-13-2013, 05:08 AM

Hi OP

I've tried method one in several ways and none of them worked.

The page just jumps to bottom. Even though the url changes it doesn't go to the anchor.

method one:

Code:

<a name="backHere"></a>
<div id="audioPlay" onclick="playSound();">...</div>
...

function playSound() {
    document.getElementById("audioPlay").innerHTML=
        '<embed src=\"linkto_soundfile\" hidden=\"true\"  />';
    location.href = "#backHere";
}

This embed gets the file from google --- I send word, it sends back sound, so I don't have an actual sound file.

Could I use the embed with the iFrame?

LT

Old Pedant · 02-13-2013, 05:14 AM

Sure, I use <embed> with the IFrame, in fact.

low tech · 02-13-2013, 05:40 AM

Hi OP

After some trial and lots of error I finally got it using your iframe method.

Thanks

LT

VIPStephan · 02-13-2013, 10:21 AM

Just to be a little pedantic, Old Pedant: the name attribute is not allowed on any element other than form controls. Named anchors are way outdated and I would be happy if you wouldn’t promote this practice so that newbies don’t get off on the wrong foot. Instead of name, id should be used.

The embed element is a different matter that would require a deeper discussion.

Old Pedant · 02-13-2013, 08:06 PM

Hmmm...If I use an ID for the <iframe> then can target= in the <a> tag "find" it? I've never tried that.

Actually, in my own code, I do use an ID for the <iframe> and then do

Code:

document.getElementById("hiddenFrame").src = 
    "playitAgainSam.asp?file=" + encodeURIComponent(someFileName);

I was trying to simplify that for use with the <a> tag.