I am looking for a placeholder that can hold changing values:
<input type="text" placeholder="Search by Name, Order Number and Location" style="width: 300px" />
<input type="text" placeholder="Search by Name" style="width: 300px" />
My goal is to show all the placeholder texts in the Input field. It's fine to decrease the font size, as long as it's done dynamically.
Any suggestions?
var increment = 0.1;
setInterval(function() {
// Loop through all input elements
$('input').each(function() {
// Only adjust font-size if input value is empty
if ($(this).val() === '') {
// Create a clone
$clone = $('<span></span>')
.appendTo('body')
.addClass('inputClone')
.text($(this).attr('placeholder'));
// Modify font size of clone
var fontSize = $(this).css('font-size');
do {
fontSize = parseFloat($clone.css('font-size')) - increment;
$clone.css({
'font-size': fontSize
});
} while ($clone.width() > $(this).width());
// Maintain input field dimensions
$(this).css({
"width": $(this).width() + "px",
"height": $(this).height() + "px"
});
// Change input font-size
$(this).animate({
'font-size': fontSize
});
// Remove clone
$clone.remove();
} else {
// Reset input field back to normal
$(this)
.finish()
.clearQueue()
.attr('style', function(i, style) {
// Remove inline style for font-size
return style.replace(/font-size[^;]+;?/g, '');
});
}
});
}, 100);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<table border="1">
<tr>
<td>Name:</td>
<td>
<input type="text" id="name1" placeholder="Search by Name, Order Number and Location" />
</td>
</tr>
<tr>
<td>Name:</td>
<td>
<input type="text" id="name2" placeholder="Search by Name"/>
</td>
</tr>
<tr>
<td>New Field:</td>
<td>
<input type="text" id="newField" placeholder="New Field"/>
</td>
</tr>
</table>
</form>Create an additional input field and append it
I am currently monitoring events of the type $routeChangeError within a run block in my application. $rootScope.$on("$routeChangeError", function (event, current, previous, rejection) { if (!!previous) { console.log(previous); $locati ...
I am currently trying to fetch API JSON data for a weather widget, but unfortunately it is returning null. While I am able to retrieve the JSON data successfully, I am struggling to handle this value. Below is my HTML code snippet: <html> <head& ...
Just starting to explore Jquery and looking for some guidance to get me started :) Question: I'm facing an issue with a cart total price that is displayed in a different part of the page using clone(). I want this cloned price to automatically update ...
I am dealing with two checkboxes on my website. <input class="checkbox1" type="checkbox" name='1' id="example1" value="example1"/> and <input class="checkbox2" type="checkbox" name='2' id="example2" value="example2"/> I ...
My Delphi application is sending Json data to the embedded Edge browser, but Javascript is reporting a parser error. https://i.sstatic.net/Z2BUq.png https://i.sstatic.net/0IIzJ.png When I modify the value for Sender.DefaultInterface.PostWebMessageAsJson ...
In my Vue.js application, I have several components that are structured similarly and are all throwing the same error: TypeError: Cannot read property 'id' of undefined I initially attempted to resolve this issue by enclosing {{ jobs[0].id }} w ...
Exploring CSS shape design, I am aiming to create a classic bell shape reminiscent of the holiday season. While the top and bottom balls are not essential to my design, here is the basic outline I'm striving for: This is what I have been able to achi ...
Hey there! I've been working on a project using vuejs and bootstrap-vue-3. My goal is to allow users to print data about the company, so I created a print scss file for that purpose and added some styles. However, I'm facing an issue where the ra ...
When using AJAX to pass an "id" and "data" to PHP, the following jQuery AJAX code is used: 1.$.ajax({//Make the Ajax Request 2. type: "POST", 3. url: "dbtryout2_2.php", 4. data:datastr, 5. success: ...
Currently, I am developing a web application using PHP and AngularJS. My objective is to restrict access to a specific section of the navbar for users with special privileges, such as administrators. In order to achieve this, I have implemented an Angula ...
My bash script fetches device status and packet loss information, slightly adjusted for privacy: #!/bin/bash TSTAMP=$(date +'%Y-%m-%d %H:%M') device1=`ping -c 1 100.1.0.2 | grep packet | awk '{ print $6 " " $7 " " $8 }'` device2=`pin ...
I am working on a web page that operates on a 60-second timer. The code snippet below is responsible for updating the content: protected void RefreshButton_Click(object sender, EventArgs e) { ReportRepeater.DataBind(); ReportUpdatePane ...
Looking to enhance a PHP calendar script, everything seems to be functioning correctly except for displaying days from the next months which are not appearing on the grid. I've attempted to troubleshoot the issue myself with no luck, so I would greatl ...
When conducting a test, I encountered an issue while comparing two arrays. The test involves a filter that reads in a list of numbers and saves it to the spareArray. After clicking on a filter button (which is also the element displaying the integer list), ...
I've been exploring the world of AngularJS and following its installation guide, but I encountered an issue while executing step #1: npm install -g karma Here's the complete output: As per latest version: Windows [Version 6.2.9200] (c) 2012 Mi ...
I need assistance with removing a question after it has been answered, but I am encountering an error message stating that my key is undefined. Error: DELETE http://api/Remove/undefined 400 (Bad Request) state={ qBank:[{id=1,question:'dd',answers ...
I am facing an issue where my component is not initializing when I create it with a function that returns a component object. Can someone please help me understand the difference between these two situations? Html: <div ng-app="demoApp"> <navb ...
[![Click here for image][1]][1] [1]: https://i.sstatic.net/7ahkUEeK.png Can someone please provide guidance on enabling the check for this HTML page? I am having trouble locating the checkbox element. ...
Is there a way for me to pass the oobcode value to the postresetusername function in views.py? reset_username.html <script type="text/javascript"> var oobcode; function func(){ oobcode = localStorage.getItem("storageName"); ...
I am trying to include the CSS file src/app/shared/layouts/admin/admin.component.css in my component located at src/app/admin/create-company/create-company.component.ts How can I properly reference this css file in the styleUrls of create-company.componen ...