dcsimg
www.webdeveloper.com
Results 1 to 2 of 2

Thread: how to toggle style onclick

  1. #1
    Join Date
    Aug 2006
    Posts
    5

    how to toggle style onclick

    Hi,
    I posted this before, but I think I was lacking in more details and a good example of what I'm doing.

    My webpage is on http://www.glisterbliss.com/prob1.html



    I have this table of content (TOC )script that scrolls smoothly in place as you scroll down. The problem is that if there are is an overflow of headings, the lower headings will be cut off. That's why I use a style of " height:95%; position:absolute; overflow-y:auto" on DIV "generated-toc" which a script acts on.



    However, a DIV that is at "height: 95%" is unattractive as users need to be able to hide the content if it's not needed. So, I created an onclick function that toggles the height to auto and the default 95%.



    But I lack a good understanding of Javascript, so please help me incorporate this "function changeheight" code to the toggling/hide-show TOC code that I think "function wrapOpenClose" is responsible for.

    It would be great to if can just click "Show table of contents," changing the height to 95% and on "Hide Toc" = height: auto, which makes it looks collapsed.





    Please see the file generated_toc.js to get an overview of the whole script.





    <input type="button" value="click here" onclick="changeheight('generated-toc')" />


    function changeheight(objDivID)
    {
    var height= new String();

    height= document.getElementById(objDivID).style.height;

    if(height.toLowerCase()=='auto')
    {
    document.getElementById(objDivID).style.height = '95%';
    }
    else
    {
    document.getElementById(objDivID).style.height = 'auto';
    }
    }

    wrapOpenClose: function(a, cur_list_el) {
    // we return a function here so that it acts as a closure;
    // in essence the inner function, which is the event handler
    // for clicking on the toggle-toc link, remembers the a and cur_list_el
    // elements as they are when they're passed in to it.
    // This is an explicit function rather than an anonymous function
    // defined where it's called so it's easier to understand.
    return function(e) {
    d = cur_list_el.style.display;
    a.firstChild.nodeValue = (d == 'block' ? 'Show' : 'Hide') + ' Table of Contents';
    a.className = (d == 'block' ? 'toggle-closed' : 'toggle-open');
    cur_list_el.style.display = d == 'block' ? 'none' : 'block';
    // set a cookie to "open" or "closed" to save the state of the TOC
    if (cur_list_el.style.display == "block") {
    generated_toc.createCookie("generated_toc_display","open",21);
    } else {
    generated_toc.createCookie("generated_toc_display","closed",21);
    }
    if (window.event) {
    window.event.returnValue = false;
    window.event.cancelBubble = true;
    } else {
    e.preventDefault();
    e.stopPropagation();
    }
    }
    }

    Thanks so much! Ken

  2. #2
    Join Date
    Aug 2006
    Posts
    5
    Finally solved the problem.. all by myself and after hours and hours of trying to figure it out. Thanks for all those who tried at least



    I just had to understand how the code works and input other codes on block/display. Changes are in red.


    wrapOpenClose: function(a, cur_list_el) {
    // we return a function here so that it acts as a closure;
    // in essence the inner function, which is the event handler
    // for clicking on the toggle-toc link, remembers the a and cur_list_el
    // elements as they are when they're passed in to it.
    // This is an explicit function rather than an anonymous function
    // defined where it's called so it's easier to understand.
    return function(e) {
    d = cur_list_el.style.display;
    a.firstChild.nodeValue = (d == 'block' ? 'Show' : 'Hide') + ' Table of Contents';
    a.className = (d == 'block' ? 'toggle-closed' : 'toggle-open');
    cur_list_el.style.display = d == 'block' ? 'none' : 'block';
    // set a cookie to "open" or "closed" to save the state of the TOC
    if (cur_list_el.style.display == "block") {
    generated_toc.createCookie("generated_toc_display","open",21);
    //alert('this is block');
    expandedheight('generated-toc');

    } else {
    generated_toc.createCookie("generated_toc_display","closed",21);
    lowheight('generated-toc'); //alert('this is closed')
    }
    if (window.event) {
    window.event.returnValue = false;
    window.event.cancelBubble = true;
    } else {
    e.preventDefault();
    e.stopPropagation();
    }
    }
    },

    function lowheight(objDivID) {
    var height= new String();

    height= document.getElementById(objDivID).style.height;



    document.getElementById(objDivID).style.height = 'auto';
    }

    function expandedheight(objDivID) {
    var height= new String();

    height= document.getElementById(objDivID).style.height;



    document.getElementById(objDivID).style.height = '95%';
    }

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