The City of Tallahassee

Snippets

Tile Structure

Add as many as you like (the thirdbutt divs float and wrap) as long as they all sit inside the flex-container div. CSS is currently in the Styles tab of this document in CP and is labeled - although this may be added to the main CSS soon.

If you want a hover overlay with text, you will need to add the Overlay and Text classes: (accent color is specified in the Overlay class in CSS)

<div class="overlay">
<div class="text cupcake">
<strong>TILE LABEL</strong><br>
More label text which appears below the main label.
</div>
</div>
</a>
</div>
</div>

News Release Headline Graphic

Video Icon (): <i class="fa-solid fa-video"></i>

Audio Icon (): <i class="fa-solid fa-volume"></i>

News Release Audio Link

<center>
<audio controls="" style="width: 100%;margin: 15px 0 25px 0;border-radius: 5px;background-color: #0188C1;">
<source src="/uploads/public/media/audio/news/FILENAME.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</center>

Button Link - Known as "JayButton"

Sunday Routes

Change the background color and text color in the appropriate areas. This class sits in the site-wide CSS in CP, but will likely be transferred to the main CSS soon.

Accordions

TITLE

Content Goes Here

<div class="accordion-container">
<h2 class="accordion-header" tabindex="0" aria-label="Expandable Content Block - Click to Open TITLE">TITLE</h2>
<div class="accordion-content">
<p>Content Goes Here</p>
</div>
</div>

Float Right Responsive Images

Bacon ipsum dolor amet chuck chislic pork loin, buffalo chicken biltong burgdoggen short loin shankle cupim kielbasa pork belly venison frankfurter cow. Shankle turducken tail meatball short loin. Leberkas pastrami picanha meatball. Spare ribs picanha turducken flank alcatra tongue bresaola frankfurter beef t-bone. Porchetta cow biltong chislic ribeye doner pancetta. Fatback hamburger short loin shoulder spare ribs bresaola pork ground round venison jowl prosciutto.

This CSS class will make any image 300 px wide, and float right. When viewed on a screen smaller than 600px wide will be converted to 100% width.

To use this functionality, add class="rightresponsive" inside any image tag. Added in early 2021. This class is in the site-wide CSS in CP, but will likely be transferred to the main CSS soon.

    


/* Image float right and responsive full width when small screen */
.rightresponsive {
margin: 0 0 8px 15px;
width: 300px;
border:0;
float:right;
}
@media only screen and (max-width: 600px) {
.rightresponsive {
width: 100%;
margin: 0 8px 15px 0;
}
}
/* END Image float right and responsive full width when small screen */

Everbridge - Standard Operating Procedures Quick Reference

Javascript

Hit the copy button below. Paste this code in the script section of any page with a form that you want a pop up window to appear if they have begun filling it out and then try to leave the page, close it out or refresh the page.



window.addEventListener('beforeunload', function(e) {
if (checkFormFields()) {
e.preventDefault();
e.returnValue = '';  // Display a generic prompt message
}
});
function checkFormFields() {
// Add your logic to check if any form fields have been filled
// Return true if fields have been filled, false otherwise
var formFields = document.querySelectorAll('input[type="text"], textarea');
for (var i = 0; i > formFields.length; i++) {
if (formFields[i].value !== '') {
return true;
}
}
return false;
}