Exploring ways to customize the selected text color within a jQuery mobile division using CSS

Is there a way to change the color of selected text to #3C3 for the div one only and not for div two?

<!DOCTYPE html>
<html>

    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="lib/jquery.mobile-1.3.1.min.css" />
        <script type="text/javascript" src="lib/jquery-1.9.1.min.js"></script>
        <script type="text/javascript" src="lib/jquery.mobile-1.3.1.min.js"></script>
        <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
        <script type="text/javascript" src="scripts/jquery.mobile-events.min.js"></script>
        <script type="text/javascript" src="scripts/jquery.scrollTo-1.4.2-min.js"></script>
        <link rel="stylesheet" href="css/test.css" />
        <script type="text/javascript" src="scripts/jquery.xpath.js"></script>
        <script type="text/javascript" src="scripts/test.js"></script>
    </head>

    <body>
        <div data-role="page" id="test-page" class="bg_main">
            <div data-role="header" id="bookmarkheader">.............. ...............</div>
            <div data-role="content" id="content" class="content_bg">
                <div class="one">some text</div>
                <div class="two">some text</div>
            </div>
            <div data-role="footer" id="footer_main">................. .................</div>
        </div>
    </body>

</html>

CSS 

.one::selection {
       background-color:#3C3;
}

The above code didn't produce the desired result. Can someone please assist with this issue?

jquerycssjquery-mobilemobiletextselection

Answer №1

In case your smartphone's browser is unable to handle the ::selection pseudo-element, you have the option of using JavaScript to simulate a text selection change within the element and then substitute the selected text in the container with a colored span.

Answer №2

Learn how to implement a JQ way demo with the code below: http://jsfiddle.net/yeyene/GYuBv/6/

JQUERY

$(function() {
    $('div.one').mouseup( function() {
        var mytext = selectHTML();
        $('.one span').css({"color":"red"});
    });
});

function selectHTML() {
    try {
        if (window.ActiveXObject) {
            var c = document.selection.createRange();
            return c.htmlText;
        }

        var nNd = document.createElement("span");
        var w = getSelection().getRangeAt(0);
        w.surroundContents(nNd);
        return nNd.innerHTML;
    } catch (e) {
        if (window.ActiveXObject) {
            return document.selection.createRange();
        } else {
            return getSelection();
        }
    }
}

HTML

    <div data-role="page" id="index">
        <div data-theme="b" data-role="header">
            <h1>Index page</h1>
        </div>

        <div data-role="content">
            <div class="one"><p>The quick brown fox jumps over the lazy dog</p></div>
            <div class="two"><p>The quick brown fox jumps over the lazy dog</p></div>                
        </div>
    </div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Achieving Left and Right Alignment of Navigation Elements using Flex Basis in Chakra UI with Next JS

For my project, I am working on creating a straightforward Navigation bar using Chakra UI and Next JS. The goal is to have an svg logo positioned at the top-left, while the menu and UI buttons are aligned to the top-right. However, I'm facing challeng ...

cssreactjsnext.jsflexboxchakra-ui

Discovering the pixel value of scrolled distance (scroll delta) using jQuery scroll event

Here's the issue I'm facing: $(window).scroll(function(e){ console.log(e); }) I'm trying to figure out how much I've scrolled in pixels. It seems like the scroll value may be influenced by the window size and screen resolution ...

javascriptjquery

Personalized jQuery Slider with automatic sliding

I am currently working on creating my own image slider without relying on plugins. 1st inquiry : How can I achieve horizontal animation for the slider? 2nd inquiry : I want the images to cover both the height and width of their container while maintainin ...

javascriptjqueryhtmlcssslide

Incorporating a technique for aligning text towards the right as the number of characters or digits expands

I'm designing a game user interface with a money indicator. Let's imagine the player has 0 dollars in their wallet, it should appear like this: https://i.stack.imgur.com/35eoh.png Please note that it is located in the upper right corner. The p ...

htmlcsstextmove

Steps to create a hover effect that alters the appearance of another chosen "element"

For instance, I have two classes named A and B. I want to be able to change the appearance of B when I hover over it, such as its color or size. I am unsure if this can be achieved using CSS and the onmouseover event. I am including a snippet of code that ...

javascriptjquerycssjqgrid

How can I use CSS in Next.js to style a child element when its parent is being hovered over?

Here is the CSS code that specifically targets the child element "#overlay" when its parent, ".collection", is being hovered over: .collection { position: relative; overflow: hidden; } .collection:hover #overlay { position: absolute; opa ...

cssreactjsnext.js

Methods for Expanding a Div within an Oversized Row, Despite Height Constraints

I have a situation where I need to adjust the height of a cell in a table. One of the cells contains a larger element that causes the row to expand vertically. I also have another cell with a div element set to 100% of the cell's height. However, I wa ...

htmlcss

Ways to navigate through a webpage without encountering any overflow issues

My window is too small to scroll, but I still need the ability to do so. Is it possible to scroll even when the height of the container is not large enough to display the scrollbar? Below is the code I am using to achieve scrolling: setTimeout(function() ...

javascriptjqueryhtmlcss

parsing links from HTML tag

I am trying to extract the img src tag from an HTML request that includes the following element: <img src="https://pbs.twimg.com/media/...." alt="Embedded image permalink"</a> My goal is to retrieve only the URL. Currently, I might be going too ...

jquerynode.jscheerio

I incorporated a CSS file from another HTML document. What do you think about that?

In my work with Ionic 3 and angular 4, each HTML file is accompanied by its own CSS file. There are times when I reference a class in one HTML file that is defined in another HTML file. I have observed that this CSS class gets injected into the main.js He ...

htmlcssangulartypescriptionic3

What is the process for initiating printing in a separate window?

Is there a way to modify the code below so that when I click "Print" it opens in a new window instead of redirecting and losing the original receipt? <div class="print_img"> <button onclick="myFunction()"> <div align="justify ...

javascriptphpmysqljquery

Transforming the text to be "unreadable"

I find myself in a rather odd predicament where I must display my name and contact details on a webpage. Although I am comfortable with sharing this information, I would prefer that it remain unreadable to robots or other unauthorized sources. Essentially ...

javascripthtmlcssweb

Clear previously filtered items

I am currently working on implementing a search functionality using Javascript for my project, but I've hit a snag. After hiding certain items, I'm having trouble making them appear again. JSFiddle The code I have so far is as follows: $(' ...

javascriptjquery

Is there a way to horizontally navigate a pallet using Next and Prev buttons?

As someone new to development, I am looking for a way to scroll my question pallet up and down based on the question number when I click next and previous buttons. In my pallet div, there are over 200 questions which are dynamically generated. However, th ...

javascriptjqueryhtmlcss

Repairing the Performance of the 'Save' Feature

Can the 'Save' button in my code save team assignments for players selected using drag and drop? I'm considering using localStorage, but unsure about implementation. Note: To run the code properly, copy it as an HTML file on your computer. ...

javascriptjqueryhtmlcss

Implementing jQuery autocomplete on dynamically generated fields post page load

I have successfully implemented jQuery UI Autocomplete to fetch data from a DB and populate a form dropdown. However, I am faced with the challenge of adding more form fields dynamically that also need to have the autocomplete feature applied to them. Is ...

javascriptjquery

Step by step guide on how to connect a stylesheet in CSS

Hey there, I recently attempted to link a style sheet in my HTML for the first time. Unfortunately, I encountered an issue where it didn't work. Here's the code I used: <link href="css/StyleSheet.css" rel="stylesheet" type="text/css" /> W ...

htmlcssbackground

Is it possible to automatically adjust the text color based on the dynamic background color?

While browsing Palantir.com, I noticed that the logo color always changes to be the inverse of the background color behind it as the background scrolls or changes. I'm currently working on a website using Wordpress and would love to achieve the same ...

htmlcsswordpress

Elevate Your Flipclock.js

I am currently working on a website that utilizes flipclock.js, but I am facing some challenges in enlarging it to occupy more space on the page. Is there anyone who knows how to upscale or increase its size? ...

cssflipclock

Upon the initial hover, the data added to the title tag following an Ajax call is not appearing

I am currently working on an ajax request that retrieves information such as username, email, and user_id. Once the ajax call is successful, I use jQuery to append this data to the title tag. The main issue I am facing is that the data is only displayed af ...

javascriptjqueryhtmlcssajax