www.webdeveloper.com
Results 1 to 13 of 13

Thread: How can I exclude code from mobile browsers?

  1. #1
    Join Date
    Jul 2013
    Posts
    8

    Question How can I exclude code from mobile browsers?

    Hello,

    I have a site that contains a table too wide for tablets and mobile devices. I would like to be able to detect my users' devices and exclude this table if they are using a tablet or mobile device. I don't have access to the 'head' section of the page, however. Is it still possible to accomplish what I'm wanting to do? If so, what would the code look like?

    Any help is greatly appreciated.

    Dorian Staten

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,373
    Should be easy enough to do with some CSS added,
    but it is difficult to tell you where without seeing some sample code.

    You would not have to delete the table, just hide it depending upon device detection logic.
    Easiest method might be to determine screen width, but you have to account for landscape and portrait displays.

    Provide some sample code that doesn't fit on your mobile device and we'll see if any other recommentations can be made.

  3. #3
    Join Date
    Jul 2013
    Posts
    8
    Quote Originally Posted by JMRKER View Post
    Should be easy enough to do with some CSS added,
    but it is difficult to tell you where without seeing some sample code.

    You would not have to delete the table, just hide it depending upon device detection logic.
    Easiest method might be to determine screen width, but you have to account for landscape and portrait displays.

    Provide some sample code that doesn't fit on your mobile device and we'll see if any other recommentations can be made.
    Thanks for the reply, JMRKER. Here is the code I would like to hide...

    HTML Code:
    <table style="width: 100%; margin: 0px 0px 10px 0px; font-size: 12pt; color: #DCDCDC; position: fixed; z-index: 1;" cellpadding="6">
        <tr>
            <td style="width: auto; background-color: #000000;">&nbsp;</td>
            <td style="width: 610px; background-color: #000000; text-align: left; font-weight: bold; padding-top: 12px; padding-left: 7px;">
            <div class="addThis">
    <!-- AddThis Button BEGIN -->
    <div class="addthis_toolbox addthis_default_style">
    <a class="addthis_button_facebook_like" fb:like:layout="button_count" style="padding-right: 15px;"></a>
    <a class="addthis_button_tweet"></a>
    <a class="addthis_button_google_plusone" g:plusone:size="medium" style="margin-left: -13px;"></a> 
    <a class="addthis_counter addthis_pill_style" style="margin-left: -15px;"></a>
    </div>
    <script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
    <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-502bf11a0aa51367"></script>
    <!-- AddThis Button END -->
    </div>
            </td>
            <td style="width: 610px; background-color: #000000; text-align: right; padding-right: 8px;"><a style="color: #DCDCDC;" href="https://twitter.com/DorianStaten" target="_blank">Follow Me On Twitter</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a style="color: #DCDCDC;" href="http://thefreethinkerpost.com/~api/papers/5f3f36fc-5630-471d-bd65-cad4d6c696f2/rss" target="_blank">RSS Feed</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a style="color: #DCDCDC;" href="mailto:dastaten@gmail.com">Contact Me</a></td>
            <td style="width: auto; background-color: #000000;">&nbsp;</td>
        </tr>
        <tr>
            <td style="padding: 0px; margin: 0px; height: 10px; background-image: url(http://freethoughtexpress.com/shadow.png); background-repeat: repeat-x; opacity:0.1; filter:alpha(opacity=10);" colspan="4"></td>
        </tr>
    </table>
    
    <div style="width: 100%; height: 60px;"></div>
    
    <table style="width: 100%; border: none;" cellpadding="6">
        <tr>
            <td style="width: auto; background-color: #444444;">&nbsp;</td>
            <td style="width: 31px; padding: 0px; background-color: #4682b4;"><img style="width: 31px; height: 109px;" src="http://freethoughtexpress.com/headlines.png" /></td>
            <td style="width: 910px; background-color: #FFFFFF; padding-top: 18px; padding-right: 0px; padding-left: 15px;">
    <!-- start sw-rss-feed code --> 
    <script type="text/javascript"> 
    <!-- 
    rssfeed_url = new Array(); 
    rssfeed_url[0]="www.rightwingwatch.org/rss.xml"; rssfeed_url[1]="http://feeds.feedburner.com/patheos/igFf"; rssfeed_url[2]="www.addictinginfo.org/feed/"; rssfeed_url[3]="http://feeds2.feedburner.com/thenewcivilrightsmovement"; rssfeed_url[4]="http://thinkprogress.org.feedsportal.com/c/34726/f/638927/index.rss";
    rssfeed_frame_width="900"; 
    rssfeed_frame_height="96"; 
    rssfeed_scroll="on"; 
    rssfeed_scroll_step="9"; 
    rssfeed_scroll_bar="off"; 
    rssfeed_target="_blank"; 
    rssfeed_font_size="12"; 
    rssfeed_font_face="arial"; 
    rssfeed_border="on"; 
    rssfeed_css_url="http://freethoughtexpress.com/style/style5.css"; 
    rssfeed_title="off"; 
    rssfeed_title_name=""; 
    rssfeed_title_bgcolor="#3366ff"; 
    rssfeed_title_color="#fff"; 
    rssfeed_title_bgimage="http://"; 
    rssfeed_footer="off"; 
    rssfeed_footer_name="rss feed"; 
    rssfeed_footer_bgcolor="#fff"; 
    rssfeed_footer_color="#333"; 
    rssfeed_footer_bgimage="http://"; 
    rssfeed_item_title_length="120"; 
    rssfeed_item_title_color="#4682b4"; 
    rssfeed_item_bgcolor="#dbe3ea"; 
    rssfeed_item_bgimage="http://"; 
    rssfeed_item_border_bottom="off"; 
    rssfeed_item_source_icon="off"; 
    rssfeed_item_date="off"; 
    rssfeed_item_description="off"; 
    rssfeed_item_description_length="120"; 
    rssfeed_item_description_color="#666"; 
    rssfeed_item_description_link_color="#333"; 
    rssfeed_item_description_tag="off"; 
    rssfeed_no_items="25"; 
    rssfeed_cache = "25e48e30cdz68585z54df815c3c2909z"; 
    //--> 
    </script> 
    <script type="text/javascript" src="http://freethoughtexpress.com/jscripts/rss-feed.js"></script> 
    <!-- end sw-rss-feed code -->
            </td>
            <td style="width: 264px; background-color: #FFFFFF; vertical-align: middle;" valign="middle">
    <div style="height: 6px;"></div>
    <script type="text/javascript"><!--
    google_ad_client = "ca-pub-0768038032574496";
    /* The Freethinker Post Header */
    google_ad_slot = "6308746164";
    google_ad_width = 234;
    google_ad_height = 60;
    //-->
    </script>
    <script type="text/javascript"
    src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
    </script>
            </td>
            <td style="width: auto; background-color: #444444;">&nbsp;</td>
        </tr>
    </table>
    Looks like a lot, but it's really just two tables and a div in between.

  4. #4
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,373

    Lightbulb

    Take a look at this site: http://www.javascriptkit.com/dhtmltu...aqueries.shtml

    Use it with the following example and set the appropriate table <div> tag to 'none' or 'block'
    depending upon the media parameters.

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    
    <title> Untitled </title>
    
    </head>
    <body>
    
    <table style="width: 100%; margin: 0px 0px 10px 0px; font-size: 12pt; color: #DCDCDC; position: fixed; z-index: 1;" cellpadding="6">
     <tr>
      <td style="width: auto; background-color: #000000;">&nbsp;</td>
      <td style="width: 610px; background-color: #000000; text-align: left; font-weight: bold; padding-top: 12px; padding-left: 7px;">
       <div class="addThis">
        <!-- AddThis Button BEGIN -->
        <div class="addthis_toolbox addthis_default_style">
         <a class="addthis_button_facebook_like" fb:like:layout="button_count" style="padding-right: 15px;"></a>
         <a class="addthis_button_tweet"></a>
         <a class="addthis_button_google_plusone" g:plusone:size="medium" style="margin-left: -13px;"></a> 
         <a class="addthis_counter addthis_pill_style" style="margin-left: -15px;"></a>
        </div>
    <script type="text/javascript">
     var addthis_config = {"data_track_addressbar":true};
    </script>
    <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-502bf11a0aa51367"></script>
    <!-- AddThis Button END -->
       </div>
      </td>
      <td style="width: 610px; background-color: #000000; text-align: right; padding-right: 8px;">
       <a style="color: #DCDCDC;" href="https://twitter.com/DorianStaten" target="_blank">Follow Me On Twitter</a>&nbsp;&nbsp;|&nbsp;&nbsp;
       <a style="color: #DCDCDC;" href="http://thefreethinkerpost.com/~api/papers/5f3f36fc-5630-471d-bd65-cad4d6c696f2/rss" target="_blank">RSS Feed</a>&nbsp;&nbsp;|&nbsp;&nbsp;
       <a style="color: #DCDCDC;" href="mailto:dastaten@gmail.com">Contact Me</a>
      </td>
      <td style="width: auto; background-color: #000000;">&nbsp;</td>
     </tr>
     <tr>
      <td style="padding: 0px; margin: 0px; height: 10px; background-image: url(http://freethoughtexpress.com/shadow.png);
                 background-repeat: repeat-x; opacity:0.1; filter:alpha(opacity=10);" colspan="4">
      </td>
     </tr>
    </table>
    
    <div style="width: 100%; height: 60px;"></div>
    
    <div id="non_mobile_table" style="display:none"> <!-- change style to ='block' if default is to show table -->
    
    <table style="width: 100%; border: none;" cellpadding="6">
     <tr>
      <td style="width: auto; background-color: #444444;">&nbsp;</td>
      <td style="width: 31px; padding: 0px; background-color: #4682b4;"><img style="width: 31px; height: 109px;" src="http://freethoughtexpress.com/headlines.png" /></td>
      <td style="width: 910px; background-color: #FFFFFF; padding-top: 18px; padding-right: 0px; padding-left: 15px;">
    <!-- start sw-rss-feed code --> 
    <script type="text/javascript"> 
     rssfeed_url = new Array(); 
     rssfeed_url[0]="www.rightwingwatch.org/rss.xml"; 
     rssfeed_url[1]="http://feeds.feedburner.com/patheos/igFf"; 
     rssfeed_url[2]="www.addictinginfo.org/feed/"; 
     rssfeed_url[3]="http://feeds2.feedburner.com/thenewcivilrightsmovement"; 
     rssfeed_url[4]="http://thinkprogress.org.feedsportal.com/c/34726/f/638927/index.rss";
    
     rssfeed_frame_width="900"; 
     rssfeed_frame_height="96"; 
     rssfeed_scroll="on"; 
     rssfeed_scroll_step="9"; 
     rssfeed_scroll_bar="off"; 
     rssfeed_target="_blank"; 
     rssfeed_font_size="12"; 
     rssfeed_font_face="arial"; 
     rssfeed_border="on"; 
     rssfeed_css_url="http://freethoughtexpress.com/style/style5.css"; 
     rssfeed_title="off"; 
     rssfeed_title_name=""; 
     rssfeed_title_bgcolor="#3366ff"; 
     rssfeed_title_color="#fff"; 
     rssfeed_title_bgimage="http://"; 
     rssfeed_footer="off"; 
     rssfeed_footer_name="rss feed"; 
     rssfeed_footer_bgcolor="#fff"; 
     rssfeed_footer_color="#333"; 
     rssfeed_footer_bgimage="http://"; 
     rssfeed_item_title_length="120"; 
     rssfeed_item_title_color="#4682b4"; 
     rssfeed_item_bgcolor="#dbe3ea"; 
     rssfeed_item_bgimage="http://"; 
     rssfeed_item_border_bottom="off"; 
     rssfeed_item_source_icon="off"; 
     rssfeed_item_date="off"; 
     rssfeed_item_description="off"; 
     rssfeed_item_description_length="120"; 
     rssfeed_item_description_color="#666"; 
     rssfeed_item_description_link_color="#333"; 
     rssfeed_item_description_tag="off"; 
     rssfeed_no_items="25"; 
     rssfeed_cache = "25e48e30cdz68585z54df815c3c2909z"; 
    </script> 
    
    <script type="text/javascript" src="http://freethoughtexpress.com/jscripts/rss-feed.js"></script> 
    <!-- end sw-rss-feed code -->
    
      </td>
      <td style="width: 264px; background-color: #FFFFFF; vertical-align: middle;" valign="middle">
       <div style="height: 6px;"></div>
    
    <script type="text/javascript">
     google_ad_client = "ca-pub-0768038032574496";
    /* The Freethinker Post Header */
     google_ad_slot = "6308746164";
     google_ad_width = 234;
     google_ad_height = 60;
    </script>
    <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
    
      </td>
      <td style="width: auto; background-color: #444444;">&nbsp;</td>
     </tr>
    </table>
    
    </div>
    
    <script type="text/javascript">
    window.onload = function() {
    // use one (not both) of the following statements to show or hide the second table depending on media requirements
    //  document.getElementById('non_mobile_table').style.display = 'block';
    //  document.getElementById('non_mobile_table').style.display = 'none';
    }
    </script>
    
    </body>
    </html>

  5. #5
    Join Date
    Jul 2013
    Posts
    8
    I'm sorry, I'm in way over my head here. I have no idea how to proceed.

  6. #6
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,373

    Arrow

    Quote Originally Posted by dastaten View Post
    I'm sorry, I'm in way over my head here. I have no idea how to proceed.
    Well, you will need to help as well.
    Did I even hide the correct table in the example posted?

  7. #7
    Join Date
    Jul 2013
    Posts
    8
    I'll give it a shot...

  8. #8
    Join Date
    Jul 2013
    Posts
    8
    I need both of the tables to hide on mobile devices, so I moved the div opening to the top. The default should be to show, so I changed the default display to 'block' as you instructed in the comment. However, no matter which line I use in the bottom script, the results are the same for mobiles as well as PCs. I'm checking on my laptop, my iPad, and my iPod, and either the tables show on all or don't show on any, depending on which line I use in the bottom script. Here is what my code looks like right now...

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    
    <title> Untitled </title>
    
    </head>
    <body>
    <div id="non_mobile_table" style="display:block"> <!-- change style to ='block' if default is to show table -->
    
    <table style="width: 100%; margin: 0px 0px 10px 0px; font-size: 12pt; color: #DCDCDC; position: fixed; z-index: 1;" cellpadding="6">
     <tr>
      <td style="width: auto; background-color: #000000;">&nbsp;</td>
      <td style="width: 610px; background-color: #000000; text-align: left; font-weight: bold; padding-top: 12px; padding-left: 7px;">
       <div class="addThis">
        <!-- AddThis Button BEGIN -->
        <div class="addthis_toolbox addthis_default_style">
         <a class="addthis_button_facebook_like" fb:like:layout="button_count" style="padding-right: 15px;"></a>
         <a class="addthis_button_tweet"></a>
         <a class="addthis_button_google_plusone" g:plusone:size="medium" style="margin-left: -13px;"></a> 
         <a class="addthis_counter addthis_pill_style" style="margin-left: -15px;"></a>
        </div>
    <script type="text/javascript">
     var addthis_config = {"data_track_addressbar":true};
    </script>
    <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-502bf11a0aa51367"></script>
    <!-- AddThis Button END -->
       </div>
      </td>
      <td style="width: 610px; background-color: #000000; text-align: right; padding-right: 8px;">
       <a style="color: #DCDCDC;" href="https://twitter.com/DorianStaten" target="_blank">Follow Me On Twitter</a>&nbsp;&nbsp;|&nbsp;&nbsp;
       <a style="color: #DCDCDC;" href="http://thefreethinkerpost.com/~api/papers/5f3f36fc-5630-471d-bd65-cad4d6c696f2/rss" target="_blank">RSS Feed</a>&nbsp;&nbsp;|&nbsp;&nbsp;
       <a style="color: #DCDCDC;" href="mailto:dastaten@gmail.com">Contact Me</a>
      </td>
      <td style="width: auto; background-color: #000000;">&nbsp;</td>
     </tr>
     <tr>
      <td style="padding: 0px; margin: 0px; height: 10px; background-image: url(http://freethoughtexpress.com/shadow.png);
                 background-repeat: repeat-x; opacity:0.1; filter:alpha(opacity=10);" colspan="4">
      </td>
     </tr>
    </table>
    
    <div style="width: 100%; height: 60px;"></div>
    
    <table style="width: 100%; border: none;" cellpadding="6">
     <tr>
      <td style="width: auto; background-color: #444444;">&nbsp;</td>
      <td style="width: 31px; padding: 0px; background-color: #4682b4;"><img style="width: 31px; height: 109px;" src="http://freethoughtexpress.com/headlines.png" /></td>
      <td style="width: 910px; background-color: #FFFFFF; padding-top: 18px; padding-right: 0px; padding-left: 15px;">
    <!-- start sw-rss-feed code --> 
    <script type="text/javascript"> 
     rssfeed_url = new Array(); 
     rssfeed_url[0]="www.rightwingwatch.org/rss.xml"; 
     rssfeed_url[1]="http://feeds.feedburner.com/patheos/igFf"; 
     rssfeed_url[2]="www.addictinginfo.org/feed/"; 
     rssfeed_url[3]="http://feeds2.feedburner.com/thenewcivilrightsmovement"; 
     rssfeed_url[4]="http://thinkprogress.org.feedsportal.com/c/34726/f/638927/index.rss";
    
     rssfeed_frame_width="900"; 
     rssfeed_frame_height="96"; 
     rssfeed_scroll="on"; 
     rssfeed_scroll_step="9"; 
     rssfeed_scroll_bar="off"; 
     rssfeed_target="_blank"; 
     rssfeed_font_size="12"; 
     rssfeed_font_face="arial"; 
     rssfeed_border="on"; 
     rssfeed_css_url="http://freethoughtexpress.com/style/style5.css"; 
     rssfeed_title="off"; 
     rssfeed_title_name=""; 
     rssfeed_title_bgcolor="#3366ff"; 
     rssfeed_title_color="#fff"; 
     rssfeed_title_bgimage="http://"; 
     rssfeed_footer="off"; 
     rssfeed_footer_name="rss feed"; 
     rssfeed_footer_bgcolor="#fff"; 
     rssfeed_footer_color="#333"; 
     rssfeed_footer_bgimage="http://"; 
     rssfeed_item_title_length="120"; 
     rssfeed_item_title_color="#4682b4"; 
     rssfeed_item_bgcolor="#dbe3ea"; 
     rssfeed_item_bgimage="http://"; 
     rssfeed_item_border_bottom="off"; 
     rssfeed_item_source_icon="off"; 
     rssfeed_item_date="off"; 
     rssfeed_item_description="off"; 
     rssfeed_item_description_length="120"; 
     rssfeed_item_description_color="#666"; 
     rssfeed_item_description_link_color="#333"; 
     rssfeed_item_description_tag="off"; 
     rssfeed_no_items="25"; 
     rssfeed_cache = "25e48e30cdz68585z54df815c3c2909z"; 
    </script> 
    
    <script type="text/javascript" src="http://freethoughtexpress.com/jscripts/rss-feed.js"></script> 
    <!-- end sw-rss-feed code -->
    
      </td>
      <td style="width: 264px; background-color: #FFFFFF; vertical-align: middle;" valign="middle">
       <div style="height: 6px;"></div>
    
    <script type="text/javascript">
     google_ad_client = "ca-pub-0768038032574496";
    /* The Freethinker Post Header */
     google_ad_slot = "6308746164";
     google_ad_width = 234;
     google_ad_height = 60;
    </script>
    <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
    
      </td>
      <td style="width: auto; background-color: #444444;">&nbsp;</td>
     </tr>
    </table>
    
    </div>
    
    <script type="text/javascript">
    window.onload = function() {
    // use one (not both) of the following statements to show or hide the second table depending on media requirements
    //  document.getElementById('non_mobile_table').style.display = 'block';
    document.getElementById('non_mobile_table').style.display = 'none';
    }
    </script>
    
    </body>
    </html>
    Thank you for your help, by the way. I apologize for being reluctant to try this. I was just having a really bad day. But I really want to get this to work.

  9. #9
    Join Date
    Jul 2013
    Posts
    8
    Ah, I'm thinking I need to add some CSS from the page you linked to my stylesheet. I'm looking it over.

  10. #10
    Join Date
    Jul 2013
    Posts
    8
    Couldn't I do something like this...

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    
    <title> Untitled </title>
    
    <style type="text/css">
      @media only screen and (max-width: 480px){
     div.non_mobile_table: display: none;
    }
    </style>
    
    </head>
    <body>
    
    <div class="non_mobile_table">Some text</div>
    
    </body>
    </html>
    It's not working, so I know I have something wrong. But it seems to me that should hide the div on displays 480 and under. Any thoughts?

  11. #11
    Join Date
    Jul 2013
    Posts
    8
    I got it!

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    
    <title> Untitled </title>
    <style type="text/css">
      @media screen and (max-width: 1024px){
     div.non_mobile_table {
       display: none;
       }
    }
    </style>
    </head>
    <body>
    <div class="non_mobile_table"> Some Table </div>
    </body>
    </html>
    This hides the div on browsers with a width of 1024 and under, which is what I needed since the table within is over 1100 pixels wide. Thanks for the help. I couldn't have done it without that page you linked to.

    Dorian

  12. #12
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,373
    Glad I could help you try it for yourself. It is the best way to learn rather than just cut & paste.
    I've been away from my computer while you were experimenting.
    Good Luck!

  13. #13
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,344
    Ermmmmm don't forget that mobile devices can scroll around a web page... I have a Sony Xperia U and that does just fine with websites, what I get annoyed with is being forced in to using the mobile browser formats of web pages, really !@%&$'s me off.
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles