SitePoint Sponsor

User Tag List

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

    Pop ups/Alerts what is the best way

    Hi all
    Due to the requirements of a client we have to show various alerts that the user has to click before using a form (one as they open the pagelease have x/y document with you before you fill in this form and then the other when they send the form which is the do you agree with these terms and conditions).

    My big question is what the best way to do this is. A dev friend told me that alerts will be blocked by pop up blockers which everyone seems to have these days according to him.

    What is the best cross borwser way to do this please?

    Thank you in advance!!

  2. #2
    SitePoint Evangelist
    Join Date
    Mar 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well looking on the internet it seems that divs are the way to do this- what does anyone think? Thanks

  3. #3
    SitePoint Member
    Join Date
    May 2010
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, even creating something like this in your js:

    Code:
    <span class="error">Please fill this field in</span>
    Then in your "on blur, if this field is still empty" clause, you can do an appenchild on that field's container with this element. Here's a good "create element" function too.

    Code:
    createEle = function ( type, attr, cont, html ) {
    	var ne = document.createElement( type );
    	if (!ne)
    		return 0;
    	for (var a in attr)
    		ne[a] = attr[a];
    	var t = typeof(cont);
    	if (t == "string" && !html)
    		ne.appendChild( document.createTextNode(cont) );
    	else if (t == "string" && html)
    		ne.innerHTML = cont;
    	else if (t == "object")
    		ne.appendChild( cont );
    	return ne;
    };
    To use the function, just do something like this:

    Code:
    var errorText = "Please fill this field in"
    var errorSpan = createEle("SPAN", {className: "error"}, errorText, true);
    
    fieldContainer.appendChild(errorSpan);
    Last edited by Madisonjs; May 21, 2010 at 08:35. Reason: added createEle function explanation

  4. #4
    SitePoint Evangelist
    Join Date
    Mar 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Madison for that detailed explanation-if I want a "window" to appear or an "alert" then you would advise against JS for that for usability reasons?

  5. #5
    SitePoint Member
    Join Date
    May 2010
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, the appendChild solution is a little less invasive. You could also even highlight the offending field by changing the background red until they type something in there and then onBlur it.

    I guess what i'm saying is, the less invasive you are, while at the same time giving people the info you need them to have and they're receiving it, the better. There's no reason to be annoying or invasive if you don't have to. Remember that you want people to fill out your forms.

    EDIT: but to actually answer your question - if you HAVE to have a window telling them they're doing something wrong, then i would recommend a floating div. You can use a similar technique as the one i detailed above with the Span. I believe you can just absolute position it and z-index it above everything else so it floats on top of things.

  6. #6
    SitePoint Evangelist
    Join Date
    Mar 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The window I need to show them is one that says "Please double check this information (ourputs what the user typed in three of the form fields). If the info is fine Click Yes (users goes to next page) or No (the window closes and they change the offending form fields) So a div would be the solution is whast I understand from your answer? That won't be blocked by a pop up blocker?

  7. #7
    SitePoint Member
    Join Date
    May 2010
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Bayliss Trevor View Post
    The window I need to show them is one that says "Please double check this information (ourputs what the user typed in three of the form fields). If the info is fine Click Yes (users goes to next page) or No (the window closes and they change the offending form fields) So a div would be the solution is whast I understand from your answer? That won't be blocked by a pop up blocker?
    Correct. A div will not be blocked because it's not technically a pop-up.

  8. #8
    SitePoint Member
    Join Date
    Feb 2005
    Location
    central Pennsylvania *sigh*
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Madison, what are you expecting for attr in that creatEle function? I'm a relative noob at js and I'm puzzled by
    Code:
    for (var a in attr)
         ne[a] = attr[a];
    I get the for loop syntax, but what is ne[a]? ne is a DOM element, not an array right?

  9. #9
    SitePoint Member
    Join Date
    May 2010
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by gunarch View Post
    Madison, what are you expecting for attr in that creatEle function? I'm a relative noob at js and I'm puzzled by
    Code:
    for (var a in attr)
         ne[a] = attr[a];
    I get the for loop syntax, but what is ne[a]? ne is a DOM element, not an array right?
    The function wants you to put what attributes you want in brackets in kind of a JSONey format. For example if you want a div to look like this

    Code:
    <div id="error" class="redbox">sometext</div>
    In the function, it would look like this

    Code:
    createEle("DIV", {id: "error", className: "redbox"}, "sometext", true);


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
  •