What is the best way to show window in jquery?(usability)

[Bayliss Trevor]

Hi all
I have some images, when they are clicked on a loading animation appears briefly and then the window with the next step which must be completed before moving to the next page. I have seen on other sites (like amazon) where people just click on a help button and a little new window appeared. Can I do this in pure js? Does this work cross browser?Thanks

[paul_wilkins]

It sounds like the jQuery UI Dialog is what you're after.

[Bayliss Trevor]

Thanks for the reply that is what I'm already using, it seems like overkill a bit? Does it work cross browser? Thanks

Surely there must be an easier way to do this? This is the offending code as far as the ifelse part...

<script language='javascript'>
google.load('jquery', '1.4.2');
google.load('jqueryui', '1.8.5');
</script>
<script language='javascript'>

$(document).ready(function(){
$('#debug').ajaxStart(function() {
if( $('#div_fond').length > 0) $('#div_fond').remove();
var new_div = $('<div></div>').attr({ id:'div_fond', name:'div_fond' }).appendTo('BODY');
var v_w = $(document).width();
var v_h = $(document).height();
new_div.css({'opacity':'.5','filter':'alpha(opacity=50)','z-index':'999999','position':'absolute','top':'0','left':'0','background':'#f5f5f5','width':v_w+'px','height':v_h+'px'}).addClass('div_fondo').show();

var t_w = ($(document).width()/2)-($('#debug').width()/2);
var t_h = ($(window).height()/2)-($('#debug').height()/2);
$('#debug').css({'position':'absolute','top':0,'left':t_w,'z-index':'1000000'}).show();
});

$('#debug').ajaxComplete(function() {
$('#div_fond').hide().remove();
$('#debug').hide();
});
});

function fn_open_window(act){
$.post('proced.php',{'proceso':'create','action':act},function(r){
if( $.trim(r) != ''){
$('#window_tar').html(r).dialog({
title:'Info',
modal:true,
width:450,
close:function(){
$(this).dialog('destroy');
},
buttons:{
'Close':function(){
$(this).dialog('destroy');
},
'Send':function(){
var valido=false;
var service='';

if( act == 10 || act == 7 || act == 12 || act == 11 || act == 13)
service=2;
else
service=1;

</script>

[paul_wilkins]

Thanks for the reply that is what I'm already using, it seems like overkill a bit?

Yes it is, if it's the only part of the library that's being used.

Does it work cross browser?

They take great pride in the amount of cross-browser support that is provided. All the way back to IE6 and Firefox 2, for example.
Browser Compatibility - jQuery JavaScript Library

Surely there must be an easier way to do this? This is the offending code as far as the ifelse part...

You can simplify your code to the following:

$(function () {
    $('#debug').ajaxStart(showFond);
    $('#debug').ajaxComplete(hideFond);
});
 
function fn_open_window(act) {
    $.post('proced.php', {
        'proceso': 'create',
        'action': act
    }, success);
}

Whereupon you create the functions for showFond(), hideFond() and success(data)

jQuery already helps to hide vast amounts of complexity away from you.
One of the ways to make code simpler and easier to follow is to break it down in to smaller functions. Other ways are by using well known variable names, such as using data instead of r, in the success function.

[Bayliss Trevor]

Thanks for the great answer. So if it is overkill I should seriously think about doing this in pure js and get rid of the jquery on this page?

[paul_wilkins]

Thanks for the great answer. So if it is overkill I should seriously think about doing this in pure js and get rid of the jquery on this page?

Two problems come in when writing your own code.

1. Achieving cross-browser compatibility is incredibly hard.
2. You end up writing ten times more code than you do when using a code library.

If you do want to go that route, testing and unit suites can help to handle some of the complexity for you.

Alternatively, you can reduce the amount of library code by repackaging it so only the parts that you use are there in the first place. See the jQuery UI build a custom download by way of example.

[Bayliss Trevor]

Thanks again I am already using the min version so I'll check it out and configure my download as/if required.

[paul_wilkins]

Thanks again I am already using the min version so I'll check it out and configure my download as/if required.

Just in case this needs clarifying, the min version is not where they've taken any sections out of the code. Instead, the min version is where the full amount of code has had its variables reduced to single letters, and spaces removed, so that the same full code can now be achieved with a minimum number of characters.

[Bayliss Trevor]

Cheers for the clarification Paul. Therefore I assume that the custom jQuery UI build download is NOT "minified" so I would do that myself. I think that the min FULL version is only about 56k with the whole shebang so maybe I should just stick with that? (to save 20k maybe the cost benefit is not there? I am downloading it from google anyway)

[paul_wilkins]

Cheers for the clarification Paul. Therefore I assume that the custom jQuery UI build download is NOT "minified"

It's the other way around actually. Perform a download yourself of a custom build and you will find that the custom build is fully minified.

[Bayliss Trevor]

Great thanks!

[Bayliss Trevor]

How does that look, good -or am I missing the point?! Thanks

<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/themes/development-bundle/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="/themes/development-bundle/ui/jquery.ui.position.js"></script>
<script type="text/javascript" src="/themes/development-bundle/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="/themes/development-bundle/ui/jquery.ui.dialog.js"></script>
<script type="text/javascript" charset="ISO-8859-1" src="/js/fns_index.js"></script>
<script language='javascript'>
$(document).ready(function(){
$('#debug').ajaxStart(start_window);
$('#debug').ajaxComplete(stop_window);
});
</script>

[Bayliss Trevor]

I think I can get rid of this line:

<script type="text/javascript" src="/js/jquery.min.js"></script>

How can I merge the development-bundle files? Thanks

[paul_wilkins]

You can paste the contents of the script file you want to compress in to Minify Javascript Online / Online JavaScript Packer and then save the results back in to that file.

You can also copy the scripts one after another, so one file might contain multiple scripts within it.

When you do minify the contents of a script file, it helps to express that in the file name itself too. So, you might end up with a file called jquery.ui.core+position+widget+dialog.min.js

[Bayliss Trevor]

Surely this file has all the other files in the bundle in it? And the bonus is it is just one http request versus all the four requests in the development bundle?

<script type="text/javascript" src="/js/jquery.min.js"></script>