I am using AJAX modal popup in my project, but there is problem with it.
Now I decided to acheive similar behaviour using javascript
I am able to show popup using
document.getElementById('dv').style.display = "block";
Now I just need, how can I make background disable like in modal popup?
you create a div that spans the whole page but initial style is display:none; along with any other styles. i.e transparency 80% with background colour of black..
When you show dv change the display attribute of the div (above). Just make sure that the dv has a higher z-index than the background div and the background div has a higher z-index than the content on the page :)
Have you considered using a library for this? The most programmer-friendly and flexible I have found is NyroModal (jQuery based). The advantage of a library is it will deal with many subtle things that happen with modal dialogs, e.g. ensuring it works effectively across all browsers (and overcomes the various quirks around things like positioning), animating on and off, lightbox effect around it.
NyroModal lets you generate dialogs dynamically, whereas most libraries are geared owards simpler use cases such as "make all images clickable so they show up as lightboxed when the user clicks on them".
Related
I was wondering if there was a way to get the nz-popover to center on another element.
I basically have a text input followed by two buttons in a div, I would like to center the popover on the div rather than on the button that triggers it.
I found that i could add the popover to the actual div and then use the nzVisible to trigger it but then i loose the ability to close the popup when the user leaves the area (prob when they hover over the mask or click it). I tried many ways to close it once the popover looses focus etc but that would cause the popover to close if the popover contains a menu or datepicker (when they are used).
Anyone got any ideas? (i used to use angular material and i believe they had something similar (think it was called target or something).
Thanks in advance,
For anyone who is interested in this, we have submitted a PR to provide this feature. You would be able to use this in 9.x (and future) versions.
I was wondering if there is a way to achieve an effect similar to Chris Coyier's: Scroll/Follow Sidebar using CSS3 animations?
I have a sidebar that scrolls down with the page as the user scrolls (simply using a fixed position div), but I would like to animate that sidebar to sort of bounce down and/or play catch up with the page as the user scrolls down.
Take a look at Chris' jQuery technique to see what I'm talking about.
The main thing I would like to know is if it is possible to achieve this effect using only CSS3 and no javascript.
Thanks in advance for any help!
No its not possible to get that effect without JavaScript unless you have some other sort of mechanism that allows you to check how far the user has scrolled, and change CSS properties of elements accordingly.
Click this link to see my concept image regarding the subject: http://i45.tinypic.com/k33c0i.jpg
Hi! Is it possible to do such custom "sliders" for overflowing content without the default Scrollers? It doesn't matter how the actual transition goes (could work just like the regular horizontal scrollbar for i care, just without the ugly default gray buttons/bar). Preferably i would like to do it just with CSS, but if not, i'll consider other ways to do it aswell. Or i'll just simply create another page to the remaining images.
http://www.visioville.fi/en/
Thanks!
You can get rid of the scrollbars by setting
overflow:hidden
in CSS, which will "clip" the DIV contents.
I don't think there is a pure CSS way to scroll it. That is easily doable with jQuery.ScrollTo - just bind hover() or click() events to your arrow icons.
Take a look at this site, I believe it will be of some use to you. It's what I've used in the past: http://jscrollpane.kelvinluck.com/
How can i change the appearance (not the color) of a scrollbar within a box with overflow? I know how to do it in flash, I need a way to do it without it. In fact, I want to know how they did this slider in the apple web site: http://www.apple.com/mac/
It seems they used css along with javascript, but that's all I know. Is it possible that they did it using DOM, DHTML, HTML 5, Ruby or PHP? I have no idea.
If you'd be kind enough to share the answer, I thank you in advance.
They basically re-created a fake scrollbar using images, CSS and some Javascript. When you drag the image, Javascript makes it move together with the mouse cursor and scrolls the box contents in the opposite direction. The real scrollbar is being hidden/deactivated using CSS.
Look here for some examples/tutorials: http://www.hiddenpixels.com/javascript/custom-javascript-scrollbar/
I would like to style a form button (input or button tag) with 2 background images to create a stretchable button (relative to the text-length). The form button should also have a hovered state and it should be cross browser (at least IE7 & +) would need to support it.
I know how to obtain the effect with just css with an tag => test
If anyone could help me a little bit, I would be pleased
yours truthfully
See this link.
This will only work with button because an inner element like a spanis needed.
Try JQuery UI. They have a very easy cross-browser set of user interface controls that might satisfy your requirements. You can change the backgrounds used for the buttons, etc.