Results 1 to 3 of 3

Thread: Getting OffsetHeight CSS

  1. #1
    Join Date
    Dec 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Getting OffsetHeight CSS

    Hello all,

    I am very new to CSS and Javascript and I dont if i am posting it in right section, but since I have to do it in CSS i am posting it here. I am facing a problem as below

    In our we are using an accordion. The one we have has two collapsible panes. When a pane is in minimzed mode the height of the section is made to 0 and when the pane is maximized, the height is dynamically set by picking the offset height as shown below

    Code:
    /* get a height of all accordian contents */
    			var aContentHeight = Y.all(".accordionContent").get('offsetHeight');
    			/* alert("hi"); */
    			/* hide all function*/
    			var hideAllContent = function(){
    				Y.all('.accordionContent').each(function(node) {
    				    var anim = new Y.Anim({
    				        node: node,
    				        duration: 0.25,
    				        to: { height: 0 }
    				    });
    				    var onEnd = function(){
    						Y.log("Animation end");
    				    };
    				    anim.run();
    				    anim.on('end', onEnd);
    				});
    			};
    			
    			/* call hide all function */
    			hideAllContent();
    
    var buttonClick = function(em){
    				em.preventDefault();
    				hideAllContent();
    				var itemList =  em.container.all('.accordionButton');
    				itemList.removeClass('on');
    				var node = em.currentTarget;
    				var indexofNode = itemList.indexOf(node);
    				var nodeNext = node.next();
    				var nodeHight = nodeNext.get('offsetHeight');
    				if(nodeHight === 0){
    					node.addClass('on');
    					var animShow = new Y.Anim({
    						node: nodeNext,
    						duration: 0.25,
    						to: { height: aContentHeight[indexofNode] }
    					});
    Now my problem is I have been asked to render the page for print using just browser controls having this accordian component, such that if the node is minimized, while printing, the content should be visible in print(that is it should be maximized). To do so if i set the height of the div by finding the offsetHeight of the node, then it will work. The question is how can i get the offset height without making use of javascript and set the height? Is it possible to do?

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,934
    Thanks
    43
    Thanked 3,192 Times in 3,155 Posts
    Blog Entries
    12

    Default

    First of all, I'm assuming you know how to make a print stylesheet. If not let me know. In it I'd put this rule:

    Code:
    .accordionContent {
    	position: static !important;
    	height: auto !important;
    }
    Be sure to use the !important keyword as shown to override any scripted styles for these elements that might contradict these.

    Note: This is just my best guess based upon the code you've shown us. If you want more help:

    Please post a link to a page on your site that contains the problematic code so we can check it out.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Dec 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks sir very much for the reply. I will try and let you know if it solves the problem. Thanks once again.

    Regards,
    Sandeep
    Last edited by jscheuer1; 12-10-2011 at 04:38 PM. Reason: illegal sig

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
  •