I add a div tag and append it to the body and then i add to add items to the div so that it becomes a popup menu. After appending the to body, is there a way to move the div tag. Actually what i want to do is that i want the div to appear wherever the mouse was clicked on the webpage. By the way i am developing a firefox extension.
I need some help on this.
This quirksmode article is a great start when looking for help with mouse (x,y) coordinates.
Once you compute the coordinates, you can then use that information to position the div element on the page using css.
You want to use the position:absolute style, along with left: and top:.
Related
I have a problem with dragging an element below the viewport. When I try to drag the element below the viewport the page will not autoscroll. As you can see in the image I have provided I am trying to drag an element below. The only way I can scroll below the viewport to drop my element in Firefox is to use the mouse wheel.
If I left click and hold while dragging down on this Stack Overflow page the viewport autoscolls downward. This is how I need my web app to perform.
I'm not really sure where to start with this as it is a paid WordPress plugin called Learndash that not properly coded.
Can anyone point me to the correct solution to this problem?
Thanks.
Checkout this link to automatically scroll the window.
https://www.bennadel.com/blog/3460-automatically-scroll-the-window-when-the-user-approaches-the-viewport-edge-in-javascript.htm
Edit:
Add a margin below your div to allow space to insert
Or add the CSS properties height:500px and overflow-y:scroll in your div
I am currently using the Intersoft Webgrid 9 for a bunch of our pages. Some of the columns use the built in Calendar popup to edit the date.
The calendar is suppose to popup just under the textbox for editing. In Chrome, this works fine but in IE the popup shows up quite a bit above the textbox.
The calendar popup is a div that is added to the page when the calendar image is first clicked. After the initial click, the div remains on the page but either the visibility changes to hidden when no longer being used or the position changes based on the textbox being edited.
Since we are using Intersoft's resources, I do not have direct access to the javascript for the image click event. I have however been able to add an additional click event to the calendar image but it fires before the div is drawn. After that since the div is now on the page, I am able to adjust the top of the div with jquery through this click event.
So I guess if anyone knows of a way to adjust the calendar control through Intersoft's built in javascript that would be great. Otherwise, I guess I was wondering if there was a way to adjust the top of the div after it has initially been added to the page.
I have attached two images.
Incorrectly displayed
Correctly displayed in Chrome
Thank you so much in advance for any help!
Is the text input element which the calendar is appended to relative or absolute positioned? If the calendar is being positioned absolutely then its parent needs to have relative positioning in order to work as expected. If you append an child with absolute positioning to an element with absolute positioning then they will both use the closest parent with relative positioning to calculate where they should be rendered.
The property I want to implement is like the one Facebook's user posts have. When they are clicked they get bigger and the screen gets darker a bit.
I am open to any critic and help. Thank you!
You can add a jquery listener to the box for .on('click'...) and inside the function add a $(this).css(width: x px; height: x px)
This would allow you to fire the event to change the css.
Link to jquery site for CSS changes.
http://api.jquery.com/css/
For the background you will just need to change the dom css using jquery selectors.
If you want it more like facebook you'll also need to change the div to float to allow it to show up on top of everything.
I want to popup the whole div that contain image,div,etc . but problem is that when i popup div the position of within div is changed. i want to zoom the div that display like popup and cover the whole page.
when i click on div the div should be popup and zoom. not changed the position of content with in it.
Use CSS and change z-index of the div so it's on a new layer. Need sample to help you apply a solution.
Here's a JS fiddle of what I am talking about:
http://jsfiddle.net/r77K8/98/
My overlay gives the appearance of having disabled the link, but the link still remains clickable. I looked through some examples of modal dialog windows in hopes of finding a solution. As far as I can tell I need to use absolute positioning.
I am hesitant to do so because in reality my content is dynamically populated. It seems like a lot of added work to try and keep the overlay the correct dimensions -- I really like how it looks right now, I just would like to make the controls unclickable while the overlay is the parent. Is this possible?
In your example, it looks like you have the contents that you are trying to disable INSIDE the overlay div. In order for this to work, you need to put the overlay div OVER the contents, so place it after your contents. That way it covers up your content div.
And yes, your overlay should have absolute positioning so that you place it at the top-right corner of the parent container and give it 100% width and height, so that it covers the entire parent container.
See this jsfiddle for an example.
EDIT:
Try this example instead. Put both the contents and the overlay in a container. That way, the overlay will only take up that part of the page.
Notice that the container divs (divLink1 and divLink2) must have position:relative for this to work. According to the absolute description in this link, "The element is positioned relative to its first positioned (not static) ancestor element." So you have to set the containers to position:relative, but don't actually move them.