SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Apr 2006
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Javascript expand - collapse symbol bug

    Hello all,

    I have a javascript to expand and collapse content in 3 ways (all items, one item and nothing).

    I have written a javascript myself but the iconcs that are used to switch between modes don't show correctly in IE7, not always then.

    Here's how it should work:

    Default expand one, expand all, expand nothing is loaded from a cookie.
    If not available, expand all will be executed.

    If you click on an icon an event goes which does 3 things:

    1. changes the event of the image in the browser (so open_all becomes open_one, this is how I make it switch).
    2. adds style="display: none;" to the other element and makes this one visible.
    3. saves the new state to a cookie.




    My html looks like:
    Code:
    <body onload="load_config(document.getElementById('ALL_ITEMS'), document.getElementById('ONE_ITEM'), 'collapse')">
    	<img
    		id="collapse" 
    		src="http://dev.4launch.nl/images/shop/menus/menu_active.gif"
    		onClick="open_one(document.getElementById('ALL_ITEMS'), document.getElementById('ONE_ITEM'),  'collapse');"
    		alt="In- of uitklappen"
    	/>
    	<table>
    		<tr>
    			<td>
    				<div id="ALL_ITEMS">
    					Alle items!
    				</div>
    				<div id="ONE_ITEM">
    					E&eacute;n item!
    				</div>
    			</td>
    		</tr>
    	</table>
    </body>
    And my JavaScript:

    Code:
    // JavaScript Document
    
    /* Globale variabelen */
    var contract_symbol			= 'menu_close.gif';			 
    var expand_symbol			= 'menu_open.gif';		
    var semi_expand_symbol		      = 'menu_one.gif';
    																						
    /* Menu functies */
    function open_one(all_element, one_element, event_div)
    {
    	document.getElementById(event_div).onclick		= function() { close_all(all_element, one_element, event_div) };
    	document.getElementById(event_div).src			= semi_expand_symbol;
    	/* Open een (1) item
    		Sluit de 5 items
    		En open 1
    	*/
    	all_element.style.display = 'none';
    	one_element.style.display = '';
    	/* Sla de waarde op in een cookie */
    	createCookie('collapse_config_' + all_element.id, 'open_one', 7);
    }
    
    function close_all(all_element, one_element, event_div)
    {
    	/* Pas de link aan */
    	document.getElementById(event_div).src			=	contract_symbol;
    	document.getElementById(event_div).onclick		=	function() { open_all(all_element, one_element, event_div) };
    	/* Sluit alle items */
    	all_element.style.display = 'none';
    	one_element.style.display = 'none';
    	/* Sla de waarde op in een cookie */
    	createCookie('collapse_config_' + all_element.id, 'close_all', 7);
    }
    
    function open_all(all_element, one_element, event_div)
    {
    	/* Pas de link aan */
    	document.getElementById(event_div).src			=	expand_symbol;
    	document.getElementById(event_div).onclick		= 	function() { open_one(all_element, one_element, event_div) };
    	/* Open 5 items */
    	all_element.style.display = '';
    	one_element.style.display = 'none';
    	/* Sla de waarde op in een cookie */
    	createCookie('collapse_config_' + all_element.id, 'open_all', 7);
    }
    
    function load_config(all_element, one_element, event_div)
    {
    	var cookie = readCookie('collapse_config_' + all_element.id);
    	if(cookie == 'open_all')
    	{
    		open_all(all_element, one_element, event_div);
    	}
    	else if(cookie == 'open_one')
    	{
    		open_one(all_element, one_element, event_div);
    	}
    	else if(cookie == 'close_all') /* Alles sluiten */
    	{
    		close_all(all_element, one_element, event_div);
    	}
    	else /* Cookie leeg? Dan moet alles open gegooid worden */
    	{
    		open_all(all_element, one_element, event_div);
    	}
    }
    
    /*
    Cookie functies
    */
    
    function createCookie(name,value,days) {
    	if (days) {
    		var date = new Date();
    		date.setTime(date.getTime()+(days*24*60*60*1000));
    		var expires = "; expires="+date.toGMTString();
    	}
    	else var expires = "";
    	document.cookie = name+"="+value+expires+"; path=/";
    }
    
    function readCookie(name) {
    	var nameEQ = name + "=";
    	var ca = document.cookie.split(';');
    	for(var i=0;i < ca.length;i++) {
    		var c = ca[i];
    		while (c.charAt(0)==' ') c = c.substring(1,c.length);
    		if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    	}
    	return null;
    }
    
    function eraseCookie(name) {
    	createCookie(name,"",-1);
    }
    Please not that I did not write the cookie functions, but they seem OK, found them on quirksmode.org.

    In firefox everything works fine most of the time and firebug says it's fine. In IE7 the main bug seems to be that sometimes on refresh (when the config function) is called the images change, the collapse state doesn't change strangely.

    If you don't see any bugs but you think I made some structural mistakes or what so ever, I would like to hear any help/advice/bug reports.

    Greetings,

    Alex

  2. #2
    SitePoint Member
    Join Date
    Apr 2006
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Maybe I know the problem, it usually goes wrong on refreshing.
    On refresh the body is loaded again and it has an onLoad event calling the functions of all the collapse items (one for news, one for forum items etc..)

    This is the body onload I have:
    Code:
    onLoad="
    		load_config(
    			document.getElementById('TOP'),
    			document.getElementById('TOP1'),
    			'collapse_top5'
    			);
    		load_config(
    			document.getElementById('NEWS'),
    			document.getElementById('NEWS1'),
    			'collapse_news'
    			);
    		load_config(
    			document.getElementById('HOT'),
    			document.getElementById('HOT1'),
    			'collapse_hot'
    			);
    		load_config(
    			document.getElementById('LOGIN_FORM'),
    			document.getElementById('IS_LOGIN'),
    			'collapse_login'
    		);
    		">
    Maybe IE does not support multiple function calls in the body, or is this nonsense?

    Alex

  3. #3
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    within your javascript but outside any functions use this:

    Code:
    window.onload = function() {
            load_config(
                document.getElementById('TOP'),
                document.getElementById('TOP1'),
                'collapse_top5'
                );
            load_config(
                document.getElementById('NEWS'),
                document.getElementById('NEWS1'),
                'collapse_news'
                );
            load_config(
                document.getElementById('HOT'),
                document.getElementById('HOT1'),
                'collapse_hot'
                );
            load_config(
                document.getElementById('LOGIN_FORM'),
                document.getElementById('IS_LOGIN'),
                'collapse_login'
            );
    }


  4. #4
    SitePoint Member
    Join Date
    Apr 2006
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I first placed this in my javascript function file which I loaded in the index page, though it didn't work strangely.

    Now I placed it directly into the head tags and that helpessss
    The bug remains though. I'll try to look into it more deeply.


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
  •