Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Feb 2011
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Help with making DIV collapse left to right

    I'm not very experienced with javascript, but I have a bit of code that works perfectly for me that expands/collapses a div without any animation from top to bottom. I'm looking for the same exact code that lets me expand/collapse from left to right.

    I've done my due diligence and have search many forums with limited luck (I've only found one that is animated that I can't turn off the animation). Can someone point me in the right direction to code that does exactly the same as what I've posted below except from left to right?

    Code:
    // code to keep collapsed on opening
    function pageLoad() {
    collapseAll($('wrapper1-sub','wrapper2-sub','wrapper3-sub','wrapper4-sub','wrapper5-sub','wrapper6-sub','wrapper7-sub','wrapper8-sub','wrapper9-sub','wrapper10-sub','wrapper11-sub','wrapper12-sub'));
    }
    addEvent(window,'load',pageLoad); 
        
        
    //code to work the collapse
    function switchMenu(obj) {
    	var el = document.getElementById(obj);
    	if ( el.style.display != "none" ) {
    		el.style.display = 'none';
    	}
    	else {
    		el.style.display = '';
    	}
    }
    
    function collapseAll(objs) {
    var i;
    for (i=0;i<objs.length;i++ ) {
    objs[i].style.display = 'none';
    	}
    }
    
    function $() {
    var elements = new Array();
    for (var i = 0; i < arguments.length; i++) {
    var element = arguments[i];
    if (typeof element == 'string')
    element = document.getElementById(element);
    if (arguments.length == 1)
    return element;
    elements.push(element);
    }
    return elements;
    }
    
    function addEvent( obj, type, fn ) {
    	if (obj.addEventListener) {
    		obj.addEventListener( type, fn, false );
    		EventCache.add(obj, type, fn);
    	}
    	else if (obj.attachEvent) {
    		obj["e"+type+fn] = fn;
    		obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
    		obj.attachEvent( "on"+type, obj[type+fn] );
    		EventCache.add(obj, type, fn);
    	}
    	else {
    		obj["on"+type] = obj["e"+type+fn];
    	}
    }
    
    var EventCache = function(){
    	var listEvents = [];
    	return {
    		listEvents : listEvents,
    		add : function(node, sEventName, fHandler){
    			listEvents.push(arguments);
    		},
    		flush : function(){
    			var i, item;
    			for(i = listEvents.length - 1; i >= 0; i = i - 1){
    				item = listEvents[i];
    				if(item[0].removeEventListener){
    					item[0].removeEventListener(item[1], item[2], item[3]);
    				};
    				if(item[1].substring(0, 2) != "on"){
    					item[1] = "on" + item[1];
    				};
    				if(item[0].detachEvent){
    					item[0].detachEvent(item[1], item[2]);
    				};
    				item[0][item[1]] = null;
    			};
    		}
    	};
    }();
    addEvent(window,'unload',EventCache.flush);

  • #2
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,746
    Thanks
    18
    Thanked 155 Times in 146 Posts
    It would be helpful if you could provide the context HTML/CSS markup and/or inline JS that is relevant to this code...
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!

  • #3
    New to the CF scene
    Join Date
    Feb 2011
    Location
    Scarborough
    Posts
    3
    Thanks
    0
    Thanked 1 Time in 1 Post
    Hello to the group. More code would be nice, but if I wanted this to happen, I would try setting the width to 0 and then set the height to 0 as well.

    Hope this helps.

  • #4
    New to the CF scene
    Join Date
    Feb 2011
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks. Here is the code and a link to a working example that I want to open left to right instead of top to bottom.

    Code:
    // code to swap images
    function changeDivImage1()
        {
            var imgPath = new String();
            imgPath = document.getElementById("wrapper1").style.backgroundImage;
           
            if( imgPath.indexOf('images/click-open.jpg')!=-1 || imgPath == "")
            //if( imgPath.indexOf('images/click-open.jpg')!=-1 || imgPath == "")
            {
                document.getElementById("wrapper1").style.backgroundImage = "url(images/click-close.jpg)";
            }
            else
            {
                document.getElementById("wrapper1").style.backgroundImage = "url(images/click-open.jpg)";
            }
        }
        
    function changeDivImage2()
        {
            var imgPath = new String();
            imgPath = document.getElementById("wrapper2").style.backgroundImage;
           
            if( imgPath.indexOf('images/click-open.jpg')!=-1 || imgPath == "")
            {
                document.getElementById("wrapper2").style.backgroundImage = "url(images/click-close.jpg)";
            }
            else
            {
                document.getElementById("wrapper2").style.backgroundImage = "url(images/click-open.jpg)";
            }
        }
        
     
    // code to keep collapsed on opening
    function pageLoad() {
    collapseAll($('wrapper1-sub','wrapper2-sub'));
    }
    addEvent(window,'load',pageLoad); 
        
        
    //code to work the collapse
    function switchMenu(obj) {
    	var el = document.getElementById(obj);
    	if ( el.style.display != "none" ) {
    		el.style.display = 'none';
    	}
    	else {
    		el.style.display = '';
    	}
    }
    
    function collapseAll(objs) {
    var i;
    for (i=0;i<objs.length;i++ ) {
    objs[i].style.display = 'none';
    	}
    }
    
    function $() {
    var elements = new Array();
    for (var i = 0; i < arguments.length; i++) {
    var element = arguments[i];
    if (typeof element == 'string')
    element = document.getElementById(element);
    if (arguments.length == 1)
    return element;
    elements.push(element);
    }
    return elements;
    }
    
    function addEvent( obj, type, fn ) {
    	if (obj.addEventListener) {
    		obj.addEventListener( type, fn, false );
    		EventCache.add(obj, type, fn);
    	}
    	else if (obj.attachEvent) {
    		obj["e"+type+fn] = fn;
    		obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
    		obj.attachEvent( "on"+type, obj[type+fn] );
    		EventCache.add(obj, type, fn);
    	}
    	else {
    		obj["on"+type] = obj["e"+type+fn];
    	}
    }
    
    var EventCache = function(){
    	var listEvents = [];
    	return {
    		listEvents : listEvents,
    		add : function(node, sEventName, fHandler){
    			listEvents.push(arguments);
    		},
    		flush : function(){
    			var i, item;
    			for(i = listEvents.length - 1; i >= 0; i = i - 1){
    				item = listEvents[i];
    				if(item[0].removeEventListener){
    					item[0].removeEventListener(item[1], item[2], item[3]);
    				};
    				if(item[1].substring(0, 2) != "on"){
    					item[1] = "on" + item[1];
    				};
    				if(item[0].detachEvent){
    					item[0].detachEvent(item[1], item[2]);
    				};
    				item[0][item[1]] = null;
    			};
    		}
    	};
    }();
    addEvent(window,'unload',EventCache.flush);
    Code:
    #wrapper1, #wrapper2 {
    	width: 470px;
    	min-height: 22px;
    	border-bottom: #666 dotted thin;
    	margin-bottom: 16px;
    	background-image: url(images/click-open.jpg);
    	background-position: top right;
    	background-repeat: no-repeat;
    	}
    Code:
    <div id="wrapper1"><a onclick="switchMenu('wrapper1-sub'); changeDivImage1();"><h3>Lorem Ipsum</h3></a>
    <div id="wrapper1-sub">  <p>Lorem ipsum dolor sit amet, olim voco enim, esca minim, fatua hendrerit pneum, pneum comis amet meus autem eros. Ludus odio at, enim ullamcorper utrum si tation et feugait. </p> </div>
    </div>    
        
    <div id="wrapper2"><a onclick="switchMenu('wrapper2-sub'); changeDivImage2();"><h3>Lorem Ipsum</h3></a>
    <div id="wrapper2-sub">   <p>Lorem ipsum dolor sit amet, olim voco enim, esca minim, fatua hendrerit pneum, pneum comis amet meus autem eros. Ludus odio at, enim ullamcorper utrum si tation et feugait. </p> </div>
    </div>

  • #5
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,746
    Thanks
    18
    Thanked 155 Times in 146 Posts
    Some of the code you pasted is a little convoluted and poorly written, so I only changed/fixed what I needed to...Is this roughly what you had in mind?:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Collapse DIVs</title>
    <style type="text/css">
    	#wrapper1, #wrapper2 {
    		width: 300px;
    		min-height: 22px;
    		background-color:#eee;
    		border-top: #666 dotted thin;
    		margin:0;
    		}
    	h3 {
    		font-size:18px;
    		line-height:18px;
    		width:300px;
    		margin:0;
    	}
    	#wrapper1-sub, #wrapper2-sub {
    		width:500px;
    	}
    	h3, #wrapper1-sub, #wrapper2-sub {
    		float:left;
    	}
    	h3 a {
    		display:block;
    		background: url("images/click-open.jpg") top right no-repeat;
    		padding:12px 0 12px 12px;
    	}
    	p {
    		margin:10px 0 12px 0;
    	}
    	.sub-text {
    		float:left;
    		width:450px;
    		margin:10px 0 12px 0;
    	}
    	.sub-arrow {
    		float:left;
    		width:50px;
    		text-align:right;
    	}
    </style>
    <script type="text/javascript">
    	// code to keep collapsed on opening
    	function pageLoad() {
    	collapseAll($('wrapper1-sub','wrapper2-sub'));
    	}
    	addEvent(window,'load',pageLoad);
    
    	//code to work the collapse
    	function switchMenu(obj) {
    		var el = document.getElementById(obj);
    		if ( el.style.display != "none" ) {
    			el.style.display = 'none';
    			el.parentNode.style.width = '300px';
    			el.parentNode.style.backgroundColor = '#eee';
    			el.parentNode.getElementsByTagName('a')[0].style.background = 'url("images/click-open.jpg") top right no-repeat';
    		}
    		else {
    			el.style.display = '';
    			el.parentNode.style.width = '800px';
    			el.parentNode.style.backgroundColor = '#ddd';
    			el.parentNode.getElementsByTagName('a')[0].style.background = 'none';
    		}
    	}
    
    	function collapseAll(objs) {
    	var i;
    	for (i=0;i<objs.length;i++ ) {
    	objs[i].style.display = 'none';
    		}
    	}
    
    	function $() {
    	var elements = new Array();
    	for (var i = 0; i < arguments.length; i++) {
    	var element = arguments[i];
    	if (typeof element == 'string')
    	element = document.getElementById(element);
    	if (arguments.length == 1)
    	return element;
    	elements.push(element);
    	}
    	return elements;
    	}
    
    	function addEvent( obj, type, fn ) {
    		if (obj.addEventListener) {
    			obj.addEventListener( type, fn, false );
    			EventCache.add(obj, type, fn);
    		}
    		else if (obj.attachEvent) {
    			obj["e"+type+fn] = fn;
    			obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
    			obj.attachEvent( "on"+type, obj[type+fn] );
    			EventCache.add(obj, type, fn);
    		}
    		else {
    			obj["on"+type] = obj["e"+type+fn];
    		}
    	}
    
    	var EventCache = function(){
    		var listEvents = [];
    		return {
    			listEvents : listEvents,
    			add : function(node, sEventName, fHandler){
    				listEvents.push(arguments);
    			},
    			flush : function(){
    				var i, item;
    				for(i = listEvents.length - 1; i >= 0; i = i - 1){
    					item = listEvents[i];
    					if(item[0].removeEventListener){
    						item[0].removeEventListener(item[1], item[2], item[3]);
    					};
    					if(item[1].substring(0, 2) != "on"){
    						item[1] = "on" + item[1];
    					};
    					if(item[0].detachEvent){
    						item[0].detachEvent(item[1], item[2]);
    					};
    					item[0][item[1]] = null;
    				};
    			}
    		};
    	}();
    	addEvent(window,'unload',EventCache.flush);
    </script>
    </head>
    <body>
    <div id="wrapper1">
    	<h3><a onclick="switchMenu('wrapper1-sub');">Business Process Improvement</a></h3>
    	<div id="wrapper1-sub">
    		<div class="sub-text">Leveraging qualitative methods such as focused interviews and quantitative methods such as Six Sigma and Lean, we will analyze business process to understand opportunities to accelerate cycle time, improve quality and reduced costs. Our proven methods of Process Analysis extend far beyond traditional process mapping activities and consider available tools, technology, organization requirements and the ultimate business issue we are solving for. Where appropriate, Attadale leverages dynamic modeling tools for enhanced scenario development.</div>
    		<div class="sub-arrow"><img src="images/click-close.jpg" alt="" onclick="switchMenu('wrapper1-sub');" /></div>
    		<div style="clear:both"></div>
    	</div>
    	<div style="clear:both"></div>
    </div>
    <div id="wrapper2">
    	<h3><a onclick="switchMenu('wrapper2-sub');">Business Process Outsourcing</a></h3>
    	<div id="wrapper2-sub">
    		<div class="sub-text">Reduced cost, increased capabilities or speed to market ? there are many reasons companies outsource. Attadale understands how to assess the business impact, define requirements and success factors and manage the transition. We deploy a proven methodology for developing outsource vendor requirements and conducting vendor analysis.</div>
    		<div class="sub-arrow"><img src="images/click-close.jpg" alt="" onclick="switchMenu('wrapper2-sub');" /></div>
    		<div style="clear:both;width:0"></div>
    	</div>
    	<div style="clear:both"></div>
    </div>
    </body>
    </html>
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!

  • Users who have thanked chump2877 for this post:

    grozanc (03-02-2011)

  • #6
    New to the CF scene
    Join Date
    Feb 2011
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks, that solved my problem!


  •  

    Posting Permissions

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