Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Do I need to unbind - jquery 1

Status
Not open for further replies.

officemanager2

Technical User
Oct 11, 2007
116
CA
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

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

CSS

Code:
#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

Code:
<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.
 
You've ID'd the div you are applying the onClick function to as clickMe:
Code:
 $("#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.

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

and in your html

Code:
<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
 
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.
 
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.

Code:
<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:

Code:
$(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
 
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.
 
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.
 
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.




----------------------------------
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
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top