How can i use a jquery function on a area? - javascript

how can I have an that when you put your cursor on it it opens a div? I tried using this jquery code for that but the tag that it uses is a span, and i cant make it to never move again, because it is in a different place when i go fullscreen. The code in jquery that i used doesnt work with areas or i dont know how to use it
this is the jquery code function
hoverdiv(e,divid){
var left = e.clientX + "px";
var top = e.clientY + "px";
var div = document.getElementById(divid);
div.style.left = left;
div.style.top = top;
$("#"+divid).toggle();
return false;
}

Related

Canvas with mousemove blocking links in div underneath

I'm having problems with using the canvas/mousemove. I want to be able to draw on the entire page whenever the mouse moves with a mousemove draw/paint tool but also still click text links that appear in various other divs. The issue I have is that the canvas which is currently fixed, has a transparent background color and is set to 100% width and height blocks the div underneath with a lower z-index, meaning the links can't be clicked. Using pointer-events:none on the canvas isn't the solution as it disables the mousemove effect. If I make the canvas z-index lower than the div's with the links I want to click, the drawing will just appear outside of the div.
What do I need to add or change to make this work? I basically just want to have a functioning webpage with a mouseover effect that will draw over the page whenever it moves.
Below is the script I'm using. And here's an example http://jsfiddle.net/zAF4d/1/
$(function() {
var letsdraw = false;
var theCanvas = document.getElementById('paint');
var ctx = theCanvas.getContext('2d');
theCanvas.width = window.innerWidth;
theCanvas.height = window.innerHeight;
var canvasOffset = $('#paint').offset();
$('#paint').mousemove(function(e) {
if (letsdraw === true) {
ctx.lineTo(e.pageX - canvasOffset.left, e.pageY - canvasOffset.top);
ctx.stroke();
}
});
$('#paint').mousemove(function(e) {
$('.v').css('left', e.clientX + 'px');
$('.h').css('top', e.clientY + 'px');
letsdraw = true;
ctx.strokeStyle = 'blue';
ctx.lineWidth = 0.5;
ctx.lineCap = 'round';
ctx.beginPath();
ctx.moveTo(e.pageX - canvasOffset.left, e.pageY - canvasOffset.top);
});
$(window).mouseout(function(e) {
// bind to the window mouse up, that way if you mouse up and you're not over
// the canvas you'll still get the release of the drawing.
letsdraw = true;
});
});
You say:
The issue I have is that the canvas which is currently fixed, has a transparent background color and is set to 100% width and height blocks the div underneath with a lower z-index, meaning the links can't be clicked. Using pointer-events:none on the canvas isn't the solution as it disables the mousemove effect. If I make the canvas z-index lower than the div's with the links I want to click, the drawing will just appear outside of the div.
I think you need to either do everything on canvas or use DOM and some sort of CSS tricks/animations.
$(function() {
var letsdraw = false;
var theCanvas = document.getElementById('paint');
var ctx = theCanvas.getContext('2d');
.
.
.
//if your div's are not same every time, determine similar prop so u can pull it here on to a canvas...by'ID' || 'Class' ...etc.
var div = document.getElementByID('div01');
dix.x;
div.y;
div.h;
.
.
.
**etc. or if u cannot for any reason pull actual div, just pass on it parameters here....
then u can use them here...*
like making collision model for drawing line over the top of it...
if (mouse.x > div.x && mouse.x < div.x + div.width && mouse.y > div.y && mouse.y < div.height) {
letsdraw = false;
}
....**within draw function
**'onclick' event listener try **
$(div)onclick function();
if whole div was pulled here then it will open links...but even if u pulled just div's parameters u just pass click coordinates on to div if link coordinates match
$(div)onclick function(){
load.page(url: <link>your link</>
}
sorry if mistaken something, didn't run it all together
But give it a go hope it helps;

Setting left position in the body of mousemove event listener function doesn't work

I want one of my div's position left value equal to my mousemove event.clientX. Although individual items in my code works by themselves, following code doesn't work. Why?
var shapeCanvas = document.getElementsByClassName("shape")[0];
shapeCanvas.style.left = '1px'; // works
document.getElementsByClassName("body")[0]
.addEventListener("mousemove",function(e){
shapeCanvas.style.left = e.clientX + "px"; // **doesn't work**
console.log(e.clientX); // works also
},false);
You were trying to identify the body element by the body class instead of the tag. I added the eventListener to the window instead, for better results. Is this what you were trying to achieve?
var shapeCanvas = document.getElementsByClassName("shape")[0];
shapeCanvas.style.left = '1px'; // works
window.addEventListener("mousemove",function(e){
shapeCanvas.style.left = e.clientX + "px"; // **doesn't work**
console.log(e.clientX); // works also
},false);
.shape{
width:100px;
height:100px;
position:absolute;
background:lightblue;
}
<div class="shape">
</div>

need 100% div without setting a fixed height on container div

Here is a link to a JSFiddle http://jsfiddle.net/9NYcn/11/ i put together with what i would like to do, but i need to do this with pure css.
function expand(){
var sect = document.getElementById("sect");
var body = document.getElementById("main");
var panes = document.getElementById("panes");
var newHeight = 40 + "px";
var newHeight2 = 120 + "px";
var topVal = 120 + "px";
sect.style.display = "block";
sect.style.height = newHeight;
body.style.height = newHeight2;
panes.style.top = topVal;
}
In the above function i had to set the "top" property of panes in order to get this to work. i need to get it so that the panes section will work like it currently does without using javascript to change the "top" property of "panes". When the user clicks the "expand" button the div with the class "body" will expand and not stick behind or overlap the "panes" div.
I know im doing a terrible job explaining i apologize for that.
Remove the absolute positioning of .panes: http://jsfiddle.net/rHTM8/
It will make it naturally flow after the middle div.

Placing div on captured coordinates going outside the page

I have a Main div inside which i am trying to display another small div on the coordinates captured on mouse click. Problem is that when i click on the extreme left, right, top, bottom the small div is going outside the main div. I have tried overflow:hidden on main div but i don't want that. i want div to be positioned inside the main div no matter where i click.
Sample code:
$(document).ready(function() {
$("#main_div").bind('click', function(event){
var x = event.pageX-document.getElementById("main_div").scrollLeft;
var y = event.pageY-document.getElementById("main_div").scrollTop;
$("#container-5").css({"top":y,"left":x});
});
You can check if the coordinates of the click would put part of the small div outside of the main div, and if so change the coordinates so that the small div remains inside the main div. (See this jsFiddle.)
$(document).ready(function() {
$("#main_div").bind('click', function(event) {
var $mainDiv = $("#main_div");
var $container5 = $("#container-5");
var x = event.pageX - $mainDiv.position().left;
var y = event.pageY - $mainDiv.position().top;
if (x + $container5.width() > $mainDiv.width()) {
x = $mainDiv.width() - $container5.width();
}
if (y + $container5.height() > $mainDiv.height()) {
y = $mainDiv.height() - $container5.height();
}
$container5.css({
"top": y,
"left": x
});
});
});​

event.pageX - Use jQuery Event in a function not bound through jQuery?

I have a table, and when the user clicks on each cell, some details should appear in a small popup div that appears where the user clicked. I'm using jQuery, but not to bind the function to the onClick event.
function detailPopup(cell, event, groupName, groupID, ...)
{
var newDiv = document.createElement("div");
newDiv.id = "detailPop" + groupID;
newDiv.className = "priceDetailPopup";
newDiv.innerHTML = "<p>" + groupName + "</p>"; // more will go here
$(newDiv).click(function()
{
$(this).fadeOut("fast").remove();
}
);
$("#main").append(newDiv);
$(newDiv).css({"left" : event.pageX, "top" : event.pageY}).fadeIn("fast");
}
Everything is working wonderfully in FF, Safari, and Chrome. In IE, it all works except that the detail div appears below the table. event.pageX/Y aren't working. I know jQuery will fix those for IE if I bind the function through jQuery like this:
$(cell).click(function(e) { ... e.pageX ... })
But I can't do that. (I don't think I can - if you do, please explain how I can get six variables into that function without having to use non-xhtml tags in the cell.)
Is there a way to have jQuery "fix" the event object without binding the function through jQuery? $JQuery.fixEvent(event); or something? I can't find any reference to doing so on their site.
e = jQuery.event.fix(e); //you should rename your event parameter to "e"
I found the fix function by searching through the jQuery source code.
Alternatively, you could use this to get the mouse coordinates without jQuery...
var posx = 0;
var posy = 0;
if (!e) var e = window.event;
if (e.pageX || e.pageY) {
posx = e.pageX;
posy = e.pageY;
}
else if (e.clientX || e.clientY) {
posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
}
Via PPK: http://www.quirksmode.org/js/events_properties.html
This blog post seems to be relevant: http://www.barneyb.com/barneyblog/2009/04/10/jquery-bind-data/
Seems it's just jQuery("#selector").bind("click", {name: "barney"}, clickHandler);, then e.data.name to access it in the event.
You might find that the issue you're facing is not a positioning issue at all. Based on the syntax you posted, you may be experiencing an IE bug relating to the use of the CSS ID selector.
$("#main").append(newDiv);
If IE doesn't recognize the "#main" element, the append() function will not work correctly. IE (pre-v7) has spotty support for the ID (#) selector. Instead try:
$('div[id="main"]').append(newDiv);
Try this and let me know how it works for you.

Categories

Resources