24 replies [Last post]
LisaJill
Offline
Regular
Last seen: 16 years 15 weeks ago
Joined: 2003-08-06
Posts: 43
Points: 0

hi all!

I'm not happy with the way I currently display some of my writing; I would like to redo it but I haven't got any idea where to start and was hoping someone might assist me.

The page that I'm currently using is here

http://www.lisa-jill.com/categories/writing

What I'm envisioning is a list of links one line at a time like this

link
link
link
link

with a box nested? to the right that contains a textarea (i think thats the word) where the links would open the writing; this would obviously be read-only and i'd like to be able to assign it background/color and border properties

i'd like, ideally, for the box to grow/shrink depending on the size of the document it contains...

so i'd have this

I very much can't lay this out in ascii mode, sorry...

i'm not sure if this would need an iframe? but i'm trying to avoid that and don't know how to load external links into one anyhow; iframes seem very slow loading to me tho....

i'm not sure i've used the proper language above so if this is confusing let me know and i'll clarify, i hope someone can atleast give me some pointers or links or something hehe

my current style sheet if needed is at http://www.lisa-jill.com/sotbtest.css

thanks!

Sven
Sven's picture
Offline
Enthusiast
Brisbane, Australia
Last seen: 12 years 24 weeks ago
Brisbane, Australia
Timezone: GMT+10
Joined: 2003-03-12
Posts: 166
Points: 0

css textareas? need help implementing an idea

It's obviously difficult to describe what you're after - perhaps you could find some existing sites that demonstratethe sort of thing you're aiming for, and use them to clarify your question.

LisaJill
Offline
Regular
Last seen: 16 years 15 weeks ago
Joined: 2003-08-06
Posts: 43
Points: 0

css textareas? need help implementing an idea

I've seen it done by it was awhile ago and I can't remember where

I made a mockup in Paint about what I want - the mess to the right is a scrollbar if thats not immediately apparently

I hope that clarifies things a bit? If not I'll try to find an example....

thanks in advance =)

Sven
Sven's picture
Offline
Enthusiast
Brisbane, Australia
Last seen: 12 years 24 weeks ago
Brisbane, Australia
Timezone: GMT+10
Joined: 2003-03-12
Posts: 166
Points: 0

css textareas? need help implementing an idea

I think I get what you mean - does this thread help?

http://www.csscreator.com/css-forum/viewtopic.php?p=793

LisaJill
Offline
Regular
Last seen: 16 years 15 weeks ago
Joined: 2003-08-06
Posts: 43
Points: 0

css textareas? need help implementing an idea

That helps yes, but I need to be able to load the content from the link - and only that link - into that box...

is that possible? it's very much a frame replica, and i think i could use iframes (tho i'd have to learn how to load the links into the iframe, i'm sure thats not too hard) but i'm trying to avoid using iframes; i already have too many throughout my pages

Sven
Sven's picture
Offline
Enthusiast
Brisbane, Australia
Last seen: 12 years 24 weeks ago
Brisbane, Australia
Timezone: GMT+10
Joined: 2003-03-12
Posts: 166
Points: 0

css textareas? need help implementing an idea

Hmm. Some possibilities:

(1) Replicate the links on multiple pages, and have separate pages for each page of content. Very maintenance-intensive, though, and changing a link across every single page would be rather painful.

(2) Use frames or iframes.

(3) Use DHTML to change the content in the scrolling box area when a link is clicked.

(4) Use a textarea, appropriately disguised with CSS, to show the content, and change the value of that when a link is clicked. This would only support unformatted text content, though.

(5) Rethink the layout and navigation model.

I had to put that last one in there Laughing out loud Personally, if I was faced with this sort of problem, I'd be looking for a simpler approach, even if it means discarding the fancy layout. After all, apart from the people on this forum, it's unlikely that your readers will really appreciate the effort you've gone to to make the scrolling box thing work - they're just there for the content.

Anyway, I'd just go with option 1 to start with, make sure you like the way it all hangs together, and then think about improving the details later.

LisaJill
Offline
Regular
Last seen: 16 years 15 weeks ago
Joined: 2003-08-06
Posts: 43
Points: 0

css textareas? need help implementing an idea

hrm, over the last few weeks i've redone my site like 4 times - each time its gotten easier to maintain with less replicated pages for the same ultimate goal...

i don't know if I want to create that kind of pain again - I know, from experience, what its like to update 50 pages (the poems were one page at a time once) when you decide to fix something.....

I'll have to think about this more... my only goal is not a fancy layout but rather a compact one, without a huge long page scrolling forever (even if it does have content) that is easy to navigate

i'll just leave it the way it is and keep thinking about it for now Wink

thank you sven!

actually, let me ask you a question.. if i went the textarea route - that would mean unformatted -text- ... not even line breaks?

i don't need fancy text just a background color and the ability to add line breaks, really...

other than that, this is really the closest thing i've seen

http://www.dynamicdrive.com/dynamicindex3/dropdownview2.htm

is there any way for me to use a css div around that to float it so that i can have links down the side as well as on top?.

Sven
Sven's picture
Offline
Enthusiast
Brisbane, Australia
Last seen: 12 years 24 weeks ago
Brisbane, Australia
Timezone: GMT+10
Joined: 2003-03-12
Posts: 166
Points: 0

css textareas? need help implementing an idea

Hi, Lisa,

Textarea will support line breaks and background colours, if that's all you need - it just won't support images (other than backgrounds) and other html markup.

As for the document viewer thing at dynamicdrive.com, I don't see any reason you couldn't just reduce the width of the iframe (which is set to 95% by default), and either set it to float, or wrap it in a div or span which is set to float, and put your links down the side as well...

The iframe would certainly be the lower-maintenance option, though you'd have to live with the shame of non-standard html :roll:

LisaJill
Offline
Regular
Last seen: 16 years 15 weeks ago
Joined: 2003-08-06
Posts: 43
Points: 0

css textareas? need help implementing an idea

I currently get 172 errors with my html coding, I'm not sure that adding a few more would hurt my pride any *sighs*

I still have a long way to go learning this stuff; right now if I can get it working and looking the way I want on most people's browser's - compliant or not - I'll be happy!

Thank you again, Sven - I really appreciate the assistance you've provided. I think that the textarea or iframe are goign to be the best bet - I like the idea of a background image but since both do it... all the rest I need are normal text formatting as already discussed...

As long as the power stays on, I can think about it and play with it. I love living in NY!

Pob
Offline
Enthusiast
Hampshire UK
Last seen: 8 years 24 weeks ago
Hampshire UK
Timezone: GMT+1
Joined: 2003-08-16
Posts: 60
Points: 5

css textareas? need help implementing an idea

Quote:

The iframe would certainly be the lower-maintenance option, though you'd have to live with the shame of non-standard html

The iframe is valid html and validates correctly on the w3c validator.

Quote:

I currently get 172 errors with my html coding,

I don't mean to be rude but why don't you fix them then Wink It's usually quite simple (if a little time consuming).

Regarding the layout you want you could easily implement that by putting your text in a div (formatted with css) and then use a little javascript to show and hide the div as required. You just place each div absolutely on top of the other ones and then set the content to visible or hidden as required. (This is the sort of thing that DW (Dreamweaver) makes very easy.)

The only drawback is that if the visitor has javascript turned off (as 10 - 15% do) then your page is worthless to them. (However there are a lot of javascript menus etc about so its a choice the visitor takes anyway.)

The iframe option would allow you to load the document into the window but you wouldn't be able to resize the iframe window to the exact size of each document.

Paul

LisaJill
Offline
Regular
Last seen: 16 years 15 weeks ago
Joined: 2003-08-06
Posts: 43
Points: 0

css textareas? need help implementing an idea

i don't know if learning javascape is part of the equation; I start 2nd year college in honors on september 2nd, I don't want to be in the middle of a fascination with javascript!

but I have dreamweaver, so if that can do it I may have to look into it.... i had been using that at first but recently switched to using notepad hehe

as far as the w3c validation goes - I sat down one night, with about 6 hours to go through the errors, and found out that the first 5 are in some script calls that i have no idea how to fix, and if i tinkered would make said scripts quit working... at that point I said 'ahhhh, who cares!'

but I've since gotten rid of many of those scripts and may look into it, if i can get it done before school starts Wink

that said i'm no longer css compliant cos i put back my neato scrollbars, i wish that wasn't a choice between non-compliance and pretty scrollbars in 90% of my visitors browsers (according to my stats)

Pob, I just had a quick glance through dreamweaver (too fast); can you just give me a hint on a keyword I can throw into help to get me started on that div layering/hiding thing?

thanks!

Pob
Offline
Enthusiast
Hampshire UK
Last seen: 8 years 24 weeks ago
Hampshire UK
Timezone: GMT+1
Joined: 2003-08-16
Posts: 60
Points: 5

css textareas? need help implementing an idea

Hi,

Take a look here:

http://www.pmob.co.uk/temp/poems.htm

Took me 3 minutes to do in DW. You have to use the behaviours and show hide layers.

It needs tidying up because I never leave my style inline. Take them out and put them in the head. I've just mocked it up quickly to show the type of thing you can do easily.

I'm just off out now but if you want to know more then I can explain better later.

Meanwhile you can just steal the code and practice. With DW you don't really need to know javascript but you do need to know css and how to tidy up after DW.

Anyway, hope this helps.

Paul

Pob
Offline
Enthusiast
Hampshire UK
Last seen: 8 years 24 weeks ago
Hampshire UK
Timezone: GMT+1
Joined: 2003-08-16
Posts: 60
Points: 5

css textareas? need help implementing an idea

Just a quick point and then I'm off out.

Quote:

as far as the w3c validation goes - I sat down one night, with about 6 hours to go through the errors, and found out that the first 5 are in some script calls that i have no idea how to fix, and if i tinkered would make said scripts quit working... at that point I said 'ahhhh, who cares!'

Most javascript errors are down to 2 things:

1 <script type="text/javascript"></script> (most people forget the type)
2 The & symbol in the code must be replaced with &amp;

Alternatively chuck it all in an external script and take it out of the equation altogether.

Paul

LisaJill
Offline
Regular
Last seen: 16 years 15 weeks ago
Joined: 2003-08-06
Posts: 43
Points: 0

css textareas? need help implementing an idea

Paul, that is *exactly* what I want.

Thank you *so so so so so so so so* much.

Stealing it now to have a look =)

Hrm, with that information about javascripts I may have another go at that validator!

thank you again =)

LisaJill
Offline
Regular
Last seen: 16 years 15 weeks ago
Joined: 2003-08-06
Posts: 43
Points: 0

css textareas? need help implementing an idea

I've been playing with this code, got a few of my poems up;

I can add new layers, thats fine, but I'm having a lot of trouble getting the javascript to work - did you use some wizard for this? I don't see how you can do this in 3 minutes hand coding, my eyes are tearing up hehe

this is perfect, and i'm learning a lot doing it but I hope dreamweaver has some automated way, going to keep searching until you can reply hehe =)

thank you again!

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 3 days 22 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

css textareas? need help implementing an idea

Hi LisaJill,
I had a quick look at your 156 validation errors.
Pob was correct most of the errors are for using & instead of & amp;
for example in links which you are passing variables such as


change it tohttp://blogarama.com/index.php?show=review_add&amp;SiteID=2807
Many of the other errors should be fairly straight forward to work through.

I'm not getting any JavaScript errors.

LisaJill
Offline
Regular
Last seen: 16 years 15 weeks ago
Joined: 2003-08-06
Posts: 43
Points: 0

css textareas? need help implementing an idea

*blushes* thank you Tony. When I saw that huge, long, terrifying list I kind of just went 'hrm, um, maybe not'

I'll get those fixed up tho and see what I can do over the weekend.

Thank you again!

Paul - I've been playign with Dreamweaver for hours, I just can't figure it out =/ If this is hand coding it frightens me jsut because of the amount of updating that each new story would add; I'm hoping it's some sort of inbuilt tool hehe

hope everyone's having a good weekend!

Pob
Offline
Enthusiast
Hampshire UK
Last seen: 8 years 24 weeks ago
Hampshire UK
Timezone: GMT+1
Joined: 2003-08-16
Posts: 60
Points: 5

css textareas? need help implementing an idea

Hi Lisa,

Here's how to do it in DW.

Put your links where you want them poem1, poem 2 etc. Make them into null links (<p><a href="#">Poem</a></p>).

Use the layer tool from the common tools etc and draw the layers you want on the screen first.

Put them where you want them e.g. on top of each other.

Make sure you highlight the first poem link i.e. drag your mouse over it with the button clicked so the word inverts etc.

Now ,if the behaviours panel isn't visible then go to the window menu on the top toolbar. Select Behaviours and the behaviour panel should be visible.

Select the little plus sign in the top left of the behaviours panel and another menu will flyout. On this menu should be a selection called show/hide layers.

Select this and you should get a small window that lists the layers that are on the page. The idea is to show the layer you want by selecting show and then select hide for all the other layers. Then in the behaviors panel an event box will be displayed. You need to set the event to onclick (the default is probably on mouseover). Just select the downarrow in the middle of the event text in the behaviors window.

You must repeat this process for each link on the page except that when you select poem2 you want to show layer2 and hide all the rest. (For link3 show layer3 and hide all the rest.) etc.....

The layers can be named what you want when you create them but DW inserts layer1, layer2 as default.

Once you've done that then you need to make all the layers invisible so that they don't show on startup. Go to the Layers panel (window, layers) and there you will see a list of all the layers on your page. To turn off (hide) the layers that are required click in the left hand column underneath the icon of an eye. An eye will appear in the column next to the named layer in the panel.

If the eye is open then it means the layer is visible. Just click once more to toggle the eye to its closed position and that means the layer is hidden. Clicking a third time removes the eye altogether. So just keep clicking and the states will toggle on or off. Repeat to hide all the layers that are involved in your poem display. Remember there may be other layers on the page so don't turn them off.

This sounds harder in writing than it actually is!! I'm doing this from memory (as I now have DWMX and I assume you have DW4) but I think i've explained it pretty well.

If you look at the between my first two posts you will see that I created the page and uploaded all in a few minutes. It would probably take less than 2 minutes to do from scratch.

As I mentioned above once you have the effect you want then I would take all the inline styles out and put them in the head and replace the html with class="layer1" instead of the whole inline style.

If you have any problems then post a message.

Paul

LisaJill
Offline
Regular
Last seen: 16 years 15 weeks ago
Joined: 2003-08-06
Posts: 43
Points: 0

css textareas? need help implementing an idea

I'm not quite sure what you mean about putting them in the head and just changing the href's - but I'll get it to what I want it to be then optimize it =)

one step at a time, right?

thank you paul, I appreciate this so much =)

I've got the above instructions down pat, just working on it since I have a bit to publish =) thank you paul!

Pob
Offline
Enthusiast
Hampshire UK
Last seen: 8 years 24 weeks ago
Hampshire UK
Timezone: GMT+1
Joined: 2003-08-16
Posts: 60
Points: 5

css textareas? need help implementing an idea

HI,

When DW creates a layer it creates it in the html (inline) like this:

<div id="Layer1" style="position:absolute; left:92px; top:73px; width:189px; height:177px; z-index:1">Hello</div>

What I do (to make my code cleaner (and better)) is to put the style in the head if its a small piece of code or put it in an external stylesheet for best results.

e.g in the head of the document would be:(i.e. between <head> and </head>)

<style type="text/css">
#Layer1 {
position:absolute; 
left:92px; 
top:73px; 
width:189px; 
height:177px; 
z-index:1
}
</style>

Then in the html you would just have:
[code]
<div id="Layer1">Hello</div>
[code]

Much nicer! (Even better would be to transfer all the styles to your external stylesheet (leaving out the style tags of course.))

Hope that helps.

Paul

LisaJill
Offline
Regular
Last seen: 16 years 15 weeks ago
Joined: 2003-08-06
Posts: 43
Points: 0

css textareas? need help implementing an idea

Oh! Thats stupidly obvious now that you've explained =)

Right now I'm going through the rather painstaking process of hiding/showing stuff for 25odd pieces of writing... it's not too bad just tedious =) I'll worry about the style sheet later, but yes that sounds like a good idea... I was worried about this being a bit about load times, that should be a great solution.

think i'm gonna try to cut and paste this stuff around and see if i can hack it out faster, this mouse clicking is killin me =) it's a great solution tho!

-Lisa

casey
casey's picture
Offline
Regular
Wisconsin, USA
Last seen: 5 years 29 weeks ago
Wisconsin, USA
Timezone: GMT-5
Joined: 2003-08-01
Posts: 17
Points: 0

css textareas? need help implementing an idea

Tony wrote:
Pob was correct most of the errors are for using & instead of & amp;

If you figure that each & produces several errors (actually any markup mistake can produce several errors), making corrections isn't as daunting. I correct a couple of lines at a time, validate again, see what I've missed, then go on. I've found the & errors are nice ones to clean up first; it's a little bit tedious, but it saves a lot of reading looking for any other errors. Also, if you can correct your & errors with a different color text, it's much easier to look back and see whether or not you've addressed each error. Too bad "find and replace" isn't a decent choice for doing this.

Pob
Offline
Enthusiast
Hampshire UK
Last seen: 8 years 24 weeks ago
Hampshire UK
Timezone: GMT+1
Joined: 2003-08-16
Posts: 60
Points: 5

css textareas? need help implementing an idea

Hi Lisa,

lisa wrote:

process of hiding/showing stuff for 25odd pieces of writing...

If you intend to do a lot of this type of thing then there is a free extension for DW that simplifies the job. It's called auto layers and you can find it here in the extensions section under free extensions:

http://www.projectseven.com/extensions/index.htm

I did have it installed on my old verion of DW4 and it allowed you to show one layer with one click and then hide all the rest in one go.

Paul

LisaJill
Offline
Regular
Last seen: 16 years 15 weeks ago
Joined: 2003-08-06
Posts: 43
Points: 0

css textareas? need help implementing an idea

Paul,

I had just about given up on this, thinking that adding one piece of writing would be impossible.

I was about to write it off as a good lesson in Dreamweaver (under which theory I'd owe ya approximately $400.00 bleh)

I'm going to grab that extension; I still like this idea but its just too tedious without it - if that is as great as it sounds tho, the dream shall become reality Wink

I actually found another *really* useful extension; the snap layers one - I was having problems with positioning as I was placing the poetry under a news section so the layers would at the top (without a lot of hacking and pure guessing at positioning.

this should help immsenely =)

thanks for the tips!

Pob
Offline
Enthusiast
Hampshire UK
Last seen: 8 years 24 weeks ago
Hampshire UK
Timezone: GMT+1
Joined: 2003-08-16
Posts: 60
Points: 5

css textareas? need help implementing an idea

Hi Lisa,

There are a lot of really useful extensions out there can help speed up your work. It's just a matter of looking and trying out what works for you.

I hope you find what you need.

(I find I can work quicker by cutting and pasting in code view but it can lead to major errors if you're not careful.)

Paul