how to hide html elements from windows phone webbrowser control

Question

a little intro about what i need but cant find a complete answer anywhere. i use webbrowser control to show an website in my app, but i want to remove the above navigation which is alone in an html element with the class name "tabs-outer". i want to do this in my app and not in the css of the homepage, because it is made to show the content for mobile devices and i just want to display in my app in the webbrowser control without it and on desktop/mobile site that it remains visible like it is.

i found some java script codes like "$('#mydiv').allBut().hide();" i understand i must add something like "$('.tabs-outer').allBut().hide();" but where?! i have no clue, where to input this, how to call it in the app?! i need more info please. i found a thread that is 2 years old but no info about what exactly to do.

How and where to use this javascript, is it possible to add it in the app, so i call it in runtime this script?! any help? I am a newbie so i dont know anything about javascripts, and nothing about it from within windows phone and c#.

this is the way i use it now:

protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
    {

        String url = NavigationContext.QueryString["url"];
        if (!String.IsNullOrEmpty(url))
        {
           WebBrowser.Navigate(new Uri(url));
        }

    }
    private void WebBrowser_LoadCompleted(object sender, NavigationEventArgs e)
    {
        WebBrowser.InvokeScript("RemoveNav");
        SystemTray.SetProgressIndicator(this, null);
        WebBrowser.Visibility = Visibility.Visible;
    }

and i added a script on my webpage in the header like this:

<script type="text/javascript">
function RemoveNav() 
{ 
$('.tabs-outer').not(this).hide() 
}
</script>

and it works but, i must set the visibility of the webbrowser control to collapsed for the page to load - "hide" the element i want and then make is visible. but i need something to intercept the loading of this element, but only in my windows phone app in the webbrowser control.

Answer 1

You supplied jQuery source code. jQuery is open source and free to download and use. Please view this site for information about jQuery: http://learn.jquery.com/

Your exact answer is located and explained here: http://learn.jquery.com/using-jquery-core/document-ready/

Practically, after the page loads the code will run. Your necessary code is here:

<script>
// A $( document ).ready() block.
$( document ).ready(function() {
    $('.tabs-outer').hide();
});
</script>

You need to include this code in your webpage as a javascript. To use that code you also need to include the following line in the head section of your html page.

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

This will load the jQuery plugin which will interpret your script and hide all the divs that have their class set to "tabs-outer".

Good luck!

Answer 2

I have added this new answer because in some cases and for some users my previous answer will be suffice.

This problem can be solved with CSS. You load the page from a mobile device app and have access to the header section. With this in mind, you can set the div's style from there.

Using !important will override other specifications, but if the css already uses !important (I highly doubt it), you have to make sure your style is located after the page style. With this in mind, try adding the following code in the head element:

<style>
    .tabs-outer {
        display: none !important;
    }
</style>

This will completely remove your div.

UPDATE: Hide them for all devices and show them for non-wp

Step 1: Add the style in your header section

<style>
    .tabs-outer {
        display: none;
    }
</style>

Step 2: Add the import in the header section for the jQuery API

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

Step 3: Add the code in your header

<script type="text/javascript">
$(document).ready(function(){
    if(!navigator.userAgent.match(/IEMobile/i) && !navigator.userAgent.match(/Windows Phone/i)){
        $(".tabs-outer").show();
    }
});
</script>

That's it. Desktop is faster so it should load the elements and show them fast enough.

* *UPDATE: Use Media Queries and !important in CSS to hide what you need and customize the display

You can add the following code in CSS to solve the problem in the most efficient way:

@media only screen
and (min-device-width : 160px)
and (max-device-width : 640px) {
    .tabs-outer {
        display: none !important;
    }
    html {
        font-family : "Palatino Linotype";
        font-size : 12;
        font-color : #98AFC7;
    }

    .........

}

Resource: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

You can keep your custom style now. Sorry I didn't get it the first time, but it's been ages since I've worked on a website.

Please provide feedback. Again :-)