By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
432,086 Members | 1,875 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 432,086 IT Pros & Developers. It's quick & easy.

Mobile IE changing display properties in CSS

P: n/a
Hi,

is there a way to change the display property on Windows Mobile 2003 SE
Mobile/Pocket Internet Explorer? See following example.

Please note: visibilty property has the same problem.

Is there any other way to display/undisplay parts of web pages?

TIA

Stefan

<HTML><HEAD><TITLE>Test Display</TITLE></HEAD><BODY>

<P onclick="document.all.data.style.display=
(document.all.data.style.display=='none') ? '' : 'none'">
Click here to display more or less data:</P>

<P id=data style="display:none">More data.</P>

</BODY></HTML>

Oct 7 '05 #1
Share this Question
Share on Google+
7 Replies


P: n/a
Stefan Finzel wrote:
Hi,

is there a way to change the display property on Windows Mobile 2003 SE
Mobile/Pocket Internet Explorer? See following example.

Please note: visibilty property has the same problem.

Is there any other way to display/undisplay parts of web pages?

TIA

Stefan

<HTML><HEAD><TITLE>Test Display</TITLE></HEAD><BODY>

<P onclick="document.all.data.style.display=
(document.all.data.style.display=='none') ? '' : 'none'">
Click here to display more or less data:</P>

<P id=data style="display:none">More data.</P>

</BODY></HTML>


Dunno, try the following:
<script type="text/javascript">

function showHide(id)
{
if(document.getElementById) {
var el = document.getElementById(id);
}
if (el && el.style){
el.style.display = ('none' == el.style.display)? '' : 'none';
}
}

</script>

<p onclick="showHide('data');">
Click here to display more or less data:</p>

<p id="data">More data.</p>

--
Rob
Oct 8 '05 #2

P: n/a
Stefan Finzel said the following on 10/7/2005 2:29 PM:
Hi,

is there a way to change the display property on Windows Mobile 2003 SE
Mobile/Pocket Internet Explorer? See following example.

Please note: visibilty property has the same problem.

Is there any other way to display/undisplay parts of web pages?

TIA

Stefan

<HTML><HEAD><TITLE>Test Display</TITLE></HEAD><BODY>

<P onclick="document.all.data.style.display=
(document.all.data.style.display=='none') ? '' : 'none'">
Click here to display more or less data:</P>

<P id=data style="display:none">More data.</P>

</BODY></HTML>


Several thoughts:

Try alerting document.all.data.style.display to see what it contains.
Try it without the ternary ?: operator to see if maybe it doesn't
support it (It should throw an error if it doesnt, but, who knows).
Try the gEBI approach that Rob posted about.
Try alerting document.all.data.style.display after you have attempted to
change it to see what it contains.

The last one will tell you if it doesn't support changing it, or, that
it supports it but won't change the display (a bug).

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Oct 8 '05 #3

P: n/a
Well, it's really sad. getElementById is not supported by Pocket IE.
I've read it'll be there with Microsoft Windows Mobile 5.0. But all our
devices are using Windows Mobile 3.0 and even may not be upgradable.

Changing Robs code I've found another annoying difference. onclick is
not executed on <P>. It looks like <a>, <form> or a form element
<input>,.. is required to get an onclick event.

The most annoying part is the acceptance of the display style attribute
at loading time. Setting it in the html source to none will hide the
element(s). Not using or setting it to something else will display the
element(s) as expected. It looks like there is a switch anywhere else.
Any idea? Sorry the following example code now gets large.

TIA

Stefan
<script type="text/javascript">
function ev_toggle_display(name) {
el = ev_getElementByName(name);
// looking at element
// alert (el);
// returns: [object]
// alert (el.style);
// returns nothing (=undefined?)
// alert (el.style.display);
// returns Microsoft JScript runtime error
// line: # character: #
// Error 'el.style.display' is null or not an object
// Source: (null)

// looking at document
// alert (document);
// returns: [object]
// alert (document.all);
// returns nothing (=undefined?)
// alert (document.all.data);
// returns Microsoft JScript runtime error
// line: # character: #
// Error 'document.all.data' is null or not an object
// Source: (null)

// alert (document.forms);
// returns: [object]
//alert (document.forms[0].data);
// returns: [object]
// alert (document.forms[0].data.style);
// returns nothing (=undefined?)
if (el.style.display == 'none') {
el.style.display = '';
} else {
el.style.display = 'none'
}
}

function ev_getElementByName(elName) {
// all elements ID and NAME are kept the same and unique
var el = null;
if (document.getElementById) {
el = document.getElementById(elName);
} else {
// Pocket IE: getElementById is not available
// Walk through all forms and elements
for (var j=0; j<document.forms.length; j++) {
if (document.forms[j].name == elName) {
el = document.forms[j];
break;
}
for (var i=0;i<document.forms[j].elements.length;i++) {
if (document.forms[j].elements[i].name == elName) {
el = document.forms[j].elements[i];
break;
}
}
}
}
return el;
}
</script>
<FORM ACTION="#">
<INPUT ONCLICK="javascript:ev_toggle_display('data');retu rn false;"
TYPE="SUBMIT" VALUE="Click here to display more or less data">
<INPUT ID="data" NAME="data" STYLE="display:none;" TYPE="TEXT"
VALUE="More data.">
</FORM>

As before. The code is working on IE5+/6, NS, Moz, FF, Galeon, Konqueror.
RobG wrote:
<script type="text/javascript">

function showHide(id)
{
if(document.getElementById) {
var el = document.getElementById(id);
}
if (el && el.style){
el.style.display = ('none' == el.style.display)? '' : 'none';
}
}

</script>

<p onclick="showHide('data');">
Click here to display more or less data:</p>

<p id="data">More data.</p>

Oct 8 '05 #4

P: n/a
Stefan Finzel wrote:
Well, it's really sad. getElementById is not supported by Pocket IE.
I've read it'll be there with Microsoft Windows Mobile 5.0. But all our
devices are using Windows Mobile 3.0 and even may not be upgradable.

Changing Robs code I've found another annoying difference. onclick is
not executed on <P>. It looks like <a>, <form> or a form element
<input>,.. is required to get an onclick event.

The most annoying part is the acceptance of the display style attribute
at loading time. Setting it in the html source to none will hide the
element(s). Not using or setting it to something else will display the
element(s) as expected. It looks like there is a switch anywhere else.
Any idea? Sorry the following example code now gets large.
Yeah, sad.

You could try changing the class from one with - display: none; - to one
with - display: ; - but I don't like your chances.

It might be best to forget the whole hide/show thing for the time being,
or implement it with graceful failure and wait for 5.0 - don't hide
anything in the HTML source, use script when the page loads. That way
anything that can't be revealed with script shouldn't be hidden in the
first place.

Seems PDAs need this type of functionality the most, yet it's not supported.


TIA

Stefan
<script type="text/javascript">
function ev_toggle_display(name) {
el = ev_getElementByName(name);
// looking at element
// alert (el);
// returns: [object]
// alert (el.style);
// returns nothing (=undefined?)
Yes, if supported it should return [object].

[...] // looking at document
// alert (document);
// returns: [object]
// alert (document.all);
// returns nothing (=undefined?)
Yes, if document.all is supported it should return [object] - it is
effectively a collection of every element in the document.
// alert (document.all.data);
// returns Microsoft JScript runtime error
// line: # character: #
// Error 'document.all.data' is null or not an object
// Source: (null)

// alert (document.forms);
// returns: [object]
//alert (document.forms[0].data);
// returns: [object]
// alert (document.forms[0].data.style);
// returns nothing (=undefined?)
Again, if supported it will return 'object'. If the style object isn't
supported elsewhere, it's ulikely to be supported here.
if (el.style.display == 'none') {
el.style.display = '';
} else {
el.style.display = 'none'
}
}

function ev_getElementByName(elName) {
// all elements ID and NAME are kept the same and unique
var el = null;
if (document.getElementById) {
el = document.getElementById(elName);
} else {
// Pocket IE: getElementById is not available
// Walk through all forms and elements
for (var j=0; j<document.forms.length; j++) {
if (document.forms[j].name == elName) {
el = document.forms[j];
break;


That's amazing, have you tried:

el = document.forms[elName];
[...]

--
Rob
Oct 9 '05 #5

P: n/a
Hi Rob,

RobG wrote:
....
You could try changing the class from one with - display: none; - to one
with - display: ; - but I don't like your chances. ....

A good point! I only tried to modify a class so far and failed.
Switching the class completly is much better.

But neither element.style nor document.styleSheets exists.

.... It might be best to forget the whole hide/show thing for the time being,
or implement it with graceful failure and wait for 5.0 - don't hide
anything in the HTML source, use script when the page loads. That way
anything that can't be revealed with script shouldn't be hidden in the
first place.

Seems PDAs need this type of functionality the most, yet it's not
supported. ....

Yes, it's really sad. I started javascript only to help small screen
users and give them some additional accessibility features: larger
fonts, avoid narrow native keypads by using spezialized character
selections which are displayed by larger buttons/links, validation at
input ...

The display/undisplay ougth to be used while opening keypads like a
calendar by a small button/link. The button is not available at all if
the keypads are not runable - no graceful failure, no javascript console
error and never no failure at all as long as it can be avoided. I
activated showing javascript errors on the PDA and its a pain being
bombed with alerts while visiting some web sites.

The worst point, displaying all of these keypads on a page is no
alternative. There may be several of them and most of them may be only
rarely used. The applications is designed for small screens. Not hiding
the keypads will corrupt the simple page design and force users to
scroll, turning round the benefit of the keypads usage.

Reloading a modified version of a page each time would be another way.
But the application gets very slow through bandwidth, processor
limitations (520 MHz) and maybe https. Although all pages are small and
completly simple and tidy html sources the PDA requires up to three
seconds (my old PC for tests has 166MHz, 64MB RAM and never needed more
than half a second). Reloading hits the workflow and surely the
acceptance of the pages. A bored manager waiting at the airport may
accept this but no technician at his workplace.

Opening another window pulls users out of the local context. It is not
feasible too, as window.open/moveTo/resizeto is not supported by Pocket IE.

Rob, you are totaly right. It seems we have to wait for Windows Mobile
5.0 and a hopefully better implementation of its Mobile IE.

.... That's amazing, have you tried:

el = document.forms[elName];


Yes, I tried it. Pocket IE does not support it.
A private conclusion at the end:

Using javascript for porting existing cross platform Web applications to
Mobile Web applications seems to be my major design decision failure in
the moment (Oct. 2005). It's mainly limited environment, its
requirements and implementation gaps causing problems. Writing
standalone applications maybe a better way while waiting for WM5 break
through.

A couple of years ago I decided to make Web applications run completly
with/without javascript and with/without CSS and .... These days I would
call this nursing dinosaurs. Nethertheless it saved this project from
getting a runaway.

I am very pleased to this newsgroup and it's responsiveness (I hope
that's the correct phrase). Thanks to all and special thanks to Rob.

Kind regards to all

Stefan
Oct 9 '05 #6

P: n/a
Stefan Finzel wrote:
[...]
Rob, you are totaly right. It seems we have to wait for Windows Mobile
5.0 and a hopefully better implementation of its Mobile IE.


I guess you could try for some other browser, have you looked at Minimo?
Perhaps not yet ready for prime time, but worth looking at:

<URL:http://www.mozilla.org/projects/minimo/>

Apparently it runs on Windows 'Smartphones' and Mobile 2003.

"Minimo 0.007 is for mobile devices running Windows CE and offers many
of the features in Firefox, such as tabbed browsing, support for
plug-ins and has an interface written in XUL, which stands for
extensible user interface language, Chris Hofmann, director of
engineering at Mozilla, said.

"XUL is a set of XML tags developed by Mozilla for describing
graphical user interfaces. The technology supports cascading style
sheets, which is helpful in adapting web pages to the small screens
of cellular phones; JavaScript and resource description language, or
RDF, for storing dynamic content.

"No timetable for general availability of Minimo has been set."

<URL:http://www.internetweek.com/news/166403196>

Checkout the screenshots on various devices. You could also try
handhelds.org for more information abut PDA software in general:

<URL:http://www.handhelds.org/geeklog/index.php>
[...]


--
Rob
Oct 9 '05 #7

P: n/a

RobG wrote:
....
I guess you could try for some other browser, have you looked at Minimo?
Perhaps not yet ready for prime time, but worth looking at:

<URL:http://www.mozilla.org/projects/minimo/>

Apparently it runs on Windows 'Smartphones' and Mobile 2003.

....
A really lovely little browser! Almost all of my javascripts run out of
the box - only window.open seems to be silently ignored (Pocket IE
handles is like a raw link, which is mostly acceptable.)

Was expecting Opera to be supported on PDAs but Minimo looks like a good
alternative.

Mobile Internet Explorer is faster and looks better than Minimo and of
cause it is already installed. But it is nice to have an evolving Minimo
too.

PS: There are some minor problems in Minimo with the cursor which is not
at the input position. Fonts are too large (ignoring style settings?).
Resizing frames using the slider does not work while resizing main
window to much larger than available screen is possible. Using https
even seems to kill Minimo.
Oct 10 '05 #8

This discussion thread is closed

Replies have been disabled for this discussion.