I'm relatively new to coding, so bear with me. I'm trying to create a menu (for an app) that appears when the user taps and holds on the screen. Basically I'm looking to make a menu similar to the Pinterest app click and hold menu functionality. (see it here: http://techcrunch.com/2013/07/31/pinterests-mobile-app-gets-path-like-animations-readies-personalization-options/ )
I've found the code to create something similar (http://www.jqueryscript.net/menu/Animated-Arc-Popup-Menu-with-jQuery-CSS3-Transitions.html) but I'd like it to appear where the user holds on the screen, not in a fixed location. I've talked with a professor about this and he suggested using offset(), but I'm not quite sure how to implement it. The menu would be hidden until the user triggers it.
Some general advice for programming is to break the program down into the smallest logical pieces you can and tackle those little pieces one at a time. a
attempt to alert a message upon clicking somewhere on the page, or in your active area
then try to create a 100 by 100 black box (div element) anywhere on the page when you click somewhere
Then try to get the box to appear where you clicked using the offset as your professor suggested
Then change what you previously did to be on mousedown and have another function happen on mouseup to remove that black box.
Once you have all that you can style that black box to look like a menu, and have functional buttons on it. You could create/destroy the menu item each time you click, or you could create it once, and toggle it's visibility / position on mousedown / mouseup.
Continue to check your work after every small step to ensure you have no errors. I recommend working in a html file on your local machine, at jsfiddle.net, some javascript editing software (I don't know any), or a combination of those.
Here's some help to get you started https://jsfiddle.net/rz7dayfy/ Click the orange box to try it out.
var myDiv = document.getElementById('myDiv');
myDiv.addEventListener('mousedown', function(e){
xPos = e.clientX - myDiv.offsetLeft;
yPos = e.clientY - myDiv.offsetTop;
alert('myDiv clicked at x: ' + xPos + ', y: ' + yPos);
});
It creates an event listener on the area in question, sounds like that would be the body of your page. Then it finds the x y coordinates of where that area was clicked. Y axis starts at 0 at the top and increases positively as you go down. X axis starts at 0 on the left and increases positively as you go right. The offset is because jsfiddle creates some padding around your results in the results window.
Related
I'm working with a website that has pop-up tables. For example, if a user hovers or clicks over a link, a small popup with a table of data appears. There are many of these links available on the same page. Extracting data from the tables involves sequentially opening and closing each popup by clicking the links in order.
Closing a popup involves clicking a small 'X' button in the top right corner of the popup. About 99% of the time, this is not an issue. However, about 1% of the time, the top of the popup will be above the screen, with a negative 'y' pixel location, hiding the close pop-up 'X' button - and, in turn, giving it a negative 'y' pixel location. With manual operations (moving the mouse by hand) I can resize the Chrome window and the popup will 'snap' back in to the window with at a very minimum a 'y' pixel location of zero.
I have not been able to replicate this manual re-centering of the pop-up using Selenium commands. The closest command that I can find is MoveToElement which works sometimes, but not others (I cannot fathom why I am seeing partial success, but that is a digression from this question).
As far as I can tell, Selenium will not allow me to interact with a element that has a negative x or y pixel location.
Here is what I am currently attempting, with limited success:
// example begins with pop-up already displayed. Data has been extracted.
// We are now ready to close the pop-up by clicking the 'X' button.
// here we move to the table, otherwise the detail popup close button will be off screen. Warning: this works with partial success.
var actions = new Actions(Session.Driver);
actions.MoveToElement(table);
actions.Perform();
// Must close unless the popup may (or may not) cover the next link.
var closeButton = Session.Driver.FindElement(By.Id(id))
.FindElements(By.CssSelector("a.cmg_close_button"))
.FirstOrDefault();
if (closeButton != null)
{
Wait.Until(d => closeButton.Displayed);
if (closeButton.Location.Y < 0 || closeButton.Location.X < 0)
{
Log.Error("Could not close button. The popup displayed the close_button off-screen giving it a negative x or y pixel location.");
}
else
{
closeButton.Click();
}
}
Please advise strategies for handling the negative x,y pixel location of the popup window.
I am using C# 4.6, Selenium 2.45, ChromeDriver (Chrome), and VS2015 CE IDE.
It looks like the page doesn't correctly set the position of the popup when the link is close to a border of the view.
To overcome this issue, you could first scroll the targeted element toward to the center of the view before moving over it:
// scroll the link close to the center of the view
Session.Driver.ExecuteScript(
"arguments[0].scrollIntoView(true);" +
"window.scrollBy(-200, -200);" ,
table);
// move the mouse over
new Actions(Session.Driver)
.MoveToElement(table)
.Perform();
Selenium was designed to only interact with elements that a user can. In most cases, this applies more to hidden elements on the page. You have a somewhat rare case, in my experience, in that your "hidden" element is off the page instead of display:none, etc.
One way around this is to use IJavaScriptExecutor. This will allow you to run JS code on the page. NOTE: If you are trying to stick to a strict user scenario, i.e. do only things a user can do, this is not for you. You will need to continue to investigate ways to bring that popup back on the screen.
I think if you alter your script, as below, it should work.
if (closeButton.Location.Y < 0 || closeButton.Location.X < 0)
{
IJavaScriptExecutor jse = Session.Driver as IJavaScriptExecutor;
jse.ExecuteScript("arguments[0].click()", closeButton);
// Log.Error("Could not close button. The popup displayed the close_button off-screen giving it a negative x or y pixel location.");
}
else
{
closeButton.Click();
}
Can anyone help me that how can I grab that event when mouse enter from left side or right side not from anywhere to specific area in Javascript.I got code for coordinates but that's not solve my issue.For x,y coordnates i use this chunk of code
tempX = e.pageX
tempY = e.pageY
Thanks in advance
You are on the right track
using
document.observe("mousemove",function(e){
console.log("X: "+e.pointerX()+", Y: "+e.pointerY());
});
it gets the X and Y coordinates of the mouse on the document
I would check if any of the X is less than 10 - to give a little error room and then run code based on coming in from the left side and make sure you set a flag that you are handling it - otherwise you will have multiple calls to the same handler.
the right side is a little more tricky as you need to know how wide the screen is and then add a little error on the right side as well.
You can try this(might not be an optimized approach) :
Have a hidden/invisible div on left as well right side of page. Like a long strip which covers the whole page. And once mouse over event is triggered on these div, you can make corresponding flag true in respective cases.
so if leftFlag is true --> do the necessary
do similar exercise of righFlag.
Note :
Making opacity very low (opacity: .01) makes div invisible. And event also gets triggered.
I have several boxes (more than 100) that will be created dynamically in different positions on the screen. Upon clicking each box, I want a slide in pop up with the details.
I want its position to slide in near each boxes. I have done that, but, if some boxes are near the browser window end on the right side, half of the pop up gets hidden in the window.
I want those pop-ups to display fully before the window (as like in excel).
my javascript code for postioning;
function centerPopup(comp_id, top, left) {
$("#popupContact").css({
"position": "absolute",
"top": top + 70,
"left": left + 223
});
}
If I'm understanding your question correctly it's not the overlap with other boxes but losing half the box on the edges of the screen? This sounds like you're using the edge of the window to set the position of the box but you aren't accounting for the width of the box itself. Make sure to get the width of the current box divided by two and subtract this from the max window size. This will position the right edge of your box at the right side of the window (if you imagine a box rendered at the far right of the screen).
Hopefully I'm interpreting your question correctly.
If they are appearing underneath another element, try adding a higher z-index to the style of the popup box. that will allow it to appear over something else with a lower z-index.
I'd need more code, or an example (use jsfiddle.net) to really see what's going on
In my webpage, testing on Chrome, I have a button div. The button is styled so that it has a hover state in a different colour, and a hand-shaped mouse pointer. All this is fine.
When the button is pressed, it triggers an animation, and I don't want to let the user press the button again until it's done, so I put a semi-opaque div over the top to block the button.
The problem comes when the animation completes and the div is removed. The mouse pointer is over the button but the hover state isn't active until the user actually moves the mouse, then the mouse pointer changes and all is well.
Note that the click still works - this is a purely cosmetic (but annoying) aberration.
Can I force the browser to re-evaluate the point under the cursor?
The correct way to prevent input to a button is to disable it. You can toggle the cursor style with the CSS cursor property.
Javascript:
var theButton = document.getElementById('theButton');
theButton.disabled = true;
theButton.setAttribute('style','cursor:default;');
// animation is complete
theButton.disabled = false;
theButton.removeAttribute('style');
jQuery:
var $theButton = $('#theButton').prop('disabled',true).css('cursor','default');
// animation is complete
$theButton.prop('disabled',false).css('cursor','pointer');
Check the position of the mouse when the animation ends and you remove the div, or just always store them and check that value when it ends to see if the cursor is still over your button. You could do this with event.clientX, event.clientY or event.pageX, event.pageY something similar to those(not completely sure just did some quick research but those seemed to work in chrome,IE, and firefox). Then if the mouse is still over the button, trigger the on.hover for the button element again.
Try to set the curser of all elements using the * wildcard in jquery. See if this will update the cursor.
It seems like the root of your question was to how to prevent double animating. Instead of placing a <div> over it, you can just do it with JavaScript.
Set a global variable called isAnimating to true when you start your animation. At the top of your click handler add this line if (isAnimating) return false; Obviously, you need to set isAnimating to false as soon as the animation is completed, either through a timer or in some kind of callback function.
This will prevent double animating, without doing anything silly with the DOM that would affect the hover states, or so I'd hope!
Let me know if that's not what you meant and I'll take another look at it!
I'm trying to use a custom cursor for an online game, in this case it's a sniper scope.
The problem is when I reference the cursor via CSS, the interaction point is still the top left of the icon, whereas it needs to be dead center of the icon for the cursor to make any sense.
Here's the cursor:
cursor:url(http://www.seancannon.com/_test/sniper-scope.cur),default;
Here's a demo: http://jsfiddle.net/9kNyF/
If you put the red dot from the cursor over the red dot I created in the demo, it won't fire the click event. You have to attempt to aim the top left corner at it.
If you set the cursor back to cursor:default; you'll see the click event fires just fine, it's just a matter of "aiming" the cursor.
The game is coded in JQuery so if I need to add some logic there for cursor offset or something lame, so be it. Ideally I want this to be a CSS fix.
Thanks!
You just need to provide the hotspot's <x> and <y> position in your CSS:
In your example, the center happens to be 24px in from the top/left (huge ass cursor lol)
cursor:url(http://www.seancannon.com/_test/sniper-scope.cur) 24 24,default;
http://jsfiddle.net/9kNyF/15/ see?
As far as it not firing the click event try placing this around your event listener.
$(function(){
$('#point').click(function(){
alert('clicked point');
});
});
With the centering of the cross hairs it might be easier to use a div with the background of the image and using jQuery to place the div over your cursor in the correct place.
<div id="crosshairs"></div>
<script>
$(function(){
$("body").mousemove(function(e){
var CrossHairWidth = $('#crosshairs').width();
var CrossHairHeight = $('#crosshairs').height();
$('#crosshairs').css('top', e.pageY - (CrossHairHeight / 2));
$('#crosshairs').css('left', e.pageX - (CrossHairWidth / 2) );
});
});
</script>
You then hide the cursor doing something like so:
cursor: url(http://www.seancannon.com/_test/transparent.png), default;
whatever tool you used to create the cursor, should have an option for managing the click target area. You'd be chasing you tail looking for a javascript/css solution.