I have a complex web application interface with a dedicated area for content display.
Is there a way to ensure that when users utilize the browser's text search function (CTRL+F), the UI elements are ignored and only the actual content is searched?
Would it be possible to achieve this using CSS and JavaScript?
(I am aware that rendering the text to a <canvas> is an option, but I believe it may not be worth the effort)
One way to incorporate UI text into your design is by using the CSS content property. This type of generated text doesn't get picked up in searches since it's considered part of the style rather than the actual content.
For instance:
If you have a button element like
<button id="dosomething"></button>#dosomething:before {
content: "Click Me";
}
I've put together a demonstration on JSFiddle to show how this technique functions: JS Fiddle Example. It's worth noting that this method also works with <a> tags.
I suggest utilizing the :before selector instead of :after because the former is compatible with IE8, whereas the latter isn't.
If you're dealing with a more intricate UI component, another approach is to nest an additional element inside it to contain the text content. For example:
<div id="complexcontrol"><div class="text"></div></div>
And then apply the following CSS:
#complexcontrol .text:before {
content: "Click Me";
}
Keep in mind that screen readers may not interpret these styles correctly, leading to accessibility issues similar to those encountered with images. However, this method offers easier maintenance and facilitates responsive web design.
Expanding on the concept of nullability from another source: One method is to save text in a data attribute, like this:
.css-text [data-content]:before {
content: attr(data-content);
}<div class="css-text">
Hello, <span data-content="World"></span>!
</div>See also: https://developer.mozilla.org/en/docs/Web/Guide/HTML/Using_data_attributes#CSS_Access
In order to prevent certain parts of your content from being searchable, you may want to consider converting that area into an image or utilizing a medium like flash. I came across a potential solution which can be found at this link. However, the decision to implement this is ultimately yours to make.
Utilize the inert property:
<div inert>
Attempt to locate this with Ctrl+F
</div>In previous versions of Chrome, the inert attribute did not function in the same manner.
I am interested in adding a login/register function to my expressJS API. Currently, I am only inserting the password and email into my database. I would like this function to first check if a user with this email is already in the database - if yes, then s ...
The following program was developed to address an issue in another application. In this program, a Python script is called from Node.js to perform a task. The Python script returns results that are then used in Node.js. NodeJS : var pythonShell = require ...
How can I create a grid layout where the aside is sticky to top: 0 and fills all remaining height (e.g. 100% of height), but when scrolling down, the aside height should be changed to 100% minus the footer's height? Is it possible to achieve this with ...
Having some trouble trying to manipulate the scroll of a div using jQuery. Can't seem to figure out where I'm going wrong. This is the code snippet I am currently working with: $("#CategoryList").animate({ scrollLeft: "=-5" }, "slow"); The ID ...
Can anyone help me understand why I'm receiving unexpected results? I am using v2 vue.js. In my project, I have a single file component for a Vue component. The component is supposed to render data imported from "excerciseModules" in JSON format. Th ...
I am attempting to create an animation for a dotted SVG circle that resembles a progress bar, where it fills itself over a duration of 3 seconds. However, I am facing difficulties in achieving this effect with the dotted border. The current code I have doe ...
When using Ajax to return a table, you have the option of separating column names and row values. Here are two ways to do it: let columns = ["col1", "col2", "col3"]; let rows = [ ["row 1 col 1", "row 1 col 2", "row 1 col 3"] , ["row 2 col 1", "r ...
After creating a Python file with multiple functions, I am now working on designing a web page where I aim to trigger one of the functions mentioned earlier by clicking a button. However, I am unsure about how to go about this process. Is there anyone who ...
I'm currently using a method that works fine, but I can't stop thinking about whether there might be a better way to achieve the same result. The task at hand is to display a user profile in a modal box. When a user clicks on a button or link, a ...
Having an issue with a custom filter that is causing an error "ERROR TypeError: Cannot read property 'filter' of undefined". I need help fixing this as it's preventing anything from rendering on the page. Any suggestions on what changes I sh ...
I am attempting to create mock methods and hooks in a file, then import those mock functions as needed in my test files. useMyHook.jsx const useMyHook = () => { const [val, setVal] = useState(200) return { val } } export { useMyHook } Hello.jsx: ...
I am struggling to create a party planner website and encountering issues with the output. Whenever I click on the submit button, the form just clears out without any feedback or result. Here is what the expected output should be: Validate event date 1: ...
I am interested in extracting data from Netflix that includes the following details: 1. Show Name 2. Season 3. Episode Name for each season 4. URL for each episode 5. Duration of each show. Selenium version: 3.141.0 Python version: 3.6.6, utilizing Chr ...
Is there a specific reason why the angularjs grid in my sample isn't displaying the selectedItems properly? Every time I attempt to reference the selectedItems, it returns "undefined." I have tested this in both Chrome and IE with identical outcomes. ...
Looking for a way to collect numerical values from users that total 100% on a dynamically generated form? I'm exploring the idea of using a script or algorithm to adjust text fields as values are changed, ensuring they always add up to 100%. However, ...
I am looking to incorporate ajax tabs using vue js. Each tab will need an ajax request to fetch both the template and data from an api. Here is an example of the tabs: <div id="tabs"> <ul class="nav nav-tabs"> <li class="active">& ...
<body ng-app="starter"> <ion-pane> <ion-header-bar class="bar-dark"> <h1 class="title">AppifyLife</h1> </ion-header-bar> <ion-content> <center><div class="card" id="life"><h3>20< ...
I have a situation where I need to create a JavaScript function that can extract a child object from a parent object based on a specific string identifier. Here is an example of what I'm looking for: function findChild(parent, name) { return par ...
I want to embed HTML code using innerHTML, which will add an input with the class .flatpickr-date. let newInput = '<input type="text" class="flatpickr-date">' document.getElementById('id').innerHTML = newInput; In my JavaScript ...
In the layout below: <div style="margin-top:0%" class="postcell"> <div id="postspantitle" > <span class="texts"><?php echo __('Başlık :', 'goldmem');?></span> </div> & ...