Results 1 to 6 of 6

Thread: Help: return window.open array

  1. #1
    Join Date
    Aug 2005
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Help: return window.open array

    Hi there,

    It has been a few years since i have had to really think about JS and i am having problems.

    I want to build an array of all the div id's on the page and then return that var to be used by other functions.

    Can someone help me out here...

    what i have working is this.

    window.onload = function() {
    var ids = document.getElementById('content').getElementsByTagName('div');
    for (var i=0;i<ids.length;i++){
    alert(ids[i].id); }

    }

    but the end result is that i remove the red lines and return the var ids to be used by other functions.

    Any and all help very appreciated.
    but the end result is that i remove the

    Cheers,
    Darren

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Well, if you literally want it to return the array:
    Code:
    function grabDivs() {
    var ids = document.getElementById('content').getElementsByTagName('div');
    return ids
    }
    With that in your script, anywhere (after the document is loaded) that you use 'grabDivs()' it will represent the array 'ids', ex:
    Code:
    alert(grabDivs()[3].innerHTML)
    will launch an alert box with the 4th division's (assuming there is one in the collection/array) innerHTML (if any) displayed in it. Another strategy is to make the variable 'ids' global, then it will be the array and available for use:
    Code:
    window.onload = function() {
    ids = document.getElementById('content').getElementsByTagName('div');
    }
    Here is an example of its use:
    Code:
    alert(ids[3].innerHML)
    - John
    ________________________

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

  3. #3
    Join Date
    Aug 2005
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by jscheuer1
    Well, if you literally want it to return the array:
    Code:
    function grabDivs() {
    var ids = document.getElementById('content').getElementsByTagName('div');
    return ids
    }
    With that in your script, anywhere (after the document is loaded) that you use 'grabDivs()' it will represent the array 'ids', ex:
    Code:
    alert(grabDivs()[3].innerHTML)
    will launch an alert box with the 4th division's (assuming there is one in the collection/array) innerHTML (if any) displayed in it. Another strategy is to make the variable 'ids' global, then it will be the array and available for use:
    Code:
    window.onload = function() {
    ids = document.getElementById('content').getElementsByTagName('div');
    }
    Here is an example of its use:
    Code:
    alert(ids[3].innerHML)
    Thanks John for your ideas and comments.

    Here is the full code i am trying to get to work. If i use it as it and load it at the end of the document - it works fine, however i wanted to load it at the start and do it a bit smarter with a windows.onload or something to the same effect. Do you have any ideas further?

    Code:
    var ids = document.getElementById('content').getElementsByTagName('div');
    
    
    function switchid(id){	
    	hideallids();
    	showdiv(id);
    }
    
    function hideallids(){
    	//loop through the array and hide each element by id
    	for (var i=0;i<ids.length;i++){
    		hidediv(ids[i].id);
    	}		  
    }
    
    function hidediv(id) {
    	//safe function to hide an element with a specified id
    	if (document.getElementById) { // DOM3 = IE5, NS6
    		document.getElementById(id).style.display = 'none';
    	}
    	else {
    		if (document.layers) { // Netscape 4
    			document.id.display = 'none';
    		}
    		else { // IE 4
    			document.all.id.style.display = 'none';
    		}
    	}
    }
    
    function showdiv(id) {
    	//safe function to show an element with a specified id
    	if (document.getElementById) { // DOM3 = IE5, NS6
    		document.getElementById(id).style.display = 'block';
    	}
    	else {
    		if (document.layers) { // Netscape 4
    			document.id.display = 'block';
    		}
    		else { // IE 4
    			document.all.id.style.display = 'block';
    		}
    	}
    }

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Just use my second method in place of:
    Code:
    var ids = document.getElementById('content').getElementsByTagName('div');
    It will create ids as a global variable. If you are more comfortable with having your globals declared outside a function (always a good practice) do this:
    Code:
    var ids
    window.onload = function() {
    ids = document.getElementById('content').getElementsByTagName('div');
    }
    - John
    ________________________

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

  5. #5
    Join Date
    Aug 2005
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Excellent John, thankyou! i have one other issue that you maybe able to help me with...

    Here is the code i am now using.
    Code:
    var ids
    window.onload = function() {
    ids = document.getElementById('content').getElementsByTagName('div');
    }
    
    
    function switchid(id){	
    	hideallids();
    	showdiv(id);
    }
    
    function hideallids(){
    	//loop through the array and hide each element by id
    	for (var i=0;i<ids.length;i++){
    		hidediv(ids[i].id);	
    	}		  
    }
    
    function hidediv(id) {
    	//safe function to hide an element with a specified id
    	if (document.getElementById) { // DOM3 = IE5, NS6
    		document.getElementById(id).style.display = 'none';
    	}
    	else {
    		if (document.layers) { // Netscape 4
    			document.id.display = 'none';
    		}
    		else { // IE 4
    			document.all.id.style.display = 'none';
    		}
    	}
    }
    
    function showdiv(id) {
    document.getElementById(id + 'tab').style.background = '#80b2ce'; 
    	//safe function to show an element with a specified id
    	if (document.getElementById) { // DOM3 = IE5, NS6
    		document.getElementById(id).style.display = 'block';
    	}
    	else {
    		if (document.layers) { // Netscape 4
    			document.id.display = 'block';
    		}
    		else { // IE 4
    			document.all.id.style.display = 'block';
    		}
    	}
    }
    You can see in the showdiv(id) function i am changing the bgcolor of the div using document.getElementById(id + 'tab').style.background = '#80b2ce'; What i would also like to do is change the current tab div that was 'highlighted' back to its orginal color - have played around with the code... but it has been a very long day and i am simply not getting it right...

    Any ideas?

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Well, this is getting into an area where I would need to see a working (or nonworking) example of the full markup to really tell. This is very similar (in concept, at least) to DD's Tab Content Script. Why not have a look and see how it is done there? Basically you need to store the original background somehow. You could have a style class (requires a different approach to altering the background to begin with, assigning it a different class with the new background) or variable available for that or a temp variable to hold the value. Then when the time comes, restore it from your variable or reassign it the default class.
    - John
    ________________________

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

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
  •