how to hide div using javascript for web browser in wp7

Question

I Am developing simple wp7 app for learning. I want to do the below tasks In Windows Phone 7 application.

navigate to a webpage (http://some-url/) and am able to load this page(using webBrowser) i don't want to display header div (on top of the page). how can i call java script (InvokeScript) for this web browser page

and this html webpage is not my app.

Try to [InvokeScript](http://msdn.microsoft.com/en-us/library/cc491132%28v=vs.95%29.aspx) and create a javascript function to hide this div. — Aure77, Jan 07 '13 at 11:02

Aure77 · Answer 1 · 2013-01-07T11:14:59.983

2

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title></title>
    <script type="text/javascript" >
    function HideDiv(id) {
        document.getElementById(id).style.display = 'none';
    }
    function ShowDiv(id) {
        document.getElementById(id).style.display = 'block';
    }
    </script>
 </head>
<body>
    <div id="hide-me">Hide me !</div>
</body>
</html>

Using you're WebView :

Hide div :

wv.InvokeScript("HideDiv", new string[] { "hide-me" });

Show div :

wv.InvokeScript("ShowDiv", new string[] { "hide-me" });

edited Jan 07 '13 at 11:14

answered Jan 07 '13 at 11:07

Aure77

3,034
7
33
53

this `invokeScript` is used to hide the html page that u written above but i am calling url and want to hide those page any way ? – sunny Jan 07 '13 at 11:19
So, look this method : http://stackoverflow.com/questions/153748/how-to-inject-javascript-in-webbrowser-control or try with eval function (`wv.InvokeScript("eval", new String[] { "my js code" }`); – Aure77 Jan 07 '13 at 11:56

score 1 · Answer 2 · answered Jan 07 '13 at 10:59

1

You can try using jQuery. For example, if the header id is #header then:

$("#header").hide();

answered Jan 07 '13 at 10:59

010 Pixel

195
3
14

how can i include this in my wp7 app. i know jquery and java script :) – sunny Jan 07 '13 at 11:03
wp? Do you mean Wordpress? – 010 Pixel Jan 07 '13 at 11:07
If not then you try to load the data as xml and only show the elements which you need. try jquery: var jqxhr = $.get(xmlFilePath, function(data) { xmlData = data; }) – 010 Pixel Jan 07 '13 at 11:28

score 1 · Accepted Answer · answered Jan 08 '13 at 06:10

the above @Aure77 ans works fine but apply Invoke script function diff

you can use InvokeScript function to remove or hide am also struggled to solve this I think Your are using InvokeScript in PhoneApplicationPage_Loaded, webBrowser1_Navigated that will throws errors

and you can use this method in another event handler like MainPage_MouseLeftButtonDown, webBrowser1_LoadCompleted and the code is

private void webBrowser1_LoadCompleted(object sender, System.Windows.Navigation.NavigationEventArgs e)
    {
        webBrowser1.InvokeScript("eval", "document.getElementsByTagName('your_div_name')[0].style.display = 'none';");
    }

that works fine for me :) try this

thanks kartheek this is perfrct and thanks a lot u save my time — sunny, Jan 08 '13 at 06:44

Mahmoud Farahat · Answer 4 · 2013-01-07T11:10:23.643

0

using InvokeScript :

code to call javascript function from wp app

webBrowser1.InvokeScript("hideDiv","");

javascript code

 function hideDiv(){
    document.getElementById('Your_Div_ID').style.display='none';
    }

edited Jan 07 '13 at 11:10

answered Jan 07 '13 at 11:01

Mahmoud Farahat

5,364
4
43
59

that html page in not in my app. and where can i include this js in my app – sunny Jan 07 '13 at 11:05

how to hide div using javascript for web browser in wp7

4 Answers4