469,356 Members | 2,228 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,356 developers. It's quick & easy.

A problem with changing the onclick value.

Hi,

so I was making this photo-gallery, and was using some javascript to make it look a little better, as in not having to refresh the entire page when you click on a thumbnail. I've gotten quite far with it, especially since most of it comes from google searches (I really don't know much about Javascript), but there is one thing that still isn't working, and that's the changing of the onclick value. Now I've read that this is known as a sticky situation, but I can't find a solution myself, and was hoping someone here could help me on.

This is the javascript-code:
Expand|Select|Wrap|Line Numbers
  1. <script language="javascript" type="text/javascript">
  2. function igGrow(id,imgstr,igw,igh,imgstr2,igw2,igh2)
  3. {
  4. var omg = document.getElementById(id);
  5.  
  6. omg.style.width = igw;
  7. omg.style.height = igh;
  8. omg.style.backgroundImage = imgstr;
  9. omg.onclick = Function('igShrink("' + id + ',' + imgstr + ',' + igw + ',' + igh + ',' + imgstr2 + ',' + igw2 + ',' + igh2 + '")');
  10.  
  11. }
  12. function igShrink(id,imgstr,igw,igh,imgstr2,igw2,igh2)
  13. {
  14. var omg = document.getElementById(id);
  15.  
  16. omg.style.width = igw2;
  17. omg.style.height = igh2;
  18. omg.style.backgroundImage = imgstr2;
  19. omg.onclick = Function('igGrow("' + id + ',' + imgstr + ',' + igw + ',' + igh + ',' + imgstr2 + ',' + igw2 + ',' + igh2 + '")');
  20.  
  21. }
  22. </script>
  23.  
And this is how it looks like in the HTML:
[HTML]<a href="#x" onclick="igGrow('imgid1','url(./myrtle/1.jpg)','500px','333px','url(./myrtle/tmb/1.jpg)','106px','70px')" style="position:relative;display:block;width:106px ;height:70px;background-image:url(./myrtle/tmb/1.jpg)" id="imgid1" class="img"></a>[/HTML]

What it does now, is that when you click on a thumbnail, it enlarges into the image. What it's supposed to do also, but that part isn't working, is that when you click on the now larger image, it should make it smaller again.

You can still see an example online with my old code. But there you have to single click to open, and double click to close, and it uses all inline-javascript, making the filesize simply huge.

I would really appreciate all the help I could get.

Niels
Nov 15 '08 #1
7 1595
Markus
6,050 Expert 4TB
I would, in your igGrow() method, grab the original height and width values and assign them to a couple of suitably named variables (origY, origX, or something). Then, in the .onclick in your igGrow, pass the original height and width values as parameters.

Expand|Select|Wrap|Line Numbers
  1. <script language="javascript" type="text/javascript">
  2. function igGrow(id,imgstr,igw,igh,imgstr2,igw2,igh2)
  3. {
  4. var omg = document.getElementById(id);
  5. var origY = omg.style.height;
  6. var origX = omg.style.width;
  7.  
  8. omg.style.width = igw;
  9. omg.style.height = igh;
  10. omg.style.backgroundImage = imgstr;
  11. omg.onclick = Function('igShrink(id, imgstr, igw, igh, imgstr2, igw2, igh2, origY, origX)');
  12.  
  13. }
  14. function igShrink(id,imgstr,igw,igh,imgstr2,igw2,igh2, origY, origX)
  15. {
  16. var omg = document.getElementById(id);
  17.  
  18. // here comes the realisation... *
  19.  
  20. omg.style.width = igw2;
  21. omg.style.height = igh2;
  22. omg.style.backgroundImage = imgstr2;
  23. omg.onclick = Function('igGrow("' + id + ',' + imgstr + ',' + igw + ',' + igh + ',' + imgstr2 + ',' + igw2 + ',' + igh2 + '")');
  24.  
  25. }
  26. </script>
OK, nevermind, I see you're already doing that. Silly me.
Nov 16 '08 #2
Markus
6,050 Expert 4TB
What happens when you do click on the larger image? Do you get any errors?
Nov 16 '08 #3
What happens when you do click on the larger image? Do you get any errors?
The only error that I get with firefox's error console is "omg is null"...
Nov 16 '08 #4
Markus
6,050 Expert 4TB
alert() yourself the value of the id you are passing, to make sure it's the correct value.

I'm not an expert with javascript, so you may have to wait 'till one shows up.

Markus.
Nov 16 '08 #5
Ok, so when I use
Expand|Select|Wrap|Line Numbers
  1. omg.onclick = alert('igShrink("' + id + ',' + imgstr + ',' + igw + ',' + igh + ',' + imgstr2 + ',' + igw2 + ',' + igh2 + '")'); 
it returns the right variables. Only, it already gives the alert box the first time I click an image (when I'm enlarging it), instead of when I would click it again, to shrink it again... I'm not sure it's supposed to be like that.

EDIT:

I was trying all kinds of different things, and suddenly it worked. I have no clue why, but this is the actual working code:
Expand|Select|Wrap|Line Numbers
  1. <script language="javascript" type="text/javascript">
  2. function igGrow(id,imgstr,igw,igh,imgstra,igwa,igha)
  3. {
  4. var omg = document.getElementById(id);
  5.  
  6. omg.style.width = igw;
  7. omg.style.height = igh;
  8. omg.style.backgroundImage = imgstr;
  9. omg.onclick = function() {
  10. igShrink(id,imgstr,igw,igh,imgstra,igwa,igha);
  11. }
  12. }
  13.  
  14. function igShrink(id,imgstr,igw,igh,imgstra,igwa,igha) 
  15. {
  16.     var omg = document.getElementById(id);
  17.     omg.style.width = igwa;
  18.     omg.style.height = igha;
  19.     omg.style.backgroundImage = imgstra;
  20.     omg.onclick = function() {
  21.     igGrow(id,imgstr,igw,igh,imgstra,igwa,igha);
  22. }
  23. }
  24. </script>
  25.  
Thanks for the help, especially that tip about checking with an alert box, cause that's the one that ended up working. By piece by piece changing the alert() into a function() :D
Nov 16 '08 #6
Markus
6,050 Expert 4TB
Ok, so when I use
Expand|Select|Wrap|Line Numbers
  1. omg.onclick = alert('igShrink("' + id + ',' + imgstr + ',' + igw + ',' + igh + ',' + imgstr2 + ',' + igw2 + ',' + igh2 + '")'); 
it returns the right variables. Only, it already gives the alert box the first time I click an image (when I'm enlarging it), instead of when I would click it again, to shrink it again... I'm not sure it's supposed to be like that.

EDIT:

I was trying all kinds of different things, and suddenly it worked. I have no clue why, but this is the actual working code:
Expand|Select|Wrap|Line Numbers
  1. <script language="javascript" type="text/javascript">
  2. function igGrow(id,imgstr,igw,igh,imgstra,igwa,igha)
  3. {
  4. var omg = document.getElementById(id);
  5.  
  6. omg.style.width = igw;
  7. omg.style.height = igh;
  8. omg.style.backgroundImage = imgstr;
  9. omg.onclick = function() {
  10. igShrink(id,imgstr,igw,igh,imgstra,igwa,igha);
  11. }
  12. }
  13.  
  14. function igShrink(id,imgstr,igw,igh,imgstra,igwa,igha) 
  15. {
  16.     var omg = document.getElementById(id);
  17.     omg.style.width = igwa;
  18.     omg.style.height = igha;
  19.     omg.style.backgroundImage = imgstra;
  20.     omg.onclick = function() {
  21.     igGrow(id,imgstr,igw,igh,imgstra,igwa,igha);
  22. }
  23. }
  24. </script>
  25.  
Thanks for the help, especially that tip about checking with an alert box, cause that's the one that ended up working. By piece by piece changing the alert() into a function() :D
Ah, no problem. You've formatted it a bit nicer and removed all those ugly, confusing quotation marks. Maybe that's why it didn't work? Who knows.

Good day.
Nov 16 '08 #7
acoder
16,027 Expert Mod 8TB
The reason why it now works and didn't earlier is that you need to assign a function object to onclick, not a function result. If you just call the function when assigning to to onclick, it will run the function and assign the return value to the onclick. The Function syntax requires the new operator.

See An Introduction to Function Objects for more information.
Nov 17 '08 #8

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

6 posts views Thread by mike | last post: by
5 posts views Thread by Good Man | last post: by
3 posts views Thread by Adam Toline | last post: by
8 posts views Thread by | last post: by
29 posts views Thread by Barry | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by suresh191 | last post: by
1 post views Thread by Marylou17 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.