I am looking to update this A tag
<a href="contact.html" >Contact</a>
to
<a href="tel:+13174562564" >Contact</a>
using only CSS, if possible. Alternatively, like this
<a href="tel:+13174562564" >+13174562564</a>
I have numerous pages and editing each one individually is not feasible. That's why I am exploring the option of doing it with CSS since I do not have any JS linked to them.
CSS is limited to styling elements on a webpage and cannot alter the structure of the document object model. Unfortunately, there is no way to achieve this functionality through CSS alone. I wish there were a workaround, but for now, "it cannot be done" remains the final verdict.
CSS is primarily used for styling and presentation purposes, it does not have the capability to alter the HTML structure as you wish. To achieve this goal, JavaScript is the suitable option.
You can accomplish this with a relatively concise script.
One clever solution involves hiding one tag and displaying another
<div id="tag1">
<a href="#tag1">link1</a>
<a href="#tag2">link2</a>
</div>
Here's the CSS:
a[href="#tag1"] {
display:block;
}
a[href="#tag2"] {
display:none;
}
#tag1:target a[href="#tag1"]{
display:none;
}
#tag1:target a[href="#tag2"]{
display:block;
}
This method is particularly useful for creating responsive "buttons" in my menu bar.
How can I extract and store the text of the first, underlined, and last parts of the question using Splinter? Refer to the HTML below. I aim to assign the following values to variables: first_part = "Jingle bells, jingle bells, jingle all the" second_par ...
My challenge is to efficiently print the contract variable, which contains HTML content fetched from the server. How can I achieve this easily? I want the print window in Chrome to display the document with the contents of my variable when I click a button ...
When using jQuery to create dynamic buttons, is there a way to add a CSS class to the button during creation without needing an extra line of JavaScript to add the class afterwards? Below is a example code snippet: $.each(data, function (index, value) { ...
In my current project, I am utilizing VueJS (version 2.5.9) to display and modify data tables within an administrative application. Initially, I used a basic Grid component for the data table, following an example provided here. However, I came across an e ...
I have extracted raw HTML content stored in the database and I am attempting to display it within a div element. const style = { border: '2px solid #eee', height: '270px', width: '100%', overflow: 'auto&ap ...
Why is the content stacking within each list item instead of being on the same line? I've attempted using floating and adjusting the position, but nothing seems to be working. How can I resolve this issue? .icon-left{ float:left; padding: 1 ...
I am facing an issue with stretching the children of a column flexbox container. While I can stretch one of the flexbox child elements, I am unable to stretch its nested children. Below is an example where .flex-child-2-child and .flex-child-2-child-child ...
Seeking Assistance with Modal Closure After Form Submission I understand that this inquiry may have been posed by someone else before, but I require guidance specifically for my code pertaining to handling form submission with AJAX. As a newcomer to AJAX, ...
When using the picture tag with srcset, I can specify different image sources based on viewport widths. However, what I really need is to define image sources based on the actual width of the space the image occupies after the page has been rendered by th ...
Is it possible to maintain the background image of the body within a child div that has a red background color with opacity? * { box-sizing: border-box; } body { background-image: url('https://d6scj24zvfbbo.cloudfront.net/306f4bc782c04bbe4939f8c ...
I am facing an issue where I need to relocate an external script within a specific section of my page. However, I am unable to access the CSS attributes associated with this item. It seems that it is displayed as an iFrame, making it difficult to modify th ...
My main objective involves dynamically inserting images above text on any given page using a content script. The challenge lies in maintaining the proper alignment of the text after adding the images. To achieve this, I surround the words where the image i ...
Within the code snippet, a function is present which performs the following actions. It searches for an email in the input field, then converts the email to an md5 hash, and finally generates a Gravatar URL that is inserted into a class using fadeIn(); ...
Inside a list item (<li>), I have some text that I want to rotate 270 degrees. Direct methods in FireFox, Safari, Chrome, and Opera work fine for this, but when it comes to IE, there is no direct support. I've tried using filters like matrix and ...
I am trying to align all my navigation pills to the left, and then add a single text element that stays at the end of the navbar even when the page is resized. Navbar Image My attempt involved adding a div so that the navbar pills would take up 50% width ...
Currently, I am facing an issue with using an ajax method .load to replace the content of a div. The library I am working with does not allow me to replace the content of a div as some functions continue to run in the background. To overcome this challeng ...
Currently, I am working on developing the admin features for my website and have been using this resource to assist with adding users: One issue that I have encountered is that when I added a password field, it appears in its stored form which is not idea ...
I am currently working on a feature where the scroll bar should move to the newly uploaded document in a list of documents. When I upload a new document, I want the scroll bar to automatically move to that document. Currently, the highlighting changes to t ...
I have a contact form and I want all the form values to be cleared after submitting the form. I've tried the following code, but the values of the form remain unchanged after submission. What could be causing this issue and how can it be resolved? ...
Is there a way for a specific form component to function as radio buttons, with only one option selectable at a time, without displaying the actual radio bullets? I am looking for alternative presentation methods like highlighting the selected option or ...