I have a div that contains h1, h2 and a button.
When I click the button, the button is hidden and instead there's a form with 2 text inputs.
The div is always centered, whenever is expand or not (with flex).
I want that on clicking the button, the div (with its new larger size) will move up (with animation), but still stay in the center.
Thank you.
Related
I have a div (it's a popup for an openlayers map, but it could pretty much be any fixed size div), that contains a jquery ui menu (which is wrapped in a ul). The menu doesn't fit inside the div very well, so I'd like to make the menu float above it so that as the menu grows I don't have to grow the size of the containing div. Is this possible?
The containing div is itself positioned absolutely, I've tried setting the ul that represents the menu to position:absolute;z-index:100 but that doesn't work. I've also tried setting overflow:visible with no joy.
This screenshot shows the issue I have:
I've added a jsfiddle that opens a popup when you click the small orange circle, and you can see that the menu inside there is bigger than the containing div.
If you tell me that my answer is not what you mean I will delete it cause I am not sure what you really need to do. You want this scrolls to disappear and if the text is bigger than the popup just to float over no matter it is going outline ?
If this is what you want you have to remove the overflow: auto from .olFramedCloudPopupContent and again to remove overflow: auto from inline style of the element #chicken_contentDiv (I am not sure that you add it with jQuery).
I have a Jquery Dialog. Inside the dialog i have a DIV with a "Save Button". This DIV can have multiple buttons or dropdowns depending on the scenario. So it's actually a TOP Options Div.
Image Here:
I need to have this DIV always VISIBLE. Right now If the dialog content exceeds the dialog height then If I scroll down I lose the visibility of my options div.
Any clue on how to perform this?
Thanks a lot.
I suggest you put the rest of the dialog content into a div, to which you apply a fixed height and an overflow-y: scroll attribute.
height : 250px
overflow-y: scroll
So in fact it's not the whole dialog you will scroll up and down while the top div stays fixed, but the second div content while the top div just stays at its place.
Example : dialog with fixed top and scrolling content
Here's one approach:
http://jsfiddle.net/andromedado/Gq54S/
The assumption is that wrap around the "New User", "close", scrollable content and buttons pane is already position fixed.
From there, you just have to make the buttons pane also position fixed, and give it the appropriate width so that it doesn't overlap the scrollbars.
Finagling width vs. padding can be verbose, so I cheated in the script and just declared vars to hold the padding info.
I also added an element "buttonSpacer", which gets it's height from the floating buttons pane; this gives the floating content something to push against, so it doesn't end up underneath the buttons pane.
I have a top drop down navigation menu which in which every menu item has child and these children are displaying on right side.
It is fine for all the menu items except the last one. Because when I hover the mouse over the last menu item the drop down menu appears then when I hover the mouse on a menu item with children that children displays on the right side and hidden because the browser window finishes there.
So what should I do to display the children menu items on the left side when ever the browser window finishes so that the menu items appears to the users.
Any help please?
EDIT
http://harleydragon.info
Please look at this site. Mouse over the Pigeon Forge menu and see its children. That children should be appear on left side because there is no space on the right side.
This question is really unclear but I think I understand what is going on...
Either give your last menu item an id (such as #last-item), then style the subsequent children to appear on the left (given the #last-item id), rather than the right (using your preferred method depending on your situation - ie. position:relative + left, or float, of margin)
#menu .children
{
/* position right */
}
/* "#menu" in the following style is NOT required,
I left it in for sake of clarity. */
#menu #last-item .children
{
/* position left */
}
Also consider using CSS pseudo-classes to style the children of your last element:
http://www.quirksmode.org/css/firstchild.html
What I'm trying to do is fairly complex.
The basic idea is that I have a wrapper div, say 20 x 20 px, that is hidden and fades in once I hover the mouse over it and fades back out when the mouse is removed. I have this part figured out.
My next step was to include a div containing an image inside the wrapper div. The image div which is bigger (about 300 x 400px), overflows the boundaries of the wrapper div so that the entire image is visible and, as a child of the wrapper div, also fades in upon hover.
This brings me to my issue(s):
1. When I hover over the area, the image fades in like I want it to, but the top right corner is bound by the wrapper border, and it overflows to the bottom left only.
2. When I hover over any area the image covers and not just the wrapper area, the image will appear.
desired result for issue 1: I want to position the image div within the wrapper so that it overflows up and left, as well as down and right. In other words when I hover over the wrapper area, I want the image to fade in completely eclipsing the wrapper area so that the wrapper area is basically centered within the image area
Desired result for issue 2: I ONLY want the fade in effect to be activated when I hover over the 20 x 20 wrapper area. When I hover over any area the 300 x 400 image WOULD cover when visible I don't want anything to happen. On mouse off It wouldn't matter to me if I had to leave the area of the image or the area of the wrapper for the fade out to begin, but if it's possible to limit all hover activation/deactivation to the 20 x 20 area only, that would be cool.
I could so easily use the old image1 over image2; on hover, image 1 fades out to reveal image 2 trick, but it's all hell since I want the fade activation location to be within the area being faded itself.
Isk
UPDATE:
I have figured out issue number 1.
so now I just need to figure out my second problem and I'll be all set.
To get a visual of my progress so far, here's my website: http://silentnoizemusic.com
Scroll down to the area with the billboard that reads "SALES#silentnoizemusic.com" and hover the mouse over the black twitter icon to the upper left of the billboard.
Just as a reminder, I want the fade in action to take place ONLY when I hover the mouse over the twitter Icon area and not when I hover over the area the fading image covers. The image is placed within a smaller div wrapper set to visible overflow. So if you were to set the overflow to hidden you'd see that there is a square area with a yellow border that fades in when you hover over the twitter Icon. When I set the wrapper back to overflow: visible;, I only want that square area to activate the hover function and not any of the area around the square that the invisible overflowing content occupies.
It would be preferable if there was non-javascript solution due to coding restrictions, but if js is the only option then I'll give it a try anyway.
Thanks again,
Isk
This problem is occurring because your image is a child of the wrapper div and hovering over it is considered as hovering over the wrapper div.
If you are not terribly against a Javascript solution, here's my suggestion:
Take the bigger image outside the small wrapper div, i.e. it's no longer a child. But position the wrapper and this image in the same places as before. Then, on an onmouseover event on the smaller div, change the visibility of the image as before. On an onmouseout event, hide the bigger image again.
In order to change the properties of an element in response to actions on some other element you would need Javascript and CSS won't do.
This is the HTML and JS. Put the whole thing in your HTML file:
<script>
function show(div-id)
{
document.getElementById(div-id).style.visibility="visible";
}
function hide(div-id)
{
document.getElementById(div-id).style.visibility="hidden";
}
</script>
<div id="small-button" onmouseover="show('bigger-image')" onmouseout="hide('bigger-image')">...</div>
<div id="bigger-image" style="visibility:hidden">...</div>
Ah, yet another CSS issue I'm having.
I'm attempting to use custom buttons, replacing a LinkButton with an image. I have the button working, but now the content below the button is not being pushed down. Have tried various things, but can't seem to find the answer.
Here's a jFiddle: http://jsfiddle.net/3hm5W/
Basically, the div id = sampleForm (the white form box) should start 5px after the div class = action-buttons. Currently the white box contains the red button.
All of the contents of your action-buttons are being absolutely positioned, which takes them out of the normal flow and makes the container have 0 height. Either get rid of the absolute positioning, or specify a height for your action-buttons div.