CODEWITHSUNDEEP
javascriptjquerycss
Lucas Haas
Lucas Haas

Reputation: 341

Detect position and hide a element

I'm trying to hide a button while a div have style positioned as 0.

The whole JS code to explain is: 

$('#left-button').click(function() {
      event.preventDefault();
      $('#myTab').animate({
        left: "+=200px"
      }, "fast");

   });

The code above WORKS. If I click on the button (left-button), the "mytab" div goes to the left. Now, I want to hide the #left-button, when the #myTab has style "left:0".

I tried this:

if ($('#myTab').css('left') == '0') {

   $('#left-button').style.display = "none";

     }

The basic style is

#myTab { width:300px; height:300px; position:relative; left:0; background:#777 }

#left-button {width:200px; height:200px; background:#ccc; }

There's no debug errors but nothing happens. What can I do? If there's another method instead Js, let me know too.

Thank you very much.

http://jsfiddle.net/SgMDa/

Upvotes: 0

Views: 93

Answers (4)

Shaik Mahaboob Basha
Shaik Mahaboob Basha

Reputation: 1082

The main problem in your code is with the line $('#left-button').style.display = "none"; and you have missed 'px' in the if condition if ($('#myTab').css('left') == '0') {

The if should be if ($('#myTab').css('left') == '0px') {

$ object returns jQuery wrapped array / object, what you are trying to access is the actual DOM element, so you have two options to access DOM element:

1. Using jQuery method hide()

 $('#left-button').hide();

or

2. Using DOM property display

$('#left-button')[0].style.display = "none";

NOTE:

The jQuery Object: The Wrapped Set: Selectors return a jQuery object known as the "wrapped set," which is an array-like structure that contains all the selected DOM elements. You can iterate over the wrapped set like an array or access individual elements via the indexer ($(sel)[0] for example). More importantly, you can also apply jQuery functions against all the selected elements.

Official information about jQuery Object

Upvotes: 2

Dhaval Marthak
Dhaval Marthak

Reputation: 17366

You were just missing the unit value px

if ($('#myTab').css('left') == '0px') {
   $('#left-button').hide();
}

And use .hide() instead style.display = "none";

Working Fiddle

Upvotes: 2

Paulo Lima
Paulo Lima

Reputation: 1238

I think it is like you are getting value from left, try using the offset function

if ($('#myTab').offset().left == 0) {
   $('#left-button').hide();
}

Upvotes: 1

Goran.it
Goran.it

Reputation: 6299

.css gives you measurement in px so you should try :

if ($('#myTab').css('left') == '0px') {
   $('#left-button').style.display = "none";
}

Upvotes: 0

Related Questions