Develop Reference

How to find exact draggable grid line position in rulerguides.js?

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.

check image width from its source and not from its size on the page - javascript

i have user submitted content on my website that contains image tags.
I have used this:
<script type="text/javascript">
$(document).ready(function () {
// check each image in the .blogtest divs for their width. If its less than X make it full size, if not its poor and keep it normal
function resize() {
var box = $(".blogtest");
box.find("img.buildimage").on('load', function () {
var img = $(this),
width = img.width();
if (width >= 650) {
img.addClass("buildimage-large");
} else if (width < 500 && width > 101) {
img.addClass("buildimage-small");
}
// if image is less than X, its most likely a smiley
else if (width < 100) {
img.addClass("buildimage-smiley");
}
}).filter(function () {
//if the image is already loaded manually trigger the event
return this.complete;
}).trigger('load');
}
resize();
});
</script>
Which assigns a different class to each image depending on its size. This works fine, however if the user is on a ipad / small screen size and the .blogtest div is less than the defined size, it always get put as a small image.
What i wanted to do was the check the image width from its source so that no matter what the screen size, i can always assign the best class.
Thanks. Craig.

How can I determine how many squares are needed to fill a browser window, dynamically?

I'm making colored squares to fill a browser window (say, 20px by 20px repeated horizontally and vertically).
There are 100 different colors, each link to a different link (blog post relevant to that color).
I want to fill the browser window with at least 1 of each colored square, and then repeat as necessary to fill the window, so that there are colored squares on the whole background, as the user drags the window smaller and larger.
If these were just images, setting a repeatable background would work. But, I would like them to be links. I'm not sure where to start on this. Any ideas, tips?
Here's the link to the site I'm working on: http://spakonacompany.com/
I think the most specific piece I need here is this: how can I determine the number of squares needed to repeat to fill the background, using jQuery that dynamically calculates that using the size of the browser window, including when dragged, resized, etc?
Many thanks. :)

To get browser's window width and height I use this function ->
//checking if the browser is Internet Explorer
var isIEX = navigator.userAgent.match(/Trident/);
var doc = isIEX ? document.documentElement : document.body;
function getwWH() {
var wD_ = window;
innerW = wD_.innerWidth || doc.clientWidth;
innerH = wD_.innerHeight || doc.clientHeight;
return {iW:innerW, iH:innerH}
}
There is also a native method of detecting when the browser's window is being resized which works in all major browsers (including IE 8, if you're planning on supporting it) ->
window.onresize = function(){
//here goes the code whenever the window is getting resized
}
So, in order to define how many squares are required to fill the window, you can get the window's width and divide it by the width of the square you are going to fill the window with ->
//getting total number of squares for filling the width and the height
width_ = getwWH().iW; //the width of the window
height_ = getwWH().iH; //the height of the window
If your square's width and height are static 20 by 20, than we can calculate total number of squares per window by dividing our width_ variable by 20 (the same for the height_) ->
squaresPerWidth = width_/20;
squaresPerHeight = height_/20;
So every time our browser window is getting resized we do this ->
window.onresize = function(){
width_ = getwWH().iW;
height_ = getwWH().iH;
squaresPerWidth = width_/20;
squaresPerHeight = height_/20;
//and the rest of the code goes here
}
Haven't tested it but this should work.

Here's something I whipped up. It uses a fixed number of resizable squares, but if you need squares of a fixed size, you just set the window to overflow: hidden and generate an unreasonably large number of squares.
var fillGrid = function(getColor, onClick) {
var tenTimes = function(f){
return $.map(new Array(10),
function(n, i) {
return f(i);
});
};
var DIV = function() {
return $('<div></div>');
};
var appendAll = function(d, all) {
$.map(all, function(e) {
d.append(e);
});
return d;
};
appendAll($('body'),
tenTimes(function(col) {
return appendAll(DIV().css({ height : "10%" }),
tenTimes(function(row) {
return DIV().css({
height : "100%",
width : "10%",
backgroundColor: getColor(row, col),
'float' : "left"
}).click(function() { onClick(row, col); });
}));
}));
};
You have to supply two functions, one to specify the color, the other to be invoked when the user clicks.

Strange Height Matching Behavior in jQuery

I have a design which uses side-by-side divs that need to be height matched. This works perfectly well on page load, but on window resize, things tend to get all out of whack. The elements that are getting their heights changed are becoming larger or smaller than the heights of their target elements - sometimes by very large margins.
var specials = $('#specials');
var specialsPicture = $('#specials_contain .picture');
This is a function that gets called on page load and on the window resize event:
function matchAll() {
match(specialsPicture, specials, {min: 768, max: null});
}
Here's the actual matching function:
function match(elem, target, range) {
// if no max
if (range.max == null) {
// if in range
if (window.innerWidth >= range.min) {
// resize element to target height
elem.outerHeight( target.outerHeight() );
}
// if there is a max
} else {
// if in range
if (window.innerWidth >= range.min && window.innerWidth <= range.max) {
// resize
elem.outerHeight( target.outerHeight() );
}
}
}
Here is a screenshot of what happens:
It seems like such a simple piece of code, but I can't seem to figure out what might be happening. Thanks for the help.

How to detect if any divs are overlapping/'touching' a specific div?

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