Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
My question is how do I replace a certain color in javascript? I have a few SVG fills which I need to change in color but how exactly do I get all #333 colors that exist in my document?
I would try something with jquery (going to be a good bit simpler than anything with pure js)
$(this).html().replace("#333","#f2f2f2")
Here is something you could do. This example would return all elements with that color.
var results = $('*').filter(function() {
return $(this).css('color') == 'rgb(255, 0, 0)';
})
http://jsfiddle.net/g5yp1g7y/
You will notice I didn't use hex. The problem with selecting by hex is most browsers will convert the color style to rgb when you call them via JS.
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I am using Angular 2 with (for now) 2 way data binding and I need to diplay a H1 over the full width of the page. So it will become smaller the more text there will be. And bigger if the amount of text shrinks.
I saw http://fittextjs.com but that resizes it only on the page init.
I need it in realtime.
Thanks!
I am using this
https://github.com/jquery-textfill/jquery-textfill
And you can call them when you want (after text render), simply, calling
$('#my-element').textfill({
maxFontPixels: 36
});
And it's very customizable.
Happy coding!
Edit:
I understand the problem now replace px with whatever unit of length
<h1 ng-style="{'max-width':'100%', 'font-size': inputlength + 'px'}">{{input}}</h1>
You may have to tweak it to however you want to get it to work
essentially having to do the logic like font-size:calc(100% + 2vw)
or work it out in your controller
$scope.input = "ssssssss";
$scope.inputlength = 10;
$scope.$watch('input', function(){
$scope.inputlength = window.innerWidth / $scope.input.length;
});
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I've looked around for something that best suits what I want, but I only find specific examples that only cover part of what I want which is:
A randomly selected color scheme that I've preset but not yet coded-- this includes: background images, text colors, and border colors per each scheme.
I have six schemes, and I'd like a theme to be randomly selected when the page loads/refreshes.
Like I've stated, I've found similar examples but only for a background image OR text color.
Any help would be much appreciated.
Make each scheme a CSS file, name them scheme-1.css, scheme-2.css, scheme-3.css, etc.
Then, add this to your html:
<link rel="stylesheet" id="style-scheme" type="text/css" href="scheme.css"/>
Javascript: (assuming use of jquery)
<script type="text/javascript">
var number = Math.floor((Math.random() * 3) + 1);//number between 1 & 3 (3 stylesheets)
$("#style-scheme").attr("href", "scheme-" + number + ".css" )
</script>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
How do I do the color color customization in HTML5? Examples can be found at http://perkins.org/ whereby they have a color contrast option on the top of their page.
Thank you!
Um, mark all the elements you want to change as class "contrast" and then change the color and the background color:
var elements = document.getElementsByClassName('contrast');
for (var i = 0; i < elements.length; i++) {
elements[i].style.color = newcolor;
elements[i].style.background = newbackground;
}
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
I would have the same width DivTest and IdOtherDIV.
I'm trying set property like this:
DivTest {
background: #007C52;
width: document.getElementById ("IdOtherDIV").scrollWidth + "px.\n";
}
Is any way to achieve it (IdOtherDIV is dynamically created and width can change on every page refresh)?
You can use jquery
width=$("IdOtherDiv").css("width");
$("#DivTest").css({"background":"007C52","width":width})
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
How to change the "start" of image?
I mean that the img is in the immobility only it's beginning is moving
I want change it CSS or HTML, in the last resort in JavaScript
Something like this: FIRST PICTURE (This picture on click change it's beginnig).
... It transform to it: SECOND PICTURE
Any idea? :/
<div class="myImg"> </div>
<style>
.myImg{
background: url('myimg.jpg');
}
.myImg2{
background: url('myotherimg.jpg');
}
</style>
<script type="javascript/text">
$('.myImg').click(function() {
$(this).removeClass('myImg');
$(this).addClass('myImg2');
});
</script>
Ofcourse you'll have to use jquery link to get jQuery latest update.
So what have i actually done here?
I've used jQuery to check if user click div .myImg if he did i just switch bettwen the div's classes and each other class got different image.
Hope i helped.
I'm not entirely sure what you're asking, but it sounds like you might want to do CSS sprites.
http://css-tricks.com/css-sprites/
If you want to change the image on click, you'll need some code. I won't spend too much time on that, given your question is hard to decipher, but if it were me, I would create a class per sprite, then toggle between the two classes based on the click event.