homepage Welcome to WebmasterWorld Guest from 54.161.185.244
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
help streamlining javascript code
I have working code - now it just needs optimizing
kevinkp7

5+ Year Member



 
Msg#: 3862620 posted 3:51 pm on Mar 4, 2009 (gmt 0)

I've made this code for tab browsing and it works really well. BUT being new to javascript, is there any way to optimize this code before minifying it? For example: is there a faster way to use If Then statements or a shorter substitute for
document.getElementById('elementId').style.display = 'none';

Here's just the javascript - let me know if you need the entire page html to see it working. (sorry I couldn't get the style:code to work on viewing this post - that's right i'm a developer... haha)

--------------------------------------------------------------
<script type="text/javascript">
var active = 0;
var t_active = 1;
var loading = 'loading: ,';
var loaded_once = 'loaded: ,';
var loadNow = '';

var title = ['Activity','My Group','Post'];

var t_title=new Array();
t_title[1]='Recent';
t_title[2]='My Group';
t_title[3]='Go ED.';
t_title[4]='Uganda';
t_title[5]='FH';

t_title[11]='Quote Wall';
t_title[12]='News';
t_title[13]='Status';
t_title[14]='TALKs';
t_title[15]='ACTs';

t_title[21]='BLOG';
t_title[22]='TALK';
t_title[23]='ACT';

var inner=new Array();

inner[1]='<img src="http://example.com/images/photo/circle/log.jpg" onload="loaded(0,1); bgLoad(2);" width="400" height="270" style="padding:15px; background:black; display:;" />';
inner[2]='<img src="http://example.com/images/photo/circle/tea.jpg" onload="loaded(0,2);" width="400" height="270" style="padding:15px; background:black; display:;" />';
inner[3]='<img src="http://example.com/images/photo/circle/wooden.jpg" onload="loaded(0,3);" width="400" height="270" style="padding:15px; background:black; display:;" />';
inner[4]='<img src="http://example.com/images/photo/circle/steering.jpg" onload="loaded(0,4);" width="400" height="270" style="padding:15px; background:black; display:;" />';
inner[5]='<img src="http://example.com/images/photo/circle/wheel.jpg" onload="loaded(0,5);" width="400" height="270" style="padding:15px; background:black; display:;" />';

inner[11]='<iframe src="http://example.com/blogs" onload="loaded(1,11);" style="border:1px solid; padding:2px; width:75%; height:600px; display:;"></iframe>';
inner[12]='<iframe src="http://example.com/graphic.php" onload="loaded(1,12);" style="border:1px solid; padding:2px; width:75%; height:600px; display:;"></iframe>';
inner[13]='<iframe src="http://example.com" onload="loaded(1,13);" style="border:1px solid; padding:2px; width:75%; height:600px; display:;"></iframe>';
inner[14]='<iframe src="http://example.com/web.php" onload="loaded(1,14);" style="border:1px solid; padding:2px; width:75%; height:600px; display:;"></iframe>';
inner[15]='<iframe src="http://example.com/about.php" onload="loaded(1,15);" style="border:1px solid; padding:2px; width:75%; height:600px; display:;"></iframe>';

inner[21]='<iframe src="http://example.com" onload="loaded(2,21);" style="border:1px solid; padding:2px; width:75%; height:600px; display:;"></iframe>';
inner[22]='<iframe src="http://example.com/graphic.php" onload="loaded(2,22);" style="border:1px solid; padding:2px; width:75%; height:600px; display:;"></iframe>';
inner[23]='<iframe src="http://example.com/blogs" onload="loaded(2,23);" style="border:1px solid; padding:2px; width:75%; height:600px; display:;"></iframe>';

function firstLoad(elementId, tab) {

document.getElementById('c'+tab).innerHTML = inner[tab];
document.getElementById('loader'+elementId).style.display = '';
document.getElementById(elementId).style.display = '';
//-- hide tab content until proven loaded
document.getElementById('c'+tab).style.display = 'none';
loadNow=tab;
}

function bgLoad(tab) {
for(i = 0; i < 25; i++){
if(inner[tab] != undefined) {
if(loading.indexOf(','+tab+',') == -1 load_once.indexOf(','+tab+',') == -1) {
//load innerHTML
document.getElementById('c'+tab).innerHTML = inner[tab];
//puts it in the loading q
loading = loading+','+tab+',';
}
}
tab_more = tab++;
}
}

function openClose(elementId, tab) {

//-- change links every time
document.getElementById('t'+t_active).innerHTML = '<a href="javascript:openClose('+active+','+t_active+');">'+t_title[t_active]+'</a>';
document.getElementById('t'+tab).innerHTML = t_title[tab];

//-- hide tab content until proven loaded
document.getElementById('c'+tab).style.display = 'none';

//-- hide last active tab
document.getElementById('c'+t_active).style.display = 'none';

//-- hide last active loading gif if it was still loading
if(document.getElementById('loader'+active).style.display == '') {
document.getElementById('loader'+active).style.display = 'none';
}

//if in a different elementId
if(elementId != active) {

//switch innerHTML of headers
document.getElementsByTagName("h1")[active].innerHTML='<a href="javascript:openClose('+active+','+t_active+');">+ '+title[active]+'</a>';
document.getElementsByTagName("h1")[elementId].innerHTML= title[elementId];

//switch class names
document.getElementById('h'+active).className = 'headers-inactive';
document.getElementById('h'+elementId).className = 'headers-active';

//show hide active and elementId
document.getElementById(active).style.display = 'none';
document.getElementById(elementId).style.display = '';

//not in loading q
if(loading.indexOf(','+tab+',') == -1) {
//hasn't been loaded - needs innerHTML --------------------------------//
if(loaded_once.indexOf(','+tab+',') == -1) {
//show loading gif
document.getElementById('loader'+elementId).style.display = '';

//load innerHTML
document.getElementById('c'+tab).innerHTML = inner[tab];

//puts it in the loading q
loading = loading+','+tab+',';

//has been loaded - send to loaded
} else {
loadNow = tab;
loaded(elementId, tab);
} //-----------------------------------------------------------------//

//loading in different elementId
} else {
document.getElementById('loader'+elementId).style.display = '';
loadNow = tab;
}

//tab is in same elementId
} else {
//-- tab links already changed at top
//-- t_active already hidden at top

//not in loading q
if(loading.indexOf(','+tab+',') == -1) {
//hasn't been loaded - needs innerHTML -----------------------------//
if(loaded_once.indexOf(','+tab+',') == -1) {
//show loading gif
document.getElementById('loader'+elementId).style.display = '';

//load innerHTML
document.getElementById('c'+tab).innerHTML = inner[tab];

//puts it in the loading q
loading = loading+','+tab+',';

//has been loaded - send to loaded
} else {
loadNow = tab;
loaded(elementId, tab);
} //----------------------------------------------------------------//

// else - is loading in same elementId
} else {
document.getElementById('loader'+elementId).style.display = '';
loadNow = tab;

}
}

//set variables for next
active = elementId;
t_active = tab;
loadNow=tab;
}

function loaded(elementId, tab){
document.getElementById('loader'+elementId).style.display = 'none';

if(loadNow == tab){
document.getElementById('c'+tab).style.display = '';
}

var tab_ = ','+tab+',';
loading = loading.replace(tab_,"");

if(loaded_once.indexOf(tab_) == -1) {
loaded_once = loaded_once+tab+',';
}
}

</script>
------------------------------------------------------------

[edited by: eelixduppy at 11:18 pm (utc) on Mar. 11, 2009]
[edit reason] exemplified [/edit]

 

nonanet

5+ Year Member



 
Msg#: 3862620 posted 5:06 pm on Mar 4, 2009 (gmt 0)

Well, if you use more javascript on those pages, it might be worth looking at a framework like [jquery.com...] - this would allow you to use something like

$('#elementId').hide();

instead of your line

document.getElementById('elementId').style.display = 'none';

The library itself is about 29kb (packed) and requires some resources at startup, obviously. But once loaded, you can use it for a *lot* of extremely useful things.

Fotiman

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 3862620 posted 6:01 pm on Mar 4, 2009 (gmt 0)

Welcome to WebmasterWorld! Here are my comments:

1. You are creating a bunch of variables in the global scope. The problem with this is that you have a greater chance of conflicting with another script. Instead, you could create a single global variable that holds an object with all of your variables and functions.

2. When declaring your variables, instead of using a 'var' per each variable, you can separate them with commas. This will reduce the overall size once you minimize. So instead of this:

var active = 0;
var t_active = 1;
...

You could do this:

var active = 0,
t_active = 1,
...;

3. Some of your arrays do not have linear indexes. It's not clear for someone who needs to maintain the code.

4. If your arrays were corrected to use linear indexes, I would suggest avoiding the 'new Array()' and instead defining the array as:
var t_title = [...];

5. Because you are using document.getElementById over and over again, you could create your own internal variable to reference that function. Many JavaScript library's use the dollar sign ($) for this shortcut. For example:

var $ = document.getElementById;
var foo = $('foo'); // equiv. to document.getElementById('foo');

6. In some cases, you are calling document.getElementId for a particular element more than once (and setting style properties on that element). Whenever you will possibly use an element more than once, you should store it in a variable so you don't need to call document.getElementById multiple times for the same element.

7. In some cases you are doing:
variable = variable + ...;
Instead, use the += operator, as in:
variable += ...;

8. You might consider adding your own show and hide functions. That way, if you ever decide to use some method other than setting the style.display property, you will only need to change it in your show/hide methods. This will also reduce the size of your code.

9. You are storing your currently loading tab in a string and using indexOf to look for a tab in the loading string. This is not efficient. A better approach would be to store the loading items in an array (or eventually some sort of binary search tree, or possibly a hash map).

Hope these suggestions are helpful.

kevinkp7

5+ Year Member



 
Msg#: 3862620 posted 7:11 pm on Mar 4, 2009 (gmt 0)

@nonanet: I've looked into jquery - it looks great and there IS a ton of versatility - I'm hoping that using my code, I can keep it as small as possible b/c this code will mostly be used by students overseas with very slow internet access.

@Fotiman: Thanks so much! I have a lot of work to do, but I'll definitely look into all of your suggestions - I appreciate it.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved