Develop Reference

How can I make a div from elsewhere on the page float next to a checkbox when the checkbox is clicked?

I have a checkbox. I want a div which is on the bottom of my page to float next to the checkbox when the checkbox has been clicked.
How can I do this?
Here is some code that is working for my mouseovers. Its pretty far beyond my level. Is there an easier way, or way I can use this code for checkboxes as well?
function addreflinkpreview(e) {
var c;
var d = "srcElement";
var f = "href";
this[f] ? c = this : c = e[d];
ainfo = c.className.split('|');
var g = document.createElement('div');
g.setAttribute("id", "preview" + c.className);
g.setAttribute('class', 'reflinkpreview');
g.setAttribute('className', 'reflinkpreview');
if (e.pageX) {
g.style.left = '' + (e.pageX + 50) + 'px'
} else {
g.style.left = (e.clientX + 50)
}
var h = document.createTextNode('');
g.appendChild(h);
var i = c.parentNode;
var j = i.insertBefore(g, c);
new Ajax.Request(ku_boardspath + '/read.php?b=' + ainfo[1] + '&t=' + ainfo[2] + '&p=' + ainfo[3] + '&single',{
method: 'get',
onSuccess: function(a) {
var b = a.responseText || _("something went wrong (blank response)");
j.innerHTML = b
},
onFailure: function() {
alert('wut')
}
})
}

One way you may be able to achieve this is with positioning and transitions. Take the screen coordinates of the click event and then absolute position the div next to the coordinate by adding or subtracting from the x-coordinate.

Div Positioning is calculated fine but need explanation how it is working

Can someone explain how this is working. I am creating sidepanel ad and to place the panels i want the position of the width. When i upload the script on my server then i get a small script which we place on the publisher website and where our script runs inside the iframe. Here is the screen shot.
My script is highlighted in yellow which is getting the position of the div which is in red box class='content'.
Here is the code i have used.
function getPosition(element) {
var xPosition = 0;
var yPosition = 0;
var left = 0;
var top = 0;
var i = 0;
while (element) {
xPosition = (element.offsetLeft);
yPosition = (element.offsetTop);
console.log("TOP Pos: "+yPosition+"Left Pos: "+xPosition);
if (i == 1) {
left = xPosition;
top = yPosition;
}
element = element.offsetParent;
i++;
}
return {
x: left,
y: top
};
}
This is how i am calling the getPosition method
function ReadDivPos(selector) {
var _divPos = "";
var parentDoc = window;
while (parentDoc !== parentDoc.parent) {
parentDoc = parentDoc.parent;
}
parentDoc = parentDoc.document;
var parentDiv = parentDoc.getElementsByTagName('div');
var divs = [];
for (var i = 0; i < parentDiv.length; i++) {
if (parentDiv[i].className == "content") {
var pos = getPosition(parentDiv[i]);
var x = pos["x"];
var y = pos["y"];
console.log("Values+ Top: " + y + " Left: " + x);
var w = parentDiv[i].offsetWidth;
_divPos += x + "," + w + "," + y + "," + (x + w) + ","+window.screen.availWidth+"\\n";
}
}
console.log("Values+ x: " + _divPos);
return _divPos;
}
This is the values i am getting .
I got the correct values in the second attempt ,i.e,
TOP Pos: 185Left Pos: 197
Top:185 and Left 197 which is correct but why i got Top 2 and Left 0 for the first time and second time i got correct values. Since i am getting the values in the second attempt so i have fixed this using i==1
if (i == 1) {
left = xPosition;
top = yPosition;
}
i dont think this is the best approach but thats how i am getting the correct values. can anyone explain me this why it is working fine on the second attempt. Thanks in advance
Anyone explain me this ? Thanks

I'm willing to bet that it's because the element you're searching for (by the way, getElementsByClassName is a thing) is relatively positioned to the element containing it and thus has position 0,2 or what-ev.
That getPosition function crawls up the parent tree, so the parent node spits out the right position because it's relative to the document.
Finally, the document itself is relative to itself and thus has zero offset.

Target class name but call function on unique ID

Ok I'm going to run this on the slowest ASP box I've ever seen before, so I'm not looking to use jQuery, I know it would make everything a lot easier but I need to keep my code as small as humanly possible. I'm targeting users with the slowest internet I've ever seen and loading the entire jQuery file will be to much for their internet to take. So I'm not looking to use jQuery for this script.
I'm trying to make a script that when the user hovers over the thumbnail the larger image pops up. I'm using the following javascript to achieve this:
var hoverImage = document.getElementById("largeImage");
function hoverZoom(selector) {
this.node = document.querySelector(selector);
if(this.node === null) {
console.log("Node not found");
}
return this.node.id;
}
hoverZoom.prototype.show = function(x, y) {
var largeImageSrc = this.node.name;
hoverImage.style.display = "block";
var largeWidth = hoverImage.offsetWidth;
var largeHeight = hoverImage.offsetHeight;
hoverImage.style.top = y - (largeHeight / 2) + "px";
hoverImage.style.left = x - (largeWidth / 2) + "px";
hoverImage.style.position = "absolute";
hoverImage.style.background = "url(" + largeImageSrc + ")";
}
hoverZoom.prototype.hide = function() {
hoverImage.style.display = "none";
}
hoverZoom.prototype.checkCoords = function(x, y) {
var id = document.getElementById(this.node.id);
var elemTop = id.offsetTop;
var elemLeft = id.offsetLeft;
var elemHeight = id.offsetHeight;
var elemWidth = id.offsetWidth;
console.log(x + " " + y + " " + this.node.id + " " + id + " " + elemHeight + " " + elemWidth + " " + elemTop + " " + elemLeft);
if(x >= elemLeft && x <= elemLeft + elemWidth && y >= elemTop && y <= elemTop + elemHeight) {
return true;
}
}
document.body.onmousemove = function(e) {
e = e || window.event;
while(hoverZoomPI.checkCoords(e.clientX, e.clientY) === true) {
var target = e.target || e.srcElement,
offsetX = e.clientX,
offsetY = e.clientY;
return hoverZoomPI.show(offsetX, offsetY);
}
hoverZoomPI.hide();
}
var hoverZoomPI = new hoverZoom(".test");
My problem is that when I hover over another image with the same class name nothing happens. But when I hover over the first image with the class name it works.
I've set up a jsFiddle with all my code and an example: http://jsfiddle.net/f7xqF/
Thanks everybody for their help. I can't say enough about how much you guys have helped me over the last few years.

You should use document.querySelectorAll instead document.querySelector to get an LIST of all nodes, not just first one. After that u should of course attach callbacks to all of collected elements.

loop into js object

i have this js object:
var tags = [{ 'x' : '42','y' : '25','id' : '1', 'linea' : '1'},{ 'x' : '378','y' : '24','id' : '2', 'linea' : '1'}];
i try to loop in this way:
for(var i = 0; i < tags.length; i++){
var x = tags[i].x -10;
var y = tags[i].y -10;
var offsetX = x + 20;
var offsetY = y + 20;
if( left >= x && left <= offsetX ){
$(myDiv).bind('click',function(){
document.location.href = 'x.php?a='+ tags[i].linea +'&b=' + tags[i].id;
}).css('cursor','pointer');
}else{
$(myDiv).unbind('click').css('cursor','none');
}
}
But i loose the first!
Is this the correcy way??
Thanks!

You don't loose the first (sounds like it was a car key). You problem is your anonymous function, that closes over its parent scope when executed( for your .bind() method). It creates, what we call, a Closure.
Its a very common mistake in ECMAscript there. You need to invoke an additional context to avoid this issue.
$(myDiv).bind('click',(function( index ){
return function() {
document.location.href = 'x.php?a='+ tags[index].linea +'&b=' + tags[index].id;
};
}( i ))).css('cursor','pointer');
If you don't do that, all of those anonymous function context will share the same parent context in their scope-chain. Without describing that too much in detail now, it'll end up that all event handlers would reference the same variable i.
Beside that, it looks like you're binding multiple click event handlers to the same element myDIV. Each handler would cause the browser to redirect to another url, so, this will bring trouble. I can't even tell if the first or the last handler will win this race.

Variable scope.. change to this and it should work fine:
var lineA = tags[i].linea;
var id = tags[i].id;
$(myDiv).bind('click',function(){
document.location.href = 'x.php?a='+ lineA +'&b=' + id;
}).css('cursor','pointer');
The problem is with i being the loop iterator, so when you click myDiv it will have the last value always.
Edit: after looking into it, I could see you are taking the wrong approach. What you are after is identifying where the user clicked inside the <div> and redirect to different location according to your array. For this, such code should work:
var tags = [{ 'x' : '42','y' : '25','id' : '1', 'linea' : '1'},{ 'x' : '378','y' : '24','id' : '2', 'linea' : '1'}];
$("#myDiv").bind('click',function(event) {
var left = event.pageX - $(this).position().left;
for(var i = 0; i < tags.length; i++){
var x = tags[i].x -10;
var y = tags[i].y -10;
var offsetX = x + 20;
var offsetY = y + 20;
if( left >= x && left <= offsetX ){
var lineA = tags[i].linea;
var id = tags[i].id;
document.location.href = 'x.php?a='+ lineA +'&b=' + id;
break;
}
}
});
The code should be pretty clear, anyway it's not possible to have only parts of the element with hand cursor - I advise you not to mess too much as it will be really complicated.
Live test case.
Edit 2: Having the "clickable" parts of the element with different cursor is easier than I initially thought, you just have to handle the onmousemove event as well and in there set the cursor:
var posLeft = $("#myDiv").position().left;
$("#myDiv").bind('click',function(event) {
var tag = GetHoveredTag(event);
if (tag) {
var lineA = tag.linea;
var id = tag.id;
document.location.href = 'x.php?a='+ lineA +'&b=' + id;
}
}).bind("mousemove", function(event) {
var tag = GetHoveredTag(event);
var cursor = (tag) ? "pointer" : "";
$(this).css("cursor", cursor);
});
function GetHoveredTag(event) {
var left = event.pageX - posLeft;
for(var i = 0; i < tags.length; i++){
var x = tags[i].x -10;
var y = tags[i].y -10;
var offsetX = x + 20;
var offsetY = y + 20;
if( left >= x && left <= offsetX )
return tags[i];
}
return 0;
}
Updated fiddle.

Getting Javascript/jQuery scrolling function to work on successive divs

I'm currently trying to implement functionality similar to infinite/continuous/bottomless scrolling, but am coming up with my own approach (as an intern, my boss wants to see what I can come up with on my own). So far, I have divs of a fixed size that populate the page, and as the user scrolls, each div will be populated with an image. As of now, the function I've written works on the first div, but no longer works on successive divs.
$(window).scroll(function () {
var windowOffset = $(this).scrollTop();
var windowHeight = $(this).height();
var totalHeight = $(document).height();
var bottomOffset = $(window).scrollTop() + $(window).height();
var contentLoadTriggered = new Boolean();
var nextImageCount = parseInt($("#nextImageCount").attr("value"));
var totalCount = #ViewBag.totalCount;
var loadedPageIndex = parseInt($("#loadedPageIndex").attr("value"));
var calcScroll = totalHeight - windowOffset - windowHeight;
$("#message").html(calcScroll);
contentLoadTriggered = false;
if (bottomOffset >= ($(".patentPageNew[id='" + loadedPageIndex + "']").offset().top - 1000)
&& bottomOffset <= $(".patentPageNew[id='" + loadedPageIndex + "']").offset().top && contentLoadTriggered == false
&& loadedPageIndex == $(".patentPageNew").attr("id"))
{
contentLoadTriggered = true;
$("#message").html("Loading new images");
loadImages(loadedPageIndex, nextImageCount);
}
});
This is the image-loading function:
function loadImages(loadedPageIndex, nextImageCount) {
var index = loadedPageIndex;
for(var i = 0; i < nextImageCount; i++)
{
window.setTimeout(function () {
$(".patentPageNew[id='" + index + "']").html("<img src='/Patent/GetPatentImage/#Model.Id?pageIndex=" + index + "' />");
index++;
var setValue = index;
$("#loadedPageIndex").attr("value", setValue);
}, 2000);
}
}
I was wondering what may be causing the function to stop working after the first div, or if there might be a better approach to what I'm attempting?
EDIT: It seems that loadedPageIndex == $(".patentPageNew").attr("id") within the if statement was the culprit.

#ViewBag.totalCount; is not a JavaScript, it's .NET, so your script probably stops after encountering an error.
Also: ".patentPageNew[id='" + loadedPageIndex + "']" is inefficient. Since IDs must be unique, just query by ID instead of by class name then by ID.