Question

I am having a problem regarding a jquery dropdownmenu. I have put a “slidedown” and a “delay” effect on it with jquery, but this only works properly if you are hovering over the links from right to left. When you hover the other way, the delay effect takes first priority before the slidedown. I am fairly new to jquery so I am having a hard time understanding this. Does this have anything to do with the html element order?

I have tried adding a “z-index” to the active link element in jquery, I have also tried to “hide” all the underlinks that are not active, but none of it has worked.

Secondly I have a jqueryproblem with the last part of the code, where I am trying to hide the text in the input forms and textarea of my contactform. I have used a code I got from http://cssglobe.com/post/2494/using-form-labels-as-text-field-values-free-script, and everything works fine except the last line when it is supposed to hide the text when you click in the field where the text is.

The jquery code is displayed underneath, and to view the dropdownmenu, visit this site: http://www.vstil.com

$(document).ready(function(){



 $("ul li").mouseenter(function(){

    $("ul",this).stop(true,true).slideDown("slow");


         }).bind("mouseleave",function(){
    $("ul",this).delay(500).slideUp("slow");
 });        



 $('form input[type="text"], textarea').each(function(){
    var theLabel = $(this).prev('label');


    $(this).css("color", "grey").attr('value',theLabel.html());


    theLabel.hide();
    }); 

});

If anyone would like to look at this I would be very greatful!

Best regards

Vegar

Answer 1

try this code. Adding z-index

$(document).ready(function(){
  $("ul li").mouseenter(function(){
    $("ul",this).stop(true,true).css("z-index", 10).slideDown("slow");
  }).bind("mouseleave",function(){
    $("ul",this).css("z-index",2).delay(500).slideUp("slow");
});     

EDIT:

$('form input[type="text"], textarea').on("focus", function() {
  $this = $(this); 
  if ( $this.val() === $this.attr("data-text") ) $this.val("");
});  

Add an attribute to your inputs and textarea data-text=”textOFLabel” and remove the labels.

Example:

<input type="text" value="textOFLabel" data-text="textOFLabel">