My jQuery Challenge

[fuzzy1]

Hey All!
Working to hook into WordPress's implementation of SWFUpload,
it quickly became apparent that my procrastination was at its bitter end.
I could no longer put off having to learn jQuery. (better late than never?:eek:)

That decided, it was also readily apparent that learning jQurey and SWFUpload
simultaneously was an absolute non-starter, so I set my sights a little lower.

I had already worked up a little JavaScript File Upload prompt/confirm dialog, and thought
that it would make a good jumping off point for my first foray into the exciting world jQurey.

Below, is an expurgated version of the dialog rendered via js, followed by my first effort at same via jQuery.

I am certain that each approach can yet be further refined and distilled to provid for a more accurate comparison,
however at this stage and with the the aim of 'writing less' and 'doing more',
while (as compared to the js version) my jQuery effort does clock in at 17 fewer lines of code,
147 fewer characters (255 fewer including spaces) in the end I'm left feeling a little disappointed.

Giving it my best shot, I'm left wanting.
Hoping someone wise in the ways will give these a whirl on their own development server, and then kindly show me the light,
I present the following for your kindly review and critique.

js-code:
<SCRIPT>
function toggleCnfm(prompt)
{ //set all divs but (the prompted.div.id AND the parent.div.id) to style.display='none'
document.getElementById(prompt).style.display='inline';
cnfmArr= new Array('have_files', 'url_cnfm', 'uploader', 'src_file_alert');
for(i=0; i<cnfmArr.length; i++)
{ var id= cnfmArr[i];
if(id != prompt)
{
setTimeout("ie_hack('"+id+"')",300);
}
}
}
function ie_hack(id)
{ //because IE6 fumbles if you rush it!
document.getElementById(id).style.display='none';
}
function showHide(id)
{
subject = document.getElementById(id);
if(subject.style.display=='none')
{
subject.style.display='inline';
}
else
{
subject.style.display='none';
}
}
function ignore()
{ // see cxl(): in jquerytest.htm
showHide('src_file_prompt');
toggleCnfm('src_file_alert');
}
</SCRIPT>
<style>
.big_red {
width:325px; height:125px; position: absolute; left:200px; top:200px; background-color:#b0c4de;
}
.srcMap #uploader, #src_file_cnfm, #have_files, #src_file_alert, #urls_prompt, #url_cnfm {
width:95%; height:90%; position: absolute; top:0px; margin:10px; background-color:#EBEBEB; overflow:visible;
}
</style>
<input type='button' value='- Try It! -' onclick= "showHide('src_file_prompt')"/>
<div class='srcMap big_red' id='src_file_prompt' style='display:none'>
<div class='srcMap' id='uploader' >
<p>UPLOADER -- Got Files?<br/>
<input type='button' value='-- Select --' onclick= "ignore(); alert('Success!')"/>
<input type='button' value='-- Cancel --' onclick= "ignore()"/>
</p>
</div>
<div class='srcMap' id='url_cnfm' >
<p>URL CONFIRM<br/>
<input type='button' value='Copy Files?' onclick= "ignore(); alert('Success!')"/>
<input type='button' value=' Cancel ' onclick= "ignore()"/>
</p>
</div>
<div class='srcMap' id='src_file_alert' >
<p> SOURCE FILE FIELD FORMAT ALERT<br/>
<input type='button' value='Filenames Only?' onclick= "toggleCnfm('uploader')"/>
<input type='button' value='URLS Only?' onclick= "toggleCnfm('url_cnfm')"/>
<input type='button' value='Cancel' onclick= "ignore()"/>
</p>
</div>
</div>
jQuery-code:<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<SCRIPT>
function cxl(){
jQuery("[class$='-prmt']").show();
jQuery("[class$='-cnfm'],.big_red").hide();
}
jQuery(document).ready(function() {
jQuery("#try_it").click(function() {
jQuery('#src_file_prompt').show();
});
jQuery(".url-prmt").click(function() {
jQuery("[class$='-prmt']").hide();
jQuery(".url-cnfm").show();
});
jQuery(".upload-prmt").click(function() {
jQuery("[class$='-prmt']").hide();
jQuery(".upload-cnfm").show();
});
jQuery(".url-cnfm").click(function() {
alert('Files Copied Successfully');cxl();
});
jQuery(".upload-cnfm").click(function() {
alert('Files Uploaded Successfully');cxl();
});
jQuery(".cancle").click(function() {cxl(); });
});
</SCRIPT>
<style>
.big_red {
width:350px; height:125px; position: absolute; left:200px; top:200px; background-color:#b0c4de;
}
.srcMap #src_file_alert {
width:95%; height:90%; position: absolute; top:0px; margin:10px; background-color:#EBEBEB; overflow:visible;
}
</style>
<input type='button' id='try_it' value='- Try It! -' />
<div class='srcMap big_red' id='src_file_prompt' style='display:none'>
<div class='srcMap' id='src_file_alert' >
<p class='alert-prmt'> SOURCE FILE FIELD FORMAT ALERT<br/></p>
<p class='url-cnfm' style='display:none' >URL CONFIRM<br/></p>
<p class='upload-cnfm' style='display:none' >UPLOADER -- Got Files?<br/></p>
<input type='button' class='upload-cnfm' id='upload-cnfm' style='display:none' value='-- Select --'/>
<input type='button' class='url-cnfm' id='url-cnfm' style='display:none' value='Copy Files?'/>
<input type='button' class='upload-prmt' value='Filenames Only?' />
<input type='button' class='url-prmt' value='URLS Only?' />
<input type='button' class='cancle' value='Cancel'/>
</div>
</div>

[VIPStephan]

Well, you could start by changing all occurrences of the string “jQuery” to “$” (and replace jQuery(document).ready( with $( altogether), that would save you some more characters.

Additionally you could possibly store the strings “url-prmt”, “url-cnfm”, “upload-prmt”, and “upload-cnfm” in an array or variable or something and only write the prompt hide and show function once, using the variable?

[fuzzy1]

Well, you could start by changing all occurrences of the string “jQuery” to “$” Naturally, I started off in all my initial jQurey fumblings employing "$" but as WordPress et. al. have opted for the string “jQuery” syntactical style
(presumably to minimize confusion with PHP vars) I thought I would run with it as well (grumbling ALL THE WHILE, cuz -- WHAT A PAIN that is!) (and replace jQuery(document).ready( with $( altogether) Here, I was under the impression that
jQuery(document).ready( was required, but as I say, I'm a total jQurey noob so I'll have to investigate that further.

Additionally you could possibly store the strings “url-prmt”, “url-cnfm”, “upload-prmt”, and “upload-cnfm” in an array or variable or something and only write the prompt hide and show function once, using the variable? ... more or less the way I approached the js version no? I'll have a look at it.

Anyway, Thanks!
Anyone else?

[blue642]

here is some quick and dirty jQuery version of what you made in pure javascript.

I'm pretty new myself so this is probablly not the most optimized... but at least i',s smaller... I didn't check by how much though...


<script>
$(function(){ //shorthand for document.ready()

$("#src_file_prompt, #src_file_alert, #url_cnfm, #uploader").hide(); /* hide what should be hidden initially... */


$("#tryit").toggle(function(){ //when user clicks tryit button...
$("#src_file_prompt, #src_file_alert").show(); // ...toggle between showing this...
}, function(){
$("#src_file_prompt, #src_file_alert").hide(); // ...and hiding it...
});
$("input[value='Filenames Only?']").click(function(){ // user clicks this...
$("#src_file_alert, #url_cnfm").hide(); // hide anything that shouldn't be showing...
$("#uploader").show(); // show the proper div...
});
$("input[value='URLS Only?']").click(function(){ // when user clicks this...
$("#src_file_alert, #uploader").hide(); // hide anything that shouldn't be showing...
$("#url_cnfm").show(); // ...and show the proper div...
});
$("input[value='Copy Files?']").click(function(){ // when user clicks this...
$("#src_file_prompt").hide();// hide main div...
alert('Success!')// ...and alert Success!
});
$("input[value='Select']").click(function(){ // when user clicks this...
$("#src_file_prompt").hide(); // hide main div...
alert('Success!') // ...and alert Success!
});
$("input[value='Cancel']").click(function(){ // when user clicks this...
$("#url_cnfm, #uploader").hide(); // hide anything that shouldn't be showing...
$("#src_file_alert").show(); // ...and show the proper div...
});


});
</script>

I changed the HTML a tad as well...

<input type='button' value='Try It!' id='tryit'/>
<div class='srcMap big_red' id='src_file_prompt'>
<div class='srcMap' id='uploader' >
<p>UPLOADER - Got Files?<br/>
<input type='button' value='Select'/>
<input type='button' value='Cancel'/>
</p>
</div>
<div class='srcMap' id='url_cnfm' >
<p>URL CONFIRM<br/>
<input type='button' value='Copy Files?'/>
<input type='button' value='Cancel'/>
</p>
</div>
<div class='srcMap' id='src_file_alert' >
<p>SOURCE FILE FIELD FORMAT ALERT<br/>
<input type='button' value='Filenames Only?'/>
<input type='button' value='URLS Only?'/>
<input type='button' value='Cancel'/>
</p>
</div>
</div>

and just to include it all here is the css again...

<style>
.big_red {
width:325px; height:125px; position: absolute; left:200px; top:200px; background-color:#b0c4de;
}
.srcMap #uploader, #src_file_cnfm, #have_files, #src_file_alert, #urls_prompt, #url_cnfm {
width:95%; height:90%; position: absolute; top:0px; margin:10px; background-color:#EBEBEB; overflow:visible;
}
</style>


lemme know if you need help understanding it, i tried documenting it..

[fuzzy1]

Well Hey blue642!

Thanks for taking me up on this. Very Cool!

Funny, it has never occurred to me to call an element by its value outright
e.g. $("input[value='Filenames Only?']").click(function(){
Also, as an English major, one of the things I like about coding is the narrative that can be effected in code,
and you’ve done a real nice job telling your version of the story.
Again, very cool.

I too started out with a multi div solution, however in the 3 days since my initial post, I have consoled myself for any disappointment in the brevity (or a perceived lack of it) in my jqurey solution, enjoying some small sense of vindication for my approach upon discovering that (in full context) the keystroke savings were substantially compounded – NOT in the jquery itself, but rather its corresponding and fully fleshed html.

Just for grins however, here is a comparison of our two very different jQuery solutions.

jQuery Solution 1 (fuzzy)
Script Only: (tag to /tag): 26 lines of code, 790 characters w/spaces, 633 w/o
Using $(function(){shorthand and $ instead of jQuery…
26 lines of code, 702 characters w/spaces, 547 w/o
Including HTML: (comments stripped)
(longhand) 47 lines of code, 1916 characters w/spaces, 1567 w/o
(shorthand) 47 lines of code, 1829 characters w/spaces, 1481 w/o


jQuery Solution 2 (challenger blue642) with non-essential white space and all comments stripped...
Script Only: (tag to /tag): 30 lines of code, 817 characters w/spaces, 758 w/o
With additional #tryit toggle functionality disallowed,
28 lines of code, 747 characters w/spaces, 699 w/o

Including HTML (w/o tryit toggle):
58 lines of code, 1945 characters w/spaces, 1565 w/o

In the end, on keystrokes alone, the two approaches are VERY similar, however to say that your approach is ‘smaller’ is (IMHO) something of a stretch?

[blue642]

hello!

Sorry I somehow skipped over your jQuery solution. I was comparing mine to the original raw javascript. and admittedly I am at work using "notepad" (so no line #'s or character counting...) So I don;t even know if it was smaller than the raw JS.

I guess It just felt smaller...

Anyway, here is another solution and how I might tackle it, can you post the number's on this one?


jQuery
(note it's loading version 1.4 from google.)

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js?ver=1.4'></script>
<script>
$(function(){
$("#src_file_prompt, #src_file_alert, #url_cnfm, #uploader").hide();
$("#tryit").toggle(function(){
$("#src_file_prompt, #src_file_alert").show();
}, function(){
$("#src_file_prompt, #src_file_alert").hide();
});
$(".uploader, .url_cnfm").click(function(){
var cl = $(this).attr("class");
$(this).parent().hide();
$(this).parent().siblings('#'+cl).show();
});
$(".success").click(function(){
$(this).parentsUntil("body").hide();
alert('Success!');
});
$(".cancel").click(function(){
$(this).parent().hide();
$("#src_file_alert").show();
});
});
</script>

css (took some creative license here, cleaned up unneeded styling and added some flair...)
<style>
.bigRed {
width:325px;
position: absolute;
padding: 0 10px 10px;
left:200px; top:200px;
background-color:#b0c4de;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}

.bigRed p {
margin-top: 0;
padding-top: 10px;
text-align: center;
}

#uploader, #src_file_alert, #url_cnfm {
background-color:#ebebeb;
padding: 0 10px 10px;
overflow:visible;
-moz-border-radius: 0 0 6px 6px;
-webkit-border-radius: 0 0 6px 6px;
border-radius: 0 0 6px 6px;
}

a {
background: #f1f1ed;
padding: 3px;
margin: 5px;
border: 1px solid #000;
cursor: default;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
</style>

html... (biggest change was getting rid of the uneeded ipput buttons and creating just a tags (much fewer character too :) )

<a id='tryit'>Try It!</a>
<div class='bigRed' id='src_file_prompt'>
<div id='src_file_alert' >
<p>SOURCE FILE FIELD FORMAT ALERT</p>
<a class='uploader'>Filenames Only?</a>
<a class='url_cnfm'>URLS Only?</a>
<a class='cancel'>Cancel</a>
</div>
<div id='uploader'>
<p>UPLOADER - Got Files?</p>
<a class='success'>Select</a>
<a class='cancel'>Cancel</a>
</div>
<div id='url_cnfm' >
<p>URL CONFIRM</p>
<a class='success'>Copy Files?</a>
<a class='cancel'>Cancel</a>
</div>
</div>