Geek Answers Handbook

How to change part of a paragraph color

I have a draggable div that is under the blue paragraph, I want to change the part of the color of the paragraph that is on the div ... as the image below

and here are my codes :

<html> <head> <script> $(document).ready(function(){ $("#div1").draggable(); }); </script> <style> #div1{ position : absolute ; top : 10px ; left : 20px ; background : black ; width : 200px ; height : 200px ; cursor : move ; } #p1{ position : absolute ; top : 100px ; left : 200px ; color : blue ; } </style> <head> <body> <div id="div1"></div> <p id="p1">some text</p> </body> </html>

jsfiddle: https://jsfiddle.net/e7qvqot9/

+7
javascript jquery css
source share
2 answers

Perhaps do the following:

You should have two separate paragraphs, the first of which is blue and it is inside the div, the second is blue and can be found outside the div.

Set the z-order so that white text is on top, then a div and a blue paragraph appear. The div should also have an overflow attribute: hidden.

This part is a bit tedious. Place the blue text somewhere, for example, ypu currently has at (100; 200). Then set the white paragraph so that the position of the divs moves to the upper left corner + the position of the paragraph relative to the div is equal to the position of the first paragraph. So, if you have a div in (10; 20), then you need to have a paragraph at (90; 180) relative to the div.

This works in most browsers where z-order works. However, you can get around this by putting items in the place of the ridge

Here I made an example

https://goo.gl/PafOMJ

This is currently the shortest solution.

+1
source share

How about this: Fiddle

This works exactly the way you want and is a clean JavaScript solution. Although this is costly and costly, it should be good for the little text mentioned in the question.

 $(document).ready(function(){ var boxLeftX; var boxLeftY; $("#div1").draggable({ drag: function(){ var offset = $(this).offset(); boxLeftX = offset.left; boxLeftY = offset.top; } }); var $source = $('#p1'); var characters = $source.html(); var sourceLength = characters.length; var replacement = ""; for(var i = 0 ; i < sourceLength ; ++i){ replacement += "<span class='interesting'>" + characters[i] + "</span>"; } $source.html(replacement); var positionsStore = []; var positionOfPara = $('#p1').position(); $('.interesting').each(function(index, element){ var tempObj = {}; var tempPos = $(element).position(); tempObj.x = Number(tempPos.left) + Number(positionOfPara.left); tempObj.y = tempPos.top + positionOfPara.top; tempObj.ele = element; positionsStore.push(tempObj); }); $('#div1').on("mouseup", function(evt){ $.each(positionsStore, function(index, item){ var boxX = $('#div1').position().left; var boxY = $('#div1').position().top; if(checkIfCoordIsInBox(item,boxX, boxY)){ $(item.ele).removeClass("blue").addClass("orange"); }else{ $(item.ele).removeClass("orange").addClass("blue"); } }) }); }); function checkIfCoordIsInBox(charObj,x,y){ console.log(charObj.x); console.log(charObj.y); if(((charObj.x - x) <= 200) && ((charObj.y - y) <= 200)){ return true; } return false; }
+1
source share

More articles:


All Articles