We Keep Coding

Adding decimals to rangeslider

This is the function I'm using for making the range slider:
function rangeSlider(id, onDrag) {
var range = document.getElementById(id),
dragger = range.children[0],
draggerWidth = 20, // width of your dragger
down = false,
rangeWidth, rangeLeft;
dragger.style.width = draggerWidth + 'px';
dragger.style.left = -draggerWidth + 'px';
dragger.style.marginLeft = (draggerWidth / 2) + 'px';
range.addEventListener("mousedown", function(e) {
rangeWidth = this.offsetWidth;
rangeLeft = this.offsetLeft;
down = true;
updateDragger(e);
return false;
});
document.addEventListener("mousemove", function(e) {
updateDragger(e);
});
document.addEventListener("mouseup", function() {
down = false;
});
function updateDragger(e) {
if (down && e.pageX >= rangeLeft && e.pageX <= (rangeLeft + rangeWidth)) {
dragger.style.left = e.pageX - rangeLeft - draggerWidth + 'px';
if (typeof onDrag == "function") onDrag(Math.round(((e.pageX - rangeLeft) / rangeWidth) * 100));
}
}
}
// Run!
rangeSlider('range-slider-1', function(value) {
document.getElementById('test-result').innerHTML = value + '%';
});
rangeSlider('range-slider-2', function(value) {
document.getElementById('test-result').innerHTML = value + '%';
});
JSBIN: http://jsbin.com/yuvekecodo/edit?html,js,output
How can I have the output in decimals?
For example if I set the range from 10 - 100 I want it to be able to have the decimals. 10.01, 10.02, 10.03 ~ 99.97. 99.98, 99.99, etc.
What is the best way to achieve this?
Thanks guys, I'm loosing my mind over this for days.
Cheers.
Thanksl

Please try this may help to get 2 digit decimal point values:
if (typeof onDrag == "function") onDrag(parseFloat(((e.pageX - rangeLeft) / rangeWidth) * 100).toFixed(2));
Use it for like:
function updateDragger(e) {
if (down && e.pageX >= rangeLeft && e.pageX <= (rangeLeft + rangeWidth)) {
dragger.style.left = e.pageX - rangeLeft - draggerWidth + 'px';
var startpnt=10,endpnt=50,baseval_percent,baseval;
baseval_percent = ((e.pageX - rangeLeft) / rangeWidth) * 100;
baseval = (endpnt-startpnt)*baseval_percent/100;
baseval = baseval+startpnt;
if (typeof onDrag == "function") onDrag(parseFloat(baseval).toFixed(2));
}
}

clear javascript. dynamically created div resize: it only grow! why?

First off, the whole code is here, on pastebin.
No jquery or alikes are employed!
I have a HTML with a DIV created using document.createElement("div") and plugged into the page with document.getElementById('p').appendChild(d);
The new DIV is provided with a bunch of event handlers:
var d = document.createElement('div');
d.className = 'rect';
d.addEventListener('mousedown', catch_box, false);
d.addEventListener('mouseup', release_box, false);
d.addEventListener('mouseout', release_box, false);
d.addEventListener('mousemove', mouse_move_box, false);
d.addEventListener(wheel_hook, scroll_box, false);
document.getElementById('p').appendChild(d);
This works fine:
// move the box around on 'mousemove'
var lPos = cache.left + m_speed * cache.h_dir,
tPos = cache.top + m_speed * cache.v_dir,
ok = (lPos >= 0) && ((lPos + cache.width) <= max_width) &&
(tPos >= 0) && ((tPos + cache.height) <= max_height);
if (ok) {
box.style.left = lPos + 'px';
box.style.top = tPos + 'px';
}
but this doesn't:
// resize the box
var hSize = cache.width + s_speed * cache.h_dir,
vSize = cache.height + s_speed * cache.v_dir,
ok = (hSize >= min_width) &&
((cache.left + hSize) <= max_width) &&
(vSize >= min_height) &&
((cache.top + vSize) <= max_height);
if (ok) {
box.setAttribute('style', 'width:'+hSize+'px;height:'+vSize+'px;');
box.style.width = hSize + 'px';
box.style.height = vSize + 'px';
}
The box.style.width and box.style.height may only grow :(
The question is: WHY?? And how to work it around?

jQuery : Get All DOM elements come under the selected part (Rectangle) like zooming plugins of jQuery

I want all the DOM elements (which can be overlapped by others too) to be listed out which falls under the selection. The thing I tried giving me at a fixed coordinate (with overlapped ones) but I need it to give me for full rectangle.
https://jsfiddle.net/mantrig/3tqqy0gt/
var flag=0;
$("#enable-show").click(function(){
if(flag==0) {
$(document).bind('mousemove', function(e){
$('#tail').css({
left: e.pageX - 80,
top: e.pageY-50,
});
var $elements = GetAllElementsAt( e.pageX , e.pageY);
var html="";
$elements.each(function() {
html += $(this)[0].id + "<br />";
$("#result").html(html);
});
$("#tail").show();
});
flag++;
}
else {
$(document).bind('mousemove', function(e){
$("#tail").hide();
});
flag=0;
}
});
function GetAllElementsAt(x, y) {
var $elements = $("body *").map(function() {
var $this = $(this);
var offset = $this.offset();
var l = offset.left;
var t = offset.top;
var h = $this.height();
var w = $this.width();
var maxx = l + w;
var maxy = t + h;
$("ul").append("<li>" + $this[0].id + " (" + $this[0].tagName + ")" + " [l:=" + l + ",t:=" + t + ",h:=" + h + ",w:=" + w + ",maxx:=" + maxx + ",maxy:=" + maxy + "]</li>");
return (y <= maxy && y >= t) && (x <= maxx && x >= l) ? $this : null;
});
return $elements;
}
Can anyone help with it?

How to show child radwindow on its parent radwindow manually?

I am creating two radwindow dialogs: a parent and its child.
Parent radwindow has size 1082x630
Child radwindow has size 1500x900
On parent radwindow dialog, when I click on button "Show Child Dialog", its child radwindow will be shown.
The problem here is the size of child dialog larger than its parent. So, I want to resize the size of child dialog and show it in the center of its parent dialog.
And here is my code in Javascript that I use for resizing child dialog manually. To center child dialog, I also use childRadWindow.left and childRadWindow.top . BUT, it does not work as my expected. The child dialog does not place in the center of its parent.
Please reference my expected, actual images and my code to get the problem.
My expected result:
Actual result:
Here is my code to resize child dialog manually. I put it on child dialog *.aspx
<script type="text/javascript">
$(document).ready(function () {
resizeRWndDialog();
});
</script>
function resizeRWndDialog() {
var radWindows = [];
var radWindow = GetRadWindow();
while (true) {
if (radWindow != undefined && radWindow != null) {
radWindows.push(radWindow._popupElement);
radWindow = radWindow.BrowserWindow.GetRadWindow();
} else {
break;
}
}
var numsOfRadWindow = radWindows.length - 1;
if (numsOfRadWindow > 0) {
for (var i = numsOfRadWindow; i > 0; i--) {
var parentWindow = radWindows[i];
var parentWidth = parentWindow.clientWidth; //parentWidth =1082
var parentHeight = parentWindow.clientHeight; //parentHeight = 630
var chidWindow = radWindows[i - 1];
var childWidth = chidWindow.clientWidth; //childWidth = 1500
var childHeight = chidWindow.clientHeight; //childHeight = 900
var rateMinWidth = 0,
rateMinHeight = 0,
rateMaxWidth = 0,
rateMaxHeight = 0;
if (chidWindow.style.minWidth != "") {
rateMinWidth = parseInt(chidWindow.style.minWidth) / childWidth;
}
if (chidWindow.style.minHeight != "") {
rateMinHeight = parseInt(chidWindow.style.minHeight) / childHeight;
}
if (chidWindow.style.maxWidth != "") {
rateMaxWidth = parseInt(chidWindow.style.maxWidth) / childWidth;
}
if (chidWindow.style.maxHeight != "") {
rateMaxHeight = parseInt(chidWindow.style.maxHeight) / childHeight;
}
if ((parentWidth - 40) > 0 && childWidth >= parentWidth - 40) {
childWidth = parentWidth - 40; //parentWidth = 1082, childWidth = 1042
}
if ((parentHeight - 80) > 0 && childHeight >= parentHeight - 80) {
childHeight = parentHeight - 80; //parentHeight = 630, childHeight = 550
}
setSizeRWndDialog(chidWindow.getElementsByClassName("rwTable")[0], rateMinWidth * childWidth, rateMinHeight * childHeight, rateMaxWidth * childWidth, rateMaxHeight * childHeight, childWidth, childHeight);
setSizeRWndDialog(chidWindow, rateMinWidth * childWidth, rateMinHeight * childHeight, rateMaxWidth * childWidth, rateMaxHeight * childHeight, childWidth, childHeight);
chidWindow.left = Math.round((parentWidth - childWidth) / 2, 0) + "px";
chidWindow.top = Math.round((parentHeight - childHeight) / 2, 0) + "px";
chidWindow.focus();
radWindows[i - 1] = chidWindow;
}
}
}
function setSizeRWndDialog(element, minWidth, minHeight, maxWidth, maxHeight, width, height) {
if (minWidth != 0 && minHeight != 0) {
element.style.minWidth = minWidth + "px";
element.style.minHeight = minHeight + "px";
}
if (maxWidth != 0 && maxHeight != 0) {
element.style.maxWidth = maxWidth + "px";
element.style.maxHeight = maxHeight + "px";
} else {
element.style.maxWidth = width + "px";
element.style.maxHeight = height + "px";
}
element.style.width = width + "px";
element.style.height = height + "px";
}

I solved the problem myself, guys.
I just added one more line at the end of the resizeRWndDialog() as the snippet code below:
function resizeRWndDialog() {
//.........
if (numsOfRadWindow > 0) {
//...........
}
GetRadWindow().center(); // >> Just use this line
}

Javascript and AJAX : Floating an image next to the cursor - questions

I have got a javascript code that will make a floating image appear next to the mouse pointer (and through the use of php it shows the image that the mosue is hovering over, but full size because the image on the page itself is sized down a bit). But whilst it is OK if the image is on the left of the page, there is a problem if the image is on the right hand side.
The code:
<script>
var cX = 0; var cY = 0; var rX = 0; var rY = 0;
function UpdateCursorPosition(e){ cX = e.pageX; cY = e.pageY;}
function UpdateCursorPositionDocAll(e){ cX = event.clientX; cY = event.clientY;}
if(document.all) { document.onmousemove = UpdateCursorPositionDocAll; }
else { document.onmousemove = UpdateCursorPosition; }
function AssignPosition(d) {
if(self.pageYOffset) {
rX = self.pageXOffset;
rY = self.pageYOffset;
}
else if(document.documentElement && document.documentElement.scrollTop) {
rX = document.documentElement.scrollLeft;
rY = document.documentElement.scrollTop;
}
else if(document.body) {
rX = document.body.scrollLeft;
rY = document.body.scrollTop;
}
if(document.all) {
cX += rX;
cY += rY;
}
d.style.left = (cX+10) + "px";
d.style.top = (cY+10) + "px";
}
function HideContent(d) {
if(d.length < 1) { return; }
document.getElementById(d).style.display = "none";
}
function ShowContent(d,i) {
if(d.length < 1) { return; }
var dd = document.getElementById(d);
AssignPosition(dd);
dd.style.display = "block";
$(d).setHTML ('<img src="'+i'" />');
}
function ReverseContentDisplay(d) {
if(d.length < 1) { return; }
var dd = document.getElementById(d);
AssignPosition(dd);
if(dd.style.display == "none") { dd.style.display = "block"; }
else { dd.style.display = "none"; }
}
//-->
</script>
Here is a standard image that will trigger the floating content:
<a onmousemove="ShowContent('FloatingImage','image.jpg'); return true;" onmouseover="ShowContent('FloatingImage','image.jpg'); return true;" onmouseout="HideContent('FloatingImage','image.jpg'); return true;" href="javascript:ShowContent('FloatingImage','image.jpg')">standard html</a>
<div
id="FloatingImage"
style="display:none;
position:absolute;
border-style: solid;
background-color: white;
padding: 5px;
z-index:+1">
<img id="MouseImage" name="MouseImage" src="LR-10.jpg" />
</div>
--end code--
.... On its own this is fine and it works. as you can float the mouse over the next thumbnail image and the floating image changes accordingly whilst keeping aspect ratio. BUT if the thumbnail image is on the right hand side, the floating image is off the right hand edge of the screen and cannot be seen: is there any way of placing a 'block' within the JS code so that if the thumbnail image is close to the edge of the content (screen edge or edge of the containing DV layer) than it shows the image on the left hand side of the mouse pointer instead?
Next question: this code works fine if I open the page on its own - BUT my website design will be calling the page to open inside a DIV layer by means of AJAX. This breaks the code and it doesn't work then. This has happened with other scripts I have written: works fine by itself, but put in through an AJAX load request and it fails. How can this be solved?
Thanks.

I've modified your script so that the image will switch to the left when the mouse is too far to the right:
var cX = 0, cY = 0, rX = 0, rY = 0, vW;
function UpdateCursorPosition(e) { cX = e.pageX; cY = e.pageY; }
function UpdateCursorPositionDocAll(e) { cX = event.clientX; cY = event.clientY; }
if (document.all) { document.onmousemove = UpdateCursorPositionDocAll; }
else { document.onmousemove = UpdateCursorPosition; }
function AssignPosition(d) {
if (self.pageYOffset) {
rX = self.pageXOffset;
rY = self.pageYOffset;
} else if (document.documentElement && document.documentElement.scrollTop) {
rX = document.documentElement.scrollLeft;
rY = document.documentElement.scrollTop;
} else if (document.body) {
rX = document.body.scrollLeft;
rY = document.body.scrollTop;
}
if (document.all) {
cX += rX;
cY += rY;
}
var oW = d.offsetWidth;
if (cX + 10 + oW > vW) d.style.left = (cX - 10 - oW) + 'px';
else d.style.left = (cX+10) + 'px';
d.style.top = (cY+10) + 'px';
}
function HideContent(d) {
if (d.length < 1) return;
document.getElementById(d).style.display = 'none';
}
function ShowContent(d,i) {
vW = ViewportWidth();
if (d.length < 1) return;
var dd = document.getElementById(d);
AssignPosition(dd);
dd.style.display = 'block';
document.getElementById(d).innerHTML = '<img src="'+i+'" />';
}
function ReverseContentDisplay(d) {
if (d.length < 1) return;
var dd = document.getElementById(d);
AssignPosition(dd);
dd.style.display = (dd.style.display=='none')? 'block' : 'none';
}
function ViewportWidth() {
if (self.innerWidth) return self.innerWidth;
else if (document.documentElement && document.documentElement.clientWidth)
return document.documentElement.clientWidth;
else if (document.body) return document.body.clientWidth;
}