CODEWITHSUNDEEP
javascriptjqueryhtml
NeHatchick Verma
NeHatchick Verma

Reputation: 121

jQuery find function doesn't work

I'm trying to do a pop-ip type thing using javascript and for some reason it doesn't work. It shows no errors either.

<div style="cursor:pointer;" onclick="displayTickets('2013-12-27')" 
 onmouseover="displayMenu(this)" 
 onmouseout="hideMenu(this)" 
 bgcolor="#CCCCCC" width="14%" height="64" align="left" valign="top">
    27 Pre New Years Hotel Takeover
    <div class=".cPopUp" id="cPopUp5" style="position:absolute;z-index:1000;width:384px;height:192px;background-color:rgba(0,100,0,.8);left:0;top:0;right:0;padding:8px;text-allign:left;">
        <h4>Pre New Years Hotel Takeover</h4>
    </div>
</div>

.cPopUp is obviously the pop up I want to .show()/.hide()

this is javascript:

function displayMenu(el)
{
$(el).find(".cPopUp").show(500);

}

function hideMenu(el)
{
    $(el).find(".cPopUp").hide(500);
}

if I do

 $(el).hide(500);

It hides the whole thing, so I know that works well, but I guess it's not finding anything?

Upvotes: 0

Views: 82

Answers (4)

Kelvin Marques
Kelvin Marques

Reputation: 11

When setting a class for a tag never use the dot before the class name. Only uses dot when manipulating the selector.

<div class="cPopUp"></div>

Try it!

Upvotes: 1

C. S.
C. S.

Reputation: 813

Your error is how you write the className in the HTML:

<div class="cPopUp" id="cPopUp5" style="position:absolute;z-index:1000;width:384px;height:192px;background-color:rgba(0,100,0,.8);left:0;top:0;right:0;padding:8px;text-allign:left;">
    <h4>Pre New Years Hotel Takeover</h4>
</div>

There should not be a "." when you write the className in the html, only when you declare it in the CSS

Upvotes: 1

varfoo
varfoo

Reputation: 228

It should be class="cPopUp" instead of class=".cPopUp"

Upvotes: 0

Felix Kling
Felix Kling

Reputation: 816262

The class name is

class=".cPopUp"

i.e. it literally contains a period. You would have to use .\.cPopup as selector.

But that's horrible, you should change the HTML to

class="cPopUp"

instead. This allows you to use the current selector (.cPopup, the class (.) with name cPopup).

Upvotes: 7

Related Questions