www.webdeveloper.com
Results 1 to 3 of 3

Thread: Collapsible Content on Mouseover?

  1. #1
    Join Date
    Apr 2005
    Posts
    91

    Collapsible Content on Mouseover?

    Hello I'm building a site and know nothing about Javascript. I wanted to use a collapsible content sections to minimize the length of my site if user want. Well I started digging around to find some code which may work. I did end up finding something at Harry Maugans site.

    I've got it working as he describes but I wanted the it to possible function slightly differently. I was hoping somebody could help me expand on this. Here is the set up functions he has.

    Code:
    var timerlen = 5;
    var slideAniLen = 250;
    
    var timerID = new Array();
    var startTime = new Array();
    var obj = new Array();
    var endHeight = new Array();
    var moving = new Array();
    var dir = new Array();
    
    function slidedown(objname){
            if(moving[objname])
                    return;
    
            if(document.getElementById(objname).style.display != "none")
                    return; // cannot slide down something that is already visible
    
            moving[objname] = true;
            dir[objname] = "down";
            startslide(objname);
    }
    
    function slideup(objname){
            if(moving[objname])
                    return;
    
            if(document.getElementById(objname).style.display == "none")
                    return; // cannot slide up something that is already hidden
    
            moving[objname] = true;
            dir[objname] = "up";
            startslide(objname);
    }
    
    function startslide(objname){
            obj[objname] = document.getElementById(objname);
    
            endHeight[objname] = parseInt(obj[objname].style.height);
            startTime[objname] = (new Date()).getTime();
    
            if(dir[objname] == "down"){
                    obj[objname].style.height = "1px";
            }
    
            obj[objname].style.display = "block";
    
            timerID[objname] = setInterval('slidetick(\'' + objname + '\');',timerlen);
    }
    
    function slidetick(objname){
            var elapsed = (new Date()).getTime() - startTime[objname];
    
            if (elapsed > slideAniLen)
                    endSlide(objname)
            else {
                    var d =Math.round(elapsed / slideAniLen * endHeight[objname]);
                    if(dir[objname] == "up")
                            d = endHeight[objname] - d;
    
                    obj[objname].style.height = d + "px";
            }
    
            return;
    }
    
    function endSlide(objname){
            clearInterval(timerID[objname]);
    
            if(dir[objname] == "up")
                    obj[objname].style.display = "none";
    
            obj[objname].style.height = endHeight[objname] + "px";
    
            delete(moving[objname]);
            delete(timerID[objname]);
            delete(startTime[objname]);
            delete(endHeight[objname]);
            delete(obj[objname]);
            delete(dir[objname]);
    
            return;
    }
    
    function toggleSlide(objname){
      		if(document.getElementById(objname).style.display == "none"){
        	// div is hidden, so let's slide down
        	slidedown(objname);
      		}else{
        	// div is not hidden, so slide up
        	slideup(objname);
      		}
    }
    
    function toggleComment(objname) {
      		if (document.getElementById(objname).style.display != "none") {
        	slideup(objname);
        	document.getElementById(objname + '_link').innerHTML = "Open Quick Comment";
      		}
      		else {
        	slidedown(objname);
        	document.getElementById(objname + '_link').innerHTML = "Close Quick Comment";
      		}
    }
    Currently I have one link that minimizes and expands when I click on the link. Well instead of clicking on the link I wanted the menu to expand and minimize when moused over and only having one section of the site open at a time. Like this the support section of the Apple Site.

    Please help.

    - MontyV

  2. #2
    Join Date
    Mar 2007
    Location
    Orlando
    Posts
    670
    instead of calling it on onclick, call the function on onmouseover

  3. #3
    Join Date
    Apr 2005
    Posts
    91
    Quote Originally Posted by jasonahoule
    instead of calling it on onclick, call the function on onmouseover
    Damn that was easy. Thank you very much. I love this I should start looking into start learning this.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles