Specific height for div in Mobile Windows 6.1

4
votes

I always come to stackoverflow to check for answers; however, for the current question I have not found any relevant information yet.

I have a Mobile Windows 6.1 PDA and I want to create a simple HTML page for it. I want specific divs of the page to have a specific height, based on the text that are inside these divs.

  • Maximum I want 2 rows of text.
  • The text can contain HTML code. I want to slice the text but do not hurt the HTML code.

Before you think "there are 100 different solutions with CSS or Javascript for this" I would like to mention that 6.1 uses a mixture of IE4 with some features of IE5. The browser supports only CCS1 (so no max-height, no overflow:hidden, no position: absolute, no top, bottom etc).

Also the browser supports a very limited range of Javascript functions. I thought to parse the DOM of Javascript and constantly check if the text inside the div is bigger than 28pt (this is two rows) and cut it. However, most of the DOM functions do not work. createElement() does not work, appendChild either. Only getElementById and innerHTML work.

I found this solution https://code.google.com/p/cut-html-string/ for Javascript, which works perfectly with modern browsers, however, since it contains functions such createElement(), appendChild(), cloneNode() etc. it does not work with IE4. Work-around to the createElement() is the innerHTMl which works perfectly but then the browser reports errors for the DOM functions that the code uses.

P.S: Please do not answer "change PDA etc.". I know that the OS is very old but I have to use it.

1
javascriptcsswindows-mobilewindows-mobile-6.1
+1. I do not know if there is an answer, but I have seen many of these older devices in use supporting what appears to be some sort of browser. There could be a version of Opera that runs on WM, but I would not know where to tell you to go for that. – jp2code
you are looking for a workaround for missing functionality. That may be a solution but it is better to stay with the restrictions and do not try the nearly impossible. It sounds you are delpoying the solution to a limitted number of devices in access. So you may go with an alternative browser, for example the HTML5 browser zetaKey. – josef
Thank you about your comments! As you mention, I am looking for a workaround for a missing functionality. I thought that someone would know something about this problematic situation. I have searched a lot the past days and I could not find any solution... Unfortunately the css and Javascript capabilities of IE4 are extremely low! @josef: Thanks for your answer. Changing browser is not an option... – Christos Monogios

1 Answers

0
votes

Ok so if your only dealing with 1 style of device could you use a javascript viewport sniff maybe and use the inner html adjustments to adjust to a new style sheet so that you can have it work for said device, if you have to program for multiple devices you can create multiple style sheets. I would advise for testing purposes to see if anyone has an android or iOs device with similar screen sizes so you can use something like edge inspect from adobe creative cloud that you can adjust and see the changes. Someone has a thing on viewport find here Find the exact height and width of the viewport in a cross-browser way (no Prototype/jQuery) that may be of use. Since your dealing with basic javascript you should just be able to change the address of a css link and that may be a solution. If i mistook any of the functionality of the device im sorry however it has been a while since I had a windows mobile 6.x phone.