I'm using this jquery color picker plugin http://www.eyecon.ro/colorpicker/ in my web application. I need to do some design tweaks. I'm gonna show some sample features on the application. Please look at this http://jsfiddle.net/FSDPH/8/ there is a movable box with accordions. In the color section, I've implemented that color picker plugin which I can't show in the jsfiddle. What I need is, when the color picker is selected and if the box is moved beyond the (document) section, the box and color picker palette should dynamically change its position inside the document area. I've succeeded in dynamically changing the box position but I can't make it work for the color picker palette.
Here is the jquery code: (for dymanically altering the box and colorpicker palette position)
var dwidth = $(document).width() - 225; // #box_bg width
$("#box_bg").draggable({
stop: function(event, ui) {
var npos = $("#box_bg").position();
if ( npos.left > dwidth)
{
$(".colorpicker").css("left","-133px!important");
$("#box_bg").css("left", dwidth+"px");
}
}
});
In the above code, $("#box_bg") is working when the box is moved beyond the document area. But it is not working for $(".colorpicker") the left property is not changing in the colorpicker.css file. Why is it so?
UPDATE
Here I've shown more clearly, please check this out :)
http://jsfiddle.net/rkumarnirmal/4GrsD/3/
Could anyone guide me?
Thanks!
The left property of the colorpicker is calculated in the plugin every it is shown. Until you change the plugin, the left property will always be calculated on the fly.
Here is the code from the plugin:
show = function (ev) {
var cal = $('#' + $(this).data('colorpickerId'));
cal.data('colorpicker').onBeforeShow.apply(this, [cal.get(0)]);
var pos = $(this).offset();
var viewPort = getViewport();
var top = pos.top + this.offsetHeight;
var left = pos.left;
if (top + 176 > viewPort.t + viewPort.h) {
top -= this.offsetHeight + 176;
}
if (left + 356 > viewPort.l + viewPort.w) {
left -= 356;
}
cal.css({left: left + 'px', top: top + 'px'});
if (cal.data('colorpicker').onShow.apply(this, [cal.get(0)]) != false) {
cal.show();
}
$(document).bind('mousedown', {cal: cal}, hide);
return false;
}
Related
I am trying to make a tooltip which basically shows a table (in my example below I used a large amount of text).
However I've wanted to change the position of the tooltip when you hover on the target element that is nearly at the corner of the screen.
Here is the Fiddle
$("strong").on("mouseover", function(){
var $this = $(this),
strongText = $this.text();
$tooltipContainer.show();
$tooltipContainer.append('<span>'+ strongText + '</span>');
}).on("mousemove", function(mousePos){...
You can change your mousemove code a little to update top position if overlap is there like below. Check demo - Fiddle
on("mousemove", function(mousePos){
var overlap = mousePos.pageY + posSrollY + $tooltipContainer.height() - $(window).height() - $(window).scrollTop();
$tooltipContainer.css({
left: mousePos.pageX,
top: mousePos.pageY + posSrollY - ( overlap > 0 && overlap )
});
})
I created an angular multiple slider directive and now I am adding features to it. One feature I am looking to implement is a collision detection with one slider bubble will float above another when sliding past one another. Here is a plunker with the full code example. http://plnkr.co/edit/eg365UgK7ZNW1GZaTltQ?p=preview
The code to look at is on line 224 in the multislider.js
//This is my code for adjusting a slider
var delta = 25;
var baseTop = -36;
if (overlaps(bubbles[currentRef][0], bubbles[currentRef + 1][0])) {
handles[currentRef].css({ top : pixelize(baseTop), height : pixelize(baseHeight + delta) });
bubbles[currentRef].css({ top : pixelize(baseTop - delta)});
} else {
handles[currentRef].css({ top : '', height : ''});
bubbles[currentRef].css({ top : ''});
}
To recreate just slide the red handle over the green and will see the red bubble and handle and bubble does hover but flickers up and down. It should stay up and not flicker and then resume normal height after fully moving passed the green handle.
Why is it flickering? What am I missing to prevent this from happening.
Here is my github repo if you want to take a look and submit a PR there: https://github.com/enkodellc/angular-multi-slider
As #sirrocco explained:
It's flickering because once the popup is lifted, then next time you
move it, it won't collide so it will drop. You move it again, it
collides, it gets moved up then it doesn't collide anymore ... and so
on :)
I updated the code in the plunker to add the basic checks. Now I need to make it work with (n) sliders.
//This is my code for adjusting a slider
var delta = 25;
var baseTop = -36;
if (overlaps(bubbles[currentRef][0], bubbles[currentRef + 1][0])) {
handles[currentRef].css({ top : pixelize(baseTop), height : pixelize(baseHeight + delta) });
bubbles[currentRef].css({ top : pixelize(baseTop - delta)});
} else {
if (bubbles[currentRef][0].offsetLeft > (bubbles[currentRef+1][0].offsetLeft + bubbles[currentRef+1][0].offsetWidth)
|| ((bubbles[currentRef][0].offsetLeft + bubbles[currentRef][0].offsetWidth) < bubbles[currentRef+1][0].offsetLeft)) {
handles[currentRef].css({ top : '', height : ''});
bubbles[currentRef].css({ top : ''});
}
}
I was using the stellar.js in my project.
There is a question - under the "realtime resize" requirement( do not reload page ).
when I using the resize function to calculate the new position LEFT in horizontal scrolling below:
$(window).resize(function(){
var newPos = element.position().left*100; //Get NEW Position ...
element.css("left", newPos); //It's not working ...
});
the elements with "data-stellar-ratio" will not be overwrite.
How do i do to slove this problem ?
Thanks for your help.
Under the requirement below
-> When resizing browser then recalculate the element position in real-time ( NO Reload page )
-> So, I will recalculate position and overwrite new position to element.
-> But, the element which use data-stellar-ratio attribute can not be overwrite new position.(example in comment)
here is my problem. thank you for your help again.
Your question is very unclear. But, if you wish to change the data-stellar-ratio attribute, you would do it like this.
element.attr('data-stellar-ratio', 2);
element must be a jQuery object.
To you refer
_repositionElements: function() in stellar.js
if (this.options.horizontalScrolling) {
var bSize = this.options.refWidth,bResize = $(window).width(),bRatio = this.options.formula(bResize, bSize);
newPositionLeft = (scrollLeft + particle.horizontalOffset + this.viewportOffsetLeft + particle.startingPositionLeft - particle.startingOffsetLeft + particle.parentOffsetLeft) * -(particle.stellarRatio + fixedRatioOffset - 1) + particle.startingPositionLeft;
newPositionLeft *= bRatio; //all element reposition in here
newOffsetLeft = newPositionLeft - particle.startingPositionLeft + particle.startingOffsetLeft;
}
bSize = resizing browser before
bResize = resizing browser after
bRatio = resize ratio
newPositionLfet = all element position left
newPositionTop = the same to newPositionLeft
I would like to begin with saying i am new to the whole programming scene. This is my first jQuery project for ICT at school.
The project:
I have multiple draggable objects (images). They are in #wrapper, wrapper is in my style.css
Now i want to make it so that when the images are dragged over a background image (centered), located under the wrapper, they will change from image. I have done this successfully by getting the location of each object:
drag: function(){
var who = $("#draggable1");
var offset1 = who.offset();
var xPos1 = offset1.left;
var yPos1 = offset1.top;
$('#posX').text('x: ' + xPos1);
$('#posY').text('y: ' + yPos1);
Then check where the object is, and if its within the X and Y of my background picture, they change:
if(yPos1 > '115' && yPos1 < '578')
{
this.src = 'pinkward5.png'
}
And also code if the object is dropped outside of the background image, this will make it go back to its original place:
if(xPos1 < '717' || xPos1 > '1202')
{
who.animate({ 'top': offset1.top == '0', 'left': offset1.left == '0'}, 200, function(){
who.stop( true,true );
who.mouseup();
this.src = 'visionward.png'
});
BUT:
If i use another monitor with another resolution or leave the browser on the half of my screen, the coordinates change, and the code doenst work as it should because the offset changes.
My question:
How can i make that no matter what the resolution or window of the browser, the coordinates are the same. Maybe with percentages or check if the object is within the css border of the background image?
Thanks! i hope i have not violated the stackoverflow rules.
Why to hardcode the coordinates?
Simply call "offset()" on the background image to get the coordinates, exactly like what you did on the draggable element, and calculate the bounds with its width and height.
var bkgd = $('.whatever-you-name-the-background-image-class');
var bkgd_offset = bkgd.offset();
if(xPos1 >= bkgd_offset.left && xPos1 + who.width() <= bkgd_offset.left + bkgd.width() &&
yPos1 >= bkgd_offset.top && yPos1 + who.height() <= bkgd_offset.top + bkgd.height())
/* draggable inside background */;
else
/* not inside background */;
I am trying to make it so that when the cursor or the selection (either or both) is moved either left of right in an ace-editor session, the scroll bar scrolls to keep the cursor or selected region in the center of the textarea.
There is a function called centerSelection()
this.centerSelection = function() {
var range = this.getSelectionRange();
var pos = {
row: Math.floor(range.start.row + (range.end.row - range.start.row) / 2),
column: Math.floor(range.start.column + (range.end.column - range.start.column) / 2)
}
this.renderer.alignCursor(pos, 0.5); };
which "Attempts to center the current selection on the screen."
which sounds like what i want but it doesn't seem to be doing anything.
there is also a keybinding for a command called "centerselection"
{
name: "centerselection",
bindKey: bindKey(null, "Ctrl-L"),
exec: function(editor) { editor.centerSelection(); },
readOnly: true}
but it has no Key input for windows, just says null. I don't have a mac so I can't try out Ctrl-L and I'm curious as to why it doesn't have a key input for windows aswell.
after playing with it some more i realise it is working it is just centering the selection row and not the selection column. So is there a way to get the selection to be in the center column as well as the center row?
I think it is because the alignCursor function only aligns the cursor row and not column
this.alignCursor = function(cursor, alignment) {
if (typeof cursor == "number")
cursor = {row: cursor, column: 0};
var pos = this.$cursorLayer.getPixelPosition(cursor);
var h = this.$size.scrollerHeight - this.lineHeight;
var offset = pos.top - h * (alignment || 0);
this.session.setScrollTop(offset);
return offset;
};
Well I think I figured it out, this code below works fine. :)
var cursorLeft = editor.renderer.$cursorLayer.getPixelPosition(0).left;
//gets distance between cursor and left side of textarea in pixels
var scrollerWidth = editor.renderer.$size.scrollerWidth;
//gets the width of the text area (that can be seen)
editor.renderer.scrollToX(cursorLeft - scrollerWidth/2);
//moves the scroller so that the left side i at the same point as the cursor minus half the width of the area that can be seen