Jump to content

Search the Community

Showing results for tags 'background'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • 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

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


MSN


Website URL


ICQ


Yahoo


Skype


Location


Interests

Found 4 results

  1. I'd like to add some HTML to my Datapage to conditionally change the color of a report's background and text color based on the value of a calculated field. This field finds the number of days left until a project is due. I'd like to change the text color of this field to red and the background to yellow if it is past due (if the days left are negative). I know there are a couple of other pre-existing threads on this topic but for some reason I am having no luck. I pasted these in the source of my header but they had no effect. Let me know if you see anything wrong with my formulas: //for the background <a id="visi[@calcfield:1#]"> <script> var isi = document.getElementById("visi[@calcfield:1#]"); if(isi < 0){ isi.parentNode.parentNode.style.backgroundColor = 'red'; } else{ isi.parentNode.parentNode.style.backgroundColor = '#NoColor'; } </script></a> //for the text <div id="mydiv[@calcfield:1#]"> </div> <SCRIPT LANGUAGE="JavaScript"> if ("[@calcfield:1#]" < "0"){ document.getElementById("mydiv[@calcfield:1#]").innerHTML ="<span style='color:red;'> [@calcfield:1#] </span>"; } </SCRIPT>
  2. Hello everyone, Thank you in advance for reading this and potentially responding. Long story short: I have a simple Pivot data page with item names and months as well as submission status. This is used exclusively to spot records per item/month that have not been "submitted". My stakeholders want to see the status in color. Green for "Submitted", yellow for "Partly submitted", and red for "Not submitted". Whether it's text or background color doesn't really matter much but I prefer background. I think I am capable of adjusting the tones on my own, but I struggle with making the script work in the first place. The specific names of my fields are: Item Name, Month, Status. Here is what I already tried, unfortunately, none of it ever displayed. 1. Adding a Header and Footer or an HTML block on the results page and disabling HTML in the tab Advanced. 2. Taking various scripts from Caspio guides and forums and attempting to change them to fit my field names and Status values. For example, starting with this script from the guide: <span id="[@field:ID#]changeColor1" style="color:#008000"></span> <span id="[@field:ID#]changeColor2" style="color:#0000FF"></span> <span id="[@field:ID#]changeColor3" style="color:white; background:red"></span> <script> if([@field:GPA#]>=3.5 && [@field:GPA#]<=4.0 ) { document.getElementById('[@field:ID#]changeColor1').innerHTML='A'; } else if([@field:GPA#]>=3.0 && [@field:GPA#] <3.5) { document.getElementById("[@field:ID#]changeColor2").innerHTML='B'; } else if([@field:GPA#]>=2.5 && [@field:GPA#]<3.0 ) { document.getElementById("[@field:ID#]changeColor3").innerHTML='C'; } </script> Let's leave the colors as they are since I am confident with that part. Here is my attempt at replacing the values with my own (the only relevant field is Status and it has three values: "Submitted", "Partly submitted", "Not submitted"): <span id="[@field:Status]changeColor1" style="color:#008000"></span> <span id="[@field:Status]changeColor2" style="color:#0000FF"></span> <span id="[@field:Status]changeColor3" style="color:white; background:red"></span> <script> if([@field:Status] = 'Submitted') { document.getElementById('[@field:Status]changeColor1').innerHTML='Submitted'; } else if([@field:Status] = 'Partly submitted') { document.getElementById("[@field:Status]changeColor2").innerHTML='Partly submitted'; } else if([@field:Status]= 'Not submitted') { document.getElementById("[@field:Status]changeColor3").innerHTML='Not submitted'; } </script> And here is how I set it up (please mind that while I tested HTML blocks instead in other data pages and it still didn't work, you can't add them in the pivot table, so I'm limited to the Header and Footer): Nothing changes. I even made a draft table and a data page to test some of the scripts with their original field names but somehow it still didn't work for me. I will be grateful for any help! Thank you, Dominika
  3. I'd like to have a colored table that can highlight past due items. This is the code I have in an HTML block that highlights the row of past due dates and turns the font color red. <div id="visi[@field:lines_Line_Number]">[@field:dates_Customer_Expected_Date*]</div> <script> var isi = document.getElementById("visi[@field:lines_Line_Number]"); if('[@field:dates_Customer_Expected_Date*]' < '[@cbTimestamp*]'){ isi.parentNode.parentNode.style.backgroundColor = 'yellow'; //background color isi.style.color="red"; //font color } else{ isi.parentNode.parentNode.style.backgroundColor = '#NoColor'; } </script> Meanwhile, this is part of the color I have in my header that turns the column headers and background different colors. style type="text/css">[class*=cbResultSetHeaderCell]:nth-child(1) { background: #3377FF !important; } td[class*="cbResultSetData"]:nth-of-type(1){ background-color: #4D88FF !important; } [class*=cbResultSetHeaderCell]:nth-child(2) { background: #1966FF !important; } td[class*="cbResultSetData"]:nth-of-type(2){ background-color: #3377FF !important; } [class*=cbResultSetHeaderCell]:nth-child(3) { background: #0055FF !important; } td[class*="cbResultSetData"]:nth-of-type(3){ background-color: #1966FF !important; } [class*=cbResultSetHeaderCell]:nth-child(4) { background: #cc0000 !important; } td[class*="cbResultSetData"]:nth-of-type(4){ background-color: #E60000 !important; } [class*=cbResultSetHeaderCell]:nth-child(5) { background: #cc0000 !important; } Here is the result of this code: Clearly, the highlight works as it applies to uncolored columns. How do I alter the code so that the highlight is prioritized and will override any existing color?
  4. I need assistance to change the background of an element in a gallery or list report when clicked. And get it's reference ID or info as a parameter
×
×
  • Create New...