I am trying to get thing ping button function to work where it displays an image of an exclamation mark. However I am struggling to get it to activate within the toolbar so I am not sure if the code works at all. This is essentially the toolbar code in the HTML file and I added my own ping button there.
<div class="toolbar">
<span class="color" data-color="#D00000" data-width="20"></span>
<span id="ping" data-color="#ff000020" data-width="20">
<img src="/images/ping.png" height="20" width="20"/>
</span>
This is the toolbar code for the color and it's functional.
Drawing.ColorButtonToolbar = function(whiteboard, buttons) {
this.buttons = buttons;
this.whiteboard = whiteboard;
this.addEventListeners();
this.renderBackground();
};
Drawing.ColorButtonToolbar.prototype.addEventListeners = function() {
this.buttons
.on("click", this.onActivate.bind(this))
.on("touchstart", this.onActivate.bind(this))
;
};
Drawing.ColorButtonToolbar.prototype.onActivate = function(event) {
var button = $(event.target);
this.buttons.removeClass("active");
button.addClass("active");
this.whiteboard.lineColor = button.data("color");
this.whiteboard.lineWidth = button.data("width");
};
Drawing.ColorButtonToolbar.prototype.renderBackground = function() {
this.buttons.each(function(){
$(this).css({
background: $(this).data("color")
});
});
};
Using the toolbar code as reference,
Drawing.PingButton = function(whiteboard, button) {
this.button = button;
this.whiteboard = whiteboard;
this.addEventListeners();
};
Drawing.PingButton.prototype.addEventListeners = function() {
this.button
.on("click", this.onActivate.bind(this))
.on("touchstart", this.onActivate.bind(this))
};
Drawing.PingButton.prototype.onActivate = function (event) {
var button = $(event.target);
this.buttons.removeClass("active");
button.addClass("active");
this.whiteboard.onClick = ping();
};
Drawing.PingButton.prototype.ping = function () {
var x = event.clientX;
var y = event.clientY;
var pingImg = document.getElementById("ping");
pingImg.style.display = '';
pingImg.style.position = 'absolute';
pingImg.style.left = x + 'px';
pingImg.style.top = y + 'px';
};
However I cannot get the ping tool to activate. Nothing happens when I click on it. I am aware the syntax is old but this is a group project and this is what we have.
Related
I want to make circle(army) with move when I drag it and when I click it, it should not move but do something else.
fucntion unit() {
this.circle = document.createElementNS(svgNs, "circle");
//Some attributes are added to this.circle
document.getElementById("svg1").appendChild(this.circle);
this.moving = false;
this.circle.onclick = function () {
showForm(this);
}
this.circle.onmousedown = function () {
this.moving = true;
}
}
Alright, I know that you didn't tag jQuery in your code, but if you have looked at my other posts, I tend to go full jQuery. If you wanted to do this, do this:
let's say this applies to your circle id element:
$("#circle").draggable( 'enable' )
var isDragging = 0;
var isUp = 1;
$("#circle").mousedown(function() {
isDragging = 0;
isUp = 0;
})
$("#circle").mousemove(function() {
isDragging = 1;
});
$("#circle").mouseup(function() {
isDragging = 0;
isUp = 1;
});
$("#circle").mousedown(function() {
if (isUp == 1) {
//click function
} else if (isDragging == 1) {
//drag function
}
});
This might be a little buggy, but I tried.
i have added a light box function to my web page. everything works. so when i click on an image it goes bigger...
my problem is that there is no close button. how do i get it to close without having to click back.
Here is my code for the light box
window.onload = setupLightbox;
var lightboxOverlay;
var lightboxImage;
function setupLightbox() {
for (i in document.links) {
if(document.links[i].rel == "lightbox"){
document.links[i].onclick = showLightbox;
}
}
}
function showLightbox() {
lightboxOverlay = document.createElement("div");
lightboxImage = document.createElement("img");
lightboxOverlay.style.position = "fixed";
lightboxOverlay.style.top = lightboxOverlay.style.left ="0";
lightboxOverlay.style.width = lightboxOverlay.style.height ="100%";
lightboxOverlay.style.background = "#000";
lightboxOverlay.style.opacity = "0.5";
lightboxOverlay.style.filter = "alpha(opacity = 50)";
document.body.appendChild(lightboxOve…
lightboxImage.onload = showImage;
lightboxOverlay.onclick = closeLightbox;
lightboxImage.src = this.href;
return false;
}
function showImage(){
lightboxImage.style.position = "fixed";
lightboxImage.style.top = lightboxImage.style.left = "50%";
lightboxImage.style.marginLeft = -lightboxImage.width/2 + "px";
lightboxImage.style.marginTop = -lightboxImage.width/2 + "px";
lightboxImage.style.border = "10px solid #fff";
document.body.appendChild(lightboxIma…
}
function closeLightbox(){
lightboxImage.style.opacity = lightboxOverlay.style.opacity = "0";
setTimeout( function() {
lightboxImage.parentNode.removeChild…
lightboxOverlay.parentNode.removeChi…
}, 1);
}
Check the Lightbox should have a css file with it and an image folder too. Specify the css file in the header section so that it can find the image.
I have 3 pictures cropped by span.main{overflow:hidden}. User can pan the span with touch events and explore the hidden parts of the picture.
Code so far:
document.addEventListener('DOMContentLoaded', function() {
var box = document.querySelector('.main');
box.addEventListener("touchstart", onStart, false);
box.addEventListener("touchmove", onMove, false);
box.addEventListener("touchend", onEnd, false);
});
var startOffsetX, startOffsetY;
var moving = false;
function getPos(ev) {
return {
x: ev.touches ? ev.touches[0].clientX : ev.clientX,
y: ev.touches ? ev.touches[0].clientY : ev.clientY
};
}
function onStart(ev) {
moving = true;
var box = document.querySelector('.main');// I need something like $(this)
var pos = getPos(ev);
startOffsetX = pos.x + box.scrollLeft;
startOffsetY = pos.y + box.scrollTop;
if (ev.preventDefault)
ev.preventDefault();
else
ev.returnValue = false;
}
function onMove(ev) {
if (moving) {
var pos = getPos(ev);
var x = startOffsetX - pos.x;
var y = startOffsetY - pos.y;
var box = document.querySelector('.main'); // I need something like $(this)
box.scrollLeft = x;
box.scrollTop = y;
if (ev.preventDefault)
ev.preventDefault();
else
ev.returnValue = false;
}
}
function onEnd(ev) {
if (moving) {
moving = false;
}
}
The problem is that only the first thumbnail works as expected. I've tried:
-querySelector only returns the first element so if I add ID's and querySelector('#box1,#box2,#box3') should work. Nein. I thing I have a 'this' problem on the functions...
-Place events (as Apple suggests) inline <div class="box" onStart="ontouchstartCallback( ev);" ontouchend="onEnd( ev );"ontouchmove="onMove( ev );" > <img></div> looked like a solution yet...My guess, because of 'this' again...
You want to use the querySelectorAll method instead. It returns all matched elements in the subtree instead of only the first one (which is what querySelector does). Then loop through them using a for loop.
var elements = document.querySelectorAll('.main');
for (var i = 0, ii = elements.length; i < ii; ++i) {
var element = elements[i];
element.ontouchstart = onStart;
// ...
}
The other approach you can take (and it is probably a better one) is to use event delegation and set the event listeners on a parent element and decide which of the pictures is being manipulated by checking the target property of each event.
<div id="pictures">
<span class="main"><img /></span>
<span class="main"><img /></span>
<span class="main"><img /></span>
</div>
var parent = document.getElementById('pictures');
parent.ontouchstart = function (e) {
var box = e.target.parentNode; // parentNode because e.target is an Image
if (box.className !== 'main') return;
onStart(e, box);
};
In the following code, the click event is added explicitly to the body, so that even if click outside the button say on the body the div with ID tip1 should close with a fade effect.
The problem here is that the the div closes even if we click on the div itself.
Any idea on this would help ..
$(document).ready(function(){
$('.button').getit({speed: 150, delay: 300});
});
$.fn.getit = function(options){
var defaults = {
speed: 200,
delay: 300
};
var options = $.extend(defaults, options);
$(this).each(function(){
var $this = $(this);
var tip = $('.tip');
this.title = "";
var offset = $(this).offset();
var tLeft = offset.left;
var tTop = offset.top;
var tWidth = $this.width();
var tHeight = $this.height();
$this.click(
function() {
if($('.tip').hasClass('.active101')) {
$('.tip').fadeOut("slow");
$('.tip').removeClass('.active101').addClass('.inactive101');
}
else {
setTip(tTop, tLeft);
$('body').bind('click',function(e) {
var parentElement = "button1";
var parentElement2 = "tip1"
if( e.target.id != parentElement) {
$('.tip').fadeOut("slow");
$('.tip').removeClass('.active101').addClass('.inactive101');
}
});
$('.tip').removeClass('.inactive101').addClass('.active101');
setTimer();
}
},
function() {
if($('.tip').hasClass('.inactive101')) {
stopTimer();
tip.hide();
}
}
);
setTimer = function() {
$this.showTipTimer = setInterval("showTip()", defaults.delay);
}
stopTimer = function() {
clearInterval($this.showTipTimer);
}
setTip = function(top, left){
var topOffset = tip.height();
var xTip = (left-440)+"px";
var yTip = (top-topOffset+100)+"px";
tip.css({'top' : yTip, 'left' : xTip});
}
showTip = function(){
stopTimer();
tip.animate({"top": "+=20px", "opacity": "toggle"}, defaults.speed);
}
});
};
<div class="main">
<a href="#" class="button" id="button1">
Click Me!
</a>
<div class="tip" id="tip1">Hello again</div>
</div>
Set the click event on your div to 'stopPropagation'
http://api.jquery.com/event.stopPropagation/
Perhaps you can bind a click event to the div itself and prevent the click event from bubbling up?
$("#div").click(function(e) {
e.stopPropagation();
});
Rick.
you should stop the event's propagation
you should check if any of the element's children are clicked (if you click a child of that element, the element would close)
you should probably be more careful with your selectors(if you intend to use this only on one element - because you are verifying with an id ('#button1' which is unique), you shouldn't bind the getit function to all the elements with class '.button')
if( e.target.id != parentElement
&& $(e.target).parents('#'+parentElement).length == 0) {
$('.tip').fadeOut("slow");
$('.tip').removeClass('.active101').addClass('.inactive101');
e.stopPropagation();
}
thanks for your answers. Tried with all of them and each worked. But I also found another solution to this by just adding another condition:
if (e.target.id != parentElement && e.target.id != parentElement2) {
$('.tip').fadeOut("slow");
$('.tip').removeClass('.active101').addClass('.inactive101');
}
So here's my code:
function drawGridSquare(tableText)
{
gridSquare = document.getElementById('square');
gridSquare.innerHTML = tableText;
document.body.appendChild(gridSquare);
gridSquare.style.display = 'block';
gridSquare.style.top = e.pageY - gridSquare.offsetHeight + 1;
gridSquare.style.left = e.pageX - gridSquare.offsetWidth/2;
gridSquare.focus();
}
This function is called on mousedown from a td element:
<td onmousedown="drawGridSquare('textData');">
This generates a pretty little square which uses jQuery draggable/droppable function. All I want to do is while the user's mouse is STILL pressed down, the focus would revert to the gridSquare that was created.
What are my options for this?
Seeing as how I couldn't find a clear way to do this, my work around is as follows:
function drawGridSquare(tableText, cellPosition)
{
gridSquare = document.getElementById('square');
gridSquare.innerHTML = tableText;
document.body.appendChild(gridSquare);
gridSquare.style.display = 'block';
startPositionX = endPositionX = cellPosition;
gridSquare.style.top = mouseY(event) - gridSquare.offsetHeight + 1;
gridSquare.style.left = mouseX(event) - gridSquare.offsetWidth/2;
squareReady = true;
}
function moveGridSquare()
{
if (squareReady)
{
squareIsMoving = true;
characterWidth = 1;
gridSquare = document.getElementById('square');
gridSquare.style.top = mouseY(event) - gridSquare.offsetHeight + 1;
gridSquare.style.left = mouseX(event) - gridSquare.offsetWidth/2;
}
}
function selectionEnd() {
if (squareIsMoving)
{
//Code to DROP INTO THE GRID
var dataStart = (Math.round((startPositionX) / characterWidth)) + 1;
var dataLength = Math.abs((Math.round((endPositionX)/characterWidth)) - (Math.round((startPositionX) / characterWidth)));
var data = dataStart + "," + dataLength + "," + theSelectedText;
dropDone(data);
//Set square to false
squareIsMoving = false;
squareReady=false;
//Destroy the square
document.getElementById('square').innerHTML = "";
document.getElementById('square').style.display = 'none';
}
}
<body onmousemove="moveGridSquare();">
<div id="square" onmousedown="squareReady=true;moveTheSquare();" onmouseup="selectionEnd();" style="display:none;" ></div>