Forum in maintenance, we will back soon 🙂
Notifications
Clear all
Topic starter
Hi Admin,
I'd like to add a small drop-down button to my code. However, after adding it, it's not displaying correctly.
Could you please guide me on how to achieve this and get a result similar to the attached image?
This is my code where I want to add a drop-down button.
<style>
<style>
body {
font-family: 'Poppins', PT Sans, sans-serif;
background-color: #F7F7F79;
color: #315a87;
line-height: 1.7;
padding: 20px;
}
.container {
text-align: center;
}
.input-group {
margin-bottom: 20px;
}
input[type="text"] {
flex-grow: 2;
padding: 20px 0px 20px 10px;
border: 2px solid #315a87;
color: #315a87;
border-radius: 4px;
font-size: 14px;
font-weight: bold;
width: 110% !important;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
button {
background: #315a87;
color: #F7F7F7;
border: 0;
padding: 15px 0px 15px 0px;
border-radius: 10px;
margin-top: 30px;
font-size: 16px !important;
width: 110% !important;
font-weight: bold !important;
cursor: pointer;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
button:hover {
background: #0552a6;
}
.result-item {
background-color: #F7F7F7;
font-size: 18px !important;
position: relative;
margin-bottom: 10px;
padding: 15px;
border: 1px solid #315a87;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
transition: box-shadow 0.3s ease;
width: 110% !important;
}
.copy-button {
background: #315a87;
color: #fff;
padding: 5px 10px;
border-radius: 4px;
font-size: 16px !important;
cursor: pointer;
width: 40% !important;
position: relative;
}
.copy-button:hover {
background: #0552a6;
}
.image-container {
margin-bottom: 20px;
}
@media screen and (max-width: 768px) {
body, .container, .input-group {
padding: 10px;
}
}
.hidden {
display: none;
}
</style>
</head>
<body>
<div class="container">
<div class="input-group">
<input type="text" id="inputInput" placeholder="Enter Your Title here..">
<button id="generateButton"> Blog Title Generator </button>
</div>
<div id="imageContainer" class="image-container">
<img src="https://rizmweb.com/wp-content/uploads/2024/03/Rizmweb-Ai-Blog-Title-Generator.webp" alt="Getting Started" style="max-width: 100%;">
</div>
<ul id="titleList"></ul>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const generateButton = document.getElementById('generateButton');
const titleList = document.getElementById('titleList');
const inputInput = document.getElementById('inputInput');
const imageContainer = document.getElementById('imageContainer');
generateButton.addEventListener('click', function() {
const input = inputInput.value;
if (!input) {
alert('Please enter a input.');
return;
}
imageContainer.innerHTML = '<img src="https://rizmweb.com/wp-content/uploads/2024/03/rizmwb-loading-icon-1.gif" alt="Loading" style="max-width: 20%;">';
// Clear existing titles and show the loading GIF
titleList.innerHTML = '';
imageContainer.classList.remove('hidden');
fetch('https://rizmweb.com/wp-admin/admin-ajax.php', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
body: 'action=custom_tool_run&input=' + encodeURIComponent(input)
})
.then(response => response.json())
.then(jsonResponse => {
titleList.innerHTML = '';
if (jsonResponse.success) {
const titles = jsonResponse.data[0].titles;
titles.forEach(title => {
let listItem = document.createElement('li');
listItem.className = 'result-item';
listItem.innerHTML = `<span>${title}</span> <button class="copy-button" onclick="copyToClipboard('${title}')">Copy</button>`;
titleList.appendChild(listItem);
});
imageContainer.classList.add('hidden'); // Hide the image container
} else {
console.error('Failed to fetch titles');
imageContainer.innerHTML = '<img src="https://rizmweb.com/wp-content/uploads/2024/03/error_image.png" alt="Error" style="max-width: 100%;">' +
'<p>Oops! Something went wrong. Please try again.</p>'; }
})
.catch(error => {
console.error('Error:', error);
imageContainer.innerHTML = '<img src="https://accesstomarketing.com/wp-content/uploads/2024/03/error_image.png" alt="Error" style="max-width: 100%;">' +
'<p>Oops! Something went wrong. Please try again.</p>';
});
});
window.copyToClipboard = function(text) {
var textArea = document.createElement("textarea");
textArea.value = text;
textArea.style.top = "0";
textArea.style.left = "0";
textArea.style.position = "fixed";
document.body.appendChild(textArea);
textArea.focus();
textArea.select();
try {
var successful = document.execCommand('copy');
var msg = successful ? 'successful' : 'unsuccessful';
alert('Copying text was ' + msg);
} catch (err) {
alert('Unable to copy text');
console.error('Unable to copy', err);
}
document.body.removeChild(textArea);
};
});
</script>
</style>
Posted : 04/03/2024 6:20 am
Where do you want to add a drop-down? I see the UI already includes a dropdown list, do you wanna add another one?
Please explain more what you want so we can help you better.
Posted : 04/03/2024 10:49 am
You can copy my code if you want. I dont mind 🙂
and can you share a screenshot of the UI to see what is the problem
Posted : 04/03/2024 11:16 am
The first line of the code should be
<head>
instead of
<style>
and the last line of the code should be
</body>
instead of
</style>
This post was modified 8 months ago by SSAdvisor
Regards,
Earnie Boyd, CEO
Seasoned Solutions Advisor LLC
Schedule 1-on-1 help
Join me on Slack
Posted : 04/03/2024 12:01 pm
