Categories
Programming

Never, ever, ever use jQuery wrapInner() method on your body element

Just don’t do it.

http://stackoverflow.com/questions/10727002/jquery-document-ready-fires-twice

Categories
Programming

If an element is visible or hidden using jQuery

Usually you can trust the .toggle function (or .slideToggle) to hide or show whatever you want it to. But occasionally you need to know if something is hidden or shown.

var isVisible = $(‘#giftMsg’).is(‘:visible’);
var isHidden = $(‘#giftMsg’).is(‘:hidden’);

unsolved: jQuery: Can you redefine the click function on a button? (unsolved mystery)

I have defined a click function in the document ready

$(“#submit_request_toggle”).click(function() {
$(‘#submit_request’).slideToggle(500);
});

Later, I do an ajax call and I want to be able to redefine the click so that the link doesn’t work anymore (after my ajax call)

$.ajax({
type: “POST”,
url: “index.php”,
data: “action=submit_request&first_name=” + $(‘#submit_request_form input[name=first_name]’).val() + “&last_name=” + $(‘#submit_request_form input[name=last_name]’).val() + “&message=” + $(‘#submit_request_form textarea[name=message]’).val(),
success: function(msg){

$(“#submit_request_toggle”).click(function() { return false; });
$(“#submit_request”).fadeOut(500, function() { $(“#submit_request_response”).html(msg).fadeIn(); } );
}

For some reason, this line:

$(“#submit_request_toggle”).click(function() { return false; });

doesn’t work– the link still shows the hidden div even after I redefine it. Weird.

Categories
Programming

jQuery function for slightly opaque images

Here’s a jQuery function to make your images slightly opaque (or “disabled” looking), then have them fade in when you rollover them.

Just class your <img> tags with imgfade, like this:

<img src=”someimage.jpg” class=”imgfade”>

And put this in <head> declaration:

<script language=”javascript”>
$(document).ready(function(){
$(“.imgfade”).fadeTo(1, 0.55);
$(“.imgfade”).mouseover(function(){
$(this).fadeTo(“500”, 1);
}).mouseout(function(){
$(this).fadeTo(“500”, 0.55);
});
});
</script>