473,694 Members | 2,850 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

A problem with changing the onclick value.

3 New Member
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;displ ay:block;width: 106px;height:70 px;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 1758
Markus
6,050 Recognized Expert Expert
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 Recognized Expert Expert
What happens when you do click on the larger image? Do you get any errors?
Nov 16 '08 #3
Milenec
3 New Member
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 Recognized Expert Expert
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
Milenec
3 New Member
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 Recognized Expert Expert
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 Recognized Expert Moderator MVP
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

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

Similar topics

1
6422
by: Veverita | last post by:
Hi there I'm hoping that someone can help me with a question I have about javascript syntax. I got an html page that uploads an image and some text field to a database. What I'd like to do is modify the content of one of the textfields prior to it being submitted to the database. Specifically, I need to
6
6096
by: mike | last post by:
I have a page that uses a some javascript and it works fine in IE but fails to work in Firefox. Basically what I'm trying to do is have 3 iframes on a page but only displaying one of them at a time. A button is displayed for the two iframes that are not displayed and when the button is clicked, the corresponding iframe is shown and the other two are closed and buttons for the closed iframes are then displayed. Firefox says basically...
3
5880
by: Byron | last post by:
Hi, Javascript confuses me, so I usually limit myself to Dreamweaver's built-in scripts for stuff like imageswaps. But this time I'm trying to write something very simple myself. I do most of my stuff in ASP and PHP so I'm familiar with server-side programming; for some reason JavaScript syntax trips me up. I want to assign a value to a variable according to an onclick event, and then run an if...then on the variable, and according to...
5
14541
by: Good Man | last post by:
Hi there I'm adding form fields on the fly with some javascript DOM programming. I basically just clone a hidden <div>, then adjust node properties to make this new <div> have unique values (style, size, etc.) the original code of the input tag is: <input type="file" onchange="alert('original')" size="30" id="filea" name="filea">
3
2453
by: Adam Toline | last post by:
In reference to the following: http://www.bellecose.com/form.htm At the top of each column there is a box for "All". When one is checked I need to check all of (and only) those boxes underneath. Now, the rub here is that every checkbox on the page (except the "All"s)
13
3022
by: amykimber | last post by:
Hi all, I know I'm doign something really daft, but I can't get this to work... I have a form with a bunch of inputs called ship_owner - why the ? Because I'm submitting this page though php and the put the data into an array in the post.... anywhat. I have a link <a href="javascript:change_class()" >Block mode</a> to
8
3712
by: | last post by:
The problem lies here eval("document.TeeForm.amt.value(S+M)"); S and M suppose to add up and the total suppose to appear on the AMT field but it didn't. Any help? ============================ CODE ==============================================
29
1776
by: Barry | last post by:
I know this is not a php question. If that bothers you, don't respond. If not, I sure could use the advice... I'm using a very abbreviated set of code to show a calendar. The idea is to simply hide the calendar when it loses focus. I'm displaying the calendar in a span tag. When that span loses focus, I recurse through its children. If focus was lost to a child, then I want to keep the calendar visible. I'm using the element.all to...
0
8552
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
9110
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
8971
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
0
8812
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
1
6481
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
4332
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
1
2992
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
2249
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
1970
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.