User Name Password Register
DaniWeb IT Discussion Community
Home
Forums
Tutorials
Code Snippets
Blogs
Link Directory
All
•
•
•
•
What is DaniWeb IT Discussion Community?
You're currently browsing the JavaScript / DHTML / AJAX section within the Web Development category of DaniWeb, a massive community of 374,179 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 3,401 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Join our community!
Please support our JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting
Views: 1169 | Replies: 4 | Solved
Reply
•
•
Join Date: Feb 2008
Posts: 7
Reputation: adrumsolo4u is an unknown quantity at this point 
Rep Power: 0
Solved Threads: 0
adrumsolo4u adrumsolo4u is offline Offline
Newbie Poster

onclick toggle

  #1  
Feb 29th, 2008
i have been trying to find a way to do it, but i can't seem to think of one. i need to do this:
Help with Code Tags
javascript Syntax (Toggle Plain Text) 
  1. var animElements = document.getElementById("resizercontainer").getElementsByTagName("p")
  2.   for(var i=0; i<animElements.length; i++) {
  3.   animElements[i].onmouseover = widthChange;
  4.   animElements[i].onmouseout = widthRestore;
  5.   }
  6.   function widthChange() {
  7.     if (!this.currentWidth) this.currentWidth = 150;
  8.     doWidthChangeMem(this,this.currentWidth,170,10,10,0.333);
  9.     }
  10.   function widthRestore() {
  11.     if (!this.currentWidth) return;
  12.     doWidthChangeMem(this,this.currentWidth,150,10,10,0.5);
  13.     }

but i want to use .onclick instead of .onmouseover and .onmouseout
i have come up with this:

Help with Code Tags
javascript Syntax (Toggle Plain Text) 
  1. var animElements = document.getElementById("both").getElementsByTagName("p");
  2.   for(var i=0; i<animElements.length; i++) {
  3.     if (currentwidth = 150){animElements[i].onclick = sizeChange;}
  4.     else {animElements[i].onclick = sizeRestore;}
  5.     }
  6.   function sizeChange() {
  7.     if (!this.currentWidth) this.currentWidth = 150;//if no mem is set, set it first;
  8.     doWidthChangeMem(this,this.currentWidth,170,10,10,0.333);
  9.     }
  10.   function sizeRestore() {
  11.     doWidthChangeMem(this,this.currentWidth,150,10,10,0.5);
  12.     }

but i still have not found a way for it to detect if it has been clicked before.
any help would be apreciated
AddThis Social Bookmark Button
Reply With Quote  
•
•
Join Date: Jul 2006
Location: Deptford, London
Posts: 916
Reputation: MattEvans will become famous soon enough MattEvans will become famous soon enough 
Rep Power: 5
Solved Threads: 46
Moderator
Featured Poster
MattEvans's Avatar
MattEvans MattEvans is offline Offline
Posting Shark

Re: onclick toggle

  #2  
Feb 29th, 2008
Right.. not entirely sure what you're after; I can't work out which you want:

1: The first 'click' to perform 'sizeChange' and the next click to perform 'sizeRestore' ( and then to repeat for subsequent clicks ).
2: The click 'down' to perform 'sizeChange' and the release of the click to perform 'sizeRestore'.
3: Something else?

If you want number 1:
Help with Code Tags
Javascript Syntax (Toggle Plain Text) 
  1. //Note: this is NOT the only way to do this.
  2. var animElements = document.getElementById("both").getElementsByTagName("p");
  3.   for(var i=0; i<animElements.length; i++) {
  4.     animElements[i].onclick = sizeChange;
  5.     }
  6.   function sizeChange() {
  7.     if (!this.currentWidth) this.currentWidth = 150;
  8.     doWidthChangeMem(this,this.currentWidth,170,10,10,0.333);
  9.     this.onclick = sizeRestore;
  10.     }
  11.   function sizeRestore() {
  12.     doWidthChangeMem(this,this.currentWidth,150,10,10,0.5);
  13.     this.onclick = sizeChange;
  14.     }

If you want number 2, use the first example, but use mousedown and mouseup instead of mouseover and mouseout.

If something else, be more clear about exactly what you intend to do.
Last edited by MattEvans : Feb 29th, 2008 at 9:32 pm.
If it only works in Internet Explorer; it doesn't work.
Reply With Quote  
•
•
Join Date: Feb 2008
Posts: 7
Reputation: adrumsolo4u is an unknown quantity at this point 
Rep Power: 0
Solved Threads: 0
adrumsolo4u adrumsolo4u is offline Offline
Newbie Poster

Re: onclick toggle

  #3  
Mar 1st, 2008
yes that's exactly what i meant to do. sorry for the confusion of what i said.
now i wish i knew why your code works, because this part:
Help with Code Tags
javascript Syntax (Toggle Plain Text) 
  1. function sizeChange() {
  2. 	if (!this.currentWidth) this.currentWidth = 150;
  3. 	doWidthChangeMem(this,this.currentWidth,170,10,10,0.333);
  4. 	this.onclick = sizeRestore;
  5. 	}
  6. function sizeRestore() {
  7. 	doWidthChangeMem(this,this.currentWidth,150,10,10,0.5);
  8. 	this.onclick = sizeChange;
  9. 	}

does not make sense to me.
i understand
Help with Code Tags 
if (!this.currentWidth) this.currentWidth = 150;
that makes sense, if there is nothing set as current width, set it.

but wonce that is done and the object has been clicked once, it continues.
Help with Code Tags 
	doWidthChangeMem(this,this.currentWidth,170,10,10,0.333);
	this.onclick = sizeRestore;
how does this part work?
the first line changes the current width (with the rest of my code) but how does the second line work when you click again?
it looks as if, when you click it does the size change and then does the size restore at the same time, but that doesn't happen.
i'm sorry if what i'm asking seems stupid, but i would rather understand the code i use, than just copy and paste.
Reply With Quote  
•
•
Join Date: Jul 2006
Location: Deptford, London
Posts: 916
Reputation: MattEvans will become famous soon enough MattEvans will become famous soon enough 
Rep Power: 5
Solved Threads: 46
Moderator
Featured Poster
MattEvans's Avatar
MattEvans MattEvans is offline Offline
Posting Shark

Re: onclick toggle

  #4  
Mar 1st, 2008
Initially, the click handlers for all objects are assigned to the size change function. When you click an object for the first time, the size is changed, and the click handler for that object is re-assigned to the function that performs a size restore. When you click again, the size is restored, and the click handler is assigned to size change again. The statements like: this.onclick = sizeRestore; don't actually call the function; they infact use the name of the function as an identifier. You can tell the difference between a call to a function and a use of the name of a function because a call always has parenthesis even if the function has no arguments, i.e. sizeRestore( );.
If it only works in Internet Explorer; it doesn't work.
Reply With Quote  
•
•
Join Date: Feb 2008
Posts: 7
Reputation: adrumsolo4u is an unknown quantity at this point 
Rep Power: 0
Solved Threads: 0
adrumsolo4u adrumsolo4u is offline Offline
Newbie Poster

Re: onclick toggle

  #5  
Mar 2nd, 2008
Thank you, now it makes complete sense. I realized that it wasn't a normal call to the function, but i assumed it was a different way of calling. I really wish tutorials would explain the code in greater detail. I want to LEARN, not copy and paste.
Reply With Quote  
Reply

•
•
•
•

Only community members can participate in forum threads. You must register or log in to contribute.

Register
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

 

•
•
•
•
•
•
•
•
DaniWeb JavaScript / DHTML / AJAX Marketplace
•
•
•
•
Thread Tools Display Modes
Linear Mode Linear Mode

Similar Threads
Other Threads in the JavaScript / DHTML / AJAX Forum

Advertising Opportunities on DaniWeb
Contact Us - Newsletter Archive - Sitemap - Privacy Statement
All times are GMT -4. The time now is 4:36 am.
Forum system based on vBulletin Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
©2003 - 2008 DaniWeb® LLC