SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Zealot frosco's Avatar
    Join Date
    Jul 2003
    Location
    WA state
    Posts
    136
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Wink Expanding menu depending on category

    Hi! This one is a little over my head, but I'd really like to accomplish it. Here's my code so far:
    Code:
    'Setting Connection 
    set MyConnection = server.createobject("ADODB.Connection") 
    set rsProducts = server.createobject("ADODB.recordset") 
    %> <!--#include file="db.asp"--> <%
    
    'Get ALL records from the database
    		SQLQuery = "SELECT * FROM Query2 WHERE Active = 'Yes' ORDER BY Proper, LineOrder"
    		set rsProducts = MyConnection.Execute(SQLQuery)	
    
    do while not rsProducts.EOF
    
    'Get the form fields
    	Category = rsProducts("Category")
    	Product = rsProducts("Product")
    	Proper = rsProducts("Proper")
    
    if NOT rsProducts.EOF OR rsProducts.BOF then
     	While NOT rsProducts.EOF
     		if tmpCat <> rsProducts("Category")then
     			Response.Write "</small><strong>"& rsProducts("Proper") &"</strong><br/><small>"
     		end if
     				Response.Write "<font face='wingdings'> </font>" & rsProducts("Product") &"<br/>"
     		tmpCat = rsProducts("Category")
     	rsProducts.MoveNext()
     	Wend
     end if
    loop
    MyConnection.close
    and here is the page it's displayed on

    http://www.wittymom.com/sidemenu.asp

    What I'd like to accomplish is to have the products expanded only when that category is chosen, and the other categories minimized. How do I go about that? The categories will be chosen from the field rsProducts("Category") from my main menu. i.e., this is how it is now

    CATEGORY A (<-- chosen category)
    - Product 1
    - Product 2
    CATEGORY B
    - Product 1
    - Product 2
    CATEGORY C
    - Product 1
    - Product 2


    ...and this is how I would like it to be

    CATEGORY A (<-- chosen category)
    - Product 1
    - Product 2
    CATEGORY B
    CATEGORY C




    Thanks, as always. Couldn't have gotten this far without SitePoint!!

    Amber

  2. #2
    Learning...
    Join Date
    Jan 2003
    Posts
    778
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i would say collapse or expand categories on the client side. Do not refresh the page. You are looking for some thing like this site has:

    http://www.mco.org

    check this thread out

    http://www.sitepoint.com/forums/showthread.php?t=277964

    toggle image - or + depending on the state. onclick event call the javascript function to collapse or expand the category

    Code:
     
    <img border="0" id="picCATNAME" src="- image" onclick="javascript:showhide('CATNAME');">
    <div id="CATNAME"> for each category id should be unique
    put the categories here
    </div>
    function showhide(CAT) { 
      var objCat = document.getElementById(CAT);
      var objPic = 
    document.getElementById('pic'+CAT); //image tag should have the id as pic+cat name
      if (objCat && objCat.style.display=="none") {
    	objCat.style.display="";
    	objPic.src = objPic.src.replace("plus.", "minus.");
      } else {
    	if (objCat) { 
    	  objCat.style.display="none"; 
    	}
    	objPic.src = objPic.src.replace("minus.", "plus.");
      }
    }
    The beauty of life is not dependent on how happy you are,
    but on how happy others can be because of you...

  3. #3
    Learning...
    Join Date
    Jan 2003
    Posts
    778
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    please check out this example also.

    http://www.dynamicdrive.com/dynamici...switchmenu.htm

  4. #4
    SitePoint Zealot frosco's Avatar
    Join Date
    Jul 2003
    Location
    WA state
    Posts
    136
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you...that's exactly what I want. Is there any problem with incorporating javascript with asp code? This is all a little over my head, but I'm willing to give it a go.

    Thanks!

  5. #5
    Learning...
    Join Date
    Jan 2003
    Posts
    778
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    by putting the javascript in js file, you have your code at one place and easily include that js file in multiple pages. Otherwise you have to put javascript on all the pages where you want to use, making maintenance difficult.

  6. #6
    SitePoint Zealot frosco's Avatar
    Join Date
    Jul 2003
    Location
    WA state
    Posts
    136
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay...I've finally figured it out. Here's the final result (on the left):

    http://www.wittymom.com/productview.asp?page=id

    I used a script from Dynamic drive--not the same one, but one similar, and I incorporated my DB fields so I never have to update the categories & submenus manually. They'll run from the db, which was my initial goal.

    If anyone wants the code, I'm glad to share it.

    Amber

  7. #7
    Learning...
    Join Date
    Jan 2003
    Posts
    778
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Could you please post the code here, this might help some one else.
    The beauty of life is not dependent on how happy you are,
    but on how happy others can be because of you...

  8. #8
    SitePoint Zealot frosco's Avatar
    Join Date
    Jul 2003
    Location
    WA state
    Posts
    136
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Expanding Vertical Tree Menu from DB

    Absolutely....

    This is the end result on my website. My product menu is so long that I had to come up with a way to condense it at the push of a button and at the viewer's control:

    http://www.wittymom.com/productview.asp?page=stun

    I'm using the code, CSS & JS files from Dynamic Drive (here):

    http://www.dynamicdrive.com/dynamici...witchmenu2.htm

    I made no changes to the JS file, some to the CSS file, but that's of course optional. Just aesthetics. I left the header code alone. The only thing I changed was the menu code to pull in values from my database:

    Code:
    if NOT rs.EOF OR rs.BOF then
      While NOT rs.EOF
    
        if tmpCat <> rs("Category")then
    
          response.write 	"</div></div><div class='mainDiv' state='0'>"
          response.write	"<div class='topItem' classOut='topItem' classOver='topItemOver'onMouseOver='Init(this);' >"
    
          ' ADD/CHANGE/DELETE A BULLET TO THE LEFT OF YOUR MAIN CATEGORY NAME
          response.write 	"<font face='Wingdings'></font>"
    
          ' PULL IN THE MAIN CATEGORY FIELD
          response.write	rs("MainCategory")
    
          response.write	"</div><div class='dropMenu' ><div class='subMenu' state='0'>"
    
        end if	
    
          ' SPECIFY THE LINK WHERE YOUR SUBITEMS WILL TAKE YOU
          response.write	"<span class='subItem' classOut='subItem' "
          response.write	"classOver='subItemOver'><a href='http://www.yourwebsite.com/yourpage.asp?criteria="
          response.write	rs("criteriafield")
    
          ' ADD/CHANGE/DELETE A BULLET TO THE LEFT OF EACH ITEM IN THE SUBCATEGORY LIST
          response.write	"'><font face='Wingdings'></font>"
    
          ' PULL IN THE SUB CATEGORY FIELD--WILL LOOP TO END
          response.write	rs("SubCategory")
          response.write	"</a></span><BR />"
    
         tmpCat = rs("Category")
    
         rs.MoveNext()
       Wend
     end if
    That's it, I'm sure there's more customization that could be done, but I was lucky to get it this far with my limited brain cells!! Hope someone else can use it...

    Thanks for all of your help, and thanks Dynamic Drive!

    Amber


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
  •