Is it possible to use Java "screen.width" in RB?

[donnybowers]

I'm not familiar with Java Script (or any web scripting language except HTML, CSS and a little PHP), but I'm realizing that there are a lot of things you can't do with RB alone. To create a really good website you need to be able to determine the user's screen width (pixels) at the very least. Screen height would also be helpful because it would enable you to (for example) roughly determine if the user is using a cell phone or a PC/Laptop.

If anyone knows how to use Javascript (or some other scripting language) to easily determine the user's screen dimensions it would be extremely helpful to me and to many other RB users who want to format an app for the user's screen dimensions. The hardest thing about web development isn't placing the data on the web page, but placing it on there in a way that is convenient and easily readable for the user.

I'm mostly interested in how to get the users screen width into an RB variable, i.e. screenWidth or screenWidth$. I can then use this variable to define a table width, font's, image sizes, etc. which can then be rendered to comfortably fit the user's device display. Being able to do this with screen height would be very useful also because then you could rearrange a set of elements horizontally on a wide screen (i.e. PC or Laptop) and vertically on a tall screen (i.e. most Cell Phones).


w3schools Java - screen.width property

[meerkat]

The reason you don't see questions about screen sizes on this form is because it's not really a concern.
Without HTML, you usually specify the screen size and the row and column for everything you place on the screen.
HTML places data in a relative position. That was done so you don't have to worry about it. I personally place everything in tables. You can tell the table to be any percent wide or let it float. Using a phone you can pinch the screen or turn the phone sideways. The user controls what they see, and from what I've done the users prefer it that way.
I have on some occasions placed a button for [Larger] or [Smaller]. If they click [Larger], I increase the size up to a certain point. And for [Smaller], decrease it. But from what I could tell, I doubt it was used much. They simply use the scroll at the bottom and side of the screen.
I guess what I'm saying, I would make the screens as flexible as you can and not worry about every possible device they could be using.
This is just my way of designing screens, and I've never had anyone complain about it.
Hope this helps.
Dan

[donnybowers]

I have thought about using "Larger" and "Smaller" buttons if there's not a more convenient alternative. People like convenience and a lot of people won't come back to a site if it isn't convenient, intuitive and easy to read. I almost always use a table as a container to center everything on the screen, but <table width='90%'> doesn't work unless it's inside another table's <td>. If I could get the width of the first table to size to 90 or 100% most of my problem would already be solved. I haven't been able to do that.

Another reason I want to retreive the screen width is because I will also be able to resize the fonts proportionally by specifying font sizes using a percentage of the screen resolution. In some cases, if the user has certain screen resolutions you need to stack your widgets vertically instead of horizontally and vice versa. You actually can create web pages that work for a majority of users. There's some CSS that you can use to detect screen size and adjust some things accordingly, but I haven't been able to get that to work either. @media rule w3schools

[meerkat]

You can set the size of a table>
Here are a few examples with different sizes and different cell sizes and actions.

bf$ = "<SPAN STYLE='font-family:Arial; font-weight:700; font-size:12pt'>"
html bf$;"<TABLE BORDER=1 CELLPADDING=0 CELLSPACING=0 WIDTH=100%>
<TR>
<TD WIDTH=33%>A</TD>
<TD WIDTH=25% ALIGN=CENTER>B</TD>
<TD WIDTH=25% ALIGN=RIGHT>C</TD>
</TR><TR>
<TD WIDTH=33%>DDD</TD>
<TD WIDTH=25% ALIGN=CENTER>EEE</TD>
<TD WIDTH=25% ALIGN=RIGHT>FFF</TD>
</TR><TR>
<TD WIDTH=33%>GGGG</TD>
<TD WIDTH=25% ALIGN=CENTER>HHHH</TD>
<TD WIDTH=25% ALIGN=RIGHT>IIII</TD>
</TR>
</TABLE>

<P>
<TABLE BORDER=1 CELLPADDING=0 CELLSPACING=0>
<TR>
<TD>A</TD>
<TD ALIGN=CENTER>B</TD>
<TD ALIGN=RIGHT>C</TD>
</TR><TR>
<TD>DDD</TD>
<TD ALIGN=CENTER>EEE</TD>
<TD ALIGN=RIGHT>FFF</TD>
</TR><TR>
<TD>GGGG</TD>
<TD ALIGN=CENTER>HHHH</TD>
<TD ALIGN=RIGHT>IIII</TD>
</TR></TABLE>


<TABLE BORDER=1 CELLPADDING=0 CELLSPACING=0 WIDTH=50%>
<TR>
<TD>A</TD>
<TD ALIGN=CENTER>B</TD>
<TD ALIGN=RIGHT>C</TD>
</TR><TR>
<TD>DDD</TD>
<TD ALIGN=CENTER>EEE</TD>
<TD ALIGN=RIGHT>FFF</TD>
</TR><TR>
<TD>GGGG</TD>
<TD ALIGN=CENTER>HHHH</TD>
<TD ALIGN=RIGHT>IIII</TD>
</TR></TABLE>"



You can also get the size of the screen with the following JS:

<p id="gimme the size"></p>

<script>
function myFunction() {
 var x = "Total Width: " + screen.width + "px";
 document.getElementById("demo").innerHTML = x;
}
</script>


I guess you and I have a different view on how screens should be displayed. I always made my screens "float". A 100% screen will look bigger on a big screen.
It will always try to make it the table percent and the cell percent within the table fit as best it can.
And there are cases where it absolutely will not fit, then the user has options.
Hope this heps.
Dan

[donnybowers]

Jun 1, 2021 18:45:53 GMT -5 meerkat said:

I guess you and I have a different view on how screens should be displayed. I always made my screens "float". A 100% screen will look bigger on a big screen.
It will always try to make it the table percent and the cell percent within the table fit as best it can.
And there are cases where it absolutely will not fit, then the user has options.
Hope this heps.
Dan

As I said, that's exactly what I usually do when I'm making web pages with HTML. I use tables as containers to organize the screen. The problem is it doesn't work. Once I make my first table with actual dimensions, then I can put another table inside of it and I can set it to a percentage of that width. But that first main table won't do it.

Perhaps this is another one of those instances where it only works in the paid version. I wish there was more documentation available. One of the big problems with RB is the lack of detailed documentation and support. JB and LB were always famous for excellent support at the forums and reasonably good documentation. With RB it appears that there are so few users that there aren't a lot of people with experience in it. Did you get the paid version before you tried a lot of this stuff?

This isn't the first issue I've had where no one told me that what I was trying to do is only available in the paid version, and I'm still not sure if that's the issue or not. The documentation doesn't give all the differences between the free and paid versions or between the Windows and Linux versions. I'm actually using the Windows version right now, but it's in a virtual box on a Linux machine. Maybe that's why I'm having all these issues. You wouldn't think there would be that much difference between the Windows and Linux versions, but maybe there is.

I would think the behavior of RB would be more dependent on the browser than on the operating system. The version of Firefox I'm using is old (32 bit) but it's a lot newer than RB. Maybe that's why so many things aren't working for me. I don't know, but the lack of information really makes RB frustrating. I've been toying with it off and on since somewhere around 2006 or before and this is the longest I've gone without getting frustrated and giving up for awhile. I keep coming back to it because I love the idea of web programming in BASIC; and learning PHP has been very slow for me. I would really prefer to make RB work, but it's so confusing when you can't get a feature to work that you would think should work with the HTML statement. And then someone tells you that it does work for them and there's no way to know for sure why it's working for them and not for me. I have a fairly good understanding of HTML and CSS, enough to do the kinds of things I want to do. But the techniques that work for me in HTML often don't work for me in RB.

Like I said, I can set the width for a table using regular dimensions, but I can't get that first main table to do percentage widths. If I could I wouldn't be asking about ways to do it. It would be a breeze because that's the way I set up pretty much all my HTML pages. Until I can get more information it's like I'm facing a brick wall. I keep trying different approaches that normally would work with an HTML or PHP page but it doesn't work with RB.

[donnybowers]

Maybe I'll try just making an HTML version of something and then read that page in and render it with HTML txt$. But I tried that a few times before and if I remember right there were all kinds of issues with some pages. I've been playing around with using iframes to render outside web pages and some of them work and others have issues. But I figure I should expect that because RB is pretty old tech. Another thing I might try is seeing if an iframe will work with the width set as a percentage.

[donnybowers]

I just tried this again and was shocked. I thought it was working:


html "<center><table width='90%' border='1'><tr><td>"
html "Hello world!"
html "</td></tr></table></center>"


But then I tried it again like this and it didn't work:


html "<center><table width='90%' border='1'><tr><td>"
html "Hello world! Hello world! Hello world! Hello world! Hello world! Hello world! Hello world! Hello world! Hello world! Hello world! Hello world! Hello world! Hello world! Hello world! Hello world! "
html "</td></tr></table></center>"


Then I tried it like this and it still doesn't work:


html "<center><table width='90%' border='1'><tr><td width='100%'>"
html "Hello world! Hello world! Hello world! Hello world! Hello world! Hello world! Hello world! Hello world! Hello world! Hello world! Hello world! Hello world! Hello world! Hello world! Hello world! "
html "</td></tr></table></center>"



I've probably tried this at least a few dozen times in various different ways over the last 15 years and it just doesn't work for me. But one surprise is that the <center></center> feature actually worked when I only had the text "Hello world" once. When I had it in there more times than would fit the width of my screen it goes beyond the edge of the screen and isn't centered.

[donnybowers]

I don't believe it. I just tried it with some CSS that StefanPendl shared with me a couple weeks ago for wordwrapping a TEXTAREA and it works!


cssclass "td", "{white-space: pre-line;}"

html "<center><table width='90%' border='1'><tr><td width='100%'>"
html "Hello world! Hello world! Hello world! Hello world! Hello world! Hello world! Hello world! Hello world! Hello world! Hello world! Hello world! Hello world! Hello world! Hello world! Hello world! "
html "</td></tr></table></center>"


SOLVED! Finally after 15 years of off and on trying. I can't believe it actually works after all these years!

[donnybowers]

I would still love to figure out how to get that Java screen.width thing into an RB variable tough. It would still be extremely useful for automatically setting the sizes of other things, like the font etc.

I tried the following (again, I'm clueless when it comes to Java script):


<p id="gimme the size"></p>

<script>
function myFunction() {
 var x = "Total Width: " + screen.width + "px";
 document.getElementById("demo").innerHTML = x;
}
</script>

print var x


I get the following error:

Compile Error
Syntax error at line 4: function myFunction() {

I have a feeling "PRINT var x" or "displayWidth=var x" would give me an error too. I have to find a way to translate var x to something more like just "x" before I can use it to set sizes for anything like fonts etc. With JB and LB's DisplayWidth I can preset fonts to be readable on pretty much any screen size.


By the way, what does "<p id="gimme the size"></p>" do toward getting the screen dimensions? Wouldn't that just make extra white space on the screen?

Thinking about it, wouldn't you need to do it like this to even make it work in RB?
html "<p id='gimme the size'></p>"

[meerkat]

Not sure why your HTML isn't working. I tried your html and it works for me.
I tried it with 2 different fonts. Also one without word wrap and one with word wrap. Everything works fine for me.
Notice word wrap in the input textarea.
Been so many years since I've used RB, I can't remember, but I thought the difference was the paid version could use SQL. But not sure??


wordWrap$ = "style='white-space: pre-wrap;";_
"white-space: -moz-pre-wrap;";_
"white-space: -pre-wrap;";_
"white-space: -o-pre-wrap;";_
"word-wrap: break-word'"
bf$ = "<SPAN STYLE='font-family:Arial; font-weight:700; font-size:12pt'>"
bf1$ = "<SPAN STYLE='font-family:Arial; font-weight:700; font-size:10pt'>"

html "<center>" ' center everything

html bf$;"<table width='90%' border='1'><tr><td>
Hello world! Hello world! Hello world! Hello world! Hello world! Hello world! Hello world! Hello world! Hello world! Hello world! Hello world! Hello world! Hello world! Hello world! Hello world!
</td></tr></table>"

html bf1$;"<table width='90%' border='1'><tr><td>
Hello world! Hello world! Hello world! Hello world! Hello world! Hello world! Hello world! Hello world! Hello world! Hello world! Hello world! Hello world! Hello world! Hello world! Hello world!
</td></tr></table>"

html bf$;"<table width='90%' border='1'><tr><td ";wordWrap$;">
Hello world! Hello world! Hello world! Hello world! Hello world! Hello world! Hello world! Hello world! Hello world! Hello world! Hello world! Hello world! Hello world! Hello world! Hello world!
</td></tr></table>"

html bf1$;"<table width='90%' border='1'><tr><td ";wordWrap$;">
Hello world! Hello world! Hello world! Hello world! Hello world! Hello world! Hello world! Hello world! Hello world! Hello world! Hello world! Hello world! Hello world! Hello world! Hello world!
</td></tr><TR>"

notes$ = "Hello world! Hello world! Hello world! Hello world! Hello world! Hello world! Hello world! Hello world! Hello world! Hello world! Hello world! Hello world! Hello world! Hello world! Hello world! "

html "<TD><TEXTAREA NAME='notes' ROWS=5 COLS=50 ID='notes' ";wordWrap$;">";notes$;"</TEXTAREA></td></tr></table>"

end

I'll have a look at getting the screen size.. But like I say, I've never had any reason to get it. It's always worked better for me to make screens relative sizes and positions an not exact.

Hope this helps..
Dan