CODEWITHSUNDEEP
phpjavascripthtmlmobile-website
Jitendra Vyas
Jitendra Vyas

Reputation: 152687

Is it possible to remove some part of HTML from source for mobile using Javascript or any server side technique?

Is it possible to remove ( not hide using display:none ) some part of HTML from source for mobile using Javascript or any server side technique?

For example suppose below is the code inside <body> of one of the page of website

For example this is page for desktop Browsers.

<header class="hd1">

        <hgroup>
        <h1>A Responsive page</h1>
        </header>

    <div class="main">

        <section class="hs1">

            <header>
            <h1>This is a Page Sub Title</h1>
            </header>

            <p>Some content...</p>

            <h2>Demonstrating EM and STRONG</h2>

            <p>This text will have more importance></p>


        </section><!-- .hs1 -->

        </div><!-- .main -->

    <aside class="sidebar">
    <p>Sidebar content</p>
    </aside>

    <footer class="f1">
    <p>copyright &copy; year</p>
    </footer>

And using same page for Mobile devices I only want to remove <aside>...</aside> from the source.

I can't use different page because is CMS based. By updating content once I want to show on all devices. But in mobile version of Website I just want to remove (hide) some things from source. because If i will just use display:none mobile will load same amount of data of desktop version which is not for performance on mobile. Can we remove some specific part of source for mobile using Javascript or server side technique?

Edit after some responses

As many user commented that JavaScript cannot be used to reduce the payload to mobile users. So what could be the server side solution to deliver the same page but remove some part of it from source before delivering it?

Upvotes: 0

Views: 973

Answers (4)

nLL
nLL

Reputation: 5672

Well with asp.net you can set div or any HTML element to run on server side then hide or display programatically according to device. You can use some device and capability defection framework to decide.

I'm sure it wouldn't be too hard with PHP etc too

Upvotes: 0

kubetz
kubetz

Reputation: 8556

I'm not sure if this is an option for you but there is an alternative solution. It is not straightforward, but it is interesting :).

  1. Return by default only "lightweight" version of the page.
  2. Detect using JavaScript if we are on low bandwidth connection.
  3. If we are not on slow conection then load the rest using AJAX.

Modernizr introduced a feature test for detecting slow connection (see this) :

var connection = navigator.connection || { type: 0 }; // polyfill

return connection.type == 3 // connection.CELL_2G 
  || connection.type == 4   // connection.CELL_3G
  || /^[23]g$/.test(connection.type); // string value in new spec

The problem - it seems that this is not supported that well in current browsers.

After using this connection test (and maybe UA sniffing as a backup) you can load the rest of the page using $.load().

Upvotes: 0

hakre
hakre

Reputation: 197787

Sure this can be done server-side. You can solve this in two ways (script in the following means a script on the server-side, not in the browser):

  • The script builds the HTML and only output according to the target platform.
  • The script outputs the HTML and a filter / post-process changes that output according to the target platform.

One technique for that in the area of HTML/XHTML are XSL Transformations. You can run those with PHP, support for XSL is available in a PHP extension.

Naturally you can do this manually as well with string operations or DOMDocument and DOMXpath.

To post-process the standard output, you can do so by implementing an output handler/callback.

Upvotes: 0

Sergio Tulentsev
Sergio Tulentsev

Reputation: 230346

You can detect mobile browser on the server and just not render this tag.

There's no point in removing this using javascript, if you do this to save bandwidth.

Upvotes: 1

Related Questions