Jump to content

Search the Community

Showing results for tags 'gallery'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • Caspio Bridge
    • Caspio Apps for Ukraine
    • General Questions
    • Caspio JavaScript Solutions
    • Tables, Views and Relationships
    • Import/Export and DataHub
    • DataPages
    • Deployment
    • Security, Authentications, Roles, SAML
    • Styles and Localizations
    • Parameters
    • API and Integration
    • Calculations and aggregations
    • User JavaScript and CSS Discussions

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start




Website URL






Found 4 results

  1. Hi, Just wanna share this script I made that changes the background color of each record in a Gallery Report DataPage when clicking the button. For the button: <button onclick="RandomColor()">Try it</button> For the function that's responsible for changing the colors (For this one, there is no fixed set of color because this makes use of randomizers for setting the color code, so all colors possible can show up): <script> function RandomColor() { var x = document.querySelector("section[class*='cbColumnarReport cbReportSection']"); x.querySelectorAll('div > div:nth-child(1)').forEach(e => e.style.backgroundColor = '#' + ('0'+(Math.random()*255|0).toString(16)).slice(-2) + ('0'+(Math.random()*255|0).toString(16)).slice(-2) + ('0'+(Math.random()*255|0).toString(16)).slice(-2)) } </script> Sample DP: https://c1hch576.caspio.com/dp/db26a00071c83c69ac9947d1bfd9 Alternatively, if you only wish to have a predefined set of colors to choose from, you can use this (simply change the colors in the array to your liking): <script> var colors = ["red", "blue", "green","orange","yellow","violet","lightblue","cyan","magenta"]; function RandomColor() { var x = document.querySelector("section[class*='cbColumnarReport cbReportSection']"); x.querySelectorAll('div > div:nth-child(1)').forEach(e => e.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)]) } </script> Sample DP: https://c1hch576.caspio.com/dp/db26a000574d59f66468479b955a Hope this helps!
  2. Hello, I was hoping at some point soon Caspio would enable Lookup tables/views in ListBox type fields so the user could create their own choices for the Listbox (instead of it being hard-typed in in the table Design for that Listbox field). It's been awhile though and I can't wait any longer- so I'm using the older method of js and a text field to store multiple values comma delimited. This works fine except I don't have a way to show the related text values to the stored numerical values in a Tabular or Gallery datapage. This is because the field (text255) only has the option for Text, html, email, url link in a Tabular/Gallery datapage. Multiple values can be shown for a text field on a Details page using js and a ListBox type display. Is there any way to utilize something similar for a Tabular/Gallery datapage? I even tried using a trigger to push those multiple values from the text255 field into a Listbox field (because you can display a Listbox type field in a Gallery datapage) but the trigger won't allow updating into Listbox fields. This is frustrating- having dynamic lookups for Listbox fields would solve this issue entirely.
  3. Hello, am totally new on this. and i am not an IT person in fact either. my account is also on a free plan. I wish I could get helps on how to insert aggregations, in this case Count formula into the header/footer or HTML block in my tabular/gallery datapage. I created a datapage based on a Views. According to Release Notes, Caspio Bridge 9.1 has a new feature to allow insert a field in Aggregations. But, unfortunately I couldn't see the Aggregations/Calculations on DataPage elements wizard. Any helps would be greatly appreciated. Thanks, Adhika.
  4. Hi Guys, Does anyone know how to change the standard Responsive design code (below) for gallery pages so that on trigger the number of columns is reduced not to one column (image) but two? I currently have a gallery page set up with three columns (images) i've wrapped a div round them and set it to width: 100%; so that the images adjust naturally as the screen size reduces, however once the @media clause kicks in the gallery reverts to one image at 100% and that is too big, i'd prefer the columns to reduce to 2 from 3 as set in the datapage. <!-- Responsive Code Begin --> <style> @media (max-width: 768px) { #gallery-single * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #gallery-single table[id^="PageActionsCtnr"] { border-spacing: 0px !important; border-collapse: separate !important; } #gallery-single table[id^="PageActionsCtnr"] td { display: block; width: auto!important; float: left; text-align: left; padding: 1px !important; } #gallery-single table[id^="PageActionsCtnr"] td div { text-align: left !important; } #gallery-single table[data-cb-name^="cbTable"] { border-spacing: 0px !important; border-collapse: collapse !important; margin-bottom: 7px; } #gallery-single table[data-cb-name^="cbTable"] td { display: block; width: 100% !important; float: left; text-align: left; margin-top: 10px; } #gallery-single table[data-cb-name^="cbTable"] td div { text-align: left !important; } #gallery-single table[data-cb-name^="cbTable"] td > div > div[name^="RACtnr"], #gallery-single table[data-cb-name^="cbTable"] td > div > div[name^="RACtnr"]:hover { vertical-align: middle !important; white-space: normal !important; background: transparent !important; overflow: hidden !important; display: inline-block !important; padding: 0px !important; margin: -6px 12px 8px 12px !important; line-height: 0px; position: static !important; width: auto !important; opacity: 1.0 !important; } } </style> <div id="gallery-single"> <!-- Responsive Code End --> Any help will be appreciated.
  • Create New...