Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    Mar 2009
    Posts
    116
    Thanks
    29
    Thanked 1 Time in 1 Post

    [JQUERY] Hover and Blur events on form

    Hi there,
    Im trying to make a paragraph visible when the user is writing on the form.

    HTML HERE:

    PHP Code:
            <class="Tooltip" rel="tags">Choose some descriptive keywords find your file easyly. </p>
            <
    label for="tags">Tags:</label>
            <
    input type="text" name="tags" /> 
    As you can see the paragraph has the "rel" attribute which is the same as the text input field's name.

    THis is the jquery I've got so far, but unfortunatly its not working.
    The idea is to access the tooltip paragraph by its "rel" attribute when the user is writing on the form.

    JQUERY HERE:

    PHP Code:
    $(function(){
        $(
    "input[type=text]").focus(function(){
            var 
    name = $(this).attr("name");
            $(
    "p[rel*='"+name+"']").css("display","block");


        });
        $(
    "input[type=text]").blur(function(){
            var 
    name = $(this).attr("name");
            $(
    "p[rel*='"+name+"']").css("display","none");

        });
    }); 
    any ideas are welcome, thanks
    Last edited by hernantz; 10-29-2010 at 04:46 PM.

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    I can't see why that wouldn't work. Works for me in test code.

    What css are you using to hide the tooltip paragraph - maybe that's the issue?
    (You could use .show() instead of .css("display","block") incidentally)

  • #3
    Regular Coder
    Join Date
    Mar 2009
    Posts
    116
    Thanks
    29
    Thanked 1 Time in 1 Post
    Quote Originally Posted by SB65 View Post
    I can't see why that wouldn't work. Works for me in test code.

    What css are you using to hide the tooltip paragraph - maybe that's the issue?
    (You could use .show() instead of .css("display","block") incidentally)
    Hi there, thanks for answering.

    look, if i choose all tooltip paragraphs when Focus or Blur, they display and hide as expected. Like this.
    PHP Code:
        $(function(){
            $(
    "input[type=text]").focus(function(){
                $(
    "p").css("display","block");


            });
            $(
    "input[type='text']").blur(function(){
                $(
    "p").css("display","none");

            });
        }); 

    What is not working is the way I access to the rel attribute of the paragraph.

    This method is not working I guess. [name*='value']
    PHP Code:
    $("p[rel*='"+name+"']").css("display","block"); 
    here is the link to that selector: http://api.jquery.com/attribute-contains-selector/

    Here is the test.html that is not working.

    PHP Code:
    <html>
    <
    head>
    <
    script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script>  
        <style>
            /* Class for all generic forms and text fields*/
            .GenericForm {
                
            }

            .GenericForm label {
                margin: 15px 0 3px 0;
                display: block;
            }

            .GenericForm input[type=text], .GenericForm input[type=password]{
                height: 20px;
                width: 400px;
                border: 1px solid #CCCCCC;
                padding-left: 2px;
                margin-bottom: 0px;
            }
            .GenericForm textarea{
                border: 1px solid #CCCCCC;
                padding-left: 2px;
            }

            .GenericForm input[type=text]:focus, .GenericForm input[type=password]:focus {
                border: 1px solid #2E468D;
            }

            .GenericForm input[type=submit], .GenericForm input[type=reset] {
                background-color: #F4F4F4;
                border: 1px solid #999999;
                height: 24px;
                cursor: pointer;
            }

            .GenericForm input[type=submit]:hover, .GenericForm input[type=reset]:hover {
                border-bottom: 2px solid #999999;
            }

            /*Class for the upload form*/
            .UploadFormDiv{
                width: 100%;
                padding: 10px 0 10px 0;
                border-bottom: 1px solid #F2F2F2;
            }

            .UploadFormDiv:hover{
                background: #F2F2F2;
            }

            .UploadFormDiv p{
                margin: 0px 30px 10px 0px; 
                width: 400px;
                float: right;
            }
            /*Class for tooltips seen on the upload form*/
            .Tooltip{
                display: none;
            }
        </style>
    </head>

    <body>
        <form class="GenericForm" name="uploadForm" method="post" action="upload.php" 
        enctype="multipart/form-data">
            <div class="UploadFormDiv">
                <p class="Tooltip" rel="user_file">
                Select a desired MP3. Be sure that is does not infringe someone else's copyright.</p>
                <label for="user_file">Select an Mp3 file to upload:</label>
                <input name="user_file" type="file" />
            </div>
            <div class="UploadFormDiv">
                <p class="Tooltip">The artist of this tune. <br> Example:  Johann Sebastian Bach</p>
                <label for="artist">Artist:</label>
                <input type="text" name="artist" />
            </div>
            <div class="UploadFormDiv">
                <p class="Tooltip">The title of this tune. <br> Example: Toccata and Fugue</p>
                <label for="title">Title:</label>
                <input type="text" name="title" />
            </div>
            <div class="UploadFormDiv">    
                <p class="Tooltip">Choose some descriptive keywords find your tune easyly. 
                Like the tune's album, genre, etc.</p>
                <label for="tags">Tags:</label>
                <input type="text" name="tags" />
            </div>
            <div class="UploadFormDiv">    
                <p class="Tooltip">Choose your privacy level.</p>
                <label><input type="radio" name="privacy" value="public" CHECKED/>
                Public (anyone can search for and listen - recommended)</label>
                <label><input type="radio" name="privacy" value="private"/>
                Private (anyone with the link can listen)</label>
            </div><br>
                <input type="submit" name="upload" value="OK - Upload this tune">
        </form>

        <script type="text/javascript" language="javascript">
            $(function(){
                $("input[type=text]").focus(function(){
                    var name = $(this).attr("name");
                    $("p[rel*='"+name+"']").css("display","block");


                });
                $("input[type=text]").blur(function(){
                    var name = $(this).attr("name");
                    $("p[rel*='"+name+"']").css("display","none");

                });
            });
        </script>
    </body>
    </html> 

  • #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Your code isn't working because your .Tooltip paras have no matching rel attribute. Add these and it works.

    However, to avoid that rel issue entirely you could use:

    Code:
    $(function(){
        $("input[type=text]").focus(function(){
            $(this).siblings('.Tooltip').show();
        });
        $("input[type=text]").blur(function(){
            $(this).siblings('.Tooltip').hide();
        });
    });
    which saves you having to set up all the rel attributes.

  • Users who have thanked SB65 for this post:

    hernantz (10-29-2010)

  • #5
    Regular Coder
    Join Date
    Mar 2009
    Posts
    116
    Thanks
    29
    Thanked 1 Time in 1 Post
    Quote Originally Posted by SB65 View Post
    Your code isn't working because your .Tooltip paras have no matching rel attribute. Add these and it works.

    However, to avoid that rel issue entirely you could use:

    Code:
    $(function(){
        $("input[type=text]").focus(function(){
            $(this).siblings('.Tooltip').show();
        });
        $("input[type=text]").blur(function(){
            $(this).siblings('.Tooltip').hide();
        });
    });
    which saves you having to set up all the rel attributes.
    Holy ****, did not notice that

    Ok now it works (both ways).

    Thanks


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •