473,606 Members | 2,109 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

JS error, "x has no properties" - accordion-style dropdown menu

3 New Member
I have an accordion style dropdown list/sublist menu (functions similar to the "today on WebMD video" widget found on http://www.webmd.com/) - it will allow users to click on a headline (from the main list) to open up the full listing (sublist) below that headline.

My JavaScript is almost but not quite working as needed. It also serves up an error that an object "has no properties". The particular error message and line of code it refers to:

Expand|Select|Wrap|Line Numbers
  1. sf has no properties
  2.  var state = sf.style.display;
  3.  
I'll explain further and give actual code snippets - hopefully somebody can see something obvious that I need to fix?

Basically, I'm coding a tool that has a list of headlines (coded in definition list, DL). Clicking on a headline will reveal all the items listed below it in a subordinate list (coded as a unordered list, UL, nested inside a DD tag). Click on the same headline again, and it closes. Or, click on any other headline and the previously opened headline closes.

Another action also requiring JS is the position of the background image used on the top-level headlines (in the main list) needs to change when their respective subordinate ULs are expanded. Once the subordinate is closed, the background image also needs to change back to it's original position.

It is actually very similar to a basic drop-down list with rollovers, but because this requires closing/opening (i.e. "accordion" ) of the top level items via clicking events (and not mouseovers / hover events), it can't be done with only CSS and requires Javascript.

OK, hopefully that clearly explains the goal. What I've got so far is basic HTML and CSS - truncated version below:

[HTML]
<dl>
<dt id="featured1" onclick="toggle Display('subfea t1');toggleBgPo s('featured1'); return false;">Headlin e 1</dt>
<dd id="subfeat1">
<ul>
<li><a href="#" title="link info">1.1 Lorem ipsum</a></li>
<li><a href="#" title="link info">1.2 Dolor sit amet</a></li>
</ul>
</dd>
<dt id="featured2" onclick="toggle Display('subfea t2');toggleBgPo s('featured2'); return false;">Headlin e 2</dt>
<dd id="subfeat2">
<ul>
<li><a href="#" title="link info">2.1 Lorem ipsum</a></li>
<li><a href="#" title="link info">2.2 Dolor sit amet</a></li>
</ul>
</dd>
<dt id="featured3" onclick="toggle Display('subfea t3');toggleBgPo s('featured3'); return false;">Headlin e 3</dt>
<dd id="subfeat3">
<ul>
<li><a href="#" title="link info">3.1 Lorem ipsum</a></li>
<li><a href="#" title="link info">3.2 Dolor sit amet</a></li>
</ul>
</dd>
</dl>
[/HTML]

The simplified CSS:
Expand|Select|Wrap|Line Numbers
  1. dt {background: url(image.gif) 0 0 no-repeat;}
  2.  
That is a "pixy rollover" style image - so the desired effects is that when a main list item (DT element) is clicked and it's subordinate is expanded, that background position will change to "0 -25px".

All the HTML/CSS validates. The problem is definitely (well, best I can tell) with the Javascript - as follows:

Expand|Select|Wrap|Line Numbers
  1. /* TOGGLE DISPLAY - show / hide the list */
  2. window.onload=toggleDisplay; // will load if Javascript enabled, otherwise all menus will stay shown / accessible
  3.  
  4. function toggleDisplay(subFeatID) {
  5.     var sf = document.getElementById(subFeatID);
  6.  
  7.     for (var i = 1; i<=10; i++) { // menus are hidden when the document loads up, but only if Javascript is enabled.
  8.         if (document.getElementById('subfeat'+i)) {document.getElementById('subfeat'+i).style.display='none';}
  9.     }
  10.  
  11.     var state = sf.style.display; // toggle display rule
  12.     if (state == 'block')
  13.         sf.style.display = 'none';
  14.     else if (state != 'block')
  15.         sf.style.display = 'block'; 
  16. }
  17.  
  18.  
  19. /* TOGGLE BACKGROUND - change background image position accordingly */
  20. function toggleBgPos(featID) {
  21.     var f = document.getElementById(featID);
  22.  
  23.         for (var i = 1; i<=10; i++) {
  24.         if (document.getElementById('featured'+i)) {document.getElementById('featured'+i).style.backgroundPosition='0px 0px';}
  25.     }
  26.  
  27.     pos = f.style.backgroundPosition;
  28.     if (pos == '0px -25px')
  29.         f.style.backgroundPosition = '0px 0px';
  30.     else if (pos != '0px -25px')
  31.         f.style.backgroundPosition = '0px -25px'; 
  32. }
  33.  
  34.  
As is, the headlines open and close properly *except* in the case where you click on the open headline itself. If you click on any headline (DT element), it expands to show the sub list. Click on *any other* headline DT element, and the first one closes and the new one just clicked on expands. The background image position changes correctly.

So the only two problems are:
1. the error message
2. can't get the headline DT elements to close when clicking on the one that is open.

I EXTREMELY appreciate anybody who has read through all this and feels inspired enough to suggest some fix. Any ideas are welcome!

Thanks!
Oct 6 '07 #1
1 2659
pbmods
5,821 Recognized Expert Expert
Heya, Luispunchy. Welcome to TSDN!

When this line gets executed:
Expand|Select|Wrap|Line Numbers
  1. var sf = document.getElementById(subFeatID);
  2.  
What is the value of subFeatID, and does an element exist at that point with that ID?
Oct 6 '07 #2

Sign in to post your reply or Sign up for a free account.

Similar topics

1
1453
by: David | last post by:
Lately I have been getting the following error with all of my web applications, in debug and release mode. "Error while trying to run project: Unable to start debugging on the web server. Could not start ASP.NET or ATL Server debugging. Verify that ASP.NET or ATL Server is correctly installed on the server." I can create a brand new hello world web application and this happens. Any ideas?
3
8820
by: Brian Foree | last post by:
I am developing an ASP.NET application that uses Access 2000 as its backend, and have just started getting the following error on 2 ASP.NET pages that had been working until late last week (and I don't think I made any changes to either page other than changing the user control that creates the header). Server Error in '/myApp' Application. ---------------------------------------------------------------------------- ----
1
4530
by: gerr | last post by:
Visual studio 2003 "HTTP/1.1 500 Internal Server Error" when trying to create a new Asp.net site with Visual Studio 2003 on localServer/IIS 5.1. Anyone have any new solutions or urls to point me to for this problem short of reinstalling the local developer XP OS/IIS 5.1 ? I have tried everything else listed in various threads. I think my mistake was thinking the installation for v/st 2003 was going to upgrade my V/Studio.net 2001, ( I...
1
2845
by: gerr | last post by:
Visual studio 2003 "HTTP/1.1 500 Internal Server Error" when trying to create a new Asp.net site with Visual Studio 2003 on localServer XP Pro/IIS 5.1. Everything worked fine prior to installing V/Studio 2003. Was running V/Studio classic 6/Asp parallel with V/Studio 2002/aspx. Anyone have any new solutions or urls' to point me to for this problem short of reinstalling the local developer setup consisting of Win XP OS/IIS 5.1 along with FP...
4
3952
by: Bill Coan | last post by:
NOTE: This was posted earlier to vsnet.vstools.office under a different subject line but received no response. I'm having a problem automating Word's Find object from a .NET application, using late binding. If I use early binding, my code runs fine on most systems, but it is vulnerable to a known bug explained here: http://support.microsoft.com/default.aspx?scid=kb;en-us;292744
1
2289
by: dasayu | last post by:
Hi, I have a custom object called gridWidget. I am consistantly getting an error in FireFox when I click on an href, which calls a function defined on the object. The generated link looks similar to: javascript:gridWidget.editColumn(3, 3, 'PDDSectionForm', 'pdd_link', ..) The above works fine in IE.
2
4379
by: hardrock | last post by:
Hello! I'm working with the prototype library version 1.4.0 and having a strange error lately. When I want to make an Ajax.Updater call, it basically works. But as soon as I put the call into a function, so that I can call it from a popup, I get the error: "html has no properties" (in Firefox)
2
2060
by: Mike Hofer | last post by:
In my ASP.NET application, *one* page would not render in the application. All others would show up just fine, but when the user clicked the button to browse to this one page, I'd get a nasty error message from IE: "Cannot find server or DNS error." I set some break points and determined that the page was being loaded, but that the error page was being displayed anyway. Fortunately, I'm pretty obsessive about logging errors (both in my...
1
7093
by: =?ISO-8859-1?Q?Lasse_V=E5gs=E6ther_Karlsen?= | last post by:
I get the above error in some of the ASP.NET web applications on a server, and I need some help figuring out how to deal with it. This is a rather long post, and I hope I have enough details that someone who bothers to read all of it have some pointers. Note, I have posted the stack trace and the code exhibiting the problem further down so if you want to start by reading that, search for +++ Also note that I am unable to reproduce...
17
2769
by: David C. Ullrich | last post by:
Having a hard time phrasing this in the form of a question... The other day I saw a thread where someone asked about overrideable properties and nobody offered the advice that properties are Bad. So maybe we've got over that. I suppose properties could have Bad consequences if a user doesn't know they exist and think that a certain property of an object is just an ordinary attribute. But that applies to
0
8009
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
7939
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
8428
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
5962
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
5456
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
3919
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
3964
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
2442
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
0
1285
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.