homepage Welcome to WebmasterWorld Guest from 54.226.191.80
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
Anyone know what this is called please ?
Dexie




msg:3651220
 8:08 pm on May 15, 2008 (gmt 0)

When you see something on a page, where it says something like, "click here for . . . . . . . ." you click it, and a section then appears on the same page, usually, just under the bit that you just clicked, and there's usually another clickable link there to make that section disappear again - anyone know what the name of the code is for that please ? For the extra icing on the cake, anyone know the actual code as well please ?

Any help appreciated.

Dexie.

 

tedster




msg:3651259
 8:45 pm on May 15, 2008 (gmt 0)

It's often called show/hide divs. It's done with a javascript link that changes the CSS visibility of the appearing/disappearing div from display:none to display:block (or from visibility:hidden to visibility:visible, for some layouts.) It's similar in concept to those "mouseover menus", but triggered by an onclick event instead of mouseover/mouseout.

Here's a thread in our Javascript forum with a discussion and some starter code:

[webmasterworld.com...]

[edited by: tedster at 9:45 pm (utc) on May 15, 2008]

Dexie




msg:3651268
 8:53 pm on May 15, 2008 (gmt 0)

That is very interesting Tedster and I thank you very much for that information and link.

One thing, do you know if it's possible to create the same effect, but without js please ?

tedster




msg:3651298
 9:18 pm on May 15, 2008 (gmt 0)

I don't think so. The link needs to change the visibility of the content, that means playing around with the DOM - and a js link is the tool to do that.

anon123




msg:3651301
 9:20 pm on May 15, 2008 (gmt 0)

I think AJAX does it too.

Dabrowski




msg:3651306
 9:31 pm on May 15, 2008 (gmt 0)

You could use AJAX to load new content into the page, but it's overkill for this application - and it also requires JS.

tedster




msg:3651314
 9:39 pm on May 15, 2008 (gmt 0)

Right. AJAX stand for Asynchronous JavaScript and XML.

And there's a clear advantage of loading everything with the first source code - search engines can index the content that the link click will reveal. Sometimes this can frustrate visitors who come from a search result, unless you modify the javascript so that when the keyword is only in the "usually-hidden" div, it is automatically switched to display:block or visibility:visible.

Marshall




msg:3651585
 6:56 am on May 16, 2008 (gmt 0)

There is a way to do it with a hover in css, but it is tricky and the link has to remain hovered.

Marshall

Dexie




msg:3651592
 7:05 am on May 16, 2008 (gmt 0)

Many thanks, the info is appreciated.

vincevincevince




msg:3651593
 7:09 am on May 16, 2008 (gmt 0)

How about combining :active with the same method used for :hover?

Dexie




msg:3651595
 7:10 am on May 16, 2008 (gmt 0)

Thanks for that - Anyone know if it would work ?

Marshall




msg:3651610
 7:37 am on May 16, 2008 (gmt 0)

<head>
<style type="text/css">
a {
text-decoration: none;
}
a span {
display: none;
}
a:hover span {
background-color: #FFC;
color: #000;
display: inline;
}

</style>
</head>

<body>
<a href="#">Link<br /><span>Hello</span></a>
</body>

If you make the span display: block; you can set margins, padding, border, etc:

<head>
<style type="text/css">
a {
text-decoration: none;
}
a span {
display: none;
}
a:hover span {
color: #000;
background-color: #FFF;
display: block;
margin-top: 30px;
position: absolute;
padding: 5px;
border: 1px solid #000;
}

</style>
</head>

<body>
<p><a href="#">Link<span>Hello<br />My name is Marshall</span></a></p>
<p>Next line</p>
</body>

Hope this helps.

Marshall

[edited by: Marshall at 7:47 am (utc) on May 16, 2008]

vincevincevince




msg:3651624
 8:02 am on May 16, 2008 (gmt 0)

Rather than :active or :hover, use :focus. I changed the line:
a:hover span { from the above to:
a:focus span { and it works just fine for me. I'm guessing there may well be some problems with early IE versions.

If you are creative, you could use :hover to instruct the user to click in order to see the full text from :focus

Marshall




msg:3651654
 8:43 am on May 16, 2008 (gmt 0)

vincevincevince,

The problem I see with a:focus is that you would have to click on the link to display the span. That being said, unless the link is a "#", it is going to take you to its destination which kind of defeats the purpose.

Marshall

Dabrowski




msg:3651702
 10:21 am on May 16, 2008 (gmt 0)

The problem I see with a:focus is that you would have to click on the link to display the span

But the traditional show/hide requires a click, and the user expects to have to click a link anyway.

Dexie




msg:3651716
 10:38 am on May 16, 2008 (gmt 0)

Thanks for the input here - it's appreciated.

That is correct, the user is expecting to click a link.

Anything else to add ?

rocknbil




msg:3651960
 4:46 pm on May 16, 2008 (gmt 0)

Anyone know what this is called please ?

There are many types of toggle, for example, a checkbox that checks or unchecks all other checkboxes in a form, I would call this a visibility toggle.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved