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.
Related
I'm trying to create a popup which uses window scrollbars not the div ones. Something like what is on http://pinterest.com. How to achieve this effect? All my tries are unsuccessful, scrollbars appear on div. Window scollbars scroll the body content.
When you open popup window, you should remember current window scrollLeft/scrollTop positions somewhere, then apply overflow:hidden, height/width:100% to html and body, which will prevent page scrolling.
Create overlay div with position:absolute, z-index:9999, left/top:0, height/width:100%, overflow:auto, and append it to body - it will be scrollable container of your popup.
Inside of this container create div with position:absolute and left/top values, calculated in js to center it if necessary.
After you close popup, restore overflow, height/width styles for html/body, and apply scrollLeft/scrollTop values that were saved before opening popup.
I am using a Jquery lightbox popup type to display data over a page onclick.
Pretty basic: when the popup is not used, its hidden, then visible when a link is clicked.
Problem is when the data is the popup is very long, it stretches the page even when hidden, leaving a bunch of blank space at the bottom of my page.
How do I get hidden popup to not stretch out my page?
you can solve it with css:
set hight and width and then set overflow:hidden or scroll or auto
or
set display:none
and with jquery you can hide your element: $(element).hide()
I am trying to get a link to load with the text cut off at a certain width. Then when the user hovers over, it shows the full content of the anchor tag. I have a fiddle at http://jsfiddle.net/GCXsq/564/ but it initially shows the full content of the link, and it also makes the link width 0 on hover.
http://jsfiddle.net/GCXsq/565/
Your main problem was that your hovering element had no (elemental) children, so you were always animating from 0 width.
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.
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:.