CodingForums.com - how to stop page jump, but still play sound?

CodingForums.com (http://www.codingforums.com/index.php)

- JavaScript programming (http://www.codingforums.com/forumdisplay.php?f=2)

- - how to stop page jump, but still play sound? (http://www.codingforums.com/showthread.php?t=287560)

low tech

02-13-2013 04:09 AM

how to stop page jump, but still play sound?

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.

All times are GMT +1. The time now is 04:09 PM.