Trying to remove a class and/or rel with javascript

[bluepills]

Here's my problem, I'm using shadowbox on my website to display videos in mp4 format. On a computer everything is working fine and i'm glad it works!

On the other hand when i'm on a mobile device (iOs especially) the box appears but not the video.

The links to "call" the shadowbox are using classes and rel

<a href="../videos/video.mp4" class="shadowboxclass" rel=shadowbox;width=820;height=460;player=flv;><img src="../images/video_image.png" width="210px" height="117px" alt="astral"></a>

I would like to find a bypass for when mobile devices are detected and remove the class and rel so that it will only open the link like this :

<a href="../videos/video.mp4"><img src="../images/video_image.png" width="210px" height="117px" alt="astral"></a>

and then get playback in the built in video player of iOS.

Here's my shadowbox configuration :

<script type="text/javascript" src="../shadowbox/shadowbox.js"></script>
    <script type="text/javascript">
        Shadowbox.init({
            skipSetup: true,
            overlayOpacity: 0.9,
            ext: options
        });
    
        var options = {
            ext: {
                img: ['png', 'jpg', 'jpeg', 'gif', 'bmp'],
                swf: ['swf'],
                flv: ['flv', 'mp4'],                // to play the mp4 in the jwplayer
                qt: ['dv', 'mov', 'moov', 'movie'],
                wmp: ['asf', 'wm', 'wmv'],
                qtwmp: ['avi', 'mpg', 'mpeg'],
                iframe: ['asp', 'aspx', 'cgi', 'cfm', 'htm', 'html', 'pl', 'php', 'php3', 'php4', 'php5', 'phtml', 'rb', 'rhtml', 'shtml', 'txt', 'vbs', 'mp4']
            }
        };
    
        window.onload = function () {
              Shadowbox.setup("a.shadowboxclass", {});
        };
        $(document).ready(function () {
            $('a.shadowboxclass').live('click', function (e) {
    
                Shadowbox.open(this);
                //Stops loading link
                e.preventDefault();
            });
        });
    </script>

I have a code that helps me detect mobile devices

var iphone = (/iphone|ipad|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));

 if (iphone) {   /* do something here */     };

It works fine but I just don't know how to get this to work in my situation!

Thank you!

[Logic Ali]

Maybe

<a id='myLink' href="..................

if (iphone) 
{ 
   var lnk = document.getElementById( 'myLink' );

   lnk.rel = lnk.className = "";
}

[bluepills]

Tried it and it's not working..
If you have an iDevice here's a link to try it : http://www.orangerine.com/en/index2.html

If you try and click on one of the 4 images you'll see the result..
It's just a black overlay..

[Logic Ali]

Originally Posted by bluepills

Tried it and it's not working..
If you have an iDevice here's a link to try it : http://www.orangerine.com/en/index2.html

If you try and click on one of the 4 images you'll see the result..
It's just a black overlay..

That code has to be called at a point below the link or it will error.

Any errors in your phone's error console?

Are you sure that not having a rel and class fixes the problem? if so then you could have two links and just display the right one with script & CSS.

[bluepills]

When I remove the class on the link it just load the video (which is what I want to achieve) so I believe that is the best way to do it but still i'm not sure.

I'll try to move the code so it's called after the link and see if it works.

---

I guess it's not working.
Don't know where to find the error console on my phone.

---

How could I achieve having two links and display the one I want with script?

[bluepills]

I've added the script at the very end of my code..

It's working only on the first link and keeps the class and rel on the others.. even if they have the id "myLink"

[bluepills]

From my research i've found out that it only works on the first occurrence because I should'nt use the same id on more than one element.

Therefore I guess it has to be getElementsByClassName .. but I can't get it to work the same way.

    <script type="text/javascript">
    var iphone = (/iphone|ipad|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));
    if (iphone) {
        var lnk = document.getElementsByClassName('shadowboxclass');
        lnk.rel = lnk.className = "";
    }
	</script>

But it's not working ..

[Logic Ali]

<script type="text/javascript">

var iphone = (/iphone|ipad|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));

if (iphone) 
{
  var lnk = document.getElementsByClassName('shadowboxclass');

  for( var i = 0; lnk[ i ]; i++ )
    lnk[ i ].rel = lnk[ i ].className = "";
}

</script>

[bluepills]

If I may I have one final question..

On some of my pages that are called via ajax the class and rel aren't killed by the script..

The script is working on the first video because it's called directly by the index2.html page.. When you click on the accordion the following are called by ajax and the script is not applying to it..

I tried adding the script directly in the pages where it occurs but without success.

If you wouldn't mind i'd like some input on it as well as an explanation if possible i'd like to learn!

Thank you!

[Logic Ali]

The answer is to execute those statements additionally in the readystatechange handler of the AJAX routine, after the innerHTML has been written.

[bluepills]

It worked!

Thanks!