473,721 Members | 1,816 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Expandable html

Hi -
I'm looking to code some javascript that has an event handler tied to
an image ("a down arrow") that will expand code that was hidden on the
page load. It's pretty simple, I have an accessories html table that I
want to load in the html but hide to save page real estate until you
click the "down arrow" image. I know I've seen stuff like this before,
can anyone point me to an example of this or give me an idea of how to
code it?

Thanks, Doug

Jul 23 '05 #1
4 6034
In article <11************ **********@z14g 2000cwz.googleg roups.com>,
dr******@phresh design.com says...
Hi -
I'm looking to code some javascript that has an event handler tied to
an image ("a down arrow") that will expand code that was hidden on the
page load. It's pretty simple, I have an accessories html table that I
want to load in the html but hide to save page real estate until you
click the "down arrow" image. I know I've seen stuff like this before,
can anyone point me to an example of this or give me an idea of how to
code it?


<div>
"display" CSS property
getElementById( )

--
Hywel
Jul 23 '05 #2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Expandab le Menus Demo (johnzeratsky.c om)</title>
<meta http-equiv="content-type" content="text/html;charset=ut f-8" />
<meta name="keywords" content="" />
<style type="text/css">
<!--

span.expandLink {
font-size: 70%;
color: #333; }

span.expandLink a {
color: #333; }

-->
</style>

<script type="text/javascript">
function toggleSub(subme nu) {
if (document.getEl ementById(subme nu).style.displ ay == 'none') {
document.getEle mentById(submen u).style.displa y = 'block'
} else {
document.getEle mentById(submen u).style.displa y = 'none'
}
}
</script>

</head>
<body>
<div id="sitenav">
<h1>Expandabl e Menu Demo</h1>

<h2>Foods you grow</h2>
<ul>
<li>
<a href="#">Vegeta bles</a> <span class="expandLi nk">(<a href="#"
onclick="toggle Sub('vegMore'); return false">toggle</a>)</span>
<ul id="vegMore" style="display: none;">
<li><a href="#">Celery </a></li>
<li><a href="#">Carrot s</a></li>
<li><a href="#">Brocco li</a></li>
</ul>
</li>
<li>
<a href="#">Fruits </a> <span class="expandLi nk">(<a href="#"
onclick="toggle Sub('fruitMore' ); return false">toggle</a>)</span>
<ul id="fruitMore" style="display: none;">
<li><a href="#">Apple</a></li>
<li><a href="#">Banana </a></li>
<li><a href="#">Tomato ?</a></li>
</ul>
</li>

<li>
<a href="#">Other</a> <span class="expandLi nk">(<a href="#"
onclick="toggle Sub('otherMore' ); return false">toggle</a>)</span>
<ul id="otherMore" style="display: none;">
<li><a href="#">Mushro oms</a></li>
<li><a href="#">Beef</a></li>
<li><a href="#">Salmon </a></li>
</ul>
</li>

<li><a href="#">Tips for Growing</a></li>

<li>
<a href="#">Contac t</a> <span class="expandLi nk">(<a href="#"
onclick="toggle Sub('contactMor e'); return false">toggle</a>)</span>
<ul id="contactMore " style="display: none;">
<li><a href="#">em***@ email.com</a></li>
<li>(608) 555-1234</li>
</ul>
</li>
</ul>
</div>
<!-- end sitenav -->
</body>
</html>

Jul 23 '05 #3
Doug wrote:
Hi -
I'm looking to code some javascript that has an event handler tied to
an image ("a down arrow") that will expand code that was hidden on the page load. It's pretty simple...
Easy for you to say. #:-0

I have an accessories html table that I
want to load in the html but hide to save page real estate until you
click the "down arrow" image. I know I've seen stuff like this before, can anyone point me to an example of this or give me an idea of how to code it?

Thanks, Doug


Maybe...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<base href="http://www.grsites.com/webgraphics/arrows/oy/">
<style type="text/css">

td.arrow {
width: 20px;
height: 20px;
cursor: pointer;
vertical-align: top;
text-align: center;
padding-top: 8px;
border: 1px #aa0 solid;
background: #aaa;
}
td.content {
width: 300px;
height: 20px;
font: 12px arial;
padding: 6px;
border: 1px #000 solid;
background: #ddd;
}
td h5 {
font: 11px arial;
letter-spacing: .5em;
margin: 0 0 8px 4px;
}
td div {
display: none;
}
#pload {
background: url(arrows_oy_0 26.gif);
display: none;
}

</style>
<script type="text/javascript">

function init()
{
var t, td, tds, i = 0;
if (document.getEl ementById
&& (t = document.getEle mentById('foo') )
&& (tds = t.getElementsBy TagName('td')))
{
while (td = tds.item(i++))
{
td.onclick = function()
{
var img = this.getElement sByTagName('img ').item(0);
var div = this.parentNode .getElementsByT agName('div').i tem(0);
if (img && div)
{
var bWhich = /((^$)|(none))/.test(div.style .display);
div.style.displ ay = bWhich ? 'block' : 'none';
img.src = bWhich ?
'arrows_oy_025. gif' : 'arrows_oy_026. gif';
}
}
}
}
}

window.onload = init;

</script>
</head>
<body>
<span id="pload"></span>
<table id="foo">
<tbody>
<tr>
<td class="arrow">
<img
src="http://www.grsites.com/webgraphics/arrows/oy/arrows_oy_026.g if">
</td>
<td class="content" >
<h5>Item 1</h5>
<div>
....blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah....
</div>
</td>
</tr>
<tr>
<td class="arrow">
<img
src="http://www.grsites.com/webgraphics/arrows/oy/arrows_oy_026.g if">
</td>
<td class="content" >
<h5>Item 2</h5>
<div>
....blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah....
</div>
</td>
</tr>
<tr>
<td class="arrow">
<img
src="http://www.grsites.com/webgraphics/arrows/oy/arrows_oy_026.g if">
</td>
<td class="content" >
<h5>Item 3</h5>
<div>
....blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah....
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>

Jul 23 '05 #4
DesignerNut wrote:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Expandab le Menus Demo (johnzeratsky.c om)</title>
<meta http-equiv="content-type" content="text/html;charset=ut f-8" />
Such a character set declaration is unnecessary in XHTML (especially
when it is "utf-8") since an XML parser will ignore that; the character
encoding used is to be specified in a XML processing instruction.
However, even this is only necessary if that encoding differs from UTF-8:

<http://www.w3.org/TR/xhtml1/#strict>
<http://www.w3.org/TR/xhtml1/#C_9>
<meta name="keywords" content="" />
<style type="text/css">
<!--

span.expandLink {
font-size: 70%;
color: #333; }

span.expandLink a {
color: #333; }

-->
</style>
Since this so far Valid Strict XHTML 1.0, it is likely that you somewhat
disable the `style' element by commenting out its content. An XML
parser is allowed to remove comments before building the parse tree:

<http://www.w3.org/TR/2004/REC-xml-20040204/#sec-comments>

Furthermore, the `style' element is not supposed to work anyway here; in
XML applications, the stylesheet has to be linked to the document using
an XML processing instruction:

<http://www.w3.org/TR/xhtml1/#C_13>
<script type="text/javascript">
function toggleSub(subme nu) {
if (document.getEl ementById(subme nu).style.displ ay == 'none') {
This kind of referencing is known to be error-prone; features
(non-backwards compatible objects and their properties) should
be tested for prior to usage.
[...]
<li>
<a href="#">Vegeta bles</a> <span class="expandLi nk">(<a href="#"
onclick="toggle Sub('vegMore'); return false">toggle</a>)</span>
This menu is not going to work without client-side scripting, if that,
although that would have been possible if created by a competent author.
[...]

PointedEars
Jul 23 '05 #5

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
4080
by: Ralf Höppner | last post by:
Does anyone know, if it is possible to create an explorer-like expandable tree from an XML File ? Maybe using XSLT ? I'd like to use it on an HTML web page. thanks ! Ralf
1
2376
by: Mel | last post by:
has anyone built a CSS based expandable menus yet ? i can see that its do(able) using display=0|1 function thanks for any info
0
1060
by: Pradeep | last post by:
Hi all, When i change an expandable property of an object from the property grid, the set method of that property is not being called, where as the set methods of its sub properties are being executed. what may be the reason? please help... I have written some code with in the set method of the expandable property.
0
5568
by: Brian Young | last post by:
Hi all. I'm using the Property Grid control in a control to manage a windows service we have developed here. The windows service runs a set of other jobs that need to be managed. The control is used to view the state of the running jobs and schedule new jobs. The control also runs in the context of Internet Explorer (we do this so the administrators of the jobs can always receive the latest control). The property grid is used to...
5
2357
by: KitKat | last post by:
I've got two queries; one is a modification of an older query; the other I created from scratch. The old one is about 5 copies down the road from something that has been expandable when I'm in View mode--it showed the Points of Contact for records whose Begin Date was in a form-selected (or manually inputted) year. That used to be all it did. Then copied it, took out the year criterion, and changed "POC" to show the Director field...
1
9161
by: axlq | last post by:
I've seen a lot of examples of expandable/collapsable lists, such as these nice examples: http://www.karlnelson.net/nestedlists/ and http://dynamicdrive.com/dynamicindex1/navigate1.htm They use javascript of course, and that's the problem. There's no graceful degradation with javascript disabled. Any links in the hidden sub-items will become inaccessible.
13
31418
by: =?Utf-8?B?S2VzdGZpZWxk?= | last post by:
Hi Our company has a .Net web service that, when called via asp.net web pages across our network works 100%! The problem is that when we try and call the web service from a remote machine, one outside of our domain, we get the error.. ** Client found response content type of 'text/html; charset=Windows-1252', but expected 'text/xml' **. We can discover the web service by typing in the url of the asmx so we know the server can 'see' it...
8
2716
by: Don Li | last post by:
Honestly have not touched CSS for years, so, back to square one on this... What I'd like to do if possible with CSS is this: create a layout that is shrinkable or expandable when a user drag it, kind of like a window on a desktop, you can drag it to make it bigger or smaller... so, the content within would also be proportionally shrunk or expanded... Is it possible with CSS? If so, could you show an example?
1
3702
by: Manil | last post by:
I usually have no problem with Firefox, but here is a rare instance of IE displaying a table with image slices correctly and Firefox adding space where I seemingly have none. Is there anything I can do to fix this? Reasons for the problem may be that I have a cell in the table that acts as an expandable cell so that one can adjust the window and it will widen to keep the header at 98% of the window. Also, there is a text box and a menu box...
0
8727
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
9365
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
9212
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
9127
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
9056
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
1
6664
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
5973
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
4748
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
3
2127
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.