Jump to content

lwsimon

Moderators
  • Posts

    105
  • Joined

  • Last visited

Posts posted by lwsimon

  1. If I understand your use case, I'd not try to generate an actual HTML page. Instead, I'd take submit the form back to the same page, but add a textarea with the code in it. That way, if they aren't happy with it, they can modify the original stuff, and resubmit to see their changes.

     

    Having it in a textarea also makes it easy for the user to copy the HTML to paste into their forum profile.

  2. I fixed that issue - here's my solution (maxlength stuff does not yet work in IE)

     

    function FormValidation (id){
       /***************
        * Constructor *
        ***************/
       //id is an optional variable.
       if (id === undefined) 
           id = 'standardForm';
    
       //handle excess inputs with limited length
       $('form#' + id + ' input[maxlength]').each(function(){
           $(this).attr('max_chars', $(this).attr('maxlength')).removeAttr('maxlength').keyup(function(){
               if ($(this).val().length > $(this).attr('max_chars')) {
                   $(this).addClass('invalid');
               }
               else {
                   $(this).removeClass('invalid');
               }
           });
       });
    
    
    
       //run .validate() when form submits
       var self = this;
       $('form#' + id).submit( function(event) {
           event.preventDefault();
           self.validate()
           return false;
       });
    
       this.applyTo = function(formID) {
           alert('formID');
       }
    
    
       /**************
        * Properties *
        **************/
       this.inputMasks = {
           'notempty': /./,
           'alpha': /^[a-z]+$/i,
           'numeric': /^[0-9]+$/,
           'alphanumeric': /^[0-9a-z]+$/
       };
       this.maskedFields = [];
    
       /***********
        * Methods *
        ***********/
       this.addMask = function(id, mask, message) {
           //verify inputs
           if( id === undefined ) return;
           if( mask === undefined ) mask = 'notempty';
           if( message === undefined ) message = null;
    
           //append to stack
           this.maskedFields.push( 
               { 
                   'id': id,
                   'mask': mask,
                   'message': message
               } 
           );
       }
    
       this.validate = function() {
           var error = 'Errors were encountered.  Please verify all input is valid.';
           var failedValidation = false;
           for( i = 0 ; i < this.maskedFields.length ; i++ ){
               var value, regex;
               value = $( 'input#' + this.maskedFields[i]['id'] ).val();
               regex = this.inputMasks[ this.maskedFields[i]['mask'] ];
    
    
               var failedMask = !regex.test(value);
               if( failedMask ){
                   var message = this.maskedFields[i]['message'];
                   failedValidation = true;
                   if( message !== null ) error = error + "\n -- " + message;
               }
           }
    
    
           if( failedValidation === true ){
               alert(error);
               return false; 
           }
           alert('passed validation');
           return false;
       }
    }

  3. In the highlighted line below, 'this' refers to the form object, not the FormValidation Object. How can I bind a method of the FormValidation object to the submit event on the form?

     

    function FormValidation(id){
       /***************
        * Constructor *
        ***************/
       //id is an optional variable.
       if (id === undefined) 
           id = 'standardForm';
    
       //handle excess inputs with limited length
       $('form#' + id + ' input[maxlength]').each(function(){
           $(this).attr('max_chars', $(this).attr('maxlength')).removeAttr('maxlength').keyup(function(){
               if ($(this).val().length > $(this).attr('max_chars')) {
                   $(this).addClass('invalid');
               }
               else {
                   $(this).removeClass('invalid');
               }
           });
       });
    
       //run .validate() when form submits
       $('form#' + id).bind('submit', function(event){
           event.preventDefault();
           this.validate();  /////////////// <-------------------------This line isn't working.
       });    
    
       /**************
        * Properties *
        **************/
       this.inputMasks = {
           'notempty': /./,
           'alpha': /^[a-z]*$/i,
           'numeric': /^[0-9]*$/,
           'alphanumeric': /^[0-9a-z]*$/
       };
       this.maskedFields = [];
    
       /***********
        * Methods *
        ***********/
       this.addMask = function(id, mask, message) {
           //verify inputs
           if( id === undefined ) return;
           if( mask === undefined ) mask = 'notempty';
           if( message === undefined ) message = null;
    
           //append to stack
           this.maskedFields.push( 
               { 
                   'id': id,
                   'mask': mask,
                   'message': message
               } 
           );
       }
    
       this.validate = function() {
           var error = 'Errors were encountered.  Please verify all input is valid.';
           var failedValidation = false;
           for( i = 0 ; i < this.maskedFields.length ; i++ ){
    
               var value, regex;
               value = $( 'input#' + this.maskedFields[i]['id'] ).val();
               regex = this.inputMasks[ this.maskedFields[i]['mask'] ];
    
    
               var failedMask = !regex.test(value);
               if( failedMask ){
                   var message = this.maskedFields[i]['message'];
                   failedValidation = true;
                   if( message !== null ) error = error + "\n" + message;
               }
           }
    
    
           if( failedValidation === true ){
               alert(error);
               console.log("Validation failed");
               return false; 
           }
    
           console.log('Validation passed');
           return false;
       }
    }

  4. I now host all my client emails, plus my own, with Google.

     

    You get the functionality of Gmail, with an @domain.com email address. You can also sign up for Google docs, calendar, and a myriad of other services I've not messed with yet. It is dead easy to set up, too.

     

    The only reason I would consider going with someone else is if the client required a SLA.

     

    Check out google.com/apps

     

    (Sorry for the spam-like reply, but it *is* a solution to the problem, and I have no interest in Google)

  5. What browser are you using to test in? If you're using IE, I would strongly suggest that you download Firefox, and use Firebug for Javascript debugging. Its error messages are much, much better than IE's.

     

    This would not have shown up though. A debugger can only tell you when you've made a syntax error. This is a logic error - you're writing to a document that is already rendered.

     

    Do you have past experience programming? If not, I would actually suggest learning PHP before learning Javascript. PHP is more "traditional" and has better documentation. A lot of people, including people who write tutorials, write very poor javascript.

  6. document.write() is deprecated and is poor form. It works by immediately inserting text into the document while it is still being rendered by the browser - in this case, you're calling it after the document is loaded, so it ha nowhere to write to.

     

    Try this:

     

    function mouseOver()
    {
    alert("hello!!");
    }
    function mouseOut()
    {
    alert("goodbye!!!");
    }
    

     

    That should give you a popup when you go in and out of the area.

  7. JQuery:

     

    $("li.myLi").focus(function () {
            $(this).css('color','red');
       });
    

     

    For example.

     

    It would be better to assign a class instead:

     

    $("li.myLi").focus(function () {
            $(this).addClass('focus');
       });
    $("li.myLi").blur(function () {
            $(this).removeClass('focus');
       });

     

    Then do the styling in the CSS:

     

    :focus, .focus {
            color:red;
    }

  8. Like some of the SEO experts we get here.

     

    Titles are grand:

    An employee testifying today was told that the expert in "Forensic Accounting"

     

    As a Bodyguard I was a "Executive Protection Agent"

     

    As a garbage man for the Army I was a "Sanitation Engineer"

     

    and now of course Analyst/Programmer III

     

    But the best is the FCC calling airplane crashes "Controlled Flight into Terrain"

     

    Odd, but that last one makes the most sense - doesn't it mean that the pilot was in control of the aircraft when it impacted, but was either disoriented, or couldn't see where we was going?

  9. I use Tweetdeck' date=' with thin columns, and its always up on my topmost monitor at work. I've been assigned as our "social marketing" expert. :/[/quote']

     

    so using Twitter makes you a social marketing expert? lol :P

     

    Funny you should say that. That's one of those titles that is so undefined it really has no real requirements.

     

    But no. I work in a communications group, and since I do intranet stuff, they thought I'd be the best fit for that. I always jump on a chance to learn something new so *poof* - instant expert.

  10. John Resig, for example, always posts about upcoming releases of jQuery, stuff he's working on, or asking for opinions. All of my followings are either related to my employer, web development, or politics. All stuff I'm intensely interested in, and like to be in the loop.

     

    For instance - jQuery 1.3.1 will likely launch tomorrow. Did you know that? :)

  11. I have it, but I don't use it much. I read everyone's tweets but I don't post often. You have a new follower. ;)

     

    (I think I've actually found someone in this forum who shares my political views, too!)

     

    LOL.

     

    Twitter has been invaluable to me in my day job as well. I can stay on top of what's happening in the web dev world without wasting time.

     

    As for professionals abandoning it - I don't see that. I can speak directly with people like John Resig at time I need to. I don't see anything able to replace that.

     

    Plus, it makes me happy to think that I can type a message and have it instantly appear on Karl Rove's screen. :)

  12. The best style guides I know are from Apple and the Gnome Foundation. These are probably overkill, though, especially if you're giving them to a client.

     

    For site-level style guides, I have my own template that I'm not really willing to share (lots of work went into that!), but you can build one the same way I did - go to University sites and get ideas from there, then build your own. A good example to start with is Caltech.

     

    One day, I'll probably bundle my style guide template, the scripts I use to make the graphics, and a short tutorial and offer them for sale. Heck, now I'm thinking about doing the same for a lot of the things I use to make my life easier - I'm sure there are web designers out there without the scripting experience that would pay to save themselves the time involved in manually creating all this stuff!

  13. There are a couple of things here. The $() function is actually an object, like all javascript functions. This may be confusing, so if it is, ignore that part ;)

     

    If you do

    $('#someElement').click(function() { alert('foo'); });

    , it binds the function you declared in that .click() to happen whenever the user clicks on #someElement. That's called "binding an event". The Events link you just posted has the list of available events.

     

    Note that $(...).click(...function...) is the same as $(...).bind('click', ...function...).

     

    Next you have effects. Effects are functions that act on the selected items immediately. For example:

    $('#someElement').hide()

    instantly hides the #someElement. For added fun, you can do things like:

    $('#someElement').fadeOut(500);

    to cause the element to fade from 100% opacity to 0%, then hide. Note that 0% opacity is not "hidden" - it is still taking up space on the page, you just can't see it. The "500" is the time, in 1/1000ths of a second, that the effect takes to complete.

     

    Have fun!

  14. Loving what I'm seeing so far!

     

    Have you seen this http://api.jquery.com/

     

    Cool - an official reimplementation of Visual jQuery :)http://remysharp.com/visual-jquery/

     

    Have you seen this http://jsbin.com/

     

    I'm not sure what use this is, but its a cool idea :)

     

    jQuery is awesome - tomorrow's project is creating a complex form that pops up in a modal dialog, submits via Ajax, and returns the result to the user. I just finished redesigning an internal site using it, and it took me about 1/5th the time of Javascript alone.

×
×
  • Create New...