Develop Reference

jQuery UI Slider Range: keep button in range [closed]

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

How to achieve animation effects [closed]

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 6 years ago.
Improve this question
In this website, the header is animated when you scroll the page a bit. Can you please advise what techniques, tools and best practices (broadly) one may use to achieve this and similar effects?

Use javascript to add a class to the header element when the scroll position is at the top (bind to the onscroll event and check if at the top or not).
Then define new postiions for your elements in css when that class is applied, and use the transition css property to animate it

Well for the animation occurring when you scroll you would use
$(document).scroll(function() {
if($(document).scrollTop() === 0);
} else {
});
As for the animation, there are many ways to do this and the question is too broad, as stated above.

the way I personally do it, is to add a class to the body on scroll. I then style the particular element I want to change (in your case the header) accordingly. I add it to the body instead of the particular element in case I want to manipulate other selectors, etc.
This is the JS I use:
jQuery(window).scroll(function() {
var scroll = jQuery(window).scrollTop();
if (scroll >= 50) { //distance scrolled before effect takes place
jQuery("body").addClass("scrolled");
} else {
jQuery("body").removeClass("scrolled");
}
});
Then I'd add some CSS for example:
header{height:100px;transition:all, .4s, ease; /*Make sure to use all cross-browser markup*/;}
body.scrolled header{height:50px;}

Fit realtime text inside container [closed]

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;
});

HTML map that I can add images over [closed]

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>");
});

Two <div>'s stick together scroll [closed]

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'm working on my diploma thesis, an interactive programming language which should run in browser eniroment using javascript.
In the moment I use an input line and enter event to start interaction and give feedback.
I would like to change this to have a textinput and a second field next to it where the result is shown. I use
<div id = "code" conetenteditable="true"> </div>
<div id= "result"><div>
Both are placed in a table row, so they are next to each other
how can I get result to scroll according to the actual scroll of code?
By the way I use jquery as library.
Thanks,
Rainer

In order for an element to be fixed on a page and remain there as you scroll, you must use CSS.
The code should look like:
<div id = "code" conetenteditable="true" style="position:fixed;"> </div>
<div id= "result" style="position:fixed"><div>
You can position them however you want with top, bottom, left, right.

Use css fixed position for your both dives.
like that:
#id,#result{
position: fixed;
}

I believe your problem is not with the element position but with the scroll of the text inside of the #result div.
If that's the case, you might want to use the overflow css property to have the div show an inner scrollbar.
#result {
overflow-y:auto;
max-height:100px;
}
in this example, the div will scroll if the text inside it stretches above 100px.