...

View Full Version : Resolved [JQUERY] Hover and Blur events on form



hernantz
10-29-2010, 02:43 AM
Hi there,
Im trying to make a paragraph visible when the user is writing on the form.

HTML HERE:


<p 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:


$(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

SB65
10-29-2010, 09:34 AM
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)

hernantz
10-29-2010, 02:18 PM
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.

$(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']

$("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.


<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>

SB65
10-29-2010, 03:05 PM
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:


$(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.

hernantz
10-29-2010, 05:45 PM
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:


$(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 :confused:

Ok now it works (both ways).

Thanks



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum