Jump to content
View in the app

A better way to browse. Learn more.

FMForums.com

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Featured Replies

I'm trying to create a table of data but I need records to populate both rows and records. For example the results should bring back fields to a cell, then the next record populates the next column this continues to the first 3 records. Records 4 through 6 on the next row and so on.

The results on this page will only have a photo and a record name, where the record name falls under the photo. The next record should appear to the right of the previous, then after 3 records, record 4 record should wrap to the next line.

R1 R2 R3

R4 R5 R6

R7 R8 R9

and so on

I tried this many ways. Using photos alone I can achieve this as aligning the photo left will set the each photo in a row then wrap to the next line. It becomes challenging when adding the name field that aligns under the photo.

I also tried creating a table of with a row for the photo and a row for the record name, and aligning the table left. This puts each record in a new table to the right of the other but unlike the aligning just the photo the tables do not wrap but continue out to the right.

R1 R2 R3 R4 R5 R6 R7 R8 and so on

So my thought is possibly there is a creative way with CDML to set 3 record results per row

Any suggestions?

A couple of different methods exist for doing this. Try a search on "rows". I will have more time later today to help search for the solutions.

All the best.

Garry

  • Author

Thanks, I appreciate the assistance. I'm still looking throught the site, but no luck yet.

For reference here's the page

For the moment I'm just using the photos, but need to add the names under each image.

Here is some Javascript which will distribute records across cells and then down rows:

<table><tr>

<script>i = 1 ; nCols = 3 ;

[FMP-Record]

if ((i % nCols) == 0)

{ document.write("<td>[FMP-Field:myimage]<br>[FMP-Field:imagename]</td></tr><tr>") ; }

else

{ document.write("<td>[FMP-Field:myimage]<br>[FMP-Field:imagename]</td>") ; } ;

i++ ;[/FMP-Record]

</script></tr></table>


Hopefully the "<br>" will place the Name under the image.

The site looks very good.

All the best.

Garry

  • Author

THANKS!

Seems to work with text but not with an image. Possible my syntax is wrong in the script. My photos are referenced so I only store a path in the database and use that in an IMG tag rather than using [FMP-Image]..... I just found that easier.

Anyway this is your code with my fields inplace

<table><tr>

<script>i = 1 ; nCols = 3 ;[FMP-Record]if ((i % nCols) == 0) { document.write("<td>

<img src="[FMP-field:Photopath]" width="120" border="0" height="120">

<br>

[FMP-Field:handbag name]

</td></tr><tr>") ; }else { document.write("<td>

<img src="[FMP-field:Photopath]" width="120" border="0" height="120">

<br>

[FMP-Field:handbag name]

</td>") ; } ;i++ ;[/FMP-Record]</script>

</tr></table>

You can see the result here. Oddly the source from this looks like it writes the tables correctly but they do not show up.

If I remove the IMG tag and instead put in an standard text field it works.

Appreciate the help.

You will need to change your quotes; e.g.:

document.write("<td> <img src='[FMP-field:Photopath]' width='120' border='0' height='120'>

Otherwise should be OK.

All the best.

Garry

  • Author

Ah, I thought you for sure your had it there....but still nothing Here's the code again.

<table><tr>

<script>i = 1 ; nCols = 3 ;[FMP-Record]if ((i % nCols) == 0) { document.write("<td>

<img src='[FMP-field:Photopath]' width='120' border='0' height='120'>

<br>

[FMP-Field:handbag name]

</td></tr><tr>") ; }else { document.write("<td>

<img src='[FMP-field:Photopath]' width='120' border='0' height='120'>

<br>

[FMP-Field:handbag name]

</td>") ; } ;i++ ;[/FMP-Record]</script>

</tr></table>

You can see result from previous link

Check the line formatting, some line breaks may have been missed when copying and pasting the code:

<table><tr>

<script>i = 1 ; nCols = 3 ;

[FMP-Record]

if ((i % nCols) == 0) {

document.write("<td><img src='[FMP-field:Photopath]' width='120' border='0' height='120'><br>[FMP-Field:handbag name]</td></tr><tr>") ;

}

else

{

document.write("<td><img src='[FMP-field:Photopath]' width='120' border='0' height='120'><br>[FMP-Field:handbag name]</td>") ;

} ;

i++ ;[/FMP-Record]

</script>

</tr></table>


Hope this looks better.

Garry

  • Author

WORKS! I figured out what was wrong.

Thanks for the help.... this is a technique I will use often.

Glad you like the look of the site.... any site worth doing is worth making look good.

.....ah just got your reply....you saw what I saw.

Thanks again......next trick is building a shopping cart to work with PayPal.... know any and good references to build this?

I used PayPal's cart tutorial from thier site. Once you are all set up with PayPal you customize a cart button and then place it on your item page.They have specific tags for item, description, price, shipping etc that get passed through from your FMP db.

Create an account or sign in to comment

Important Information

By using this site, you agree to our Terms of Use.

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.