SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Evangelist
    Join Date
    Mar 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,716
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    It sounds like the jQuery UI Dialog is what you're after.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Evangelist
    Join Date
    Mar 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,716
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Bayliss Trevor View Post
    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.

    Quote Originally Posted by Bayliss Trevor View Post
    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

    Quote Originally Posted by Bayliss Trevor View Post
    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:

    Code javascript:
    $(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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Evangelist
    Join Date
    Mar 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,716
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Bayliss Trevor View Post
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Evangelist
    Join Date
    Mar 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks again I am already using the min version so I'll check it out and configure my download as/if required.

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,716
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Bayliss Trevor View Post
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    SitePoint Evangelist
    Join Date
    Mar 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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)

  10. #10
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,716
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Bayliss Trevor View Post
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  11. #11
    SitePoint Evangelist
    Join Date
    Mar 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great thanks!

  12. #12
    SitePoint Evangelist
    Join Date
    Mar 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>

  13. #13
    SitePoint Evangelist
    Join Date
    Mar 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  14. #14
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,716
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    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
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  15. #15
    SitePoint Evangelist
    Join Date
    Mar 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>


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
  •