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
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 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 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 need to create 5 layers - divs. Each layer has different height, but spaces between them are same. For example:
Div 1
30px gap
Div 2
30px gap
Div 3
30px gap
And I need some jQuery script which will determine my page(body tag) height and when I scroll down smoothly change top(objects will be absolutely positioned, they need to overlap), or margin-top of them One by one.. First will go down layer 1 for 50px, then layer 1 with 2 for 50px, then first three layers for 50px... And at the end of the page they will all overlap by 20px(30px gap + 20px overlap). So I dont want to move all layers at once.
I hope this explanation is enough, I don't have any scripts yet, had some, but nothing worked. For better imagination, it is a burger splitted into: top bread, salad, bacon, meat, bottom bread. It will appear on side of one scroll webpage. At top it will be splitted and when user scrolls down, ingredients will overlap and at bottom of page they will complete one burger.
Thank you for help.
This will give you idea where to start:
$(window).scroll(function(){
var margin_max = 30;
var join_at = 70;
var margin = Math.floor( margin_max - ($(window).scrollTop() * margin_max / join_at) );
if(margin < 0) margin = 0;
$('.part').css('margin-bottom', margin);
});
Demo: http://jsfiddle.net/L6DP5/1/
Of course you need modify it a little bit to suit your needs
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();
});