I am currently working in rulerguides.js. And i customized into particular div for rulers and grid line.REFER THIS FIDDLE. Rulers are working fine for me but drag-gable create div (GRID LINES) calculated from body element only , that means top of window and left edges of window.Here In my code i can send particular div for rulers
var evt = new Event(),
dragdrop = new Dragdrop(evt),
rg = new RulersGuides(evt, dragdrop,document.getElementById('workarea'));
I need to start from particular div
(For example : ruler h unselectable class will create horizontal grid line and ruler v unselectable class will create vertical grid line in my working area.)
How to get draggable starting element ? And i need to start in particular div just like image
.
I am struggle for more than 2 days.How to solve this issues?
Actually RulersGuides.js is not intended to be used in containers other than document body, so I would think about placing it in an iframe.
If you really need to have it a in a div, here are some adjustments needed:
Update getWindowSize, getScrollPos and getScrollSize functions to calculate container dimensions.
Instead of using vBound and hBound in mousedown handler you need to introduce vLowBound, vHighBound, etc., where container's left and top offsets will be taken in account, like this:
if (vLowBound === 0) {
vLowBound = container.offsetLeft;
vHighBound = vRuler.offsetWidth + vLowBound;
hLowBound = container.offsetTop;
hHighBound = hRuler.offsetHeight + hLowBound;
}
with appropriate checks
if (
(
(x > vLowBound && x < vHighBound) ||
(y > hLowBound && y < hHighBound)
) && rulerStatus === 1
)
and then
if (y > hLowBound && y < hHighBound) {
and
} else if (x > vLowBound && x < vHighBound) {
accordingly
Update removeInboundGuide accordingly in the same way.
Other than that, I think there'll be needed some changes in dom dimensions calculations, dialogs etc.
Please refer to the following jsfiddle for the details.
Related
Background Summary
I have a toggle menu that moves and slides down upon document load. However the web page is responsive. So on bigger screen sizes there is empty room for the menu to unroll but some pages contain IMG, DIV, or SPAN tags that rearrange themselves via media queries and take up the needed space for the menu.
Thus one of two things can happen (that are not desired):
a) The page loads, the menu begins to slide open but there is already one of the aforementioned HTML objects already located in its path so the menu unrolls over it, making things look ugly.
b) A mobile visitor enters the site using landscape view and the menu unrolls with nothing in its path, but then the user changes to portrait view causing (sometimes) an HTML tag to overlap the menu.
Desired Result:
I would like the menu to react to its environment so that if some other DIV encroaches on its space, the menu would automatically trigger the click event on itself which would cause it roll back up and sit on its perch on top of the screen.
This would also mean that as it unrolls initially , the menu should be either 'aware' of what is below it and in the case something is there, to not unroll in the first place; or unroll until it touches some other html object in its way, and immediately reverse course and roll back up to its perch.
One quick look is worth a thousand sentences, so please take a look at jsfiddle below.
JSFiddle Setup of Current Code
http://jsfiddle.net/Nick_Wordpress/jLeGq/1/
Current Working Code
jQuery(window).load(function() {
if (jQuery(".toggle").is(":hidden")) {
jQuery(".toggler").trigger("click");
}
});
jQuery(".toggler").on("click touchstart", function() {
toggler = jQuery(this);
room_navigation_top = 150;
pos = 20;
room_navigation_left = 80;
toggler.next(".toggle").is(":visible") ? toggler.next(".toggle").slideUp(function() {
toggler.addClass("minimized").removeClass("maximized").find(".indicator").text("+");
toggler.parent().animate({top:pos + "px", left:pos + "px"});
}) : ("object" == typeof event.originalEvent && (lock_room_navigation = !0), toggler.parent().animate({top:room_navigation_top + "px", left:room_navigation_left + "px"}, function() {
toggler.addClass("maximized").removeClass("minimized").find(".indicator").text("-");
toggler.next(".toggle").slideDown();
}));
});
Thanks in advance for any input towards solving this issue.
Decide whether to expand the menu or not after you've calculated whether it would overlap any other elements. (Expanding first and then checking if you need to collapse it again would be an ugly solution)
Check for potential overlapping by calculating where the menu would be positioned on expansion, and compare that position to the elements which it could overlap.
You should be able to figure out the expanded size if you know the number of menu items and the size of each menu item. Use the top, bottom, left and right properties together with the height and width to figure out the position.
Compare the calculated position of the positions of the elements that risk being overlapped.
Here's some example code for calculating overlap (not written by me): http://jsfiddle.net/98sAG/
function getPositions( elem ) {
var pos, width, height;
pos = $( elem ).position();
width = $( elem ).width();
height = $( elem ).height();
return [ [ pos.left, pos.left + width ], [ pos.top, pos.top + height ] ];
}
function comparePositions( p1, p2 ) {
var r1, r2;
r1 = p1[0] < p2[0] ? p1 : p2;
r2 = p1[0] < p2[0] ? p2 : p1;
return r1[1] > r2[0] || r1[0] === r2[0];
}
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 */;
My table consists of two column: name of object and object. Name is just one word. Object can occupy several screens. I want to hold name on top of visible part of its cell. In this case when user scrolls page down he can see name of the object until the object is hidden. How can I do this? Are there plugins to do so?
It's only a couple lines of jQuery. http://jsfiddle.net/VuRvs/
Attach a handler to the window scroll event, find your "sticky" heading, position them based on the current scroll position make sure they stay inside of their parent element (the TD).
$(window).on("scroll", function() {
var y = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
$(".sticky").each(function() {
var elm = $(this);
var td = elm.parent("td");
var tdTop = td.offset().top;
var tdBot = tdTop + td.height() - elm.outerHeight();
if(y <= tdBot && y >= tdTop) {
// set a placeholder
if(td.children().length == 1)
td.append(elm.clone().removeClass("sticky").css("visibility", "hidden"));
elm.css("position", "absolute");
elm.css("top", y + "px");
}
});
});
What you are describing, is a persistant header, or a freeze pane like Excel.
Check this link, it's nicelly explained.
I am trying to stop a floating (sliding) div when it reaches the bottom of a containing div but it isn't working. The variable bottom is the lowest point on the page of the containing div but for some reason doesn't act as it should. Anyone have a better method?
$(document).ready(function () {
var top = $('#buttonsDiv').offset().top - parseFloat($('#buttonsDiv').css('margin-top').replace(/auto/, 0));
var bottom = $('#mainBody').offset().top + $('#mainBody').height();
$(window).scroll(function (event) {
// what the y position of the scroll is
var y = $(this).scrollTop();
var z = y + $('#buttonsDiv').height();
// whether that's below the form
if (y >= top && z <= bottom) {
// if so, add the fixed class
$('#buttonsDiv').addClass('fixed');
} else {
// otherwise remove it
$('#buttonsDiv').removeClass('fixed');
}
});
});
Try the below conditions:
if (y >= top && z <= bottom) {
// if so, add the fixed class
$('#buttonsDiv').addClass('fixed');
} else if(z > bottom) {
// otherwise remove it
$('#buttonsDiv').removeClass('fixed').addClass('absolute');
} else {
// otherwise remove it
$('#buttonsDiv').removeClass('fixed');
}
Once you scroll past the container DIV (#mainBody), the floating DIV (#buttonsDiv) should be positioned 'absolute' to the bottom of the container DIV.
Simply defining a margin-bottom with floating div or padding-bottom with external div in this case should help. I have used a similar thing in the following website: www.emotionstorm.com to stop the shopping cart below the top banner.
Please let me know if you need help for a similar code.
I have a scrolling div containing list items. I have this boilerplate scroll event defined
$("#scrollingDiv").scroll(function(e) {
});
Inside of this scroll event function, how can I figure out which elements are at the top and bottom of the currently visible area?
You could try computing the positions of the list items with respect to the scrolling <div> and then scan the positions to see which ones match up with the scrollTop of the <div>.
Something like this perhaps:
var base = $('#scrollingDiv').offset().top;
var offs = [ ];
$('li').each(function() {
var $this = $(this);
offs.push({
offset: $this.offset().top - base,
height: $this.height()
});
});
$("#scrollingDiv").scroll(function() {
var y = this.scrollTop;
for(var i = 0; i < offs.length; ++i) {
if(y < offs[i].offset
|| y > offs[i].offset + offs[i].height)
continue;
// Entry i is at the top so do things to it.
return;
}
});
Live version (open your console please): http://jsfiddle.net/ambiguous/yHH7C/
You'd probably want to play with the fuzziness of the if to get something that works sensibly (1px visible hardly makes an element the top one) but the basic idea should be clear enough. Mixing in the height of #scrollingDiv will let you see which <li> is at the bottom.
If you have a lot of list items, then a linear search might not be what you want but you should be able to solve that without too much effort.