Mobile Web navigation bar hidden set to true

Question

Mobile Web navigation bar hidden set to true

You must Login before you can answer or comment on any questions.

Hi, I am developing a Titanium application which uses a web view in a window. In that I want to hide the navBar. I tried using 'navBarHidden:true' while creating a window. But it didn`t work. I tried using 'modal:true'. It worked. I mean the navBar is getting hide. In a tableview addEventlistener I am opening this window which consists of webview. The navBar is getting hide. But for the first time the window is not getting painted completely. I am getting some black space below the widnow. If I navigate to some other screen and come back the window is painting completely. I am facing this problem for the first time in mobileweb. This is the code I am trying.

var window= Titanium.UI.createWindow({
    backgroundImage :'none',
    showScrollbars : false,
    navBarHidden : true,
    title : 'WebDemo',
    orientationModes : [Titanium.UI.LANDSCAPE_LEFT, Titanium.UI.LANDSCAPE_RIGHT]            
});


if (Ti.platform.osname === 'mobileweb') {
    window.modal = true;        
}

With this code I am able to hide the navBar. But for the first time i.e., when the window is opened it is not painting completely through out the screen. But for the second time I am not facing this issue. Kindly share a solution ASAP...

Thanks in Advance...

1 Answer

Your Answer

Think you can help? Login to answer this question!

Answer 1

As I mentioned in the other thread, there's no such thing as painting in mobile web. What you are most likely seeing is that the window/view/whatever is not covering the entire screen. Try using a desktop browser debugger to see what the size of the control is at that point in time (right click and select "inspect element" or something similar).

Note that since there is no background image or background color specified in your code, the window will be transparent and you won't be able to see anything anyways (the default background color is black IIRC).

— answered 7 months ago by Bryan Hughes
answer permalink

18 Comments

Hi Bryan, As you said window is not covering the entire screen. An that too it happening for the first time. I mean when I open a window it is happening. I am adding some background image to the window. And I am adding some web views to the window. I tried using many ways. But didn`t work. Can you share a possible solution...

— commented 7 months ago by Prasad M.R.C

This code works perfectly fine for me

Titanium.UI.createWindow({
    backgroundImage :'none',
    showScrollbars : false,
    navBarHidden : true,
    title : 'WebDemo',
    orientationModes : [Titanium.UI.LANDSCAPE_LEFT, Titanium.UI.LANDSCAPE_RIGHT],
    backgroundColor: 'green',
    modal: true
}).open();

— commented 7 months ago by Bryan Hughes

Hi Bryan, Is it covering the entire screen? I am adding this window to a tab group. If I didn`t add the window to a tab group the window is covering the entire screen. But as per the requirement of my application I need to add the window to a tab group. When I add the window to a tab group it is not covering the entire screen. That I am facing this problem for the first time. Can you share me any solution now ASAP...

— commented 7 months ago by Prasad M.R.C
Hi Bryan, I had gone through this link regarding Mobile Web issues pending

http://jira.appcelerator.org/browse/TIMOB-8964?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel

And the issues were fixed in 3.0.0. But still navBarHidden:true is not fixed in 3.0.0 for mobile web. Can you check it once and share a possible solution ASAP...

— commented 7 months ago by Prasad M.R.C
In my example above yes, the window covers the entire screen. If you add it to a tabgroup then it covers all of the screen except for the tabs at the bottom, as in this example (which also works correctly):
```
var tabGroup = Titanium.UI.createTabGroup();
var win1 = Titanium.UI.createWindow({
    backgroundImage :'none',
    showScrollbars : false,
    navBarHidden : true,
    title : 'WebDemo',
    orientationModes : [Titanium.UI.LANDSCAPE_LEFT, Titanium.UI.LANDSCAPE_RIGHT],
    backgroundColor: 'green',
    modal: true
});
var tab1 = Titanium.UI.createTab({  
    icon:'KS_nav_views.png',
    title:'Tab 1',
    window:win1
});
tabGroup.addTab(tab1);
tabGroup.open();
```
according to all of my testing, navBarHidden:true works perfectly fine. In order for me to share a solution with you, I first need to know what the problem is. Can you share a more complete code example that directly demonstrates the broken behavior?

FYI the ticket you linked to did not address navBarHidden as that functionality was already in place.

— commented 7 months ago by Bryan Hughes
Hi Bryan,

I tested the code which you posted. It was working fine. The window is covering the entire screen. But the window which I am opening is added to a tab group that too opening in a table view add Event listener. I mean in a window I am having a table view. In the table add event listener I am opening this window. I am not directly opening window. I am returning the window object using module.exports = function name used. The code is as follows...
```
    var web1= Titanium.UI.createWebView({
    width : '100%',

    height : '100%',

    backgroundColor : 'green',

    //bottom : '10%',

    top : '1%',

    showScrollbars : false,

    scalesPageToFit : false,

    enableZoomControls : false

});

   var web2= Titanium.UI.createWebView({
    width : '100%',

    height : '100%',

    backgroundColor : 'green',

    //bottom : '10%',

    top : '1%',

    showScrollbars : false,

    scalesPageToFit : false,

    enableZoomControls : false

});

       var Window = Ti.UI.createWindow({    

        backgroundImage : 'none',

        showScrollbars : false,

        navBarHidden : true,


        title : 'Eligibility',
        orientationModes : [Titanium.UI.LANDSCAPE_LEFT, Titanium.UI.LANDSCAPE_RIGHT],

        modal:true

    });
```
window.add(web1);

window.add(web2);

web2.hide();

Initially I am hiding the web2 web view. In an event listener I am showing that web view. This is what the code I am using.

And one more thing Bryan. I am binding some web response to the html property of web view. In that response there is some content within <body></body> tags. And some more in between <script></script>. I am able to bind the content within <body></body> tags. But not the content within <script></script> tags. This is one more issue I am facing in mobile web along with the covering of window to the entire screen. Can you share me any possible solution why I am not able to bind the content of <script></script> tags to the html property of web view.

Thanks in Advance...

— commented 7 months ago by Prasad M.R.C
Hi Prasad. I need you to give me a complete working example. The code you posted doesn't do anything because no windows/tabgroups are ever opened.

On the webview issue: can you explain what you mean by "binding a web response"? Also, is the webview cross domain? If the webview is cross domain, then the contents basically become inaccessible.

— commented 7 months ago by Bryan Hughes
Hi Bryan, This is the code I am trying to bind to web view.

var action = ['hi', 'hello', 'how are you'];

var sample = "<html><head><script></script></head><body></body></html>";

prior to this sample variable I declared an array variable which I want to access in between the <script> tags of sample variable. I want to define a function in between <script> tags using the action array variable. I am able to declare and define function in between <script> tags by declaring array directly with in <script> tags. For example:

var sample = "<html><head><script>var array = ['hi', 'hello' , ' how are you']; </script></head><body></body></html>";

In this way I can declare the array variable statically within the tags and can access it. But if I use as follows:

var sample = "<html><head><script>var array ="+action+"; </script></head><body></body></html>";

Later I tried using

var sample = "<html><head><script>var array =" + JSON.stringify (action) + "; </script></head><bo

dy></body></html>";

It was working fine in android , iphone devices. I mean I am able to bind the array data to the web view. But if I run the same application in mobile web the array data is not getting binded. Can you share any possible solution ASAP...

— commented 7 months ago by Prasad M.R.C
Hi Bryan,

var tabGroup = Titanium.UI.createTabGroup();

var win1 = Titanium.UI.createWindow({
```
backgroundImage :'none',

showScrollbars : false,

navBarHidden : true,

title : 'WebDemo',

orientationModes : [Titanium.UI.LANDSCAPE_LEFT, Titanium.UI.LANDSCAPE_RIGHT],

backgroundColor: 'green',

modal: true
```
});

var tab1 = Titanium.UI.createTab({
```
icon:'KS_nav_views.png',

title:'Tab 1',

window:win1
```
});

tabGroup.addTab(tab1);

tabGroup.open();

I tried with the code you shared. Its working fine. But in my case I am adding a window to the window property of tab1. But there is a table in the window which I am adding to tab1. That means

var win1 = Titanium.UI.createWindow({
```
backgroundImage :'none',

showScrollbars : false,

navBarHidden : true,

title : 'WebDemo',

orientationModes : [Titanium.UI.LANDSCAPE_LEFT, Titanium.UI.LANDSCAPE_RIGHT],

backgroundColor: 'green',

modal: true
```
});

var table = Ti.UI.createTableView({

There are some rows added to this table.

});

In table addeventlistener i.e.,

table.addEventListener('click',function(){

tab1.open(win2);

});

win1.add(table);

The win2 which I am opening into tab1 is not covering the entire screen even though I keep modal:true. If I open the win2 to the window property of tab like below...

var tab1 = Titanium.UI.createTab({
```
icon:'KS_nav_views.png',

title:'Tab 1',

window:win2
```
});

The window is covering the entire screen. But If I open the win2 like...

table.addEventListener('click',function(){

tab1.open(win2);

});

The window is not covering the entire screen. This is what my problem. And regarding web view I am having the issue like...

var action = ['hi', 'hello', 'how are you'];

var sample = "<html><head><script></script></head><body></body></html>";

prior to this sample variable I declared an array variable which I want to access in between the <script> tags of sample variable. I want to define a function in between <script> tags using the action array variable. I am able to declare and define function in between <script> tags by declaring array directly with in <script> tags. For example:

var sample = "<html><head><script>var array = ['hi', 'hello' , ' how are you']; </script></head><body></body></html>";

In this way I can declare the array variable statically within the tags and can access it. But if I use as follows:

var sample = "<html><head><script>var array ="+action+"; </script></head><body></body></html>"; Later I tried using

var sample = "<html><head><script>var array =" + JSON.stringify (action) + "; </script></head><bo

dy></body></html>";

It was working fine in android , iphone devices. I mean I am able to bind the array data to the web view. But if I run the same application in mobile web the array data is not getting binded. Can you share any possible solution ASAP...

— commented 7 months ago by Prasad M.R.C
Hi Prasad, your sample is incomplete (win2 is never defined). Can you please post complete code that shows the behavior? No descriptions of behavior, but actual code please.

— commented 7 months ago by Bryan Hughes
Hi Bryan,

var tabGroup = Titanium.UI.createTabGroup();

var win1 = Titanium.UI.createWindow({

backgroundImage :'none',

showScrollbars : false,

navBarHidden : true,

title : 'WebDemo',

orientationModes : [Titanium.UI.LANDSCAPE_LEFT, Titanium.UI.LANDSCAPE_RIGHT],

backgroundColor: 'green',

modal: true

});

var tab1 = Titanium.UI.createTab({

icon:'KS_nav_views.png',

title:'Tab 1',

window:win1

});

tabGroup.addTab(tab1);

tabGroup.open();

I tried with the code you shared. Its working fine. But in my case I am adding a window to the window property of tab1. But there is a table in the window which I am adding to tab1. That means

var win1 = Titanium.UI.createWindow({

backgroundImage :'none',

showScrollbars : false,

navBarHidden : true,

title : 'WebDemo',

orientationModes : [Titanium.UI.LANDSCAPE_LEFT, Titanium.UI.LANDSCAPE_RIGHT],

backgroundColor: 'green',

modal: true });

var table = Ti.UI.createTableView({

There are some rows added to this table.

});

var win2 = Ti.UI.createWindow({

backgroundImage :'none',

showScrollbars : false,

navBarHidden : true,

title : 'WebDemo',

orientationModes : [Titanium.UI.LANDSCAPE_LEFT, Titanium.UI.LANDSCAPE_RIGHT],

backgroundColor: 'green',

modal: true

});

In table addeventlistener i.e.,

table.addEventListener('click',function(){

tab1.open(win2);

});

win1.add(table);

The win2 which I am opening into tab1 is not covering the entire screen even though I keep modal:true. If I open the win2 to the window property of tab like below...

var tab1 = Titanium.UI.createTab({

icon:'KS_nav_views.png',

title:'Tab 1',

window:win2

});

The window is covering the entire screen. But If I open the win2 like...

table.addEventListener('click',function(){

tab1.open(win2);

});

The window is not covering the entire screen. This is what my problem.

And regarding web view I am having the issue like...

var action = ['hi', 'hello', 'how are you'];

var sample = "<html><head><script></script></head><body></body></html>";

prior to this sample variable I declared an array variable which I want to access in between the <script> tags of sample variable. I want to define a function in between <script> tags using the action array variable. I am able to declare and define function in between <script> tags by declaring array directly with in <script> tags. For example:

var sample = "<html><head><script>var array = ['hi', 'hello' , ' how are you']; </script></head><body></body></html>";

In this way I can declare the array variable statically within the tags and can access it. But if I use as follows:

var sample = "<html><head><script>var array ="+action+"; </script></head><body></body></html>"; Later I tried using

var sample = "<html><head><script>var array =" + JSON.stringify (action) + "; </script></head><bo dy></body></html>";

It was working fine in android , iphone devices. I mean I am able to bind the array data to the web view. But if I run the same application in mobile web the array data is not getting binded. Can you share any possible solution ASAP...

— commented 7 months ago by Prasad M.R.C
Hi Bryan, Kindly share a solution for the issues related to web view mainly. Assume there is a web view I want to bind that sample variable to the web view like

webview.html = sample;

To access the action array variable I converted it to stringify using JSON.stringify(action). It worked in devices. But If I run the same application in mobile web the values of that action array are not getting binded to the web view. So kindly share a possible solution...

— commented 7 months ago by Prasad M.R.C
Hi Prasad. Your code sample is still incomplete. No windows are ever opened. I need you to post a complete code example, something I can copy and paste into an app.js and run without modification.

— commented 7 months ago by Bryan Hughes
Hi Bryan leave about the covering of window for the entire screen. But share a solution for the issues regarding web view.

var action = ['hi', 'hello', 'how are you'];

var sample = "<html><head><script></script></head><body></body></html>";

prior to this sample variable I declared an array variable which I want to access in between the <script> tags of sample variable. I want to define a function in between <script> tags using the action array variable. I am able to declare and define function in between <script> tags by declaring array directly with in <script> tags. For example:

var sample = "<html><head><script>var array = ['hi', 'hello' , ' how are you']; </script></head><body></body></html>";

In this way I can declare the array variable statically within the tags and can access it. But if I use as follows:

var sample = "<html><head><script>var array ="+action+"; </script></head><body></body></html>"; Later I tried using

var sample = "<html><head><script>var array =" + JSON.stringify (action) + "; </script></head><bo dy></body></html>";

Assume there is a web view I want to bind that sample variable to the web view like

webview.html = sample;

To access the action array variable I converted it to stringify using JSON.stringify(action). It worked in devices. But If I run the same application in mobile web the values of that action array are not getting binded to the web view. So kindly share a possible solution...

— commented 7 months ago by Prasad M.R.C
Hi Bryan leave about the covering of window for the entire screen. But share a solution for the issues regarding web view.

function arrayFunction(){

var action = ['hi', 'hello', 'how are you'];

}

var sample = "<html><head><script></script></head><body></body></html>";

prior to this sample variable I declared an array variable which I want to access in between the <script> tags of sample variable. I want to define a function in between <script> tags using the action array variable. I am able to declare and define function in between <script> tags by declaring array directly with in <script> tags. For example:

var sample = "<html><head><script>var array = ['hi', 'hello' , ' how are you']; </script></head><body></body></html>";

In this way I can declare the array variable statically within the tags and can access it. But if I use as follows:

var sample = "<html><head><script>var array ="+action+"; </script></head><body></body></html>";

Later I tried using

var sample = "<html><head><script>var array =" + JSON.stringify (action) + "; </script></head><bo dy></body></html>";

Assume there is a web view I want to bind that sample variable to the web view like

webview.html = sample;

Actually we are calling arrayFunction in body onLoad. which will returns the array elements those elements we require it in div tags.

To access the action array variable I converted it to stringify using JSON.stringify(action). It worked in devices. But If I run the same application in mobile web the values of that action array are not getting binded to the web view. So kindly share a possible solution...

— commented 7 months ago by Prasad M.R.C
For the webview issue, I need you to provide a complete code sample, not a description of the problem.

— commented 7 months ago by Bryan Hughes
Hi Bryan, Below is my code regarding window not covering the entire screen. If I execute the below code in smart phones it is working fine. But I execute the same in mobile web I am facing an issue like window not covering the entire screen. And that too I am facing this issue when I execute the same application in android device browser. In iphone browser I am not facing this issue.

app.js:

var tabGroup = Titanium.UI.createTabGroup();

var win1 = Titanium.UI.createWindow({

backgroundImage :'none',

showScrollbars : false,

navBarHidden : true,

title : 'WebDemo',

backgroundColor: 'green'
});

Ti.App.tab1 = Titanium.UI.createTab({

icon:'KS_nav_views.png',

title:'Tab 1',

window:win1 });

var row = Ti.UI.createTableViewRow({

width:Ti.UI.FILL,

backgroundColor:'white'

});

var tabledata =[];

tabledata.push(row);

var table= Ti.UI.createTableView({

data:tabledata

});

table.addEventListener('click',function(){

var win = require('controller');

win.openWindow();

});

win1.add(button);

tabGroup.addTab(Ti.App.tab1);

tabGroup.open();

window.js:

function window() {

var win2 = Ti.UI.createWindow({

backgroundImage : 'none',

showScrollbars : false,

navBarHidden : true,

title : 'WebDemo',

backgroundColor : 'red',

modal : true,

height:Ti.Platform.displayCaps.platformHeight

});

var button = Ti.UI.createButton({

title:'Button'

});

win2.add(button);

button.addEventListener('click',function(){

var newwin = require('controller');

newwin.opennewWindow();

});

return win2;

};

module.exports = window;

controller.js:

exports.openWindow = function() {

var win = require('window');

var window = new win();

Ti.App.tab1.open(window);

};

exports.opennewWindow = function() {

var win = require('newWindow');

var window = new win();

window.open();

};

newWindow.js:

function NewWindow() {

var win = Ti.UI.createWindow({

backgroundImage : 'none',

showScrollbars : false,

navBarHidden : true,

title : 'WebDemo',

backgroundColor : 'blue'

});

var label = Ti.UI.createLabel({

text : 'This is a NewWindow'

});

win.add(label);

return win;

};

module.exports = NewWindow;

— commented 7 months ago by Prasad M.R.C
There are two bugs in your code. In app.js 'button' is not defined anywhere. The real problem though is that you declare variables named 'window,' which is not allowed in mobile web. You can't name your variables anything that is pre-defined by the browser, including window, document, body, location, etc.

— commented 7 months ago by Bryan Hughes
Show 15 more comments