When I attempt a jQuery select with a CSS property, I am noticing that the value is being returned enclosed in double quotes twice. Has anyone encountered this issue before?
var font = $(this).css('font-family');
The result I get back looks like this:
font:""Jockey One""
Font names that have spaces are enclosed in quotes, and the font variable is a string. This is why there are double quotes. If you wish to strip the quotes from quoted font names, simply follow these steps:
var font = $(this).css('font-family');
font = font.replace(/["']/g, "");
console.log(font);
When using font family names with spaces, be sure to wrap them in quotes.
https://developer.mozilla.org/en/docs/Web/CSS/font-family#Values
In JavaScript, make sure to return the `font-family` name within quotation marks.
console.log($(".noSpace").css("font-family"));
console.log($(".withSpace").css("font-family"));.noSpace {
font-family: "JockeyOne";
}
.withSpace {
font-family: "Jockey One";
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="noSpace"></div>
<div class="withSpace"></div>Hello amazing community, I'm searching for a neat way to align the text of an element horizontally with that of an Angular Material input field. Here is the code I am using: <div style="display: flex"> <div>Greeting: </div> ...
I have been experimenting with different methods to identify and capture the message "No matches found". The CSS path I am currently using is "#searchResultsWarningMessageBox > table > tbody > tr > td.messageCell > div" WebElement txtMsg = ...
I am looking to target specific CSS styles for Internet Explorer only, without affecting other browsers. Initially, I tried using conditional comments: <!--[if lt IE 7 ]><html class="ie6 ie"> <![endif]--> <!--[if IE 7 ]><html cl ...
I am facing a challenge with developing an image grid that transitions some images at random intervals using either jQuery or another method in JavaScript. It's important to note that I don't want all the images to change simultaneously; each gro ...
Is there a way to center an image (logo) both horizontally and vertically on the page? <ion-view hide-nav-bar="true"> <ion-content class="backgound-red "> <section class = "home-container"> <div class="row icon-row"> ...
I am currently displaying a sub menu on hover using Tailwind CSS. However, I am wondering how I can achieve the exact same functionality by triggering an onclick event instead of hovering over the menu. Here is a DEMO showcasing the current setup. CODE: ...
html: <body> <div class="custom-div"><input type="button" id="x" name="button" value="Search" onclick="showUser()" class="button"/></div> <input type="image" name="button" value="Search" onclick="showUser()" class="bu ...
I'm currently facing a challenge with a table on my webpage that displays data but isn't scrolling all the way to the bottom. This code was implemented by previous developers, and as someone who isn't well-versed in CSS, I'm struggling ...
I've set up the following code to enable auto-complete functionality: jQuery(function($) { $("input[type='text']").autocomplete(); $("input[type='text']").keyup(function(event) { var $this = $(this); var id ...
Bootstrap 4 js collapse is working fine, but I am facing an issue. When I click to show a hidden div and then reload the page, clicking again reveals the previously hidden div when it should be hidden. Any suggestions for addressing this problem? ...
I am looking to implement AJAX functionality that updates two separate elements: the clicked button class and a record in the database while looping through the results. Home <?php $q = mysqli_query($cn, "select * from `com`"); while ($f = mys ...
My docker-compose.yml file looks like this: version: "1.0" services: web: container_name: webserver image: nginx volumes: - ./nginx.conf:/etc/nginx/nginx.conf:ro - ./frontend:/frontend ports: - "8001:80&qu ...
I'm trying to utilize the inline bootstrap datetimepicker from At the moment, it opens in a popup window after the user selects a date/time from a table on another page. My goal is to pass the date/time from that page into datetimepicker and have it ...
I'm really confused about the impact of scaling an element using CSS transforms on the document flow. Take a look at this jsbin or this codepen (since jsbin seems to be down), where I have set up the following structure: p{slipsum text} #scaled #s ...
I am encountering a difficult issue with this HTML template Click Here. To resolve it, please navigate to the 1st template Demo under Shop Pages as indicated in the image below. https://i.sstatic.net/TlutO.jpg (Please adjust your browser to a mobile scre ...
I am currently developing a userscript for a webpage with an old-fashioned design consisting mainly of tables. My goal is to access a long table of fields so that they can be filled in automatically by the script. To simplify, the structure is as follows: ...
Hey there, I'm currently working on a JavaScript game and facing an issue. I want to execute a function when an if statement is true, but the function keeps running repeatedly. I need it to run only once. This is my current code: //JavaScript setInte ...
I've been attempting to create range sliders with boxes that display the slider's current value, but I'm having trouble getting them positioned correctly when the window size changes. Despite trying various solutions found online, I resorted ...
A unique feature of my DIV is that it remains fixed at the top of the page as you scroll. This is achieved by setting its position to fixed. However, within this main container, I have another div with a relative position. While the content in the relative ...
I'm a beginner in Javascript and JQuery. Take a look at my code that calculates an average (A) value based on three input values. https://i.sstatic.net/teGkc.png Check out the JQuery snippet below: $(".q-value, .e-value, .t-value").click(f ...