I have an online form, that i would like to do through stacking modal windows (it just makes sense that way). upon opening both modal windows and then closing the top most one however the scroll bar comes back up from the content bellow the modal window.
here is an example:
http://www.bootply.com/FGNRPwSRgH
Just look on the right side of the screen when closing the second window.
Is there anything I can do about this? I am new to Bootstrap and I am hoping to be able to fix this through CSS and bootstrap only, however javascript isn't out of the question.
When you open your first modal, The body tag of the iframe is getting a class of "modal-open" which is disabling the scrolling, that remains when you open the second modal. When you close that second modal, the "modal-open" class is being removed, which is why the scrolling is coming back. This is probably due to the way you're nesting these modals. It just wants to remove that class from body, not knowing that you still have one open. You will most likely need to add some sort of check step with javascript to determine if you still have a modal with a display property of block when closing each one, and if so make sure that modal-open class is still set on the body. I would look for a callback function on the close of those modals that you can listen for.
http://www.bootply.com/8K2wKO0c7I
$('body').append(
$('<script />',{src:'//rawgit.com/sbreiler/bootstrap-multi-modals/master/bootstrap-multi-modals.js'})
);
If it works for you, grab a copy of the *.js file from my github: https://github.com/sbreiler/bootstrap-multi-modals
Related
I am writing tests for my Bootstrap 3.x webapp using Nightwatch. All is working fine, but I would like to add the "close modal by clicking somewhere next to it" in one of my tests. I don't seem to be able to identify the html element that's supposed to receive the click event however.
Can anyone help me with this?
Thanks!
The background is a div with class .modal-backdrop. According to the docs: "...generates a .modal-backdrop to provide a click area for dismissing shown modals when clicking outside the modal."
I copy / pasted the example from http://getbootstrap.com/components/#navbar into this URL:
http://www.frostjedi.com/terra/scripts/demo/bootstrap-nav.html
...and it's not working as I'd expect.
So if you shrink the browser width past a certain point the horizontal menu gets replaced with a button that, if clicked on, shows a vertical menu. At least that's my understanding of how it's supposed to work. But in the above example that is not how it works. The button appears but nothing happens when I click on it.
Any ideas?
Have a look to the browser console (i.e. Firebug): you'll find there an exception
Error: Bootstrap's JavaScript requires jQuery
I'm sick of webpages that show a fixed element that always follow you on the screen, and sometimes partially block the view of the page. (Example.) I want to make a custom CSS rule to add to Chrome that would set display: none; to all elements that have position: fixed;
Is this possible? How?
IMO, the easiest way to create what you want is to make a bookmarklet to hide all fixed elements. It won't run automatically on every page, but you can click on it whenever something's annoying you.
I used Ben Alman's jQuery bookmarklet generator with a filter from this existing Stack Overflow question.
$('*').filter(function() {
return $(this).css("position") === 'fixed';
}).hide();
I minified the code, generated the bookmarklet, then dragged the bookmarklet to my toolbar and, bam, instant tool.
If you really want this to run automatically on every page, you could check out TamperMonkey and use the same script.
We are building a css drop down megamenu for a website that will include an HTML form with selects. In IE7, when you click on a select, it's pop-up menu opens up (naturally). Then when you mouseover the menu to select an item, it appears as though the focus is taken away from the page, the containing div/li loses :hover, and the whole thing closes before you can select an option.
Preview in JSFiddle here: http://jsfiddle.net/q284w/
The JSFiddle above has the offending code in "Menu 1" ... and, yes, I'm using a table to get a full-height, vertically-centered, 3-column layout in that menu. It's in the original code, so I put it in here; I don't think it's part of the problem, but you never know with IE.
This, of course, works in every other browser I can test including IE8+.
Any ideas on a workaround? Perhaps JavaScript can save the day?
Ultimately there is no easy answer for this (that I found). You simply have to work around it using JavaScript, and it's a pain. This gist of it is as follows:
Create a special class that mimics the :hover state. You will use this to "hold" the menu open.
Create a function that adds this class to the appropriate menu item and attach to onClick of the dropdown.
In another function, remove the class and attach that to onChange of the dropdown (the dropdown closes).
Is there a way to make it so the page doesn't shoot to the top of the site when clicking different links in the navigation bar?
e. So say I'm browsing my site and I'm scrolled down a little bit. Then I click on a link that navigates to a different page on my site. It automatically scrolls to the top. Is there a way to make it not do that.
instead of simply linking to a page, you could link to an anchor on that page using
link text
if that anchor is placed properly on the target page, you will not experience the jump back to top every time you link to another page. hope this helps
If this is the problem I'm picturing:
Change your links to point to <a href="#"> or <href="javascript:void(0);">
If you're going to different pages, you can use a link like:
My Link
Down in the page:
<div id="Section5">
Stuff!
</div>
This is the way that the web works. But still you can do a few work a rounds but each one will take a little work.
First option:
When you click on any link on the page, get the margin of the link from the top, then add it as a parameter to this link, and only then do the navigation. (the format of the line will be like page.html#margin-from-top).
Then in the new loaded page, you can look for this value and do the scroll. (I prefer the scrolling with a little duration).
Second option:
Another idea is to stay always on the same page and only change the content of it. you can do that with a little effects too.
It seems, too, like you might want to use a mooTools ScrollTo affect or possibly even invoke an AJAX method like SWFAddress.
Depending on exactly what you're trying to do, you may be able to accomplish it without using any fancy javascript, but it will depend on the inclusion of labels/etc. on your target page (as has been mentioned before).