Re: Toggling visibility in css, not javascript

Discussion in 'HTML' started by richard, Aug 5, 2008.

  1. richard

    richard Guest

    On Mon, 04 Aug 2008 13:23:35 -0500, Chris <>
    wrote:

    >Is there a way that I can toggle the visibility of a div on and off
    >using css alone? It's a bit inconvenient in our app to use javascript here.
    >
    >Googling around, I found two tricks, neither of which quite does it. One
    >toggles visibility on hover, and the other creates a dummy checkbox,
    >styles it so it doesn't look like a checkbox, and then has different
    >styles for the checked/unchecked states. Clever, but it's hard to use
    >checkboxes like this in our app.
    >
    >I'm thinking the challenge here is to maintain state using css alone.
    >Probably not possible, but thought I'd ask.
    >
    >



    You could try using z-index.
    The problem I've run into with anything like that is it causes the
    page to load slower as the entire data has to be loaded before it will
    work.

    How about using an iframe? in one state the normal data appears and
    when needed switches to another.
     
    richard, Aug 5, 2008
    #1
    1. Advertising

  2. Gazing into my crystal ball I observed richard <>
    writing in news::

    > On Mon, 04 Aug 2008 13:23:35 -0500, Chris <>
    > wrote:
    >
    >>Is there a way that I can toggle the visibility of a div on and off
    >>using css alone? It's a bit inconvenient in our app to use javascript
    >>here.
    >>
    >>Googling around, I found two tricks, neither of which quite does it.
    >>One toggles visibility on hover, and the other creates a dummy
    >>checkbox, styles it so it doesn't look like a checkbox, and then has
    >>different styles for the checked/unchecked states. Clever, but it's
    >>hard to use checkboxes like this in our app.
    >>
    >>I'm thinking the challenge here is to maintain state using css alone.
    >>Probably not possible, but thought I'd ask.
    >>
    >>

    >
    >
    > You could try using z-index.
    > The problem I've run into with anything like that is it causes the
    > page to load slower as the entire data has to be loaded before it will
    > work.
    >
    > How about using an iframe? in one state the normal data appears and
    > when needed switches to another.
    >


    Haaaaa? This is the same thing as a div but more complicated.


    --
    Adrienne Boswell at Home
    Arbpen Web Site Design Services
    http://www.cavalcade-of-coding.info
    Please respond to the group so others can share
     
    Adrienne Boswell, Aug 5, 2008
    #2
    1. Advertising

  3. richard

    richard Guest

    On Tue, 05 Aug 2008 01:49:12 GMT, Adrienne Boswell <>
    wrote:

    >Gazing into my crystal ball I observed richard <>
    >writing in news::
    >
    >> On Mon, 04 Aug 2008 13:23:35 -0500, Chris <>
    >> wrote:
    >>
    >>>Is there a way that I can toggle the visibility of a div on and off
    >>>using css alone? It's a bit inconvenient in our app to use javascript
    >>>here.
    >>>
    >>>Googling around, I found two tricks, neither of which quite does it.
    >>>One toggles visibility on hover, and the other creates a dummy
    >>>checkbox, styles it so it doesn't look like a checkbox, and then has
    >>>different styles for the checked/unchecked states. Clever, but it's
    >>>hard to use checkboxes like this in our app.
    >>>
    >>>I'm thinking the challenge here is to maintain state using css alone.
    >>>Probably not possible, but thought I'd ask.
    >>>
    >>>

    >>
    >>
    >> You could try using z-index.
    >> The problem I've run into with anything like that is it causes the
    >> page to load slower as the entire data has to be loaded before it will
    >> work.
    >>
    >> How about using an iframe? in one state the normal data appears and
    >> when needed switches to another.
    >>

    >
    >Haaaaa? This is the same thing as a div but more complicated.


    horsehockey.
    Look up <iframe>
    You can put the iframe in a division if you want.
    What's difficult about writing a seperate page for what you want to
    show in that iframe?
    You create the iframe, then give it a name.
    Your called page refers to it by "name".
    In the "target" you say the name of the iframe.
     
    richard, Aug 6, 2008
    #3
  4. richard

    cwdjrxyz Guest

    On Aug 6, 12:45 am, richard <> wrote:
    > On Tue, 05 Aug 2008 01:49:12 GMT, Adrienne Boswell <>
    > wrote:
    >
    >
    >
    > >Gazing into my crystal ball I observed richard <>
    > >writing innews::

    >
    > >> On Mon, 04 Aug 2008 13:23:35 -0500, Chris <>
    > >> wrote:

    >
    > >>>Is there a way that I can toggle the visibility of a div on and off
    > >>>using css alone? It's a bit inconvenient in our app to use javascript
    > >>>here.

    >
    > >>>Googling around, I found two tricks, neither of which quite does it.
    > >>>One toggles visibility on hover, and the other creates a dummy
    > >>>checkbox, styles it so it doesn't look like a checkbox, and then has
    > >>>different styles for the checked/unchecked states. Clever, but it's
    > >>>hard to use checkboxes like this in our app.

    >
    > >>>I'm thinking the challenge here is to maintain state using css alone.
    > >>>Probably not possible, but thought I'd ask.

    >
    > >> You could try using z-index.
    > >> The problem I've run into with anything like that is it causes the
    > >> page to load slower as the entire data has to be loaded before it will
    > >> work.

    >
    > >> How about using an iframe? in one state the normal data appears and
    > >> when needed switches to another.

    >
    > >Haaaaa? This is the same thing as a div but more complicated.

    >
    > horsehockey.
    > Look up <iframe>
    > You can put the iframe in a division if you want.
    > What's difficult about writing a seperate page for what you want to
    > show in that iframe?
    > You create the iframe, then give it a name.
    > Your called page refers to it by "name".
    > In the "target" you say the name of the iframe.


    The <iframe> is not allowed in strict Doctypes such as html 4.01
    strict or xhtml 1.0 strict, to say nothing of xhtml 1.1. However it is
    allowed in frame set versions of html 4.01 and xhtml 1.0 as well as
    html 4.01 transitional. Even though not allowed in the mentioned
    forbidden Doctypes, an iframe often will work anyway on most current
    popular browsers, but the page will not validate.

    Frames, either regular frames or iframes, are a hangover from earlier
    forms of html. For the more modern strict versions, one is supposed to
    use an object to embed one html page in another html page. The w3c
    schools site long has had an example of how to do this properly.
    However it does not work on one family of browsers (if you can't guess
    which one, you likely have not been here very often - IE browsers, of
    course) . However a Google search will show that there is an ActiveX
    object that can be used to embed an html page in another html page,
    although it does not appear to have been used very often. Using
    Microsoft conditional comments, that appear as just regular comments
    to browsers that follow standards, allows one to route to an ActiveX
    object path for IE and to a normal object path for other browsers.
    Although ActiveX, used mostly by Microsoft, is much discussed and
    cussed, a properly written ActiveX object is valid even for xhtml 1.1
    even though most browsers do not support ActiveX.

    I have a test page at http://www.cwdjr.net/video4/embedpageB.php that
    demonstrates some of this at the xhtml 1.1 level to make the test as
    difficult as possible. Using the proper object code to embed one page
    in another page, gives results that in some respects are like frames
    and in other respects like iframes. You can use some css to control
    some properties in html embeded pages, but in other cases the css is
    not understood.

    Another interesting fact is that Microsoft has css code to change the
    color of scroll bars, and it is strictly not in the W3C standards.
    However, if you put this code in a Microsoft conditional comment, no
    proper browser that meets W3C standards will see anything other than
    an ordinary comment. Thus the page, if the code is correct, can
    validate as html and CSS. However seeing the colored scroll bars on IE
    is proof that IE does not follow W3C standards in respect to comments.
    The test page has an example or two of this with 3 sets of scroll bars
    matched in color to that of the embedded pages background color.

    There are a few more comments on the test page. Although some of the
    code on the main and embedded pages is unusual, it seems to work on
    the modern browsers I have including Firefox, Seamonkey, Opera, IE7,
    Safari for Windows, and Flock(the darling of the YouTube and MySpace
    younger generation). So hopefully your computer will not choke on the
    code. The reason the page is so short is that most is done on the
    server in php and you download only the final needed html after the
    php form input tells the server what selection you make.
     
    cwdjrxyz, Aug 6, 2008
    #4
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. =?Utf-8?B?c2lhag==?=

    Toggling Image

    =?Utf-8?B?c2lhag==?=, May 4, 2005, in forum: ASP .Net
    Replies:
    1
    Views:
    433
    =?Utf-8?B?U2hhbmU=?=
    May 6, 2005
  2. Replies:
    1
    Views:
    390
    jasonkester
    Jul 7, 2005
  3. C A Upsdell
    Replies:
    2
    Views:
    478
    C A Upsdell
    Aug 5, 2008
  4. cwdjrxyz
    Replies:
    1
    Views:
    784
    cwdjrxyz
    Aug 5, 2008
  5. Machi
    Replies:
    1
    Views:
    336
    Ray at
    Apr 15, 2004
Loading...

Share This Page