Do I need to unbind - jquery 1

[officemanager2]

I've been working on a simple rollover based on a book I've been reading. In their example there is only one image that drops down and I'm working on a page where there are four separate images that drop down. It seems I may need to add a line to unbind once the initial click occurs, but I'm really not sure. I figured that I've ID'd the function as 'clickme' and should be able to call it as often as needed.

Any assistance is appreciated.

Jquery

		$(document) .ready(function(){
				$("#clickMe"). click(function() {
				$("img") .fadeIn(1000);
				$("#picframe") .slideToggle("slow");
											  
			});
		});

CSS

#BG {
	background-image:url(BG.png);
	background-repeat:no-repeat;
	width:1000px;
	height:800px;
}
	
#gridwrapL{
	width: 1000px;
	height: 800px;

}

#clickMe, #picframe{
	padding: 2px;
	font-family: 'Trebuchet MS', Verdana, Helvetica, Arial, sans-serif;
	color: #000;
	text-align: center;
	width: 50px;
	height: 50px;
	display: block;
}

#picframe {
	border-width: 0px 2px 2px 2px;
	border-color:  none #444 #444 #444;
    display: none;
	width:205px
	
	}

HTML - not complete but I believe this is all of the relevant information

<div style="width: 100px; height:100px; float:left;"> <!--begin of pdh 9-->

<div style="width: 48px; height:48px; float:left;">
<div style="float:left;" id="clickMe"><span id="picframe"><img src="PDH9.png" /></img></span></div>
</div>

</div> <!--end of pdh 9-->

<script src="jquery-1.7.1.min.js"></script>
<script src="infodrop.js"></script>

Too add to the enjoyment I was hoping to add an 'x' (in the upper right)to close the window as oppose to just clicking on that as the end users are use to seeing an x and may not figure out to just click on the image again.

 

[vacunita]

You've ID'd the div you are applying the onClick function to as clickMe:

 $("#clickMe"). click(function()

Since element ID's must be unique you can't add another element with that same ID, as Javascript and by extension jquery will only ever take the first element they find with the specified ID and ignore the rest.

Perhaps it would be better to use a class to identify the elements you want to have respond to the onclick action.

 $("[COLOR=white red].[/color]clickMe"). click(function()

and in your html

<div style="float:left;" [COLOR=white red]class[/color]="clickMe">

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

 

[officemanager2]

Hi Phil: That does make sense, but when I made the changes to class none of the dropdowns worked.

I see what you mean about the ID though. Is this a case of keeping the ID and adding an class to it like in a cascade where one would have at item that is formatted with an ID and then have the p tag be assigned a class such as:

#box {width:500px;}
#box.p {color: #000;}

So maybe if the

#clickMe, #picframe{

}

were presented as

#clickMe .picframe

This could be way off though.

 

[vacunita]

Your CSS doesn't matter here, what needs to match are the classes or ID's given to the elements, and what you are telling jquery to do.

Since you want to have several of these fades and slides for I'm guessing different images, I would make them all classes.

<div style="width: 100px; height:100px; float:left;"> <!--begin of pdh 9 -->

   <div style="width: 48px; height:48px; float:left;">
   <div style="float:left;" class="clickMe">Hello<span      class="picframe"><img class="imgfade" src="phone3.jpg" /></span>    </div>
   </div>
   </div>

and then your jquery would be:

$(document) .ready(function(){
                $(".clickMe"). click(function() {
                $("img.[COLOR=green]imgfade[/color]") .fadeIn(1000);
                $(".[COLOR=green]picframe[/color]") .slideToggle("slow");
                                              
            });
        });

This of course is quite broad and general, so basically every img and every element with a class of .picframe in your page will have those actions/animations applied to them at the same time when you click on the element with a class of clickMe.

I'm assuming the book will correct that as it moves along.













----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

 

[officemanager2]

Hi Phil: Well at this point I'm moving beyond the book. I've covered up to the point of AJAX which I don't have much experience with so I'm now trying to apply what I've ''figured out' so far.

What is happening when I make the changes you suggest is as follows:

When I view in a browser (I use firefox) the image that should appear upon the click is already present. It should not appear, or at the very least the goal is to have it appear once clicked.

When the I click on where the image appears from it rolls up and disappears.

Once it disappears though it will not appear again unless the browser is refreshed.

I changed the class back to an ID and it worked as it should - does not appear until clicked and disappears when clicked again. I'm not sure why changing to a class causes the image to appear, unless it is something in the browser.

I do understand your point about using a class instead of an ID because there are/will be nine of these dropdowns on the page. I'm reviewing the chapters that I'm basing this on again to see what/if I've missed. I'm open to suggestions though.

thanks for your time.

 

[officemanager2]

Hi Phil: Foolishly I did not change the CSS sheet to reflect the change from ID to class!

I now need to figure out how set things up so only one drop down occurs at a time.

I'll start by using 'this' but I may have to post again to get everything working properly.

thanks for your help.

 

[vacunita]

Yes, use "this" to specify the context in which the action should occur.

I suggest you wander around the jquery website and the documentation there to understand how it works.

http://api.jquery.com/jQuery/

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech