I have an element with 2 backgrounds
I want to add an image beneath the last one so I'm taking the current background and adding a base64 image
It doesn't seem to work though, the style attribute of the element never changes... If I used background-image, the picture would not stay beneath the color though
a snippet:
let src = "data:image/jpeg;base64,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";
let data = $("#obj").css("background") + `, url("${src}")`;
$("#obj").css("background", data);
#obj{
background: linear-gradient(to right, rgba(37, 45, 71, 0), rgba(37, 45, 71, 1) 20%), rgba(255, 45, 71, 0.25);
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div id="obj">Test object</div>
EDIT
Weirdest thing:
e.style.background =
"linear-gradient(to right, rgba(37, 45, 71, 0), #252d47 20%),
#252d47,
url("+src+")";
doesn't work, but following does:
e.style.background =
"linear-gradient(to right, rgba(37, 45, 71, 0), #252d47 20%),
url("+src+")"
I have no idea...
EDIT 2
After realising js was not gonna let me do what i wanted, i just wrapped my element in another one and attached the background to the parent
Not sure why .css() doesn't work, but if you use .attr with style, it seems to work properly:
let src = "data:image/gif;base64,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";
let data = $("#obj").css("background") + `, url("${src}")`;
$("#obj").attr("style", "background: " + data);
#obj{
background: linear-gradient(to right, rgba(37, 45, 71, 0), rgba(37, 45, 71, 1) 20%), rgba(255, 45, 71, 0.25);
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div id="obj">Test object</div>
Related
This is my first time to use regex, I would like to replace the second rgb percentage from 10% to 30%. Such as rgb(251, 188, 5) 10% to rgb(251, 188, 5) 30%
I've tried to search through online, but couldn't get what I really need. below is my testing code, I am only able to get the rgb(251, 188, 5), how can I include the 10% for me to replace it? or direct access to the 10% and replace it to 30%?
before change:
linear-gradient(rgb(251, 188, 5), rgb(251, 188, 5) 10%, rgb(223, 223, 223) 0%, rgb(223, 223, 223) 100%)
expected result:
linear-gradient(rgb(251, 188, 5), rgb(251, 188, 5) 30%, rgb(223, 223, 223) 0%, rgb(223, 223, 223) 100%)
const r = "linear-gradient(rgb(251, 188, 5), rgb(251, 188, 5) 10%, rgb(223, 223, 223) 0%, rgb(223, 223, 223) 100%)".replace(/(?<=rgb.*?)rgb\(.*?\)/, '30%')
console.log(r)
You can use
.replace(/^(.*?\brgb.*?\brgb\([^()]*\)\s*)\d+(?:\.\d+)?%/, '$130%')
See the regex demo.
Details
^ - start of string
(.*?\brgb.*?\brgb\([^()]*\)\s*) - Group 1 ($1):
.*? - any zero or more chars other than line break chars as few as possible
\brgb.*? - a word boundary and rgb and any zero or more chars other than line break chars as few as possible
\brgb\( - rgb whole word and ( char
[^()]* - zero or more chars other than ( and )
\) - a ) char
\s* - zero or more whitespaces
\d+(?:\.\d+)? - one or more digits, and then an optional sequence of a . and one or more digits (not necessary for the current example, but good to have if you have numbers with fractional parts)
% - (actually, it is here to just assure we have a percentage value, it might not be necessary) - a % char.
JavaScript demo:
console.log(
"linear-gradient(rgb(251, 188, 5), rgb(251, 188, 5) 10%, rgb(223, 223, 223) 0%, rgb(223, 223, 223) 100%)".replace(/^(.*?\brgb.*?\brgb\([^()]*\)\s*)\d+(?:\.\d+)?%/, '$130%')
)
I have a line chart with 2 datasets, and both of them are filled with a gradient. The issue is that the gradients overlap, which changes the color of the 'bottom' dataset significantly.
Codepen: https://codepen.io/SimeriaIonut/pen/ydjdLz
My gradients and their positions:
var gradientFillPlanned = ctx.createLinearGradient(250.000, 0.000, 150.000, 500.000);
gradientFillPlanned.addColorStop(0, "rgba(128, 182, 244, 0.6)");
gradientFillPlanned.addColorStop(1, "rgba(128, 182, 244, 0.0)");
var gradientFillActual = ctx.createLinearGradient(250.000, 0.000, 150.000, 500.000);
gradientFillActual.addColorStop(0, "rgba(244, 144, 128, 0.6)");
gradientFillActual.addColorStop(1, "rgba(244, 144, 128, 0.0)");
Is there a way to only render the 'top' dataset only to the point where the bottom dataset starts? Like a css mask or something like that?
Thank you!
This is due to the transparency in rgba such as 0.6. You can try this
var gradientFillActual = ctx.createLinearGradient(250.0, 0.0, 150.0, 500.0);
gradientFillActual.addColorStop(0, "rgba(249,190,240, 1)");
gradientFillActual.addColorStop(1, "rgba(255,255,255, 1)");
CodePen
Im working my way through the Khanacademy site and a a bit confused on how to make randomly sized(within certain parameters), and colored fish after mouseClick. I cant even get mouseClick working.
background(89, 216, 255);
var mouseClicked = function(drawFish){
};
^^^^^^^^^^^^^^^ What am I missing here? ^^^^^^^^^^
var drawFish = function(centerX, centerY, bodyLength, bodyHeight, bodyColor, tailWidth,
tailHeight, eyeColor,tailColor, eyeWidth, eyeHeight){
noStroke();
fill(bodyColor);
// body
ellipse(centerX, centerY, bodyLength, bodyHeight);
// tail
fill(tailColor);
triangle(centerX-bodyLength/2, centerY,
centerX-bodyLength/2-tailWidth, centerY-tailHeight,
centerX-bodyLength/2-tailWidth, centerY+tailHeight);
// eye
fill(eyeColor);
ellipse(centerX+bodyLength/3, centerY, eyeWidth, eyeHeight);
};
drawFish(296, 281, -57,52, color(245, 227, 30),-15, 60,color(13, 12, 12),color(66, 58, 58),4,4); // yellowFish
drawFish(290, 80, 180, 140, color(255, 0, 0), 57, 45,color(46, 66, 194), color(255, 204, 0),32,8); // redFish
drawFish(146,233, 218, 141, color(62, 110, 67), 30, 10, color(245, 240, 245), color(0, 51, 255),12,48); // greenFish
drawFish(233, 370, 322, 36, color(133, 34, 199), 61,15, color(255, 0, 0), color(34, 255, 0),67,20); // purpFish
Any other pointers or recommendations would be greatly appreciated.
Thanks guys!
Cool fishes! I'm learning Processing too. I ran your code and came up with this function for having random fishes appear when you click.
void mouseReleased() {
var c1 = color(random(0,255),random(0,255),random(0,255),random(0,255))
var c2 = color(random(0,255),random(0,255),random(0,255),random(0,255))
var c3 = color(random(0,255),random(0,255),random(0,255),random(0,255))
var s1 = random(10,100)
var s2 = random(10,100)
var s3 = random(10,100)
var s4 = random(10,100)
var s5 = random(5,s1)
var s6 = random(5,s2)
drawFish(mouseX, mouseY, s1, s2, c2, s3,s4, c2, c3,s5,s6); //randFish
}
To make an animation, I think you will want to use the draw() function, use variables for the x,y locations and redraw the background each time. This example has the red fish follow the mouse around.
void draw(){
background(89, 216, 255);
drawFish(mouseX, mouseY, 180, 140, color(255, 0, 0), 57, 45,color(46, 66, 194), color(255, 204, 0),32,8); // redFish
}
I hope your aquarium comes out really great!
I've got a script that changes some CSS on scroll and it currently uses a hex value for a color. I need to switch the #ffffff to rgba(255, 255, 255, 0.6) I think the .6 messes up the syntax but I don't know how to make it right.
var $mainlogo = jQuery('#mainlogo');
var $menuback = jQuery('.x-navbar');
jQuery(document).scroll(function() {
$mainlogo.css({display: jQuery(this).scrollTop()>170 ? "block":"none"});
$menuback.css({background: jQuery(this).scrollTop()>170 ? "#ffffff":"none"});
});
Have you tried
$menuback.css({background: jQuery(this).scrollTop()>170 ? "rgba( 255, 255, 255, 0.6 )":"none"});
I have a gradient applied to an element and I'm trying to get the RGB values from the background image using regexp.
#gradient {
background: linear-gradient(to right, rgba(255,0,0,1) 0%, rgba(0,0,255,1) 100%);
}
var elm = document.getElementById("gradient");
var elementColor = getComputedStyle(elm).backgroundImage;
// elementColor = "linear-gradient(to right, rgb(255, 0, 0) 0%, rgb(0, 0, 255) 100%)";
var first = elementColor.match(/rgb\((.*)\)/)[0];
var second = elementColor.match(/rgb\((.*)\)/)[1];
Using /rgb\((.*)\)/ doesn't work, because it returns
"rgb(255, 0, 0) 0%, rgb(0, 0, 255) 100%)"
And I'm guessing that's because there are parenthesizes occuring twice. How do I fix this? So that it returns
"255,0,0", "0,0,255"
Your regexp doesn't work because .* matches ) as well - as such if we modify it to [^\)]* it becomes what you're after:
var input = "background: linear-gradient(to right, rgba(255,0,0,1) 0%, rgba(0,0,255,1) 100%);";
var array = input.match(/rgba\([^\)]*\)/gi);
for (var i=0; i<array.length; i++)
console.log(array[i].match(/\((.*)\)/)[1]);
http://jsfiddle.net/4z8Ly/2/
Regular expressions are hard. Complex regular expressions with multiple capture groups should be avoided unless they are clearly the most practical way of parsing something.
It is not clear to me they are, in this scenario. I would:
rgb(255, 0, 0) 0%, rgb(0, 0, 255) 100%)
1- Remove the parenthesis from the expression
string = string.replace(/[()]/g, '');
// "rgb255, 0, 0 0%, rgb0, 0, 255 100%"
2- Split on rgb:
parts = string.split('rgb');
// ["", "255, 0, 0 0%, ", "0, 0, 255 100%"]
3- The first element will always be empty, so get rid of that:
parts.shift()
// ["255, 0, 0 0%, ", "0, 0, 255 100%"]
4- Split each element by /,? / (optional comma, then a space):
parts[0].split(/,? /g)
// ["255", "0", "0", "0%", ""]
There you have your values, and we only needed two dead simple regular expressions.
I wanted to use a single regexp to avoid using multiple lines of code to get the job done, but it seems that what I want to do is not possible with a single regexp.
And I came to understand that you can't capture (but match) if you're using g flag.
I've solved the problem with a one-liner.
elementColor.match(/\(\d+, \d+, \d+\)/g)[0].replace(/[( )]/g, "");
// "linear-gradient(to right, rgb(255, 0, 0) 0%, rgb(0, 0, 255) 100%)" -> "(255, 0, 0)" -> "255,0,0"