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?

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

Troubleshooting Google Charts, AJAX, and PHP: Issue with JSON encoding leading to error message "Data for arrayToDataTable is not

My current project involves using PHP/PDO/MSSQL to pass data from a database to a Google Chart via AJAX in .js. I'm encountering an issue that seems to be related to encoding. I've been following a tutorial at which hardcodes the data into the ...

What is the best way to implement a gradual decrease in padding as the viewport resizes using JavaScript

My goal is to create a responsive design where the padding-left of my box gradually decreases as the website width changes. I want the decrease in padding to stop once it reaches 0. For instance, if the screen size changes by 1px, then the padding-left sh ...

Animating background images using a single data attribute

I'm attempting to create a smooth animation between different background images stored in a single data attribute. The goal is for each image to load sequentially, with the first one appearing immediately and the rest following after a 5-second delay. ...

Creating a dynamic SlickGrid spreadsheet - a step-by-step guide

My curiosity has been peaked by the SlickGrid plugin. It caught my attention because of the spreadsheet example, but unfortunately I couldn't get it to work. Is it truly feasible to create a spreadsheet where you can select a range of cells and copy/p ...

What is the best way to incorporate a specific term from the class into CSS styling

I am working on a webpage that includes '<a> <i> <label>' elements with specific classes. <a class="icon-home"></a> <label class="icon-pencil"></label> <i class="icon-display"></i> I want to ...

Removing empty commas from a string with JQuery

I am looking to utilize JQuery to eliminate any empty commas from a given string. Take a look at the provided images for further clarity. ...

Guide to designing a unique shape in JointJs by combining multiple basic shapes together

Is there a way to combine different shapes in Joint JS, such as creating a custom shape that includes both a rectangle and a circle? I am aware of the path method, but I'm not sure if it is suitable for creating combined shapes like this. ...

Determine the 'source' attribute value of the image (img) with a dynamically changing Id

Below is the code snippet: <img id="simple_captcha-ad089ff4819" src="/simple_captcha?code=a35401d"> The id of the above img tag changes constantly with each new action. For example, the next id could be "simple_captcha-sfw454sdfs". Therefore, I n ...

Click the Button to Trigger Database Update

I have been struggling with updating a dynamic table that allows inline editing and dynamically adding rows. My goal is to click a save button that triggers an UPDATE query to modify the database. Unfortunately, I can't seem to figure it out on my own ...

What could be causing my ajax request to not be successfully compiled?

I seem to be experiencing an issue with this part of my code. Despite trying multiple methods, it still isn't functioning correctly. What steps can I take to resolve this problem? $.ajax({ url: "https://corona-api.com/countries/BR", ...

Utilizing Slim PHP to generate JSON responses

I have a situation where my backbone application is making an ajax GET call to my slim php app, expecting JSON dataType in return. $.ajax({ url: './myroute', type: 'GET', dataType: "json", data: { userna ...

Rearrange the li elements within multiple ul lists using JavaScript

Is there a way to reorder multiple ul-lists on my website using JavaScript? An example of the lists may be as follows: $(document).ready(function() { var ul = $('ul.filelist'); for (let u = 0; u < ul.length; u++) { const element = ul[ ...

CSS Only flyout navigation - reveal/hide with a tap or click

I want to make adjustments to a CSS-only menu that has a horizontal flyout effect triggered by hovering. I am looking to achieve the same effect on touch or tap - meaning, one tap to open the menu and another tap to close it. Is it possible to accomplish ...

Even after applying the CSS property "resize:none" to my HTML textarea, I still find it to be adjustable in size when viewed in the Opera browser

I'm currently working on customizing my HTML page and I want to ensure that all text inputs are consistent in size. I attempted to use the text-area selector in CSS, but it didn't seem to work correctly in Opera. The resize handle disappeared in ...

Displaying burger options when hovering over the menu

How can I prevent my menu from collapsing when hovering over (.menu)? $('.menuBurger').hover(function() { $('.menu').slideToggle(300); }); .menu { width: 70px; height: 60px; background: #ccc; display: none; } <script src="https: ...

Having trouble accessing the JSON result with Jquery

My controller has an action that returns JSON results, which I have tested and confirmed to be working properly. public JsonResult GetProductsByDepList(int id) { JsonResult jr = new JsonResult(); var _product = from a in DataContex ...

Share your message with BotFramework WebChat by simply clicking on the provided link

A chatbot I created using Microsoft Bot Framework has been integrated into my website through DirectLine: <div id="chatbot_body"></div> <script src="https://unpkg.com/botframework-webchat/botchat.js"></script> <script> ...

Loop through a collection of items based on the values in a separate array using jQuery

I have a list of objects below The newlist and SelectID array are both dynamic. I am populating through a function, now I need to iterate and create the new list. var newList = [ { id : 1,name="tea",plant:"darjeeling"}, { id : 2,name="cof ...

jquery allows you to toggle the visibility of content

There are two divs with a button positioned above them. Initially, only one div, the catalogusOrderBox, is visible. When the button named manualButton is clicked, it should display the manualOrderBox div while hiding the catalogusOrderBox div. The text on ...

Tips for Maintaining Hidden Side Navigation Bar on Postback in C# Web Forms Application

I built a C# web application using webforms, complete with a side navigation bar that is displayed by default. However, when the user clicks on a toggle button, it gets hidden and will be shown again upon another click. Here is the JavaScript code in my s ...