Add close button to popup - javascript

How do add a close button to the following popup by putting a cross on the target page?
Currently it closes if I click anywhere outside the box, but would prefer a Cross "X" on the box or the corner.
<script language="javascript">
$(document).ready(function() {
//Change these values to style your modal popup
var align = 'center'; //Valid values; left, right, center
var top = 100; //Use an integer (in pixels)
var width =700; //Use an integer (in pixels)
var padding = 10; //Use an integer (in pixels)
var backgroundColor = '#FFFFFF'; //Use any hex code
var source = '../page.php'; //Refer to any page on your server, external pages are not valid e.g. http://www.google.co.uk
var borderColor = '#333333'; //Use any hex code
var borderWeight = 4; //Use an integer (in pixels)
var borderRadius = 5; //Use an integer (in pixels)
var fadeOutTime = 300; //Use any integer, 0 = no fade
var disableColor = '#666666'; //Use any hex code
var disableOpacity = 40; //Valid range 0-100
var loadingImage = '../images/loading.gif'; //Use relative path from this page
//This method initialises the modal popup
$(".modal").click(function() {
modalPopup(align, top, width, padding, disableColor, disableOpacity, backgroundColor, borderColor, borderWeight, borderRadius, fadeOutTime, source, loadingImage);
});
//This method hides the popup when the escape key is pressed
$(document).keyup(function(e) {
if (e.keyCode == 27) {
closePopup(fadeOutTime);
}
});
});
</script>
<script>
function closePopup(fadeOutTime) {
fade('outerModalPopupDiv', fadeOutTime);
document.getElementById('blockModalPopupDiv').style.display='none';
}
function modalPopup(align, top, width, padding, disableColor, disableOpacity, backgroundColor, borderColor, borderWeight, borderRadius, fadeOutTime, url, loadingImage){
var containerid = "innerModalPopupDiv";
var popupDiv = document.createElement('div');
var popupMessage = document.createElement('div');
var blockDiv = document.createElement('div');
popupDiv.setAttribute('id', 'outerModalPopupDiv');
popupDiv.setAttribute('class', 'outerModalPopupDiv');
popupMessage.setAttribute('id', 'innerModalPopupDiv');
popupMessage.setAttribute('class', 'innerModalPopupDiv');
blockDiv.setAttribute('id', 'blockModalPopupDiv');
blockDiv.setAttribute('class', 'blockModalPopupDiv');
blockDiv.setAttribute('onClick', 'closePopup(' + fadeOutTime + ')');
document.body.appendChild(popupDiv);
popupDiv.appendChild(popupMessage);
document.body.appendChild(blockDiv);
if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)){ //test for MSIE x.x;
var ieversion=new Number(RegExp.$1) // capture x.x portion and store as a number
if(ieversion>6) {
getScrollHeight(top);
}
} else {
getScrollHeight(top);
}
document.getElementById('outerModalPopupDiv').style.display='block';
document.getElementById('outerModalPopupDiv').style.width = width + 'px';
document.getElementById('outerModalPopupDiv').style.padding = borderWeight + 'px';
document.getElementById('outerModalPopupDiv').style.background = borderColor;
document.getElementById('outerModalPopupDiv').style.borderRadius = borderRadius + 'px';
document.getElementById('outerModalPopupDiv').style.MozBorderRadius = borderRadius + 'px';
document.getElementById('outerModalPopupDiv').style.WebkitBorderRadius = borderRadius + 'px';
document.getElementById('outerModalPopupDiv').style.borderWidth = 0 + 'px';
document.getElementById('outerModalPopupDiv').style.position = 'absolute';
document.getElementById('outerModalPopupDiv').style.zIndex = 100;
document.getElementById('innerModalPopupDiv').style.padding = padding + 'px';
document.getElementById('innerModalPopupDiv').style.background = backgroundColor;
document.getElementById('innerModalPopupDiv').style.borderRadius = (borderRadius - 3) + 'px';
document.getElementById('innerModalPopupDiv').style.MozBorderRadius = (borderRadius - 3) + 'px';
document.getElementById('innerModalPopupDiv').style.WebkitBorderRadius = (borderRadius - 3) + 'px';
document.getElementById('blockModalPopupDiv').style.width = 100 + '%';
document.getElementById('blockModalPopupDiv').style.border = 0 + 'px';
document.getElementById('blockModalPopupDiv').style.padding = 0 + 'px';
document.getElementById('blockModalPopupDiv').style.margin = 0 + 'px';
document.getElementById('blockModalPopupDiv').style.background = disableColor;
document.getElementById('blockModalPopupDiv').style.opacity = (disableOpacity / 100);
document.getElementById('blockModalPopupDiv').style.filter = 'alpha(Opacity=' + disableOpacity + ')';
document.getElementById('blockModalPopupDiv').style.zIndex = 99;
document.getElementById('blockModalPopupDiv').style.position = 'fixed';
document.getElementById('blockModalPopupDiv').style.top = 0 + 'px';
document.getElementById('blockModalPopupDiv').style.left = 0 + 'px';
if(align=="center") {
document.getElementById('outerModalPopupDiv').style.marginLeft = (-1 * (width / 2)) + 'px';
document.getElementById('outerModalPopupDiv').style.left = 50 + '%';
} else if(align=="left") {
document.getElementById('outerModalPopupDiv').style.marginLeft = 0 + 'px';
document.getElementById('outerModalPopupDiv').style.left = 10 + 'px';
} else if(align=="right") {
document.getElementById('outerModalPopupDiv').style.marginRight = 0 + 'px';
document.getElementById('outerModalPopupDiv').style.right = 10 + 'px';
} else {
document.getElementById('outerModalPopupDiv').style.marginLeft = (-1 * (width / 2)) + 'px';
document.getElementById('outerModalPopupDiv').style.left = 50 + '%';
}
blockPage();
var page_request = false;
if (window.XMLHttpRequest) {
page_request = new XMLHttpRequest();
} else if (window.ActiveXObject) {
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
page_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) { }
}
} else {
return false;
}
page_request.onreadystatechange=function(){
if((url.search(/.jpg/i)==-1) && (url.search(/.jpeg/i)==-1) && (url.search(/.gif/i)==-1) && (url.search(/.png/i)==-1) && (url.search(/.bmp/i)==-1)) {
pageloader(page_request, containerid, loadingImage);
} else {
imageloader(url, containerid, loadingImage);
}
}
page_request.open('GET', url, true);
page_request.send(null);
}
</script>
Page opens with this link
<a class="modal" href="javascript:void(0);">here</a>

Put an element in your source page (here page.php as you wrote) and give it a unique id or anything else (for example id="CloseModal"). And in your script, write this event handler:
$('body').on('click', '#CloseModal', function () {
closePopup(fadeOutTime);
});
If you don't want to change your source page, and make close button globally for all popups, change your modalPopup function and add these lines to it:
var closeDiv = document.createElement('div');
closeDiv.setAttribute('id', 'CloseModal');
closeDiv.innerHTML = '[CLOSE]';
popupDiv.appendChild(closeDiv);
These code will add the close tag to the popup itself. And jquery code that I wrote before, will handle the click of it.
Here is your final scripts and functions:
<script language="javascript">
$(document).ready(function() {
//Change these values to style your modal popup
var align = 'center'; //Valid values; left, right, center
var top = 100; //Use an integer (in pixels)
var width =700; //Use an integer (in pixels)
var padding = 10; //Use an integer (in pixels)
var backgroundColor = '#FFFFFF'; //Use any hex code
var source = '../page.php'; //Refer to any page on your server, external pages are not valid e.g. http://www.google.co.uk
var borderColor = '#333333'; //Use any hex code
var borderWeight = 4; //Use an integer (in pixels)
var borderRadius = 5; //Use an integer (in pixels)
var fadeOutTime = 300; //Use any integer, 0 = no fade
var disableColor = '#666666'; //Use any hex code
var disableOpacity = 40; //Valid range 0-100
var loadingImage = '../images/loading.gif'; //Use relative path from this page
//This method initialises the modal popup
$(".modal").click(function() {
modalPopup(align, top, width, padding, disableColor, disableOpacity, backgroundColor, borderColor, borderWeight, borderRadius, fadeOutTime, source, loadingImage);
});
//This method hides the popup when the escape key is pressed
$(document).keyup(function(e) {
if (e.keyCode == 27) {
closePopup(fadeOutTime);
}
});
// jquery event handler for CloseModal button
$('body').on('click', '#CloseModal', function () {
closePopup(fadeOutTime);
});
});
</script>
<script>
function closePopup(fadeOutTime) {
fade('outerModalPopupDiv', fadeOutTime);
document.getElementById('blockModalPopupDiv').style.display='none';
}
function modalPopup(align, top, width, padding, disableColor, disableOpacity, backgroundColor, borderColor, borderWeight, borderRadius, fadeOutTime, url, loadingImage){
var containerid = "innerModalPopupDiv";
var popupDiv = document.createElement('div');
var popupMessage = document.createElement('div');
var blockDiv = document.createElement('div');
popupDiv.setAttribute('id', 'outerModalPopupDiv');
popupDiv.setAttribute('class', 'outerModalPopupDiv');
popupMessage.setAttribute('id', 'innerModalPopupDiv');
popupMessage.setAttribute('class', 'innerModalPopupDiv');
blockDiv.setAttribute('id', 'blockModalPopupDiv');
blockDiv.setAttribute('class', 'blockModalPopupDiv');
blockDiv.setAttribute('onClick', 'closePopup(' + fadeOutTime + ')');
document.body.appendChild(popupDiv);
// creating the close button and append it to popup
var closeDiv = document.createElement('div');
closeDiv.setAttribute('id', 'CloseModal');
closeDiv.innerHTML = '[CLOSE]';
popupDiv.appendChild(closeDiv);
popupDiv.appendChild(popupMessage);
document.body.appendChild(blockDiv);
if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)){ //test for MSIE x.x;
var ieversion=new Number(RegExp.$1) // capture x.x portion and store as a number
if(ieversion>6) {
getScrollHeight(top);
}
} else {
getScrollHeight(top);
}
document.getElementById('outerModalPopupDiv').style.display='block';
document.getElementById('outerModalPopupDiv').style.width = width + 'px';
document.getElementById('outerModalPopupDiv').style.padding = borderWeight + 'px';
document.getElementById('outerModalPopupDiv').style.background = borderColor;
document.getElementById('outerModalPopupDiv').style.borderRadius = borderRadius + 'px';
document.getElementById('outerModalPopupDiv').style.MozBorderRadius = borderRadius + 'px';
document.getElementById('outerModalPopupDiv').style.WebkitBorderRadius = borderRadius + 'px';
document.getElementById('outerModalPopupDiv').style.borderWidth = 0 + 'px';
document.getElementById('outerModalPopupDiv').style.position = 'absolute';
document.getElementById('outerModalPopupDiv').style.zIndex = 100;
document.getElementById('innerModalPopupDiv').style.padding = padding + 'px';
document.getElementById('innerModalPopupDiv').style.background = backgroundColor;
document.getElementById('innerModalPopupDiv').style.borderRadius = (borderRadius - 3) + 'px';
document.getElementById('innerModalPopupDiv').style.MozBorderRadius = (borderRadius - 3) + 'px';
document.getElementById('innerModalPopupDiv').style.WebkitBorderRadius = (borderRadius - 3) + 'px';
document.getElementById('blockModalPopupDiv').style.width = 100 + '%';
document.getElementById('blockModalPopupDiv').style.border = 0 + 'px';
document.getElementById('blockModalPopupDiv').style.padding = 0 + 'px';
document.getElementById('blockModalPopupDiv').style.margin = 0 + 'px';
document.getElementById('blockModalPopupDiv').style.background = disableColor;
document.getElementById('blockModalPopupDiv').style.opacity = (disableOpacity / 100);
document.getElementById('blockModalPopupDiv').style.filter = 'alpha(Opacity=' + disableOpacity + ')';
document.getElementById('blockModalPopupDiv').style.zIndex = 99;
document.getElementById('blockModalPopupDiv').style.position = 'fixed';
document.getElementById('blockModalPopupDiv').style.top = 0 + 'px';
document.getElementById('blockModalPopupDiv').style.left = 0 + 'px';
if(align=="center") {
document.getElementById('outerModalPopupDiv').style.marginLeft = (-1 * (width / 2)) + 'px';
document.getElementById('outerModalPopupDiv').style.left = 50 + '%';
} else if(align=="left") {
document.getElementById('outerModalPopupDiv').style.marginLeft = 0 + 'px';
document.getElementById('outerModalPopupDiv').style.left = 10 + 'px';
} else if(align=="right") {
document.getElementById('outerModalPopupDiv').style.marginRight = 0 + 'px';
document.getElementById('outerModalPopupDiv').style.right = 10 + 'px';
} else {
document.getElementById('outerModalPopupDiv').style.marginLeft = (-1 * (width / 2)) + 'px';
document.getElementById('outerModalPopupDiv').style.left = 50 + '%';
}
blockPage();
var page_request = false;
if (window.XMLHttpRequest) {
page_request = new XMLHttpRequest();
} else if (window.ActiveXObject) {
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
page_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) { }
}
} else {
return false;
}
page_request.onreadystatechange=function(){
if((url.search(/.jpg/i)==-1) && (url.search(/.jpeg/i)==-1) && (url.search(/.gif/i)==-1) && (url.search(/.png/i)==-1) && (url.search(/.bmp/i)==-1)) {
pageloader(page_request, containerid, loadingImage);
} else {
imageloader(url, containerid, loadingImage);
}
}
page_request.open('GET', url, true);
page_request.send(null);
}
</script>

If you are using boostrap then use this code onclick of close button or image
$("#your-popup-id").modal('hide');
and if you are not using boostrap then this will work
$("#your-popup-id").hide();

Related

How to change style of multiple div on click of a button

I need to change style of multiple divs on click of a button that have the same name.I have the button where I create div with image.
This is code for creating the div
function creatContent(e) {
var divMark = document.createElement("div");
divMark.classList = `markers mark`;
var img = $('<img class="comment" src="indeksiraj-1.png" alt="myimage" />');
$(divMark).append(img);
$(marksCanvas).append(divMark);
}
When I create div I can drag that div on browser.Now I need to change the style of div but when I create two div or more when I press the button I change style just of the last div other div stay the same.
This is code for everything:
var xCord;
var yCord;
var xLeft = 0;
var yTop = 0;
function creatContent(e) {
var divMark = document.createElement("div");
divMark.classList = `markers mark`;
var img = $('<img class="comment" src="indeksiraj-1.png" alt="myimage" />');
$(divMark).append(img);
window.onload = addListeners();
function addListeners() {
divMark.addEventListener("mousedown", mouseDown, false);
window.addEventListener("mouseup", mouseUp, false);
}
function mouseUp() {
window.removeEventListener("mousemove", divMove, true);
}
function mouseDown(e) {
window.addEventListener("mousemove", divMove, true);
}
function divMove(e) {
xCord = e.pageX;
yCord = e.pageY;
divMark.style.top = yCord + "px";
divMark.style.left = xCord + "px";
}
zoomIn.onclick = function () {
var myImg = document.getElementById("the-canvas");
var currWidth = myImg.clientWidth;
if (currWidth == 1200) return false;
else {
myImg.style.width = currWidth + 100 + "px";
}
xLeft += xCord + 25;
yTop += yCord + 22;
divMark.style.left = xLeft + "px";
divMark.style.top = yTop + "px";
xLeft -= xCord;
yTop -= yCord;
};
zoomOutBtn.onclick = function () {
var myImg = document.getElementById("the-canvas");
var currWidth = myImg.clientWidth;
if (currWidth == 800) return false;
else {
myImg.style.width = currWidth - 100 + "px";
}
xLeft += xCord - 25;
yTop += yCord - 22;
divMark.style.left = xLeft + "px";
divMark.style.top = yTop + "px";
xLeft -= xCord;
yTop -= yCord;
};
}
This is demo https://jsfiddle.net/SutonJ/5gyqexhj/18/
When you are referring to divmark at the movediv function you are referring to the last div you made.
Instead you should refer to a class of that div since all of the divs you made have the same classes if I understand correctly.
So you can use jquery to add the style to the class like so:
$('.markers').css({'top': yCord + "px", 'left': xCord + "px"})
That will add the styling to all the elements that have the class markers.
If you have other elements with that class that you do not want to have those styles then you should add a unique class for those divs you made at divmark.classList.
You should use document.getElementsByClassName('<name of class>')
That way all the divs with the class name will be affected by the event.

clear javascript. dynamically created div resize: it only grow! why?

First off, the whole code is here, on pastebin.
No jquery or alikes are employed!
I have a HTML with a DIV created using document.createElement("div") and plugged into the page with document.getElementById('p').appendChild(d);
The new DIV is provided with a bunch of event handlers:
var d = document.createElement('div');
d.className = 'rect';
d.addEventListener('mousedown', catch_box, false);
d.addEventListener('mouseup', release_box, false);
d.addEventListener('mouseout', release_box, false);
d.addEventListener('mousemove', mouse_move_box, false);
d.addEventListener(wheel_hook, scroll_box, false);
document.getElementById('p').appendChild(d);
This works fine:
// move the box around on 'mousemove'
var lPos = cache.left + m_speed * cache.h_dir,
tPos = cache.top + m_speed * cache.v_dir,
ok = (lPos >= 0) && ((lPos + cache.width) <= max_width) &&
(tPos >= 0) && ((tPos + cache.height) <= max_height);
if (ok) {
box.style.left = lPos + 'px';
box.style.top = tPos + 'px';
}
but this doesn't:
// resize the box
var hSize = cache.width + s_speed * cache.h_dir,
vSize = cache.height + s_speed * cache.v_dir,
ok = (hSize >= min_width) &&
((cache.left + hSize) <= max_width) &&
(vSize >= min_height) &&
((cache.top + vSize) <= max_height);
if (ok) {
box.setAttribute('style', 'width:'+hSize+'px;height:'+vSize+'px;');
box.style.width = hSize + 'px';
box.style.height = vSize + 'px';
}
The box.style.width and box.style.height may only grow :(
The question is: WHY?? And how to work it around?

How to show child radwindow on its parent radwindow manually?

I am creating two radwindow dialogs: a parent and its child.
Parent radwindow has size 1082x630
Child radwindow has size 1500x900
On parent radwindow dialog, when I click on button "Show Child Dialog", its child radwindow will be shown.
The problem here is the size of child dialog larger than its parent. So, I want to resize the size of child dialog and show it in the center of its parent dialog.
And here is my code in Javascript that I use for resizing child dialog manually. To center child dialog, I also use childRadWindow.left and childRadWindow.top . BUT, it does not work as my expected. The child dialog does not place in the center of its parent.
Please reference my expected, actual images and my code to get the problem.
My expected result:
Actual result:
Here is my code to resize child dialog manually. I put it on child dialog *.aspx
<script type="text/javascript">
$(document).ready(function () {
resizeRWndDialog();
});
</script>
function resizeRWndDialog() {
var radWindows = [];
var radWindow = GetRadWindow();
while (true) {
if (radWindow != undefined && radWindow != null) {
radWindows.push(radWindow._popupElement);
radWindow = radWindow.BrowserWindow.GetRadWindow();
} else {
break;
}
}
var numsOfRadWindow = radWindows.length - 1;
if (numsOfRadWindow > 0) {
for (var i = numsOfRadWindow; i > 0; i--) {
var parentWindow = radWindows[i];
var parentWidth = parentWindow.clientWidth; //parentWidth =1082
var parentHeight = parentWindow.clientHeight; //parentHeight = 630
var chidWindow = radWindows[i - 1];
var childWidth = chidWindow.clientWidth; //childWidth = 1500
var childHeight = chidWindow.clientHeight; //childHeight = 900
var rateMinWidth = 0,
rateMinHeight = 0,
rateMaxWidth = 0,
rateMaxHeight = 0;
if (chidWindow.style.minWidth != "") {
rateMinWidth = parseInt(chidWindow.style.minWidth) / childWidth;
}
if (chidWindow.style.minHeight != "") {
rateMinHeight = parseInt(chidWindow.style.minHeight) / childHeight;
}
if (chidWindow.style.maxWidth != "") {
rateMaxWidth = parseInt(chidWindow.style.maxWidth) / childWidth;
}
if (chidWindow.style.maxHeight != "") {
rateMaxHeight = parseInt(chidWindow.style.maxHeight) / childHeight;
}
if ((parentWidth - 40) > 0 && childWidth >= parentWidth - 40) {
childWidth = parentWidth - 40; //parentWidth = 1082, childWidth = 1042
}
if ((parentHeight - 80) > 0 && childHeight >= parentHeight - 80) {
childHeight = parentHeight - 80; //parentHeight = 630, childHeight = 550
}
setSizeRWndDialog(chidWindow.getElementsByClassName("rwTable")[0], rateMinWidth * childWidth, rateMinHeight * childHeight, rateMaxWidth * childWidth, rateMaxHeight * childHeight, childWidth, childHeight);
setSizeRWndDialog(chidWindow, rateMinWidth * childWidth, rateMinHeight * childHeight, rateMaxWidth * childWidth, rateMaxHeight * childHeight, childWidth, childHeight);
chidWindow.left = Math.round((parentWidth - childWidth) / 2, 0) + "px";
chidWindow.top = Math.round((parentHeight - childHeight) / 2, 0) + "px";
chidWindow.focus();
radWindows[i - 1] = chidWindow;
}
}
}
function setSizeRWndDialog(element, minWidth, minHeight, maxWidth, maxHeight, width, height) {
if (minWidth != 0 && minHeight != 0) {
element.style.minWidth = minWidth + "px";
element.style.minHeight = minHeight + "px";
}
if (maxWidth != 0 && maxHeight != 0) {
element.style.maxWidth = maxWidth + "px";
element.style.maxHeight = maxHeight + "px";
} else {
element.style.maxWidth = width + "px";
element.style.maxHeight = height + "px";
}
element.style.width = width + "px";
element.style.height = height + "px";
}
I solved the problem myself, guys.
I just added one more line at the end of the resizeRWndDialog() as the snippet code below:
function resizeRWndDialog() {
//.........
if (numsOfRadWindow > 0) {
//...........
}
GetRadWindow().center(); // >> Just use this line
}

JavaScript Magnifying glass

I built a magnifying glass in JavaScript, which works well when I click on it or click and dragging it, but it should not hide from the screen.
$(".menu-left-preview-box-preview").bind('click', function (e) {
window.location = "page" + ($(this).index() + 1) + ".html";
});
var native_width = 0;
var native_height = 0;
var magnifyIsMouseDown = false;
$(".magnify").parent().mousedown(function (e) {
magnifyIsMouseDown = true;
});
$(".magnify").mousemove(function (e) {
if (magnifyIsMouseDown) {
if (!native_width && !native_height) {
var image_object = new Image();
image_object.src = $(".small").attr("src");
native_width = image_object.width;
native_height = image_object.height;
} else {
var magnify_offset = $(this).offset();
var mx = e.pageX - magnify_offset.left;
var my = e.pageY - magnify_offset.top;
if (mx < $(this).width() && my < $(this).height() && mx > 0 && my > 0) {
$(".large").fadeIn(100);
} else {
$(".large").fadeOut(100);
}
if ($(".large").is(":visible")) {
var rx = Math.round(mx / $(".small").width() * native_width - $(".large").width() / 2) * -1;
var ry = Math.round(my / $(".small").height() * native_height - $(".large").height() / 2) * -1;
var bgp = rx + "px " + ry + "px";
var px = mx - $(".large").width() / 2;
var py = my - $(".large").height() / 2;
$(".large").css({ left: px, top: py, backgroundPosition: bgp });
}
}
}
});
$(".magnify").parent().mouseup(function (e) {
magnifyIsMouseDown = false;
$(".large").fadeOut(100);
});
$(".magnify").parent().mouseleave(function (e) {
$(".large").fadeOut(100);
});
manageSlide();
By default the magnifying glass must be there on the screen. The magnifying glass can be dragged and after it's dropped it must remain there at it's dropped position.
On clicking and dragging the magnify glass is working well, but it should not hide from the screen. It should be there on screen.
Provide handle of magnify glass with that circle (in design).
Working example: http://jsfiddle.net/mohsin80/4ww8efx5/
I replaced the if (magnifyIsMouseDown) { by if (isDragging) { and created the following methods:
var isDragging = false;
$(".magnify").parent().mouseup(function(e) {
isDragging = false;
});
$(".magnify").parent().mousedown(function(e) {
isDragging = true;
});
To make a simulated drag event with jQuery.
Here is the fiddle. Hope it helped :)

Stop function when pressing ctrl jQuery

So I am making a little game where you have to press Ctrl to stop a div from jumping randomly.
However I can't get it working...
The jumpRandom function works fine, until i put the randomJump(){return false;}; inside the if (event.ctrlKey) {}. What should I do to get it working?
js:
$(document).ready(function() {
function randomFromTo(from, to){
return Math.floor(Math.random() * (to - from + 1) + from);
}
$( "#goal" ).bind('mouseenter keypress', function(event) {
if (event.ctrlKey) {
randomJump(){return false;};
}
});
$('#goal').mouseenter(randomJump);
function randomJump(){
/* get Window position and size
* -- access method : cPos.top and cPos.left*/
var cPos = $('#pageWrap').offset();
var cHeight = $(window).height() - $('header').height() - $('footer').height();
var cWidth = $(window).width();
// get box padding (assume all padding have same value)
var pad = parseInt($('#goal').css('padding-top').replace('px', ''));
// get movable box size
var bHeight = $('#goal').height();
var bWidth = $('#goal').width();
// set maximum position
maxY = cPos.top + cHeight - bHeight - pad;
maxX = cPos.left + cWidth - bWidth - pad;
// set minimum position
minY = cPos.top + pad;
minX = cPos.left + pad;
// set new position
newY = randomFromTo(minY, maxY);
newX = randomFromTo(minX, maxX);
$('#goal').fadeOut(50, function(){
$('#goal').fadeIn(700);
});
$('#goal').animate({
left: newX,
top: newY,
duration: 500
});
}
});
Try this:
$("#goal").bind('mouseenter keypress', function (e) {
randomJump(e);
});
function randomJump(e) {
if (!e.ctrlKey) {
//do normal stuff
} else {
//depending on how permanent you need this to be...
//$("#goal").unbind('mouseenter keypress');
}
return !e.ctrlKey;
}

Categories