473,698 Members | 2,833 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

expandable divs question for lengthy page

8 New Member
I am using the following script for expandable divs but ...the focus is on the top of the page ie..the div id #quiz, and I am trying to use if for a lengthy FAQ page.
when you scroll to the bottom of the page and open a question, the focus pops back to the top of the page.
I thought of defining several sections, but when I do only one is collapsed, the others are open on page load

Expand|Select|Wrap|Line Numbers
  1. <script language="JavaScript" type="text/JavaScript"> 
  2. indent=5;//set here the left indent in pixels 
  3. iup='images/blueup.gif'//set here the up arrow relative location 
  4. idrop='images/bluedrop.gif'//set here the drop arrow relative location 
  5. //No need to modify below 
  6. function coll(){ 
  7. var dd=document.getElementById('quiz').getElementsByTagName('div'); 
  8. var aa=document.getElementById('quiz').getElementsByTagName('im'); 
  9. for (var i=1;i<dd.length;i=i+2){ 
  10. dd[i].style.position='relative'; 
  11. dd[i].style.display='none'; 
  12. dd[i].style.left=indent+'px'; 
  13. for (var j=0;j<aa.length;j++){ 
  14. im=aa[j].getAttribute('src'); 
  15. if(im==idrop){ 
  16. aa[j].setAttribute('src',iup);break 
  17. function activ(w){ 
  18. var d=w.parentNode.getElementsByTagName('div')[0]; 
  19. var a=w.firstChild; 
  20. if(d.style.display=='none'){ 
  21. coll(); 
  22. d.style.display='inline'; 
  23. a.setAttribute('src',idrop); 
  24. else{ 
  25. d.style.display='none'; 
  26. a.setAttribute('src',iup); 
  27. onload=coll; 
  28. </script>

http://www.nmprc.state.nm.us/ftalfaq2.htm
Feb 28 '07 #1
16 2012
r035198x
13,262 MVP
I am using the following script for expandable divs but ...the focus is on the top of the page ie..the div id #quiz, and I am trying to use if for a lengthy FAQ page.
when you scroll to the bottom of the page and open a question, the focus pops back to the top of the page.
I thought of defining several sections, but when I do only one is collapsed, the others are open on page load

<script language="JavaS cript" type="text/JavaScript">
indent=5;//set here the left indent in pixels
iup='images/blueup.gif'//set here the up arrow relative location
idrop='images/bluedrop.gif'//set here the drop arrow relative location
//No need to modify below
function coll(){
var dd=document.get ElementById('qu iz').getElement sByTagName('div ');
var aa=document.get ElementById('qu iz').getElement sByTagName('im' );
for (var i=1;i<dd.length ;i=i+2){
dd[i].style.position ='relative';
dd[i].style.display= 'none';
dd[i].style.left=ind ent+'px';
}
for (var j=0;j<aa.length ;j++){
im=aa[j].getAttribute(' src');
if(im==idrop){
aa[j].setAttribute(' src',iup);break
}
}
}
function activ(w){
var d=w.parentNode. getElementsByTa gName('div')[0];
var a=w.firstChild;
if(d.style.disp lay=='none'){
coll();
d.style.display ='inline';
a.setAttribute( 'src',idrop);
}
else{
d.style.display ='none';
a.setAttribute( 'src',iup);
}
}
onload=coll;
</script>


http://www.nmprc.state.nm.us/ftalfaq2.htm

Java != Javascript

Moved to Javascript forum
Feb 28 '07 #2
acoder
16,027 Recognized Expert Moderator MVP
Everywhere where you have
Expand|Select|Wrap|Line Numbers
  1. <a href="#"
change to
Expand|Select|Wrap|Line Numbers
  1. <a href="javascript:void(0);"
This stops the browser following the link. The link # points to a place on the page (i.e. the top of the page).
Feb 28 '07 #3
kdeguero
8 New Member
thank you so much, I am very new to java, I can use an already written script, but do not know enough to fix it when it doesn't work.
thanks again, it works perfectly now :)
Feb 28 '07 #4
acoder
16,027 Recognized Expert Moderator MVP
thank you so much, I am very new to java, I can use an already written script, but do not know enough to fix it when it doesn't work.
thanks again, it works perfectly now :)
No problem, you're welcome.

Just one thing: it's Javascript - not Java. Big difference between the two.
Feb 28 '07 #5
kdeguero
8 New Member
http://www.nmprc.state.nm.us/ftalfaq.htm

one more question, it works in all browsers i checked before I upload to my web server, but after upload it only works in IE7 and Firefox, but not in IE6...the gif disappears after being clicked on.
I might leave as is if, but if there is a way to fix, I would rather fix
Feb 28 '07 #6
acoder
16,027 Recognized Expert Moderator MVP
Good job you pointed that out. IE sometimes doesn't like javascript:void in the href attribute of <A> tags. So instead of javascript:void , change back to # in your href. Then in your onclick, add "return false;" at the end to prevent the browser following the link.
Mar 1 '07 #7
kdeguero
8 New Member
ok, I now have a tabbed page, that uses the same javascript in my original post, but I want it to have an expandable/collapsable section on each tab, but I can't figure out how to make them both collapse on page load.
I have tried several different things....so this link is one of my tries

thank you for your help, as I said above, I only know how to 'use' javascript, not create it

http://www.nmprc.state.nm.us/rfcnew.htm

From what I can deduce it is because this script is for each 'document', but I do not know how to make it so it can be used twice.
Mar 9 '07 #8
kdeguero
8 New Member
I am using the script below and it works great. I have a page with horizontal tabs and want to have an expandable 'quiz' section on each tab. The code is set to close all divs on load, but when I use 2 of them, I can only get one section to be closed on load. I have tried several different things to get both to close, but to no avail. I just don't have the javascript knowledge I need to be able to get this to work.

[url=http://www.nmprc.state .nm.us/rfcnew.htm]

Expand|Select|Wrap|Line Numbers
  1. <script language="JavaScript" type="text/JavaScript"> 
  2. indent=5;//set here the left indent in pixels 
  3. iup='images/blueup.gif'//set here the up arrow relative location 
  4. idrop='images/bluedrop.gif'//set here the drop arrow relative location 
  5. //No need to modify below 
  6. function coll(){ 
  7. var dd=document.getElementById('quiz').getElementsByTa  gName('div'); 
  8. var aa=document.getElementById('quiz').getElementsByTa  gName('im'); 
  9. for (var i=1;i<dd.length;i=i+2){ 
  10. dd[i].style.position='relative'; 
  11. dd[i].style.display='none'; 
  12. dd[i].style.left=indent+'px'; 
  13. for (var j=0;j<aa.length;j++){ 
  14. im=aa[j].getAttribute('src'); 
  15. if(im==idrop){ 
  16. aa[j].setAttribute('src',iup);break 
  17. function activ(w){ 
  18. var d=w.parentNode.getElementsByTagName('div')[0]; 
  19. var a=w.firstChild; 
  20. if(d.style.display=='none'){ 
  21. coll(); 
  22. d.style.display='inline'; 
  23. a.setAttribute('src',idrop); 
  24. else{ 
  25. d.style.display='none'; 
  26. a.setAttribute('src',iup); 
  27. onload=coll; 
  28. </script>
Mar 9 '07 #9
acoder
16,027 Recognized Expert Moderator MVP
Set them all to have a style of 'display:none'.
Mar 12 '07 #10

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

Similar topics

2
1911
by: Amir S. | last post by:
Hi guys... Does anyone know a tool (preferably free) that would generates code for the cute expandable navigation system that uses pluses and minuses? An example can be seen on the left nav bar of the following page: http://office.microsoft.com/training/training.aspx?AssetID=RC061050921033&CTT=6&Origin=RP062013981033 THanx for your help in advance!
12
6300
by: deko | last post by:
Is there any way to work around the blank space created by hidden divs? I'm trying to use a relatively postioned divs with show/hide behaviors to annotate an image. The divs show/hide onMouseOver/onMouseOut but leave a blank space on the page when hidden (the space where the divs would normally be). Is it possible to use z-indexing to put regular content where the hidden divs would be? When I try to do this, the layers don't unhide as...
3
13777
by: Marc | last post by:
Hi to all, I have several DIVs in a page, each has a unique name. I'd need a method to cycle through all DIVs so that I can change their style. For example, let's say I need to set a red background to DIVs whose name begins with "a". This is the pseudo code: For Each Div in The Page If Div's name starts with 'a' then set Div's background to Red Next
0
5567
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
9160
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.
2
8279
by: tasman.hayes | last post by:
I'm experimenting with converting a site from a table layout to CSS. I'm floating three DIVs in a row for the top of a website (a logo, navigation buttons and a email list signup box). The DIVs have a grey background. When I view the page in Firefox, I get what I hoped for: there is a solid grey rectangle at the top of the website. When I view the page in Internet Explorer 6 (WinXP), there is a gap between two right hand DIVs (i.e. a...
3
1825
by: Carl Gilbert | last post by:
Hi I am looking to convert a site from HTML to ASP.NET making use of CSS. I have tried various combinations but I can not seem to get the correct combination of div and CSS tag configurations. I have uploaded a screenshot (http://www.bwbfc.com/math/regions.jpg) of how the screen will be laid out. Firstly it is all cantered in the window. I plan to create a master page which would contain the header (in blue), the footer (in yellow)...
11
7834
by: dusk | last post by:
Hi, I'm very new to javascript, and I'm having trouble finding a way to display a string of divs without the code getting really messy. I have several different pages to write, each with about 15-20 divs, and I need users to be able to select a sequence of divs - basically like a series of yes/no questions that, when "yes" or "no" is selected, displays the appropriate div as well as what's come before it. I can hide all divs and display...
0
8683
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
8611
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
9170
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
9031
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
8904
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
8876
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...
0
7741
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
0
5867
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();...
1
3052
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

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.