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;
});
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 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 debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I need some help with a design for a web application I want to create. Basically I want to start with a black background..let's say 1000px X 1000px. Then on an event..lets say a click event, I want to be able to add a small image of a star on top of that background at the coordinates of my choice. And keep doing that until I have a bunch of stars on the black background.
I don't know how to set up my html to be able to do this. Once I have the overall design I can take it from there, I just don't know where to start.
Languages: HTML, Javascript, CSS
Starting Image:
Image to Add:
Ending Image:
http://jsfiddle.net/mpprq3r3/
Heres a very simple example. Look at how its done and change it to fit your needs.
$(".canvas").on("click", function(e) {
var parentOffset = $(this).parent().offset();
var relX = e.originalEvent.pageX - parentOffset.left;
var relY = e.originalEvent.pageY - parentOffset.top;
console.log(relX)
$(this).append("<div class='item' style='top:"+(relY-5)+"px;left:"+(relX-5)+"px'><img src='http://i.stack.imgur.com/4Crjc.png' /></div>");
});
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
I search around but don't know how to do this one... I receive through $.ajax() data then render through jQuery template. I want:
create template object (this one done)
set it hide() (this one done)
insert it to page with height 1 or 0
then make some effect that will re-size (by height) this inserted div
make fadeIn on this template
So base thing that i need to re-size (slowly) page, add there hidden div (rendered by template) and then make fadeIn function on it. The same thing on fadeOut.
You'll need to use callback functions like this -
$( "#something" ).animate({
height: "100",
width : "100"
}, 5000, function() {
$('#someOtherThing').fadeIn();
});