Mobile IE changing display properties in CSS

Discussion in 'Javascript' started by Stefan Finzel, Oct 7, 2005.

  1. 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>
     
    Stefan Finzel, Oct 7, 2005
    #1
    1. Advertisements

  2. Stefan Finzel

    RobG Guest

    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>
     
    RobG, Oct 8, 2005
    #2
    1. Advertisements

  3. Stefan Finzel

    Randy Webb Guest

    Stefan Finzel said the following on 10/7/2005 2:29 PM:
    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 Webb, Oct 8, 2005
    #3
  4. 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.name == elName) {
    el = document.forms[j].elements;
    break;
    }
    }
    }
    }
    return el;
    }
    </script>
    <FORM ACTION="#">
    <INPUT ONCLICK="javascript:ev_toggle_display('data');return 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.
     
    Stefan Finzel, Oct 8, 2005
    #4
  5. Stefan Finzel

    RobG Guest

    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.

    Yes, if supported it should return [object].

    [...]
    Yes, if document.all is supported it should return [object] - it is
    effectively a collection of every element in the document.
    Again, if supported it will return 'object'. If the style object isn't
    supported elsewhere, it's ulikely to be supported here.
    That's amazing, have you tried:

    el = document.forms[elName];


    [...]
     
    RobG, Oct 9, 2005
    #5
  6. Hi Rob,

    RobG wrote:
    ....
    ....

    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.

    ....
    ....

    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.

    ....
    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
     
    Stefan Finzel, Oct 9, 2005
    #6
  7. Stefan Finzel

    RobG Guest

    Stefan Finzel 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.

    "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>


    [...]
     
    RobG, Oct 10, 2005
    #7
  8. RobG wrote:
    ....
    ....
    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.
     
    Stefan Finzel, Oct 10, 2005
    #8
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.