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 11 of 11
  1. #1
    New Coder
    Join Date
    May 2012
    Posts
    18
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Trying to remove a class and/or rel with javascript

    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
    Code:
    <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 :
    Code:
    <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 :

    Code:
    <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
    Code:
    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!

  • #2
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    Maybe
    Code:
    <a id='myLink' href="..................
    Code:
    if (iphone) 
    { 
       var lnk = document.getElementById( 'myLink' );
    
       lnk.rel = lnk.className = "";
    }

  • #3
    New Coder
    Join Date
    May 2012
    Posts
    18
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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..

  • #4
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    Quote Originally Posted by bluepills View Post
    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.

  • #5
    New Coder
    Join Date
    May 2012
    Posts
    18
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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?
    Last edited by bluepills; 06-20-2012 at 04:48 PM.

  • #6
    New Coder
    Join Date
    May 2012
    Posts
    18
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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"

  • #7
    New Coder
    Join Date
    May 2012
    Posts
    18
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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.

    Code:
        <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 ..

  • #8
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    Code:
    <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>

  • Users who have thanked Logic Ali for this post:

    bluepills (06-21-2012)

  • #9
    New Coder
    Join Date
    May 2012
    Posts
    18
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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!
    Last edited by bluepills; 06-22-2012 at 05:50 PM.

  • #10
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    The answer is to execute those statements additionally in the readystatechange handler of the AJAX routine, after the innerHTML has been written.

  • Users who have thanked Logic Ali for this post:

    bluepills (06-21-2012)

  • #11
    New Coder
    Join Date
    May 2012
    Posts
    18
    Thanks
    3
    Thanked 0 Times in 0 Posts
    It worked!

    Thanks!
    Last edited by bluepills; 06-21-2012 at 06:37 PM.


  •  

    Posting Permissions

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