browser detection only display on mobile and another code on desktop

Question

I have tried so many different ways for this to work. What I have is a website where I have a streaming radio player at the top of the page. Normally I have just the default given script

<center> 
    <!--Wavestreaming.com SHOUTcast Flash Player-->
    <script type="text/javascript" src="http://player.wavestreamer.com/cgi-bin/swf.js?id=A7GCMO5PSJJE1EC9"></script>.        
    <script type="text/javascript" src="http://www.syracusehiphop.com/wp-content/uploads/2012/04/scriptfornoflashtext.js.txt"></script>                    
</center>

It works fine on all desktop browsers of course, but when someone from an IPAD or Tablet comes I want them to be able to also listen.

So I am using a simple HTML5 code,but of course it only works in a mobile browser so now desktops browsers wont play it unless I provide multiple MIME types, but I am unabl to provide that.

So I tried multiple "ELSE IF" codes and just cant get it rght the close I got was getting it to display the HTML5 on the mobile or tablet browsers and then both the default script and HTML5 stacked up on each other on desktop

This is my latest attempt

<script type="text/javascript">
$(document).ready(function()
{
    if ( $.browser.msie )
    {
        <center> <!--Wavestreaming.com SHOUTcast Flash Player-->
            <script type="text/javascript" src="http://player.wavestreamer.com/cgi-bin/swf.js?id=A7GCMO5PSJJE1EC9"></script>.
            <script type="text/javascript" src="http://www.syracusehiphop.com/wp-content/uploads/2012/04/scriptfornoflashtext.js.txt"></script>
        </center> 
} 
else if ( $.browser.mozilla ) 
{
    <center>
        <!--Wavestreaming.com SHOUTcast Flash Player-->
        <script type="text/javascript" src="http://player.wavestreamer.com/cgi-bin/swf.js?id=A7GCMO5PSJJE1EC9"></script>.
        <script type="text/javascript" src="http://www.syracusehiphop.com/wp-content/uploads/2012/04/scriptfornoflashtext.js.txt"></script>
    </center>
} 
else if ( $.browser.webkit || $.browser.safari ) 
{
    <center>
        <!--Wavestreaming.com SHOUTcast Flash Player-->
        <script type="text/javascript" src="http://player.wavestreamer.com/cgi-bin/swf.js?id=A7GCMO5PSJJE1EC9"></script>.
        <script type="text/javascript" src="http://www.syracusehiphop.com/wp-content/uploads/2012/04/scriptfornoflashtext.js.txt"></script>
    </center>
} 
else if ( $.browser.opera ) 
{
    <center>
        <!--Wavestreaming.com SHOUTcast Flash Player-->
        <script type="text/javascript" src="http://player.wavestreamer.com/cgi-bin/swf.js?id=A7GCMO5PSJJE1EC9"></script>.
        <script type="text/javascript" src="http://www.syracusehiphop.com/wp-content/uploads/2012/04/scriptfornoflashtext.js.txt"></script>
    </center>
} 
else if ( $mobile_browser ) 
{
    <audio controls="controls">
        <source src="http://delicious.wavestreamer.com:3057/listen.pls" type="audio/mpeg" />
    </audio>
}) 
</script>

If you can't be bothered to write a readable question, don't expect other people to be bothered to write an answer. — Gilles 'SO- stop being evil', Apr 24 '12 at 18:00
Sorry I didn't realize what you were talking about . It is fixed — Shawn Merrihew, Apr 24 '12 at 18:09

score 2 · Answer 1 · edited May 23 '17 at 10:34

2

You can't put HTML markup inside javascript like that.

Your best bet would be to check for a mobile browser first, then apply the mobile code in that case. There's no need to check for each individual browser if you're just using the same code for all the desktop browsers.

Try this instead of the html markup:

var script = document.createElement( 'script' );
script.type = 'text/javascript';
script.src = url;
$("#someElement").append( script );

(From Can't append <script> element)

I would recommend reading up on how jQuery and javascript work, and how they interact with the DOM. http://www.w3schools.com/js/js_intro.asp is a good place to start.

edited May 23 '17 at 10:34

Community

1
1

answered Apr 24 '12 at 18:35

servarevitas3

483
1
6
23

I understand what your say I just don't see how to would mesh with detecting browsers or trying to produce the players? Could you explain? – Shawn Merrihew Apr 24 '12 at 22:48
Like this? var script = document.createElement( 'script' ); script.type = 'text/javascript'; script.src = www.urltoscript.com; $("mobilescripthere").append( script ); – Shawn Merrihew Apr 24 '12 at 22:51
Ahh ok , but with that said what is the work around? There's two basic things I'm trying to do first being if it is not a mobile browser just display the default script . Then if it is a mobile browser display the alternative script. Ether that or block desktop browsers from running the scripts? – Shawn Merrihew Apr 24 '12 at 23:31
Use two blocks of the above code inside an if statement. One if the browser is mobile, and one if it's not. – servarevitas3 Apr 25 '12 at 12:17

browser detection only display on mobile and another code on desktop

1 Answers1