Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jquery click not working with css 'position :fixed' property

Tags:

html

jquery

css

When i am removing this property it is working fine, why is that so?

Here is the jquery function:

 $(document).ready(function(){
 $('#flogo').click(function(){

   window.alert("clicked");

})
});

Here is Html code:

<div id="fblike" class="fixedlogo"><img src="images/likelogo.png" id="flogo" />    </div>

Here is css:

 .fixedlogo
{
position: fixed; //If i remove this line then jquery is working.
height:50px;
margin-top: -20px;
}
like image 394
DoYou EvenLift Avatar asked May 26 '13 18:05

DoYou EvenLift


People also ask

How do you fix fixed positions?

Set everything up as you would if you want to position: absolute inside a position: relative container, and then create a new fixed position div inside the div with position: absolute , but do not set its top and left properties. It will then be fixed wherever you want it, relative to the container.

How do I keep my Div fixed?

A pinned-down menu The interesting rule here is the ' position: fixed ', that makes the DIV stay fixed on the screen. The ' top: 50% ' and ' right: 0 ' determine where the DIV is displayed, in this case: 50% down from the top of the window, and a constant 0px from the right.

What is the difference between position fixed and sticky?

A sticky element toggles between relative and fixed , depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position:fixed).

How to get current element position in jQuery?

The position() method returns the position (relative to its parent element) of the first matched element. This method returns an object with 2 properties; the top and left positions in pixels.


2 Answers

This is likely an issue with z-index and not jQuery. jQuery wouldn't care what the position is set to. I suspect there is another element overlapping this one and blocking the click event.

like image 180
Brandon Durham Avatar answered Sep 30 '22 15:09

Brandon Durham


Make the position as relative for the div which have clickable items.

position: relative;
like image 26
Nalan Madheswaran Avatar answered Sep 30 '22 14:09

Nalan Madheswaran