Jump to content

jQuery Hide Show problem


wongadob
 Share

Recommended Posts

Hello, I am trying to use jQuery's .show() and .hide() to show or hide a button attached to a text box (a submit button of sorts). Problem I am experienceing is that it works with the first show and hide, but from then on it never shows again. I believe the reason for this is that the img has been given a size of 0 x 0 pixels with the hide. Is there any way to JUST make it clear the display: none and not affect the size of the img. here is my code HTML then JS. HTML -

<textarea cols='50' rows = '1' class = 'updatetextbox' id = 'updatetext' name = 'updatetext' onclick = 'expandbox()' onblur = 'contractbox()'>enter textr</textarea><button id = 'enterbutton' type ='button' onclick="postMessage()" style="display:none"><img src = 'art/enter-button.png' onmouseover="this.src='art/enter-button-hover.png'" onmouseout="this.src='art/enter-button.png'" alt = 'Enter'/> </button>

Then the JS functions to show or hide the button

function expandbox(){  $('#enterbutton').show();  $('.updatetextbox').animate ({ height: 160 }, 100, function() {   $('#mainbody').animate ({ top: 108+160}, 100, function() {})   });}function contractbox(){  $('#enterbutton').hide();  $('.updatetextbox').animate ({ height: 32 }, 100, function() {   $('#mainbody').animate ({ top: 96}, 100, function() {})   });}

As I say it seems to clear the size of the img but not restore it with show. Better if it left the image size alone anyway and just clear style=display:none.

Link to comment
Share on other sites

The whole point of jquery is for it to be unobtrusive, it is not applied inline to html , I don't see anywhere that would affect the size of button? hide() = display: none; show() = display: inline; or display: block;

$(document).ready(function(){ $('.updatetextbox').click(function(){  $('#enterbutton').show();  $(this).animate ({ height: 160 }, 100, function() {   $('#mainbody').animate ({ top: 108+160}, 100, function() {})   });}); $('.updatetextbox').blur(function(){   $('#enterbutton').hide();  $(this).animate ({ height: 32 }, 100, function() {   $('#mainbody').animate ({ top: 96}, 100, function() {})   });});  });

for the mouseover effect for the image you would need to assign this to the button element itself and target the child img element, as the button only would trigger the mouseover/out

 <button id = 'enterbutton' type ='button' onclick="postMessage()" style="display:none" onmouseover="this.childNodes[0].src='art/enter-button-hover.png'" onmouseout="this.childNodes[0].src='art/enter-button.png'"><img src = 'art/enter-button.png'  alt = 'Enter'/> </button>

OR use remove these completely and again use unobtrusive jquery

$('#enterbutton').hover(function(){$(this).find("img").attr("src", "art/enter-button-hover.png");}, function(){$(this).find("img").attr("src", "art/enter-button.png");});

Edited by dsonesuk
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...