logo
down
shadow

Change color of selected text in a div using bootstrap & color picker


Change color of selected text in a div using bootstrap & color picker

By : user2952895
Date : November 19 2020, 03:59 PM
help you fix your problem You need to wrap selected text into some wrapepr, and unwrap it when unselected. Here is working example:
code :
function selectText(hexColor) {
    var selection = window.getSelection().getRangeAt(0);
    var selectedText = selection.extractContents();
    var span = document.createElement('span');
    span.style.backgroundColor = hexColor;
    span.className = 'selected-text';
    span.appendChild(selectedText);
    selection.insertNode(span);
}

function unselectText(){
    $('#text-box').find('.selected-text').contents().unwrap();;
}

$(document).on('mouseup', function () {
    selectText('#f90');
});

$(document).on('mousedown', function () {
    unselectText();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="text-box">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>


Share : facebook icon twitter icon
Jquery color picker to change text color

Jquery color picker to change text color


By : user3702464
Date : March 29 2020, 07:55 AM
around this issue I am using farbtastic color picker and working fine but now I need to change the text color using this plugin. , This seems to work:
code :
$(document).ready(function() {
    $('#colorpicker').farbtastic(function(color) {
        // sets the color for both the 'color' and 'Text1' inputs
        $("#color, #Text1").css("color", color);
        // updates the 'color' input to the currently-selected color
        $("#color").val(color);
    });

});
Change text color and background color of textview using color picker in android

Change text color and background color of textview using color picker in android


By : user6321660
Date : March 29 2020, 07:55 AM
seems to work fine
download this project import it.Color-picker
code :
 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >

     <EditText
        android:id="@+id/txNote"
        android:layout_width="200dip"
        android:layout_height="200dip"
        android:layout_centerInParent="true"
        android:text="@string/hello_world" />

     <ImageView
         android:id="@+id/rightColorPicker"
         android:layout_width="@dimen/ambilwarna_hueWidth"
         android:layout_height="@dimen/ambilwarna_hsvHeight"
         android:layout_alignParentRight="true"
         android:layout_alignTop="@+id/txNote"
         android:scaleType="fitXY"
         android:src="@drawable/ambilwarna_hue" />

     <ImageView
         android:id="@+id/leftColorPicker"
         android:layout_width="@dimen/ambilwarna_hueWidth"
         android:layout_height="@dimen/ambilwarna_hsvHeight"
         android:layout_alignParentLeft="true"
         android:layout_alignTop="@+id/txNote"
         android:scaleType="fitXY"
         android:src="@drawable/ambilwarna_hue" />

</RelativeLayout>
public class MainActivity extends Activity implements OnTouchListener {

TextView txtNote;
ImageView rightColorPicker,leftColorPicker;
private int mAppWidgetId = 0 ;
public static boolean flag;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    txtNote=(TextView)findViewById(R.id.txNote);
    rightColorPicker=(ImageView)findViewById(R.id.rightColorPicker);
    leftColorPicker=(ImageView)findViewById(R.id.leftColorPicker);
    rightColorPicker.setOnTouchListener(this);
    leftColorPicker.setOnTouchListener(this);
    Intent intent = getIntent();
    Bundle extras = intent.getExtras();
    if (extras != null) {

        mAppWidgetId = extras.getInt(
                AppWidgetManager.EXTRA_APPWIDGET_ID, 
                AppWidgetManager.INVALID_APPWIDGET_ID);

    }

}

@Override
public boolean onTouch(View v, MotionEvent event) {
    switch (v.getId()) {
    case R.id.rightColorPicker:
        colorPicker();
        flag=true;
        break;
    case R.id.leftColorPicker:
        colorPicker();
        flag=false;
        break;
    default:
        break;
    }

    return false;
}

public void colorPicker() {

//      initialColor is the initially-selected color to be shown in the rectangle on the left of the arrow.
//      for example, 0xff000000 is black, 0xff0000ff is blue. Please be aware of the initial 0xff which is the alpha.
ColorPickerDialog dialog = new ColorPickerDialog(this, 0xff0000ff, new OnAmbilWarnaListener() {

    // Executes, when user click Cancel button
    @Override
    public void onCancel(ColorPickerDialog dialog){
    }

    // Executes, when user click OK button
    @Override
    public void onOk(ColorPickerDialog dialog, int color) {
        // Create an Intent to launch WidgetConfigurationActivity screen
        Intent intent = new Intent(getBaseContext(), MainActivity.class);

        intent.putExtra(AppWidgetManager.EXTRA_APPWIDGET_ID, mAppWidgetId);

        // This is needed to make this intent different from its previous intents 
        intent.setData(Uri.parse("tel:/"+ (int)System.currentTimeMillis()));

        // Creating a pending intent, which will be invoked when the user
        // clicks on the widget
        PendingIntent pendingIntent = PendingIntent.getActivity(getBaseContext(), 0, 
                intent, PendingIntent.FLAG_UPDATE_CURRENT);                     

        // Getting an instance of WidgetManager
        AppWidgetManager appWidgetManager = AppWidgetManager.getInstance(getBaseContext());

        if (flag) {
             txtNote.setBackgroundColor(color);

        } else {
            txtNote.setTextColor(color);
        }

// // Instantiating the class RemoteViews with widget_layout
      RemoteViews views = new 
      RemoteViews(getBaseContext().getPackageName(), R.layout.activity_main);
//  
// // Setting the background color of the widget
      views.setInt(R.id.txNote, "setBackgroundColor", color);                        
//                          
// //  Attach an on-click listener to the clock
     views.setOnClickPendingIntent(R.id.txNote,pendingIntent);

        // Tell the AppWidgetManager to perform an update on the app widget
        appWidgetManager.updateAppWidget(mAppWidgetId, views);                        

        // Return RESULT_OK from this activity
        Intent resultValue = new Intent();
        resultValue.putExtra(AppWidgetManager.EXTRA_APPWIDGET_ID, mAppWidgetId);
        setResult(RESULT_OK, resultValue);
        //finish();
    }
});
dialog.show();
}
}
change text color of selected dynamic textbox using color picker

change text color of selected dynamic textbox using color picker


By : Reza
Date : March 29 2020, 07:55 AM
To fix this issue Please try this:
Include jscolor.js in your index file. You can see more demo and download also from this link http://jscolor.com/try.php
code :
   <div>
         <?php
        or($i=0;$i<15;$i++){?>
            <div id="txt_add<?php echo $i; ?>" onclick="get_current_text(<?php echo $i; ?>);">
                            <div id="f<?php echo $i+1; ?>" class="bring_front"><span style="cursor:move"><input type="text" **class="box color"** placeholder="Sample text <?php echo $i+1; ?>" style="border:none; background:none; width:87px; margin-left:6px;" maxlength="10" onchange="set_color(<?php echo $i; ?>);"/></span></div>
               </div>
               <?php }?>                        
</div>

and put this code in javascript:    
 function set_color(txtid)
{
    $("#txt_add"+txtid+" input").css('color','#'+this.color);
    //document.getElementsByTagName('BODY')[0].style.backgroundColor = '#'+this.color
}
function get_current_text(id)
{
    $("#prod div input").css("background-color","white");
    $("#txt_add"+id+" input").css('background-color',"green");  $("#txt_add"+id+" input").css('color',"red");
}
How to change the color of text of TextView in android according to chosen color, selected from a list of color

How to change the color of text of TextView in android according to chosen color, selected from a list of color


By : sema obadya
Date : March 29 2020, 07:55 AM
it should still fix some issue Problem 1:
Seems like you're calling getItemIdAtPosition() instead of getItemAtPosition().
code :
String item = String.valueOf(adapterView.getItemIdAtPosition(i));
String item = (String) adapterView.getItemAtPosition(i);
if (item == "Green") {
if ("Green".equals(item)) {
Change Font(Text) Color using Color Picker in Vue js

Change Font(Text) Color using Color Picker in Vue js


By : Russel
Date : March 29 2020, 07:55 AM
help you fix your problem To dynamically assign a css color value to a html element you can use :style="{}" . Like this
code :
<template>
<div>
   <textarea :style="{color:color}"></textarea>
   <v-color-picker v-model="color" />
</div>
</template>

<script>
  export default {
    data() {
      return {
        color : '#FFFFFF'
      }
    }
  } 
</script>
Related Posts Related Posts :
  • grab non-sibling element with jquery
  • Select a word and click it
  • Trigger modal instead redirect to /users/sign_in path, Rails 4 with devise
  • Combining Parent theme JS and CSS
  • Angular ui-grid - DropDown Selection shows Id
  • jquery addclass when there is content on body
  • JQUERY : CSS does not apply to dynamically created elements
  • Bootstrap multiselect dropdown checkbox not working on paginated table
  • JQuery scroll to dynamic id
  • Jquery first time tried ajax
  • Disable the link on the active tab (Bootstrap)
  • How to handle this validation when a div is added?
  • how to show/hide and check/uncheck checkboxes dynamically inside kendo grid
  • Conditional parameters for AJAX function
  • Jquery add class to input checkbox field
  • Bootstrap countdown timer Jquery
  • Open the closest modal of jQuery clicked element
  • change background color of specific button on click
  • Can I create link as post to 3rd party site and open in new tab?
  • ID is 'undefined' using .each()
  • Using .each() for targeting each child differently in Jquery
  • How to return data from functions in function
  • Execute this jquery only when viewport is bigger than
  • Bootbox showing white box behind dialog
  • Toggle multiple classes with prevAll(), nextAll(), slice(), and duplicate classes... better way?
  • Show/hide list items and add more/less link
  • Going through all occurences of class on slider change
  • Call jQuery valid() without updating the screen
  • hide and show ActionLink and save data in database - MVC
  • Pass each object in JSON array to query
  • Toggling content div on one-page site with jQuery
  • Foundation Equalizer is setting height to inherit?
  • carousel navigation each function
  • changing color of text color with input slider
  • jquery: filter using AND OR in selector
  • Call a function If any Item is chosen From select box , After Dom update
  • Target class within a jquery object
  • How to scroll a web page with fixed navigation bar just before arrive to a section or div?
  • How to add a class name to a specific selector
  • How to prevent background scrolling
  • How can I disable previous/next in OwlCarousel2 if there aren't enough items to scroll?
  • How to pass products and quantities to ASP.NET MVC4 Web API from form submit
  • jQuery css3 attribute not working
  • WordPress One Page Style Menus Scrolling
  • jquery.unobtrusive-ajax.js is not capturing the Submit event
  • Uncaught SyntaxError: Failed to execute 'postMessage' on 'Window': Invalid target origin '' in a call to 'postMessage'
  • can't get correct checkbox value
  • jquery tooltipster plugin, hide all tips?
  • How to set 3 different colors at jQuery UI Slider
  • How to convert a string to html and add a event, descard after use?
  • How can I make jQuery wait for div display value to change to "block", then make ajax call?
  • Stellar.js giving uncaught type error
  • Saving form data to local storage and show it on refresh
  • Jquery carousel not being implemented
  • Use modal with external URL body and dynamic links from data attribute
  • Looking to simplify my jquery
  • Bootstrap datepicker query?
  • Navbar/header animated change on scroll
  • Bootstrap paginated table sending only 10 row's data to server
  • Bootstrap 3.0 & NiceScroll 3.5.0
  • shadow
    Privacy Policy - Terms - Contact Us © ourworld-yourmove.org