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>
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 2 years ago.
Improve this question
I am coding an aim-trainer, the user can either hit or miss the circle.
I want to calculate the average % of the hit/misses.
So, for example the user:
hits: 6 times
&
misses: 3 times
the percentage is 50%.
I want it in that format 100%, 70%, 60% yeah you get it...
But how do I get that far by doing a calculation?
use Math.round() for show two decimal
Math.round(3*100/6) // misses * 100 / hits
See what is changing the values of hits and misses field.
Whenever there is a change in any of those fields, do percentage = (hits/(hits+misses)) *100 to get the percentage. (I see you are doing (misses/hits)*100 in your example)
Also, take care in rounding off the percentage using percentage.toFixed(2) or Math.round(percentage) as mentioned by Chris in another answer and add the % sign after it or in the name of the field.
Hope it helps.
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 4 years ago.
Improve this question
Is there a way do redesign the jQuery UI slider range,
so that the button stays in the slider div and does not overlap over like in
the screenshots below ?
For the left end, you can just modify the css for ".ui-slider-horizontal .ui-slider-handle", and remove "margin-left: -.6em;"
The right end will require modifications to the javasript, the ui/widgets/slider.js
file. On the latest code on github (https://github.com/jquery/jquery-ui/blob/master/ui/widgets/slider.js), this is on line 602
valPercent = ( that.values( i ) - that._valueMin() ) / ( that._valueMax() - that._valueMin() ) * 100;
The "valPercent" would be a variable from 0-100, this is used as the percentage from the left. You need to decrease this by the proportion of the handler to the entire slider. i.e.
valPercent *= (sliderWidth - handlerWidth)/sliderWidth
Replacing them with the actual values (we use that for the slider and this for the handle because we are in a loop going through the handles) you would get:
valPercent *= (that.elementSize.width- $(this).width())/that.elementSize.width
Putting this after line 603 would make this work for sliders with multiple handles. For single handles you would do the same for line 645, with the following code:
valPercent *= (this.elementSize.width- $(this.handle).width())/this.elementSize.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 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 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.
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.