@Kristian Klima @Nicolas Grossi no i made a scrooling ticker and I just want to limit who can update it
so it is in HTML and scrolls acros the top of a team page and I want to limit who can update code below if you want to drop it in a confluence page
HTML te second div I want to limit who can see that
<div class="ticker-container">
<div class="ticker-text" id="tickerTextdklAlQ">
Achievements: Ismael stayed sane today with the certs
</div>
</div>
<div class="input-container">
<label for="tickerInput">Enter New Ticker Text</label>
<input type="text" id="tickerInput">
<button onclick="updateTicker()">Update Ticker</button>
</div>
<style>
/* Ticker container style */
.ticker-container {
width: 100%; /* Full width of the container */
overflow: hidden; /* Hide overflow content */
background-color: #006400; /* Background color in hex */
color: #ffffff; /* Text color */
border: 1px solid #ffffff; /* Border style */
box-sizing: border-box; /* Include padding and border in element's total width and height */
height: 50px; /* Fixed height for the ticker */
}
/* Ticker text style */
.ticker-text {
display: inline-block; /* Allow the text to flow inline */
white-space: nowrap; /* Prevent line breaks */
padding-left: 100%; /* Start text off-screen to the right */
animation: scroll-left var(--scroll-duration) linear infinite; /* Continuous scrolling animation */
height: 100%; /* Full height of the ticker */
line-height: 50px; /* Align text vertically */
font-size: 20px; /* Font size */
text-align: center; /* Center the text */
}
/* Keyframes for scrolling effect */
@keyframes scroll-left {
0% {
transform: translateX(100%); /* Start off-screen to the right */
}
100% {
transform: translateX(-100%); /* End off-screen to the left */
}
}
/* Input container style */
.input-container {
margin-top: 20px; /* Space above the input field */
}
/* Style for input text box */
input[type="text"] {
padding: 5px; /* Padding inside the input box */
font-size: 18px; /* Font size for the input */
}
</style>
</head>
<body>
<!-- Ticker container -->
<div class="ticker-container">
<div class="ticker-text" id="tickerTextE5NgX">
Achievements: Ismael stayed sane today with the certs
</div>
</div>
<!-- Input container for updating the ticker text -->
<div class="input-container">
<label for="tickerInput">Enter New Ticker Text:</label>
<input type="text" id="tickerInput" maxlength="350">
<button onclick="updateTicker()">Update Ticker</button>
</div>
<script>
// Function to update the ticker text and animation duration
function updateTicker() {
// Get the new text from the input field
var newText = document.getElementById('tickerInput').value;
// Get the ticker text element
var tickerTextElement = document.getElementById('tickerTextE5NgX');
// Update the ticker text
tickerTextElement.innerHTML = newText;
// Calculate duration based on text length
var duration;
if (newText.length > 200) {
duration = newText.length / 5; // Adjust divisor to make it faster or slower
} else if (newText.length < 100) {
duration = newText.length / 2; // Adjust divisor to slow it down
} else {
duration = 45; // Default duration for text length between 100 and 200 characters
}
// Set the calculated duration for the animation
tickerTextElement.style.animationDuration = duration + 's';
// Clear the input field after submission
document.getElementById('tickerInput').value = '';
}
</script>
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.