Printable View
Hi Guys.
Anyone know if there's a widget or equivalent in the paid-for version of WD9 Premium that allows me to quickly create a vertical scrolling box? - see attached - I couldn't see one there, so am I right in that I'd need to create it from scratch?
Cheers
Steve
You can try the following:
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: scroll1 also give it the name HTMLBlockText.
Add the following code into the <head> section under the 'placeholder' tab in web properties.
<style type="text/css">
#scroll1 {
height: 100px;
padding-left: 5px;
padding-right: 5px;
border-color: #6699CC;
border-width: 1px;
border-style: solid;
overflow: auto;
}
</style>
Change the colours/sizes as you need
Don't think there is, but this works :)
Attachment 96080
More modern versions you add the code in the placeholder "body" option
FROM :- http://xara-users.info/demos/scrollable-text-panel/
Thanks guys! Appreciate your help!
Steve
Steve, you can make your own with CSS3, avoiding IFRAMES and it approximates what you build onto your Xara page.
Make a note of the width of the current text is (say it is 400px) We are going to pad this out with 20px either side --> 440px.
You also need to pick a height.
Add the following to the Page HTML code (head) and experiment:
You must add a Class Name to your text block; I chose htmlclass=moreWords in Utilities > Names...Code:<style>
.moreWords {
height: 250px;
width: 440px;
overflow: auto;
border-radius: 20px;
border: solid 2px red;
background: orange;
color: blue;
padding: 20px;
}
</style>
Acorn
IS that not what I suggested?
@ Skech, Acorns solution uses the new undocumented feature in v9 to add classes to an object;) htmlclass=myclassname
@SteveP, IE8 and below doesn't support round corners, so it might be better to place a round edge rectangle behind your text box so that it looks as intended on all browsers.
I had made a tutorial on scrolling text box a couple of years ago if you need more info http://www.talkgraphics.com/showthre...xt-box-in-Xara :)
That would be why then. Thank you James
Slightly different. It keeps the SPANs intact, something Xara are keen to suggest to retain a true WYSIWYG:Quote:
Originally Posted by skech
It avoids more than one item having the same ID if you are applying the same solution to multiple test blocks on the same page, which meets the W3C standard. If there was a jQuery function working on the ID, it only would apply it to the first one it found.Quote:
5. "HTMLBlockText" - if this name is applied to the text object, the text is exported without placing every line in a separate span element. This is less WYSIWYG than the default export but it may be more suitable for further editing of the exported HTML in the external editors and web authoring tools.
Our solutions crossed in the aether and I'm happy that we thinking along the same lines.
Acorn
Thank you.
Thanks James!
Much appreciated
Steve
Quote:
Originally Posted by jamesd
Hi again James
Thanks for the scrolling box stuff - it's mostly working fine. I have one glitch in that my text list is long... very long, and although I guess it shouldn't make any difference, the scrolling box isn't showing all the text as I scroll down. I haven't launched the site yet, so there nothing for me to point you to. Wondered if I might email you something that would allow you to review what I've done? I think I'm 99% there, but I suspect it's 'user error'
Thanks
Steve
Quote:
Originally Posted by jamesd
Hi Steve, I suspect its one of two things.
With the text box selected change to the text tool, you will see red drag handles drag them down so that all of the text is in the box.
If the text box is longer than the page make sure you have "clip to page edges" unchecked in website page options.
Hi James
Thanks. I can't see red drag handles but I can see a red arrow to the right of the text box. Can't figure out how to drag it though.
Steve
Quote:
Originally Posted by jamesd
Hi Steve, I don't have wd9 so I can't check... but I am sure the text tool hasn't changed. If you make a new text box can you see them then? Maybe try on a new blank document. Can you attach a screen shot?
Hi James
Thanks for your patience. I'm normally pretty good at solving these sorts of issues, but this one is sending me bald :)
I've attached two screen grabs.
001 - what it looks like in WD9 Premium
002 - what it looks like in a browser
To add to my frustration, I can't seem to replicate ANY handles or even red arrows now.
Does any of this help? Is there anything else I can send you?
Thanks
Steve
Quote:
Originally Posted by jamesd
Steve, in screenshot no.1 is the text box selected and the text tool active?
Thanks James
Ooops,... my error - see attached screenshot - 003 - with text tool selected. Note no 'handles' but a downward 'red arrow' (that I can't seem to do anything with)
Cheers
Steve
The handles seem to be pink on your screenshot they are the small pink squares at each corner of the text box. The red arrow means that the text box needs to be enlarged. You can enlarge it by dragging one of the bottom pink squares down until the red arrow no longer shows :)
Hi James
We're getting there! :)
I've now enlarged the box by stretching it, but because the list is sooooo long it reached the bottom of the designed page and the red arrow still shows. I can't expand it any more downwards as there's just no room.
Off for a paracetamol now :) Think I'll give it a break tonight - thanks James for your help so far. I'll pick it up tomorrow
Here's one I made using JavaScript from searching the web.
Morning James
Ok, a good night's sleep helps. I think we're almost there, but still experiencing a glitch. I've set up a fresh testing page, but can't seem to see ALL the text I pasted into the boz
There are two screen grabs attached
001 - Is what it looks like in preview mode. Note the great expanse of nothingness after the 26 September entry
002 - Is the view within WD9. Note the the nothingness mentioned in 001 begins at the point where the text hits the bottom of the page design
Appreciate any wisdom you can offer.
Thanks
Steve
Quote:
Originally Posted by SteveP
Good morning Steve, right click on the page and select "Web page options" and uncheck "clip to page edges" that sould fix it :)
Hi James
Thanks - meant to say that it's already unchecked based on your advice yesterday
:(
Steve
Hi Steve, sorry for the delay in getting back to you. Clip to page edges doesn't work for the bottom of the page, my bad :)
The only way I can get it to work is to use a placeholder.
Replace the code you had in the head section of your placeholder, page or website with this code
Then create a rectangle the size you would like the scroll box to be and place it where it should be. While selected give it the name htmlclass=scroll1, then while still selected go to placeholder >> Replace with html (body) and paste this codeHTML Code:<style type="text/css">
.scroll1{
padding-left: 5px;
padding-right: 5px;
border-color: #6699CC;
border-width: 1px;
border-style: solid;
overflow: auto;
}
</style>
You can't style the text directly with xara, but if you have a text style already created you can add the class to the name eg: htmlclass=scroll1 TextStyleHTML Code:<p>
Enter your text here
</p>
Otherwise you have to syle the text with css.
Morning James
Thanks again. It's working! Thank you Thank you Thank you - except that the text is just 'raw' black text - doesn't seem to reflect carriage returns, font etc - but I think you said it needed styling. Perhaps as a last request, just run through the 'add class to the name bit' again for me?
<Happy Bunny>
Cheers
Steve
Hi Steve, I have had very little spare time at the computer this week... sorry for the delay in getting back to you.Quote:
Originally Posted by SteveP
Here is the basics of styling the text in your scroll box.
Attachment 96196
If you already have text on the page with the style you want to use in the scroll box, make sure you have saved that style. You can do this by clicking into the text with the text tool active then go to the dropdown and Create style. Just say you named it TextStyle(don't leave spaces in the name) add this to the name you already gave the placeholder earlier
eg: htmlclass=scroll1 TextStyle leaving a space between scroll1 and TextStyle.
Attachment 96195
If you want a different text style for your text box, change the code you placed in the <head> section
from
toHTML Code:<style type="text/css">
.scroll1{
padding-left: 5px;
padding-right: 5px;
border-color: #6699CC;
border-width: 1px;
border-style: solid;
overflow: auto;
}
</style>
:)HTML Code:<style type="text/css">
.scroll1{
padding-left: 5px;
padding-right: 5px;
border-color: #6699CC;
border-width: 1px;
border-style: solid;
overflow: auto;
}
.scroll1 p{
font-family: arial;
color: #888888;
font-size: 18px;
}
</style>
Thanks again James
We're away for a few days, so I'll look at it on Monday/Tuesday.
Appreciate all your support with this. Have a good weekend.
Steve
i post this a few weeks ago..
http://www.talkgraphics.com/showthre...ht=#post473622
Thanks for this. I'll take a look
:)
Steve
Quote:
Originally Posted by neodelito
Hi James
I'm pleased to say that following your latest advice, I've been able to create the scroll box on my new site exactly as I'd like them. The 'icing on the cake' for me was being able to add the <style type="text/css"> HTML (see attached). A really big thanks from me at this end - my hair has even started to grow back :)
Cheers
Steve
Hi Steve, I am very glad to be able to help:)
I used the iframe method but it does not work when using an Ipad. Any suggestions?
Hi Singera831, In your Iframe code add name="MyIFrame" , then in the Link dialog type MyIFrame in Open Link:)Quote:
Originally Posted by singera831
Attachment 96245
Can you show me an example of the full code. Thank you. I changed my original post because I found a more complicated way to do it but do you know how to make it work with ipads etc.
I don't have an Ipad in my possession but it still should work the same. Your Iframe code should look something likeHTML Code:<iframe name="MyIFrame" src="page.htm" frameborder="0" marginheight="0" marginwidth="0" width="500px" height="500px" scrolling="auto"></iframe>
jamesd, Thank you, the links works great. On the ipad there is no scroll bar. There is just the one long amount of text and when it exceeds the page length it disappears.
Reading up on it and it seems Iframes on Ipads don't work to well(or not at all). You could try a scrollable text box or using Javascript which Neodelito posted here http://www.talkgraphics.com/showthre...ht=#post473622 :)Quote:
Originally Posted by singera831
can you explain how to insert or use xarascroll. Never have used a script before.
Neodelito should be better able to explain his script if you would like to post your question in his thread :) http://www.talkgraphics.com/showthre...ht=#post473622Quote:
Originally Posted by singera831