SitePoint Sponsor

User Tag List

Page 4 of 4 FirstFirst 1234
Results 76 to 89 of 89
  1. #76
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,688
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by team1504 View Post
    But that makes sense because i say focus on the thing that had previousFocus in the second if statement, yet you said switch the two suites, or what was inside the statements, wow... I am confused
    Show us what's happening, and we'll find the logical faults that are occurring.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  2. #77
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Okay, I uploaded it here.

    Tabbing with the keyboard-button in this webpage works normally; however, pressing the #tab button we made jumps to the last input form when nothing is focused on.
    But when an input in focused on and then the button is pressed, it flashes and looks like it re-focuses on the same form.

    So you see it?

  3. #78
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,688
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by team1504 View Post
    Okay, I uploaded it here.

    Tabbing with the keyboard-button in this webpage works normally; however, pressing the #tab button we made jumps to the last input form when nothing is focused on.
    But when an input in focused on and then the button is pressed, it flashes and looks like it re-focuses on the same form.

    So you see it?
    The this.focusNext() part is in the wrong place. That need to be moved back to the start of the focusNext if statement.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  4. #79
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    there is no .focusNext() function, but I assumed you meant .focus() and I did so and it works!

    I uploaded it to the same place as before if you want to check the syntax out.

    Although I think this taught me as you explained to me what the pieces thus far do, when I was switching them around, I should have read the lines and interpreted what each one does; and therefore, mentally determine what if-statement it belongs in. In other words, I have to actually think and use my brain

    So then now do we go to the pieces mention in post 70? :
    Quote Originally Posted by paul_wilkins
    So when the focusNext variable is true, you want to set that element to be the newly focused element, which can be done with this.focus()
    After setting the focus you should also set focusNext to false, and you can then return false from the function to tell the loop to not carry on checking any others from there.

    That will work in most situations.

    There are some situations though that need to be fixed after that, such as when the last form field was the active one, or when nothing in the form has been made active. We'll cover those after getting the focus part actually going.
    Meaning looping back to the first form after the last one in focused on and focusing on the first if nothing is focused on?

  5. #80
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,688
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by team1504 View Post
    there is no .focusNext() function, but I assumed you meant .focus() and I did so and it works!

    I uploaded it to the same place as before if you want to check the syntax out.

    Although I think this taught me as you explained to me what the pieces thus far do, when I was switching them around, I should have read the lines and interpreted what each one does; and therefore, mentally determine what if-statement it belongs in. In other words, I have to actually think and use my brain

    So then now do we go to the pieces mention in post 70? :


    Meaning looping back to the first form after the last one in focused on and focusing on the first if nothing is focused on?
    Okay, we'll just get some tidying up done with the variables, and then move on to resolving some issues.

    Code:
    var form = this.form;
    previousFocus = form.previousFocus;
    var focusNext = false;
    Currently previousFocus is being defined as a global variable, which should not be done. You could define it as a var like this,

    Code:
    var form = this.form;
    var previousFocus = form.previousFocus;
    var focusNext = false;
    but now we have three var declarations, which can lead to some confusion about where and when such var declarations should be made. Let's help to remove confusion and declare the variables from one var declaration at the start of the function:

    It's possible to declare them elsewhere, but JavaScript hoists all declarations to the start of the function, automatically declaring them as undefined until it gets to the declaration that you made, so remove all confusion and declare them all at the same time at the start of the function.

    Code javascript:
    var form = this.form,
        previousFocus = form.previousFocus,
        focusNext = false;

    That's how JavaScript variables should be declared. All at the same time at the start of the function they are in.

    Let's now work on getting the tab to loop. When the last form field has the focus, clicking on the tab button means that the focusNext variable is set to true, but the loop doesn't go back to the start, thus allowing focusNext to be do it's job.

    What we can do is after the loop we can check if focusNext is still true, and if it is you can set the focus on to the first field of the form.

    You can get the first element of the form with $(':input:first', form)
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #81
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Edit: Apologies, I fell asleep while typing this and never submitted it. Sorry if I kept you waiting or for any inconvenience.

    Quote Originally Posted by paul_wilkins View Post
    Currently previousFocus is being defined as a global variable, which should not be done. You could define it as a var like this...It's possible to declare them elsewhere, but JavaScript hoists all declarations to the start of the function, automatically declaring them as undefined until it gets to the declaration that you made, so remove all confusion and declare them all at the same time at the start of the function.
    Oh, okay! I didn't know that var made js variables local. Everything I have read on js variables, or at least what I can remember, always said var should be infront when dinitiialising a variable at all time. But, I didn't know one could do the multi-variable initialisation.


    [QUOTE=paul_wilkins;4996545Let's now work on getting the tab to loop. When the last form field has the focus, clicking on the tab button means that the focusNext variable is set to true, but the loop doesn't go back to the start, thus allowing focusNext to be do it's job.

    What we can do is after the loop we can check if focusNext is still true, and if it is you can set the focus on to the first field of the form.

    You can get the first element of the form with $(':input:first', form)[/QUOTE]

    hmm okay. Well. I did so and now it successfully does so, go to the first field, if the last input field is being focused on.

    Here is the script so far:
    Code JavaScript:
    $(document).ready(function(){
        $('#sampleForm').prop('previousFocus', false);
        $('#sampleForm :input:not(#tab)').blur(function() {
            $(this.form).prop('previousFocus', this);
        });
        $('#tab').click(function(){
            var form = this.form,
            previousFocus = form.previousFocus,  
            focusNext = false;
            $(':input:not(#' + this.id + ')', form).each(function(){
            	if(focusNext === true){
            		this.focus();
            		focusNext=false;
            		return false;
            	}
            	if(this === previousFocus){
            		focusNext=true;
            	}
     
            });
            if(focusNext === true){
            	$(':input:first',form).focus();
            }
        });
    });

    Does the above look okay? It functions well so far, but I just want to make sure

    Also, so now we move onto focusing on an element when nothing is focused on...

    i was trying to see if there was a way to check if all input except #tab in #sampleForm were blurred, but then I thought can't we just check if focusNext === false— because if it does that means one hasn't gone through the loop, which means nothing if focused on, right?

  7. #82
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,688
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by team1504 View Post
    Oh, okay! I didn't know that var made js variables local. Everything I have read on js variables, or at least what I can remember, always said var should be infront when dinitiialising a variable at all time. But, I didn't know one could do the multi-variable initialisation.
    Using var in front of each variable that you are initializing leads to bad habits, because you end up with multiple lines that each individually declare variables, which leads to the temptation to use that same technique to declare a variable at any part of the program. While that can be done and it does work, it's a bad design decision, due to the way that variable hoisting works in JavaScript. A coding style that allows bad things to happen is itself a bad coding style.

    Because of the way that variable hoisting works by automatically declaring all variables at the sort of their scope, it helps to remove confusion when the code matches up with what's actually going on. In this respect, declaring all variables at the start of the scope (that being the function in this case) is the most correct way to go about things, and is also what is taught to us by the discoverer of such good and bad practice in JavaScript, Douglas Crockford.

    Quote Originally Posted by team1504 View Post
    Does the above look okay? It functions well so far, but I just want to make sure
    There is some cleaning up that should be done, around the blur part.

    The piece that sets the previousFocus property to false should be removed, and the other one that sets the previousFocus property to the this keyword should be simplified as was mentioned in a recent reply.

    Code javascript:
    $('#sampleForm :input:not(#tab)').blur(function() {
        this.form.previousFocus = this;
    });

    Quote Originally Posted by team1504 View Post
    so now we move onto focusing on an element when nothing is focused on...

    i was trying to see if there was a way to check if all input except #tab in #sampleForm were blurred, but then I thought can't we just check if focusNext === false— because if it does that means one hasn't gone through the loop, which means nothing if focused on, right?
    That's right, so we can also check if the previousFocus value doesn't contain anything useful, which is as easy as adding an or condition that checks for !previousFocus to the one that checks if focusNext is true. For either of tose two situations you want to set the focus to the first form field.
    Last edited by paul_wilkins; Nov 19, 2011 at 15:54. Reason: false to true, oops
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  8. #83
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    While that can be done and it does work, it's a bad design decision, due to the way that variable hoisting works in JavaScript. A coding style that allows bad things to happen is itself a bad coding style.
    True, thank you for the explanation— i am really learning a l

    Quote Originally Posted by paul_wilkins View Post
    There is some cleaning up that should be done, around the blur part.

    The piece that sets the previousFocus property to false should be removed...
    I don't see any line that sets previousFocus to false...

    Quote Originally Posted by paul_wilkins View Post
    Code javascript:
    $('#sampleForm :input:not(#tab)').blur(function() {
        this.form.previousFocus = this;
    });
    oh yeah, I remember that. I think thats in the uploaded version, but the one I copied into SPF has the old version of that line.
    I just ran through them and now they are both up-to-date.



    Quote Originally Posted by paul_wilkins View Post
    That's right, so we can also check if the previousFocus value doesn't contain anything useful, which is as easy as adding an or condition that checks for !previousFocus to the one that checks if focusNext is false. For either of tose two situations you want to set the focus to the first form field.
    I put the checking for !previousFocus or previousFocus being useless in the if-statement whose suite was focusing on the first input— the second one.

    Here it is:
    Code JavaScript:
    if(focusNext === true || !previousFocus){
            $(':input:first',form).focus();
    }

    and then in the entire script:
    Code JavaScript:
    $(document).ready(function(){
        $('#sampleForm').prop('previousFocus', false);
        $('#sampleForm :input:not(#tab)').blur(function() {
            this.form.previousFocus = this;
        });
        $('#tab').click(function(){
            var form = this.form,
            previousFocus = form.previousFocus,
            focusNext = false;
            $(':input:not(#' + this.id + ')', form).each(function(){
            	if(focusNext === true){
            		this.focus();
            		focusNext=false;
            		return false;
            		//alert(focusNext);
            	}
            	if(this === previousFocus){
            		focusNext=true;
            	}
     
            });
            if(focusNext === true || !previousFocus){
            	$(':input:first',form).focus();
            }
        });
    });

    Did I place it, the check for !previousFocus, in the right spot and / or is the conditions for focusNext in the second instance, or I guess both if-statements, correct as well?
    Last edited by paul_wilkins; Nov 19, 2011 at 15:55.

  9. #84
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,688
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by team1504 View Post
    Did I place it, the check for !previousFocus, in the right spot and / or is the conditions for focusNext in the second instance, or I guess both if-statements, correct as well?
    Yes, well done.

    It was around 3am when I put that false instead of true. That's all fixed up now though so it doesn't confuse anyone else reading though this.

    It's great to see that you're worked out the right logic of what's supposed to happen there.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  10. #85
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thank you.

    Yeah, I was going to say something lol. I didn't know what time it was there, but reason the time the post was posted I knew it was late. Thank you for still helping me that late.

    I know it works, but is that it? Is there anything more you think we could do to clean it up or make it better. Or any other changes at all?

  11. #86
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,688
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by team1504 View Post
    I know it works, but is that it? Is there anything more you think we could do to clean it up or make it better. Or any other changes at all?
    I still see that line that should be removed, in your most recently posted script:
    Code:
    $('#sampleForm').prop('previousFocus', false);
    And the commented out alert can be removed.

    Other than that, there is only a few issues of spacing in your code that should be addressed, for the sake of clarity. The best way to ensure that your code is reliable and consistent is to put your code through jslint.com

    Go to that site and select the checkboxes for "assume a browser" and "Tolerate missing 'use strict' pragma", and add $ to the predefined list below the checkboxes. Select the JS Lint button and it will tell you about every problem that there is in the code.

    Fortunately at this stage the only problems are ones to do with spacing. Fix those up, ask here if you have any queries about what it's telling you, and that should be everything all nicely tidied up.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  12. #87
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thank you very much for all the help. It took 4 pages, but i learned how to do it and why and I appreciate your time and help, of course!

    However, one more thing before I run it through JS Lint. Should that line you mentioned in the post above be deleted completely or should I replace it with something?

  13. #88
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,688
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by team1504 View Post
    However, one more thing before I run it through JS Lint. Should that line you mentioned in the post above be deleted completely or should I replace it with something?
    It should be removed completely.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  14. #89
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I was able to complete all of JSLint's suggestions. I think it wanted more-than-one too many spaces in more-than-one too many places, but i'm sure its algoirthms and logic behind it has much more research behind it than what i think.

    Here it is finally:
    Code JavaScript:
    $(document).ready(function () {
        $('#sampleForm :input:not(#tab)').blur(function () {
            this.form.previousFocus = this;
        });
        $('#tab').click(function () {
            var form = this.form,
            	previousFocus = form.previousFocus,
            	focusNext = false;
            $(':input:not(#' + this.id + ')', form).each(function () {
            	if (focusNext === true) {
            		this.focus();
            		focusNext = false;
            		return false;
            	}
            	if (this === previousFocus) {
            		focusNext = true;
            	}
     
            });
            if (focusNext === true || !previousFocus) {
            	$(':input:first', form).focus();
            }
        });
    });

    Again, Thank you kindly!

    Best Regards,
    Team 1504


Tags for this Thread

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
  •