By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
445,771 Members | 1,741 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 445,771 IT Pros & Developers. It's quick & easy.

expandable divs question for lengthy page

P: 8
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
Share this Question
Share on Google+
16 Replies


10K+
P: 13,264
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="JavaScript" 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.getElementById('quiz').getElementsByTa gName('div');
var aa=document.getElementById('quiz').getElementsByTa gName('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=indent+'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.getElementsByTagName('div')[0];
var a=w.firstChild;
if(d.style.display=='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
Expert Mod 15k+
P: 16,027
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

P: 8
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
Expert Mod 15k+
P: 16,027
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

P: 8
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
Expert Mod 15k+
P: 16,027
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

P: 8
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

P: 8
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
Expert Mod 15k+
P: 16,027
Set them all to have a style of 'display:none'.
Mar 12 '07 #10

acoder
Expert Mod 15k+
P: 16,027
Threads merged.
Mar 12 '07 #11

P: 8
Thanks, but they are set to display none.
What I have found is that in a tabbed page, you must put the javascript at the beginning of the tab instead of the page to get the divs to collapse.
But when I have a set of divs on each tab, I can only get one set to collapse. I tried renaming the set to quiz2, I also tried renaming the function that is called, even renamed all the variables, but I can only get one set or the other to close on load, not both.
Mar 12 '07 #12

acoder
Expert Mod 15k+
P: 16,027
No, I didn't mean close them. They shouldn't even be open in the first place.

Either set an inline style, e.g.
[HTML]<div id="..." style="display:none;" ...>[/HTML] or declare this in a style sheet using the class name.
Mar 12 '07 #13

P: 8
I tried both but the effect of both is the same, all within the div tag is not displayed.
I am sorry, I just do not know how to fix this myself
Mar 12 '07 #14

acoder
Expert Mod 15k+
P: 16,027
In your style1, you've set display to 'block'. Set it to 'none' and see if that works.
Mar 13 '07 #15

P: 8
I even thought of that, and it does work to collapse the questions, in appearance, but when clicked no answers show either.
Mar 13 '07 #16

acoder
Expert Mod 15k+
P: 16,027
In the onclick, just set the display to 'block' and it should show.
Mar 13 '07 #17

Post your reply

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