Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Regular Coder low tech's Avatar
    Join Date
    Dec 2009
    Posts
    851
    Thanks
    172
    Thanked 93 Times in 93 Posts

    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
    "The greatest revenge is to accomplish what others say you cannot do."
    ~ Unknown

    I used to be indecisive, but now I'm not so sure.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,155
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,155
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    low tech (02-13-2013)

  • #4
    Regular Coder low tech's Avatar
    Join Date
    Dec 2009
    Posts
    851
    Thanks
    172
    Thanked 93 Times in 93 Posts
    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
    Last edited by low tech; 02-13-2013 at 05:11 AM.
    "The greatest revenge is to accomplish what others say you cannot do."
    ~ Unknown

    I used to be indecisive, but now I'm not so sure.

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,155
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    Sure, I use <embed> with the IFrame, in fact.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #6
    Regular Coder low tech's Avatar
    Join Date
    Dec 2009
    Posts
    851
    Thanks
    172
    Thanked 93 Times in 93 Posts
    Hi OP

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

    Thanks

    LT
    Last edited by low tech; 02-13-2013 at 08:03 AM.
    "The greatest revenge is to accomplish what others say you cannot do."
    ~ Unknown

    I used to be indecisive, but now I'm not so sure.

  • #7
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,624
    Thanks
    6
    Thanked 1,001 Times in 974 Posts
    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.

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,155
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •