Mobile Friendly Website

CSSPLAY

Doing it with style

more poetry COMMENTS

Welcome to my Comments Pages

Please note. I get a few hundred emails a week from visitors asking for help, or posing questions on how to modify my demos to suit their application and I read them all. Unfortunately I only have a limited amount of time to spend answering these questions.

So if I do not reply, please do not be offended, and if I do reply then you are one of the lucky ones.

If you are asking for permission to use any of my demonstration then please email me with your request stu{at}cssplay.co.uk.

Post a comment


Current posts

mark from ireland:-
oh my. Talk about the answer to a prayer. Stu many many thanks. This seems to be exactly what I was thinking about. It'll give me a chance to use side notes too which I'm determined to use simply because when I tested my "beta" site with people the found them really handy.

I've to go out this afternoon but will experiment a little when I get back.

Thank you so much.

Mark
(29.10.2005, 12:15)

Stu:-
mark, the only problem being that you cannot place links in the 'more' text. Also it doesn't work correctly in Opera.
(29.10.2005, 17:14)

mark from ireland:-
Yes I saw that I was thinking of using your magic drop menu technique :-) I got this working with your sliding tabs menu

http://cssplay.co.uk/menus/tabmenu.html

very nicely as a "I wonder what would happen if" sort of fun thing to try.

I'll be experimenting more during the week and will pop back to let you know how I got on.

Thanks again.
(29.10.2005, 18:40)

Steve Williams:-
Safari seems to be doing the same as Opera - only showing the text whilst the mouse button is held down.
(08.11.2005, 22:59)

Stone:-
Ah, I see you have the comments broken out by which page you were on when the comment was added (how slick)...

I see also that my question about links inside the em has been answered...
Bummer, this is so slick, but I need links in there.
Awesome awesome site.
stone
(02.03.2006, 19:47)

Mike C.:-
Haha, i just realized what Stone realized and the same question was just answered.
(06.03.2006, 07:24)

Rupert:-
A fantastic page! One question, why does the text to appear have to be nested in an 'em' and not a 'div' or similar.
Thanks for a fantastic site.
(26.04.2006, 23:14)

Stu:-
Rupert, only because it is embeded in a <p>....</p> and ems looked to be more correct than divs.
(27.04.2006, 18:42)

Blake:-
You are the best!
(02.05.2006, 01:15)

Clau:-
Great site! ^^

I may have found a limitation and am not sure how to go around it without including all the content's code in the same page. I was experimenting with a php include within the <em> tags. It works in IExplorer but not in Firefox.
(03.06.2006, 06:23)

Julian:-
Stu,

nice work. Pity about not being able to include links in the <em> because of nested links. Any way around that at all? Also, I've tried including a <form> in the <em> and that fails because as soon as a form field get focus the <em> disappears. Any way of modifying the javascript to counter that?

cheers

J.
(14.06.2006, 09:29)

Anonym:-
Stu,
===========
Reposted due to html not being turned off although you say it is ;)
============
nice work. Pity about not being able to include links in 'em' the because of nested links. Any way around that at all? Also, I've tried including a form
in the 'em' and that fails because as soon as a form field get focus the 'em' disappears. Any way of modifying the javascript to counter that?


cheers

J.
(14.06.2006, 09:34)

Stu:-
Julian, html is turned off. What you are seeing is a 'bug' in Firefox that interprets the 'em' tag incorrectly. If you view in IE, Opera etc then the 'em' tag is displayed correctly. I have noticed this behaviour in other test pages and menus that I have produced.
(14.06.2006, 19:38)

Stu:-
Julian, It would be possible to include links if you use the 'tables' method that I use for the drop-down menus.
(14.06.2006, 21:40)

Apathy:-
Works fine in firefox but when in IE when i click the more it shows a solid white box. When i click anywhere, even on the scrollbar it acts as if i clicked the more button and goes back to normal. Any idea what's going on? Thanks in advance.
(21.07.2006, 05:31)

GJ:-
Hi Stu,

Thanks for your great job!

Could you tell us more about your message for Julian, "It would be possible to include links if you use the 'tables' method that I use for the drop-down menus."
(14.06.2006, 21:40)

How can we do this ?

Thanks,
GJ
(28.07.2006, 22:43)

Stu:-
GJ, if you look at my drop-down or flyout menus you will see that it is possible to nest links within links using a surrounding table. The same method can be applied here.
If ther is a need for this then I might be persuaded to produce a 'more v2'.
(28.07.2006, 22:58)

GJ:-
Hi Stu,

Thanks for your advice but a more v2 will be welcome.

I tried your advice using nested links surrounded by tables. It works half the way in FF. It is a step forward but the hidden part is always visible.

I tried many times to place tables before or after the em tag. I tried to place comments and nothing goes in IE6. I do not know where exactly to place them and what comments to use.

I am not a css expert like you. It is why I need help or a more v2.

Thanks,
GJ
(29.07.2006, 17:05)

GJ:-
GJ again,

Reading all comments for this subject I saw that I am not alone to wish a more v2.
(29.07.2006, 17:08)

Jade:-
thanks for the great idea. I am having a smiliar problem as Apathy i cant click on the scroll bar in ie it just re-hides the text again. any suggestions
(28.08.2006, 00:19)

Steve:-
I am trying to modify into an inline css idea. Need to send htm email to subscribers but want expanding content. I believe I am running into is the limitation that inline css refers only to the element it is defined within (not inherited).

scenario:
Within the more anchor, can I define style= for the em and span tags that are nested within the anchor? I can follow the idea when style is embedded but not when moving down to inline inherited elements. Sorry.

Could you verify the limitation is the right interpretation? That I cannot define style for inherited elements within inline css?
(29.08.2006, 17:00)

Stu:-
Steve, that's about it. You can style the span and em and also the outer link should you have text that is not covered by the span and em tags.
(29.08.2006, 21:08)

Steve:-
Thanks Stu. I appreciate the quick response.
(29.08.2006, 22:12)

extremesanity:-
You rock. Thanks.
(16.10.2006, 23:10)

Efrat:-
I have two questions:
1. Is scrolling done only with the mouse wheel? If yes, viewer (like me) might use the scrollbar, which clicks and makes the hidden part disappear. This might be frustrating.
2. Is closing done only by clicking outside the hidden part? If yes, viewer might not realize it, and will end up clicking several times. Is there a way to code close also by clicking on the hidden part?

Thanks, Efrat.
(06.11.2006, 10:27)

martin evers:-
Very useful for hiding incidental text.

Would search engines be able to read this text?
(06.11.2006, 12:09)

Stu:-
@martin, search engines will see all the text.
@Efrat, scrolling has to be done with the mousewheel in IE but Firefox will allow you to use the scrollbar.
Closing is done by clicking outside the extra text area.
If you use this method then you may wish to give instructions to your visitors.
You could of course use a pop-up box instead.
(06.11.2006, 17:10)

Martin Evers:-
Stu,
Is it possible to construct an 'inline frame' type of site using this method with a tabbed menu such that only the 'inline' area is refreshed with each tab choice? GoDaddy has the sort of thing I am looking for.

Cheers,

Martin Evers
(30.11.2006, 03:57)

Framboos:-
I've been looking for a way to hide and show pieces of text for my new website. I like this solution, but I'm looking for something that stays in the same place - something like this script, The Multi-Part Content script on Dynamic Drive, which splits the content in little pages and shows and hides them with "next" and "previous" links.

I wonder if you have any fresh views on this? Hmm now I think of it, it kind of resembles your tiny hover book script.. I'll go play with that one :)
(07.12.2006, 00:22)

Robertar:-
I was wondering if there was a way to make an 'expand' link, much like your 'more' link in your example, and then have a 'collapse' link within it, so that when they click on it, it either collapses what was hidden, or simply refreshes the page? Even though its easy to add a link within the 'more' section, if I do, the sytle for the em tag breaks... I was hoping there was an easy answer for this.

Keep up the great work, love your site!
(11.12.2006, 19:52)

Tom:-
Hi Stu, a great method you've got here. I've decided to use this for expanding blog entries on my nearly finished personal/portfolio site, but I've just noticed one tiny thing with Netscape 8.1 (I don't know if it's present in other versions). When the page is rendered in Internet Explorer mode, the hidden text displays a dotted grey border around it. It isn't really much of a problem, and no other browsers do this - but it'd still be nice if there was a fix for this - even though in theory the 'outline-style:none;' or even 'outline:none;' should stop this. Any ideas? Many thanks - Tom Case.
(30.01.2007, 10:24)

craig:-
hey stu

was wondering if it was possible to make the "sow me more" css work in safari??

cant seem to figure it out myself!!

cheers

c
(28.05.2007, 01:32)

craig:-
sorry thats "show me more"!!!
(28.05.2007, 01:33)

Stu:-
Craig, I do not have access to a Mac so cannot test on this platform.
(28.05.2007, 12:26)

Steve:-
I would like to see an "Expand" and "Collapse" feature in v2.
(02.08.2007, 16:13)

Joe:-
Hi Stu!
Great stuff on your page!
I am trying to extend this 'more' feature.
I have a form inside the em part.
The displaying works well, but when I click on an element of the form, the em part is set to hidden again :(
any hints for me?
- Joe
(16.11.2007, 10:14)

Stu:-
Joe, because it takes a click to open the 'more' text then another click will close it. The only way to do what you want is with a little javascript, www.stunicholls.com/various/more.html shows how this can be done.
(16.11.2007, 22:27)

Joe:-
Thanks for the link!
I was hoping there was a way to do it just with CSS..
- Joe
(17.11.2007, 17:39)

Luis:-
Hi Stu.

I´ve implemented you method in my page, but it works only after reloading the page a couple of times, and then, if I reload again, it stops working again. Simply the hidden text will always appear . Any idea why is this happening in my page but not in yours?

thanks
(02.04.2009, 00:35)

markyg:-
i love the show more em thing. great

I don't think it works in chrome or safari or ie6. is there a workaround?
(11.09.2009, 13:14)

Stu:-
Works in IE6 but Safari and Chrome have a different way of handling :active and :focus to other browsers. They only keep these states while the mouse button is held down.
No answer to this as it is built into the browser.
(11.09.2009, 13:43)

Simon:-
its staying open in opera now....

Version 10.01
Build 1844
Platform Win32
System Windows XP
(02.11.2009, 23:49)

Miguel:-
Hi Stu,
great stuff you have done in this site.
I was testing this 'show more' on IE7.. it works fine, one thing though and Im not sure if it is the same with other browsers, but once you click on 'show more' and you have everything expanded, it will close by itself if you want to scroll down with the scroll bar to see the rest of the content, it doesnt do it if you use the scroll button in your mouse though.
have you experienced the same?
Cheers and keep up the good work :)
(18.12.2009, 16:58)

Jeremy:-
Hi Stu,
Regarding the ../menu/more demo: I'm trying to show a list when more is clicked, and I'm having trouble. Do you have a suggestion? Thank you.
(01.06.2010, 23:51)



Post

Your comment:

Your Name:

Stu's First Name - 3 letters (required)

Thanks to Alex for this script.

Please enter your comments for this site page.
Please note that all posts are moderated.

Posting rules

HTML is turned off
Maximum word length is 80 characters.
Messages limited to 1200 characters.
Web links should not include 'http://'

Support CSSPLAY

Your donations keep CSS PLAY running.
If your donation is for the use of a demo then please email me with the demo url after making your donation.


CUSTOM SEARCH

Facebook Twitter rss feed Facebook Fan Page