What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image
    JotForm Support

    Expand images in table cells when they are clicked (Part 2)

    Asked by abajan on January 07, 2014 at 06:40 AM photo gallery tables photo galleries image gallery image galleries script
  • Profile Image

    Answered by swindells on January 07, 2014 at 03:23 PM

    Hi Wayne

    Happy new year to you too! :-)

    I've been having a go and making the changes you suggested, I also tried to replace on one of my designs (dancing tools) with a new one (Blooming lovely) however it has all gone a bit wrong. I thought I was doing okay then I embedded the form and source code, see here: http://www.sophieswindells.co.uk/Sophie_Swindells/Sophie_Swindells__Trade_Order_Form.html

    Its got many problems, no forms or drop down menus, the title bars have moved (as you mentioned) and also the other new image (Bee in love) is showing at both sizes. 

    Really sorry but please can you help! I'm not sure what i've done wrong.

    Thank you! 

     

  • Profile Image
    JotForm Support

    Answered by abajan on January 07, 2014 at 06:10 PM

    Hi Sophie,

    Everything should be fine now. Please do the following:

    1. Copy this code to your computer clipboard

    2. Replace all of the code in your Gallery1.txt file with what is on the clipboard

    3. Copy this code to the clipboard

    4. Replace all of the code in your Gallery2.txt file with what is on the clipboard

    5. Copy this code to the clipboard

    6. Replace all of the code in your Greeting Card Form Injected CSS.txt file with what is on the clipboard

    7. Copy the form's full source to the clipboard

    8. Remove the old form code (just the form code, not my script!) from the iWeb HTML snippet and paste the updated form code which is currently on the clipboard in its place

    9. Search for this section in the form code and change it to this

    10. Save the web page

    That should do it. However, should you need further help with this, you can always let me know.


    Cheers

  • Profile Image
    JotForm Support

    Answered by abajan on January 07, 2014 at 06:34 PM

    In case there's any confusion, it's really just steps 7 to 10 that need to be done at this point. However, the Gallery1.txt, Gallery2.txt and/or Greeting Card Form Injected CSS.txt files should be updated first when inserting additional images or changing images. (Please see the other thread for guidance on this.)

  • Profile Image

    Answered by swindells on January 07, 2014 at 06:50 PM
    Hi Wayne
    I copied the gallery 1 and 2 code and pasted it in the HTML area on jot
    form then copied and pasted the new CSS code as well. I did that before I
    read your second message and realised I didn't need to ;-0 So then I pasted
    the source code and script into the HTML widget and now the form is a lot
    better than it was but not quite right.
    http://www.sophieswindells.co.uk/Sophie_Swindells/Sophie_Swindells__Trade_Order_Form.html
    For some reason gallery 1 & 2 have merged and gallery 2 has lost its drop
    down options. What did I do wrong there? I'm wondering if its to do with
    the HTML on the jotform site, was I right to put the codes together in that
    box?
    ...
  • Profile Image
    JotForm Support

    Answered by abajan on January 07, 2014 at 07:38 PM

    Hi Sophie,

    My apologies. In my first reply I should have posted Steps 7 to 10 first and then stated that the Gallery1.txt, Gallery2.txt and Greeting Card Form Injected CSS.txt files should be updated for future use.

    Anyway, the code in the Gallery1.txt file should be copied to the first HTML area and that in Gallery2.txt should be copied to the second HTML area. Currently in your form builder the second gallery (the Christmas cards) is correct but the first contains the tables for both galleries. I'll go in and correct it and notify you when I'm finished.


    Wayne

  • Profile Image

    Answered by on January 07, 2014 at 07:48 PM

    Okay, everything should be okay now. Just do steps 7 to 10 and let me know if you encounter any difficulties.

  • Profile Image

    Answered by swindells on January 08, 2014 at 06:34 AM
    Hi Wayne
    That sorted it out, thank you! Just so I know, where do I find the HTML
    area for gallery 2 in the form builder? I can find the gallery 1 by
    clicking on any of the images then the HTML button appears, but I don't
    know about gallery 2 as nothing happens when I click on the christmas
    images.
    By the way, there seems to be a problem with this thread, I can email you
    directly from my email account but when I click 'view this thread on
    Jotform support' to take me to the webpage, the Jotform page flickers and
    doesn't show any writing at all, its blank. Is there any way to sort this
    out? Cheers :-)
    ...
  • Profile Image
    JotForm Support

    Answered by abajan on January 08, 2014 at 07:08 AM

    Hi Sophie,

    With the form loaded in the form builder, if you scroll all the way down to the bottom, you should see part of Gallery 2:


    Click any part of the gallery and then the HTML button at the top of the form builder:


    As to the other matter, I don't know what could be causing it. I know of other users who have encountered the same flickering page issue but I'm uncertain if they were able to resolve it. Do the solutions suggested in this thread work?

  • Profile Image
    JotForm Support

    Answered by abajan on January 08, 2014 at 07:14 AM

    If you're not able to access Gallery 2, remove the injected CSS. (You can always replace it with what is in your Greeting Card Form Injected CSS.txt file.)

  • Profile Image

    Answered by swindells on January 08, 2014 at 09:38 AM
    Hi, I can see the HTML for gallery 2 now, thank you! There is still a
    problem with this new thread and the flickering issue. I looked at the link
    you posted and they suggested refreshing the browser, i've tried that and
    it doesn't work. It means I can see your writing here in my gmail account
    but can't see any images that you post and can't look back at previous
    entries, so could we please start a new thread and see if that helps?
    I asked you a couple of messages ago if there's any way to insert an image
    between two current images in gallery 1. is it fairly straightforward? Do
    you think you could just point me in the right direction. This would be a
    really useful thing to know as I add more images.
    Thank you :-)
    ...
  • Profile Image
    JotForm Support

    Answered by ardy0689 on January 08, 2014 at 11:39 AM

    Hello Sophie, I think the cause of that is because this thread was recently set to Private Mode. Only you and JotForm support members can access this forum thread.

    So if you want to access the link and prevent the flickering, please login to your account "swindells" before access the thread link below:

    http://www.jotform.com/answers/313419-Expand-images-in-table-cells-when-they-are-clicked-Part-2-#10

    If that does not help, please clear your browser's caches and try to login from the same domain of the thread link I gave. In this case login from "http://www.jotform.com" should in case you are using a different domain. Sometimes it prevents the flickering if you are accessing a private thread on the same domain.

    Thank you

  • Profile Image

    Answered by swindells on January 08, 2014 at 12:35 PM
    Hello, unfortunately that doesn't work, i'm logged into my Jotform account
    and i've cleared the browser cache. I think the best solution would be to
    make this recent thread public rather than private and hopefully i'll be
    able to see it then. Thanks for your help.
    ...
  • Profile Image
    JotForm Support

    Answered by KadeJM on January 08, 2014 at 02:54 PM

    No problem Sophie, I have gone ahead and made the thread public per your request so that it is much easier for you to locate and access. 

  • Profile Image

    Answered by swindells on January 08, 2014 at 03:20 PM

    Thank you that's better, i can see it now! 

  • Profile Image

    Answered by swindells on January 09, 2014 at 06:38 AM

    Hi Wayne

    I realised that one of the codes for the designs was wrong (Flying away) It was labelled SS06 instead of SS18. I'm not sure when that went wrong but didn't notice before. I changed the number in the HTML code but a red line appeared under it and now no image is showing on the form. I think you put those images in and then I cloned the form so i'm not sure how to change the image source to the correct code and restore the image. Please could you advice me on this. Can you see a clone of my current form?

    Many thanks.

     

  • Profile Image
    JotForm Support

    Answered by abajan on January 09, 2014 at 08:29 AM

    Hi Sophie,

    There's no need to change the image's URL because that info is neither seen by the user nor submitted by them. However, it appears that everything is back to normal at your web page where the form is embedded.

    To change Flying Away SS06 to Flying Away SS18, please load the form in the form builder and do the following:

    1. Delete the injected CSS. (Otherwise the dropdown selectors below Gallery 1 would be inaccessible)

    2. Scroll down until you get to the selector labelled Flying Away SS06 and rename it Flying Away SS18

    3. Copy this updated code to your Gallery 1.txt file and save it. (The paragraph with the text Flying Away SS06 has been changed to Flying Away SS18. That's the only change in the code)

    4. Click anywhere in Gallery 1 and then click the HTML button in the toolbar:


    5. Remove all of the content from the box so that it looks just like the one above

    6. Paste [Ctrl+V] the same code which was copied to the Gallery 1.txt file in Step 3 into the box and click OK

    7. Open the Greeting Card Form Injected CSS.txt file and copy all of its code to your clipboard

    8. Paste the code into the Inject Custom CSS section of the form preferences

    9. Look back at my reply above submitted on January 7 and do steps 7 to 10


    Earlier you had asked about inserting a new image between two existing images. It's kind of a tricky procedure and the slightest mistake can really screw things up. Nevertheless, sometime later today I'll do my best to explain how to do it.


    Ciao for now

  • Profile Image

    Answered by swindells on January 09, 2014 at 01:27 PM

    That worked great, thank you! The mistake I made before was changing the URL to a different number, I should have realised I didn't need to do that, sorry. Anyway, the more changes I make the more familiar i'm becoming with the way the form works. Regarding inserting a new image between existing ones. that would be a very useful thing to learn because as I design more images they will need to be moved around a bit in time and i'm prepared for it to be a bit tricky and slow! When you have the time, that would be very helpful. 

  • Profile Image
    JotForm Support

    Answered by abajan on January 09, 2014 at 06:41 PM

    Hi Sophie,

    It may be best to read through the following before doing anything. (Some of the screenshots will need to be clicked to see them clearly.) It may also be a good idea to clone your form and practice inserting images there before editing the original form.

    Both galleries can hold a maximum of 60 images and there are currently 36 images in Gallery 1 (the last being "Bee in Love SS49"). So, there's room for 24 more there. Let's say you wanted to insert "Tandem in the Desert SS99" between "Cat Stack SS45" and "Dog Lady SS46". Assuming the new image has already been uploaded and that its file name adheres to the naming convention given in the first thread, here's what you would do:

    1. Delete the form's injected CSS, so that the dropdown selectors can be accessed in the form builder

    2. Click the label of the "Bee in Love SS49" selector twice. (The first click will select the field and the second will select its label)


    3.
     Hit [Ctrl+C] to copy the label to your clipboard

    4. Click the label of the next dropdown ("Gallery 1 Card 37") twice and when it becomes selected hit[Ctrl+V] to rename it "Bee in Love SS49", so that you now have two dropdowns with that label

    5. Click the label of the "Love Birds SS39" selector twice and copy it to your clipboard

    6. Click the label of the next dropdown (the first "Bee in Love SS49" label) twice and hit [Ctrl+V] to rename it "Love Birds SS39", so that there are now two dropdowns with that label

    7. Repeat the above procedure (click twice > copy > click twice > paste) until "Dog Lady SS46" has been pasted over "Birds & Berries SS42" and you have two dropdowns labelled "Dog Lady SS46"

    8. Click the  first "Dog Lady SS46" label and rename it "Tandem in the Desert SS99"


    That takes care of updating the dropdown selectors but the gallery has to be updated too. Otherwise, when the CSS is re-inserted and it moves the selectors back into the gallery, all of the selectors after that for "Cat Stack SS45" will be displayed in the wrong cells. Plus, the "Tandem in the Desert SS99" image and the paragraph containing its label will be missing. Gallery 1 currently has 12 rows displayed and all of them are full. Therefore, an extra row needs to be displayed to accommodate the "Bee in Love SS49" image when the "Tandem in the Desert SS99" image displaces all of the images which follow it. (Each gallery has a total of 20 rows but the commented out rows are not shown on the form.) Here's how to add the new image and its label:

    9. Except for the closing table tag, all of the code at the bottom of your Gallery 1.txt file is commented out. Cut [Ctrl+X] the opening comment and paste it immediately after the next closing table row (tr) tag. (See this link. Cut it from the first highlighted line and paste it after the closing tr tag in the second highlighted line.) This inserts a new blank row into the Gallery 1 table.

    If the Gallery 1 code is carefully examined you'll see that each row is comprised of three (3) cells. (In HTML, table cells are marked up with table data [td] tags.) Since an extra image (and the paragraph containing its label) is to go in the cell that currently contains the "Dog Lady SS46" code, the "Dog Lady SS46" code must be moved to the cell currently containing the "Birds & Berries SS42" code and the "Birds & Berries SS42" code has to be moved the cell currently containing the "Treehouse SS35" code and so on. It therefore follows that eventually the "Bee in Love SS49" code will be pushed into the first cell of the newly displayed row. This is what the following procedure will accomplish but we'll start by moving the code presently occupying cell No. 36 ("Bee in Love SS49") to cell No. 37:

    10. (See this link) In the Gallery 1.txt file, copy all of the first block of highlighted code and paste it over the second highlighted block


    11.
     (See this link) Copy all of the "Love Birds SS39" td code and overwrite the second part of the highlighted block ("Bee in Love SS49")

    12. Continue copying each block of td code to the next td block until you have two blocks of table data each containing code for "Dog Lady SS46" (highlighted here.) Care should be taken to neither copy the wrong code nor overwrite (paste over) the wrong code. Note that each table cell starts with an opening td tag and ends with a closing td tag. (Each closing td tag contains a slash. The opening tags don't.)

    13. Change the first "Dog Lady SS46" td block to this (the height value may need editing but this is just meant to be an example)

    14. Save the Gallery 1.txt file and copy its contents to your clipboard

    15. In the form builder, click anywhere in Gallery 1 and then the HTML button pictured in my previous reply and replace all of its code with what is on the clipboard

    16. Before re-inserting the Injected CSS, its sixth rule needs to be updated to this. Notice that #id_143, has been removed from the first part of its selector. id_143 is the ID of the form line containing the dropdown for cell No. 37. Since that cell now contains an image ("Bee in Love SS49"), the dropdown for that image should be displayed. (The rule's declaration of display: none; hides all of the elements whose IDs are listed in its selector)


    After removing #id_143, from the selector in your Greeting Card Form Injected CSS.txt file, save the file, copy its contents to your clipboard and paste it into the Injected CSS section of the form preferences

    17. Save the form and then follow steps 7 to 10 in my reply on January 7 above

    And that's how to insert a new image between two existing images! If anything's unclear, please let me know.


    Cheers

  • Profile Image
    JotForm Support

    Answered by abajan on January 09, 2014 at 06:55 PM

    Sophie,

    This link shows the last image better.

  • Profile Image

    Answered by swindells on January 14, 2014 at 01:45 PM

    Wayne, your amazing! Thanks so much for the explanation, i'm going to try it out later this week and will let you know how it goes. For now I have a temporary glitch with the form thats currently on my website, its missing the drop down quantity options on most of the designs, heres the link: http://www.sophieswindells.co.uk/Sophie_Swindells/Sophie_Swindells__Trade_Order_Form.html

    Please can you point me to the right place in the code to sort that out, i'm not sure why that's gone wrong.

    Thank you! 

     

  • Profile Image

    Answered by on January 14, 2014 at 08:11 PM

    Sophie,

    Somehow three elements in your form got moved into wrong positions. When I cloned the form and deleted its injected CSS, I saw that the Snowmen SS27 and Penguins SS47 selectors (dropdowns) were located between the heading for Gallery 1 and the gallery:


    That's quite far from where they ought to have been. The page break was also far from where it should have been:


    Once I moved them into the correct positions and re-inserted the CSS, the selectors appeared in both galleries correctly.

    Here's what to do:

    1. Load the form in the form builder and delete the injected CSS

    2. Right-click the Snowmen SS27 selector and then click Manage Multiple Fields
     

    3. The wizard should pop up with the Snowmen SS27 field selected. Hold down the Ctrl key and select the Penguins SS47 field. Both fields should now be highlighted in yellow, indicating that they're selected:


    4. Unfortunately, it seems like the page break can't be moved like that. Also, clicking and dragging the actual page break only worked part way. As such, you will need to right-click the page break and then click Move Down


    Do that repeatedly until the page break lies between the last selector for Gallery 1 (currently labelled Gallery 1 Card 60) and the header for Gallery 2:


    5. Follow steps 5 to 10 in my reply in this thread on January 7

    Do let us know how everything works out.


    Thanks

  • Profile Image

    Answered by swindells on January 16, 2014 at 01:50 PM

    That's done the trick! I will know next time when that sort of problem occurs how to reposition the different elements. Thank you! :)

  • Profile Image

    Answered by swindells on January 22, 2014 at 09:40 AM

    Hello. I've just realised that my form's reverted to the old version where the cursor hovers over the images and expands them rather than allowing users to click on the image (with a hand symbol) and expand them. I can't seem to work out why that is? What did I change that would have made it revert? Please can you help me find the code to remove/replace for this. 

    Here's the link to the URL: http://www.sophieswindells.co.uk/Sophie_Swindells/Sophie_Swindells__Trade_Order_Form.html

    Many thanks! 

  • Profile Image
    JotForm Support

    Answered by jonathan on January 22, 2014 at 10:00 AM

    Hi Sophie,

    Do you still have a separate copy of the older version of the page, wherein the image are clickable?

    I confirm that on the current web page you mentioned http://www.sophieswindells.co.uk/Sophie_Swindells/Sophie_Swindells__Trade_Order_Form.html 

    it is the mouse hover event that is triggering the pop-out image and no need to click.

    If you can still have another page where it used to work as intended before we could probably compare what changes had happen.

    Currently, I am having a challenge figuring out this highly customize form as it was our colleague Wayne who created the original codes. 

    I am sure Wayne will also respond to you here as soon as he is back online. You can also wait for his response.

    If you can provide another version of this page where it works before, the other support members can also spend time checking it, and probably find the reason for the sudden revision.

    Thanks.

     

     

     

  • Profile Image

    Answered by swindells on January 22, 2014 at 02:06 PM

    Hello. I think it may be part of the source code that needs to change but i'm not sure what went wrong and don't want to risk messing it up. It really is a highly customized form and Wayne is the guy who know's best as he created it so think i'll wait for his response. Thank you.

  • Profile Image
    JotForm Support

    Answered by abajan on January 22, 2014 at 03:13 PM

    Sophie,

    The injected CSS needs updating. Please do the following:

    1. Replace the code in your Greeting Card Form Injected CSS.txt file with that found at the link in Step 5 of my reply on January 7, 2014

    2. In your iWeb snippet that contains the form code and my script, replace the injected CSS with the same code you pasted into the Greeting Card Form Injected CSS.txt file. Replace the injected CSS only, not the other one. The injected CSS can be found between the two comments:

    /* Injected CSS Code */

    The injected CSS lies between the comment above and below

    /* Injected CSS Code */

    3. Save the change

    That should fix the problem because when I downloaded your web page and replaced the injected CSS with this, when the mouse was hovered over each image the cursor turned into a hand and the image only expanded when clicked.


    Cheers

  • Profile Image

    Answered by swindells on January 24, 2014 at 06:30 AM

    Thank you Wayne, that worked! 

    I'm still not sure why it is that the CSS changed back to the old version but at least I know where to locate the problem if it happens again.

    Thanks for being patient with me on this. ;-)

  • Profile Image
    JotForm Support

    Answered by abajan on January 25, 2014 at 06:46 AM

    Hi Sophie,

    I'm glad to hear that the form is now working correctly. The CSS may have reverted to the old version because the code in the Inject Custom CSS section of the form preferences


    wasn't replaced with what was in your Greeting Card Form Injected CSS.txt file after the hover behavior was changed to requiring clicks to show the large images.


    Cheers