Scrolling Text Box in Mobile & Tablet

[Wodlik]

I have created & downloaded a 72 page Super Web Site: www.gaslightpolitics.com . I am relatively happy with the Laptop / Desktop [MAIN]. I have a scrolling text box containing differing length text files on every page. Thanks to you guys here, i inserted the following Widget code on each page:

First create your text box as normal making the box the width you want and to accommodate the text in length. Then select it with the selector tool, using the yellow tag icon give it a name eg: ScrollIndex1 also give it the name HTMLBlockText.

Next create a rectangle, then using the placeholder tab select 'HTML code (head)' and paste the following code:

<style type="text/css">
#ScrollIndex1 {
height: 390px;
padding-left: 5px;
padding-right: 5px;
border-color: #6699CC;
border-width: 5px;
border-style: solid;
overflow: auto;
}
</style>

The text(above) must be the same name that you first gave the text box in this case its 'ScrollIndex1'.

I am now attempting to create similar scrolling text boxes on [640px] and [Mobile] pages with zero success. EVERYTHING I have tried, ends up with just a very long text box without scrolling.

Any suggestions would be appreciated.

ALSO:
Since I am creating this entire web site on my laptop, I have been unable to Preview Web Page or Preview Web Site for anything other than [Main] pages. The ONLY way I have been able to see any change results to the [640px] and [Mobile] pages is to repeatedly Publish the entire Web Site and then look at the pages using my Tablet and Cell Phone - THERE HAS TO BE AN EASIER WAY....

BTW: Xara Web Designer Premium V: 11.2.5.42127

Thanks in advance for any help
Ron

[Acorn]

I have created & downloaded a 72 page Super Web Site: www.gaslightpolitics.com . I am relatively happy with the Laptop / Desktop [MAIN]. I have a scrolling text box containing differing length text files on every page. Thanks to you guys here, i inserted the following Widget code on each page:

First create your text box as normal making the box the width you want and to accommodate the text in length. Then select it with the selector tool, using the yellow tag icon give it a name eg: ScrollIndex1 also give it the name HTMLBlockText.

Next create a rectangle, then using the placeholder tab select 'HTML code (head)' and paste the following code:

<style type="text/css">
#ScrollIndex1 {
height: 390px;
padding-left: 5px;
padding-right: 5px;
border-color: #6699CC;
border-width: 5px;
border-style: solid;
overflow: auto;
}
</style>

The text(above) must be the same name that you first gave the text box in this case its 'ScrollIndex1'.

I am now attempting to create similar scrolling text boxes on [640px] and [Mobile] pages with zero success. EVERYTHING I have tried, ends up with just a very long text box without scrolling.

Any suggestions would be appreciated.

ALSO:
Since I am creating this entire web site on my laptop, I have been unable to Preview Web Page or Preview Web Site for anything other than [Main] pages. The ONLY way I have been able to see any change results to the [640px] and [Mobile] pages is to repeatedly Publish the entire Web Site and then look at the pages using my Tablet and Cell Phone - THERE HAS TO BE AN EASIER WAY....

BTW: Xara Web Designer Premium V: 11.2.5.42127

Thanks in advance for any help
Ron

Ron, you cannot use the same ID, change it and the related code to some other word for each instance.

To view your different Variants, just change the size of your browser window.

Acorn

[siran]

You might also check the HTML file for the given name. I recently noticed that when using variants Xara changes the IDs on all but the main variant.
To better understand what this is about please download the attached file and export it to HTML. Then inspect the created index.htm file in a text editor.
You will find an ID definition as expected (id="GivenId1") for the main variant, but for the mobile it looks like this: id="Xxr_v2_GivenId2"
You can work around that problem by including the prefix Xxr_v2_ in the CSS. But you need to keep in mind that the number is different for each variant and might change if you add variants.

[siran]

Previewing correctly shows the mobile variant if I reduce the preview window width on desktop PC (used same Xara version) and I don't see why it should not work on a laptop. Can you give more details regarding this?

[Wodlik]

Siran:

I'm not sure what you mean by "reduce the preview window width"? If I change the properties of my Graphics Driver from my "normal" screen resolution of 1290 x 1024 to any of the other 7 choices (800 x 600, 1024 x 768, 1280 x 600, etc.), Zara always displays only the [Main] tab pages when I Preview Web Page or Preview Website no matter which tab is selected when i clock on Preview. My laptop (normally used as a desktop - seldom as a mobile) screen is actually being displayed on an external flat screen monitor, switching back to the laptop screen doesn't change anything.

[Acorn]

we are talking about the width of the browser window. Nothing to do with the machine's graphic resolution.
It sounds like you are keeping the browser open full size.

Acorn

[siran]

Just thought about the problem again. You can use a different CSS selector so that you don't need to check the actual prefix of the ID given by Xara.

In the example you gave you can replace the #ScrollIndex1 by [id$="ScrollIndex1"] so that the complete code looks like this:

<style type="text/css">
[id$="ScrollIndex1"] {
height: 390px;
padding-left: 5px;
padding-right: 5px;
border-color: #6699CC;
border-width: 5px;
border-style: solid;
overflow: auto;
}
</style>

This [id$=...] selector only checks the ending of the ID so that the prefix doesn't matter.

The solution was given by Ben in this POST.

Another solution would be to use class names instead of IDs, but these seem not to work together with the HTMLBlockText name, which at least would require some changes to the CSS.

[Wodlik]

Acorn -
YESSSS - My Bad, The data in the [Main] [640px] & [Mobile] were all identical & I was too stupid to realize that I was looking at different things because they were the same. Making a slight change allowed me to dynamically change the viewing window to whichever tab I wanted to look at.

THANK YOU THANK YOU FOR YOUR UNENDING PATIENCE
Ron

[Wodlik]

Siran - After much thrashing around and playing, I have accidentally found that I an get a scrolling text box on [640px] by using Xxr:
<style type="text/css">
#Xxr_v2_GivenId2 {
height: 400px;
padding-left: 5px;
padding-right: 5px;
border-color: #6699CC;
border-width: 5px;
border-style: solid;
overflow: auto;
}
</style>

Will try the Id$= suggestion later after I watch the Tigers give away another one.

THANKS A BUNCH
Ron