Help me with the updated code
<html>
<title>css</title>
<head>
<style>
#st {
z-index: -114;
margin-right: -80px;
}
</style>
</head>
State Code : <span><span id="st"></span>Maharashtra - MH</span>
</html>I received the following output but I want to fix the overlapping text issue
To hide data in CSS and HTML, the best approach is to use either the display: none or visibility: hidden property. Both options will work, but I recommend using display: none for the most effective results.
<span>State Code: <span id="st"><span style="display: none">Maharashtra - </span>MH</span></span>Here is a clever JavaScript solution for achieving something that cannot be done with CSS alone.
$("#st").html(function(){
var text = $(this).text().trim().split(" ");
var first = text.shift();
return (text.length > 0 ? "<span class='hide'>" + first + "</span> " : first) + text.join(" ");
});.hide {
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>State Code: <span id="st">Maharashtra - MH</span></span>Here is an example of HTML code that is functioning correctly:
<span id="state_code">New York - NY</span>
<script>
function extractCode(str) {
return str.split('-')[1];
}
var stateText = document.getElementById("state_code").innerText;
var code = extractCode(stateText);
document.getElementById("state_code").innerHTML = code;
</script>
There have been significant changes to the layout, please refer to the 2nd updated demo.
Due to dynamically generated text by the OP, JavaScript is necessary for practical purposes. It is likely that there will be multiple instances of text on the page.
This demonstration collects all <span> elements nested within another <span> (using a .class instead of an #id for realism). The NodeList of elements is then converted into an array.
Each iteration of this array uses the map() method where a regex pattern is matched against the text content of the <span> elements.
A replacement operation using the replace() function removes the unwanted part of the text and leaves only the last two letters intact.
var tgt = Array.from(document.querySelectorAll('span'));
tgt.map(function(s, idx) {
var str = s.textContent;
var rgx = /(State Code:).*?- (\w\w)/g;
var rep = `$1 $2`;
var res = str.replace(rgx, rep);
s.textContent = res;
});<span>State Code: <span class="st"></span>California - CA</span><br>
<span>State Code: <span class="st"></span>New York - NY</span><br>
<span>State Code: <span class="st"></span>Oregon - OR</span><br>
<span>State Code: <span class="st"></span>Mississippi - MS</span><br>For those familiar with PHP language, give this code a try below!
$str = explode("-","Maharashtra - MH");
<span>State Code: <span id="st"><span style="display:none;"><?php echo $str[0]."-"; ?></span><?php echo $str[1]; ?></span></span>
Incorporating Google line charts into my upcoming web project has been a goal of mine. I aim to customize them in the style displayed in this image and display dates between months. Can anyone provide guidance on how to achieve this, if it is feasible? ...
Is there a way to access the element width of child components within a parent component that utilizes flex box? I am hoping to determine if the list is overflowed so I can adjust the visibility of elements accordingly. If an overflow occurs, I would like ...
Currently in the process of creating a portfolio website that showcases project descriptions with an excerpt, revealing full details upon clicking "Read More." My experience with jQuery is limited, but I managed to implement functionality where clicking "R ...
I am dealing with a group of 'DIV' elements, each containing a list of 'p' elements. Take a look at the example below: <div class="container"> <p>This is content 1</p> <p>This is content 2</p> ...
This solution for question #2 on CSSBattle is considered one of the best. However, the use of the ""+"" sign and ""q"" in this single line of code is perplexing. <body bgcolor=62375 style=margin:0+50;border:dashed+53q#fdc57b;clip-pat ...
Currently, I am utilizing a callback in my WCF service to receive raw frames from the camera. I am currently working on developing an HTML application that will showcase these frames. However, my current approach involves using a button click event in HTM ...
I am having an issue with the fade in / fade out effect using jQuery. The Menu is rendering perfectly and functioning properly, but there is no delay or fade when hovering over the menu items. I'm not receiving any errors, but the expected behavior is ...
Hello, I am currently working on a project in Django and could use some assistance with my JavaScript code. Specifically, I am trying to incorporate a button that adds new rows of inputs. The button does function properly as it clones the previous row usin ...
this is my unique code snippet CSS Stylesheet .Navigation-signIn { background-color: #c8db5a; } .Navigation-signIn։hover { background-color: #ffffff; } JSX Component import { NavLink } from "react-router-dom"; import { BrowserRouter } fro ...
Encountering an issue with the "--watch" or "-w" flag when running node-sass. After installing node-sass as a devDependency and setting up a script to compile SCSS code, everything runs smoothly without any flags. However, adding the "--watch" flag causes ...
I am currently working on a basic react application, and I am trying to dynamically change the name of a div element using the following code snippet - <div className={'changeTab ' + (page.login ? 'leftSide' : 'rightSide')} ...
I want to create a visual representation of a stack of paper sheets as a metaphor. The idea is to neatly stack the sheets on top of each other, with only the header of each sheet visible and the rest of the content covered. !-------------- | Sheet 1 +--- ...
Currently, I am facing a dilemma with two forms that need to share the same IDs. One form is designed for mobile viewing while the other is for all other devices. Despite using media queries and display: none to toggle their visibility, both forms are stil ...
Working on my .aspx webpage, I have a set of div tags that play a key role in the layout. Let me show you an example with the following snippet: <div id="homeownerquestion" runat="server"> Are you the property owner? <p> <asp:RadioButto ...
Here's a similar situation .items { width: 100%; display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; background: #cecece; padding: 10px; margin: 20px; } .item { height: 100%; flex: 0 0 calc(50% ...
I'm currently working with a UI5 text box that includes a built-in option for clearing the text using a 'X' button. However, I've noticed that in Internet Explorer, an additional default cross mark is being added alongside the UI5 cros ...
Struggling to change the color of my Bootstrap's nav-link to white with no success. Here is my code snippet: <nav class="navbar navbar-light" style="background-color: #5E9DFE;"> <a class="navbar-brand" href=& ...
I'm currently working on a Javascript application that allows users to enable/disable controls dynamically. While I've had success in disabling/enabling nested inputs and buttons, I'm facing an issue with disabling an onclick event within a ...
I am seeking a solution to have a mat-spinner displayed on top of my app while it is in the loading state. Currently, I am using an overlay component with Overlay from @angular/cdk/overlay. The issue arises when part of the spinner that should be overlai ...
When creating HTML elements using an Ajax call from the server-side, it can be challenging to align them properly on a responsive web page. Below is an example of how elements are generated with an Ajax call: var html = ""; $.ajax({ type: " ...