SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict
    Join Date
    Nov 2002
    Posts
    218
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    show/hide div in frames

    I have an Iframe that brings in text pages that are broken into chapters (individual text files) and pages(divisions in the text files). My control menu works to jump around between the chapters and pages. But what I also want to do is "hide" the previous page divsion and "show" the next page. How would I do this?

    (I was trying to get it to work in the function fore_page before I applied it throughout the code.)

    here is my code:
    Code:
    <script type="text/javascript">
    function back_chapt(elem)
    {
    		elem.page=document.forms['chapage'].elements['pge'];
    		elem.chapt=document.forms['chapage'].elements['chp'];
    		elem.chapt.value=eval(elem.chapt.value)-1;
    		elem.page.value=1;
    		frames['there'].location.href=elem.chapt.value+'.html#Pg'+elem.page.value;
    }
    function back_page(elem)
    {
    		elem.page=document.forms['chapage'].elements['pge'];
    		elem.chapt=document.forms['chapage'].elements['chp'];
    		elem.oldchapt= elem.chapt.value;
    		elem.pgid='Pg'+eval(elem.page.value);
    		elem.newchapt=frames['there'].document.getElementById(elem.pgid).getAttribute('valueC');
    		elem.newpage=frames['there'].document.getElementById(elem.pgid).getAttribute('valueD');
    		elem.chapt.value=elem.newchapt;
    		elem.page.value=elem.newpage;
    		
    		if (elem.oldchapt != elem.newchapt)
    	{
    		frames['there'].location.href=elem.chapt.value+'.html#Pg'+elem.page.value;
    
    	} else {
    		frames['there'].location.href=elem.chapt.value+'.html#Pg'+elem.page.value;
    	}								
    }
    
    function go_to(elem)
    {		
    		elem.page=document.forms['chapage'].elements['pge'];
    		elem.chapt=document.forms['chapage'].elements['chp'];
    		elem.newpgid='Pg'+eval(elem.page.value);
    		elem.pgidm='Pg'+eval(elem.page.value)-1;
    		elem.pgidp='Pg'+eval(elem.page.value)+1;
    		frames['there'].location.href=elem.chapt.value+'.html#Pg'+elem.page.value;
    
    		
    }
    function fore_chapt(elem)
    {
    		elem.page=document.forms['chapage'].elements['pge'];
    		elem.chapt=document.forms['chapage'].elements['chp'];
    		elem.chapt.value=eval(elem.chapt.value)+1;
    		elem.page.value=1;
    		frames['there'].location.href=elem.chapt.value+'.html#Pg'+elem.page.value;
    }
    function fore_page(elem)
    {
    		elem.page=document.forms['chapage'].elements['pge'];
    		elem.chapt=document.forms['chapage'].elements['chp'];
    		elem.oldchapt= elem.chapt.value;
    		elem.pgid='Pg'+eval(elem.page.value);
    		elem.newchapt=frames['there'].document.getElementById(elem.pgid).getAttribute('valueA');
    		elem.newpage=frames['there'].document.getElementById(elem.pgid).getAttribute('valueB');
    		elem.chapt.value=elem.newchapt;
    		elem.page.value=elem.newpage;
    		elem.newpgid='Pg'+eval(elem.newpage);
    		
    		if (elem.oldchapt != elem.newchapt)
    	{
    		frames['there'].location.href=elem.chapt.value+'.html#Pg'+elem.page.value;
    		hideObj(elem.pgid);
    		showObj(elem.newpgid);
    	} else {
    		frames['there'].location.href=elem.chapt.value+'.html#Pg'+elem.page.value;
    		getObj(elem.newpgid);
    		hideObj(elem.pgid);alert('hide');
    		showObj(elem.newpgid);alert('show');
    	}								
    }
    function getObj(objid)
    {
    	parent.frames['there'].document.getElementById(objid).style.zindex = 5;
    parent.frames['there'].document.getElementById(objid).focus();
    }
    function hideObj(objid)
    {
    	parent.frames['there'].document.getElementById(objid).style.visibility ='hidden';
    }
    function showObj(objid)
    {
    	parent.frames['there'].document.getElementById(objid).style.visibility ='visible';
    }
    
    </script>
    The alerts for hide and show work, for whatever that's worth.

    -berzerko

    by removing focus, it works in Mozilla. But still not in IE
    Code:
    function getObj(objid)
    {
            parent.frames['there'].document.getElementById(objid).style.zindex = 5;
    parent.frames['there'].document.getElementById(objid).focus();
    Here is a link to the site,(note: only the code in chapt 1 has been revised to work, and it only works in mozilla)http://educatewithpurpose.com/Lit/Robin/GoTo3.php
    Last edited by berzerko; Mar 23, 2004 at 13:49.

  2. #2
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not sure what you want - I don't see any DIVs, just tables. Perhaps you want to hide/show rows in the table?

    I noticed you're using "visibility" instead of "display". Have a look at this page. Mouse over any black heading. It allows you to display or not display the following section. Is this similar to what you have in mind?

  3. #3
    SitePoint Addict
    Join Date
    Nov 2002
    Posts
    218
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by MikeFoster
    I'm not sure what you want - I don't see any DIVs, just tables. Perhaps you want to hide/show rows in the table?

    I noticed you're using "visibility" instead of "display". Have a look at this page. Mouse over any black heading. It allows you to display or not display the following section. Is this similar to what you have in mind?
    The only chapter set up with div's is chapter 1. I intend to have all the div's hidden nad un hidden into the same absolute position.

    For example: in chapter one div id="Pg1" is the only one not hidden, the rest are hidden, and I want to swap them back and forth as I either advance/go back a chapter or page.

    Chapter one works the way I want it to in Mozilla. It seems that in IE and Safari the first page won't hide and the second..nth page won't show. I have no idea why it isn't working.


    -b

  4. #4
    SitePoint Addict
    Join Date
    Nov 2002
    Posts
    218
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Got it to work -almost!!

    The main problem was :
    Code:
    	if (elem.olchapt != elem.newchapt)
    	{
    		frames['there'].location.href=elem.chapt.value+'.html#Pg'+elem.page.value;
    
    	} else {	
    frames['there'].location.href=elem.chapt.value+'.html#Pg'+elem.page.value;
    		hideObj(elem.olpgid);
    		showObj(elem.newpgid);	
    	}
    Now the only problem is that if you use the manual page input and "GO" button. Then the divisions don't hide and they all pile up on each other.

    Does anybody have a way to hide all divisions except the current one?

    -b


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •