Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 3 of 3
  1. #1
    Junior Member
    Join Date
    Feb 2005
    Posts
    2
    Member #
    8988
    I'm designing a web site that has a rather long list. So I decided to use collapsable scroll boxes in categories that contain simple show hide links. The idea is simple enough... find what you want in the box to the left and some info pops up to the right. Works beautifully and saves me from making a 100+ pages for each link, except that I don't know and can't find anywhere how to get rid of the text unless the same link is clicked again. For instance: you have a-e, you click on 'a' and up comes a paragraph of info, click on b-e and that info also comes up, but 'a' hasn't left and eventually you have a mess. Here's the code I have so far... some of the style is on a css sheet so alone this might not work and it's only a start for structure so it's not perfect yet.

    <div id="contentwrapper">
    <div id="contentleft">
    <div class="scrollcontain" id="scroller1" style="display: block;">
    <div class="scroll">
    <div class="scrollpadder">
    <a href="#" onclick="toggle ('office space'); return false;">
    <p>Office Space<br>
    <a href="#" onclick="toggle ('hellboy'); return false;">
    Hellboy<br>
    <a href="#" onclick="toggle ('george'); return; false">
    george<br>
    ...<br>
    ...<br>
    Great Balls of Fire!!!<br>
    ...<br>
    test<br>
    <style type="text/css">#movies div {display:none;}</style>
    <div id="movies">
    <a href="javascript:show(0)"></a>
    <div>Test 1</div>

    </div>

    </div>
    </div>
    </div>
    </ul>
    </div>
    <div id="contentright">
    <h1 id="controlheading">Review</h1>

    <div id="hellboy" style="display:none">Hellboy is good movie. I watch several times and never saw another movie with hell. So, in conclusion good movie is hellboy for me and for you and for family.</div>
    <div id="office space" style="display:none">Office Space is good movie. I watch several times and never saw another movie with hell. So, in conclusion good movie is hellboy for me and for you and for family.</div>
    <div id="george" style="display:none">George is good movie.</div>


    So, please... if anyone knows the one little command I'm missing please let the world know. I'm open to suggestions.

    P.S. I threw a site search box that points to google - sitesearch, problem is that google doesn't seem to work unless you submit the site. Is there a way to simply search one of your pages?

  2.  

  3. #2
    Senior Member
    Join Date
    Aug 2003
    Posts
    444
    Member #
    2801
    I had a similar problem for my Zeta Portal script. The way I solved it is as follows:

    1. Have a set of DIV tags with the same CSS class name and different IDs. Make sure they each has an ID!
    2. In the CSS file, set the visibility to hidden.
    3. Use the following javascript function at the very end of the page (after all of the div tags you want hidden).

    Code:
    <script type="text/javascript">
    	<!--
    	var $VisibleGroup = "";
    		
    	function Visibilise($Group){
    			
    		if($Group == $VisibleGroup){
    			return;
    			}
    		
    		elNew = document.getElementById($Group);
    		elNew.style.visibility = 'visible';
    		elNew.style.width = '60%';
    		//alert(elNew.style.width);
    		
    		if($VisibleGroup != ""){
    			elOldVis = document.getElementById($VisibleGroup);
    			elOldVis.style.visibility = 'hidden';
    			//alert(elOldVis.style.);
    			}
    		$VisibleGroup = $Group;
    		}
    		
    	Visibilise("Default");
    	//--></script>
    This code creates a function (called Visibilise, which is my gramatically incorrect word for "make visible" ) and then calls it - just replace "Default" with the ID of your default group.

    4. Now for each link that displays a div, use the following link code:

    Code:
    <a href="#" onclick="Visibilise('DivID');">Div</a>
    Where LinkID is the ID of the div's ID you set in point 1 above.

    Note that the function takes care of hiding the currently-visible div and showing the one you want.

    If you want to see the code in all its glory, download Zeta Portal from http://ekstreme.com/phplabs/zetaportal.php . End of shameless plug

    Hope this helps.
    eKstreme
    eKstreme.com - Free website tools!
    fontfox - free fonts Hand-picked quality fonts.

  4. #3
    Junior Member
    Join Date
    Feb 2005
    Posts
    2
    Member #
    8988
    Thank you

    That fixed the problem. The only thing that needed changing was the 60% to a 100%. Thanks a million.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 10:19 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com