I'm having a very frustrating issue with a Bootstrap Modal (Bootstrap 2.3.2) that I'm using for a file upload window. It is probably important to note that this is a nested modal, but this is the only instance that I'm having this automatic re-size issue. I have 6 other secondary modals that open from the primary Product Editor modal that are not resizing after they open/close.
Its also worth noting, that on the other modals that are not having this resize issue, they are not being assigned a custom width value.
Here are two images, the first is the first time I open the modal, the second is after it calls modal('hide') and then is opened again with modal('show');
http://i.imgur.com/2cj2k2I.png (first open) http://i.imgur.com/bDIa2mp.png (second open)
This is the creation code:
$('#mediaModal').modal({
show: false,
keyboard: false,
width: '60%',
maxHeight: '600px',
backdrop: 'static'
});
You'll notice in the screenshots that it is sitting over the larger product editor modal. Once an upload is complete, or the cancel button is clicked, (or the upload button is clicked and there are no files to upload), it simple calls:
$('#mediaModal').modal('hide');
On the primary modal, it simply calls $('#mediaModal').modal('show'); each time the 'Upload Media' button is clicked.
To combat this, I have tried to manually adjust the main modal css width before it is shown, like this:
$('#mediaModal').modal().on('show', function() {
$(this).find('.modal').css({
width: '60%'
});
});
This should make sure the primary modal windows width stays at the original definition of 60%. However, it makes no difference. The first time the modal is open, it represents 60% of the screen in width. Any subsequent openings, it has shrunk down in size. It doesn't continue to shrink after the first hide, but neither can I get it to retain the original desired width.
One last note - it is only changing the width, probably because this is a percentage value.
Thanks for any help! I'm really not that good at CSS so I'm guessing you CSS wizards will know whats happening almost immediately! If I haven't provided enough information please just leave a message and I'll add to this post.
(Note: Upgrading to BS 3 is just not an option, the code base would take weeks to clean up)
Related
I don't know how many times had i tried to do this.
In my aplication, I show a huge report in a Modal (Semantic UI) with a option to print that.
The problem is when I print it (using html2canvas then jsPDF) it only shows what is visible in the screen and cuts everything else.
I created a codepen to show my situacion.
there it is
html2canvas(document.getElementById('myModal2'), {
allowTaint: false,
useCORS: true
}).then(function(canvas) {
downloadCanvas(document.getElementById('test'), canvas, 'test.png');
modalButton.click();
});
EDIT 1
I tried change the height of the modal content, in the codepen link will work, but in my aplication won't.
something is blocking the html2canvas from seeing all the modal content, here is what it shows.
the strange part is that when I click to print again, it saves all the modal content (I don't know why).
I tried:
created the canvas twice (somehow they know that the file isn't downloaded yet);
created the PDF twice (but only the second one will be correct) (can I cancell an download?);
change the height in 1px to "fix";
somebody please help me
Demo
Codepen
PRESS FULL SCREEN ICON ON MAP IN CODEPEN TO START TOUR
Desired Outcome
The bootstrap tour element should appear over the top of everything, along with highlighting the element its targeting.
What I'm getting
Ignore the difference in red button compared to image above, content doesn't matter
Problem
When the user toggles the fullscreen button (using leaflet fullscreen plugin), it starts the tour.
The tour is activating fine, but the elements of the tour are not responding properly, my hunch is that it is struggling to compete against the fullscreen map for attention at the front as it were.
Currently, the popover isn't displaying, even when in the dev tools I put its z-index as high as it will go. The dark overlay also isn't displaying over the top of the fullscreen map.
Lastly the target is not being highlighted properly. When inspecting the target on other pages with the tour working, it is still the original element, but when inspecting element on this page, it's not the element, but a new bootstrap div placed over the top. No idea why it's not working in the same way.
What I've tried
Tour code
//Bootstrap tour
function takeTour() {
console.log("Taking tour");
("use strict");
// Instance the tour
var tour = new Tour({
name: "leafletTour",
storage: false,
steps: [
{
element: "#custom-control",
title: "One Stop Tour",
content: "There is only one stop in this tour",
placement: "right"
}
],
backdrop: true
});
tour.init();
tour.start(true);
}
My understanding is that bootstrap tour assigns the target elements new classes as they are selected, which are then set to z-index: 1101
I have been trying to brute force higher z-index's onto the bootstrap tour elements, but with no luck - no matter how high I set them, they aren't fighting to the top level.
I've also forced the map to be z-index: 100 !important, and still overrides to the top - despite in the dev tools still showing as z-index: 100 !important
Any ideas/advice would be great.
I have reviewed your code, its really strange but i have found one solution :
Just add class
.fade{
opacity:1 !important;
}
Here you can find working example.
https://codepen.io/anon/pen/MveMrL
I want to have a menu that is toggable in small screen sizes and always visible on medium sizes upwards.
The behavior should be (basically) exactly like this demo here.
The steps are:
Go to a small screen size (til the body outline is gold)
Check that it's toggable
When the menu is hidden and you get a bigger screen size, the menu should appear
When the menu is not hidden, go to a bigger screen size and it should remain shown
When on a big screen size, and element was hidden, you should see it but when you drag to a smaller size, it should get hidden
When on a big screen size, and element was NOT hidden, you should see it but when you drag to a smaller size, it should get hidden
To achieve this is very easy with:
$(".click").click(function() {
$(".menu").toggleClass("hidden-md-down");
});
My problem now is that I want to animate this show and hide and I can't do it with the class toggle.
So I have to rely on for example slideToggle() and here is where my problem lies, see demo here.
If you now go to a small screen size, hide the menu and make the window size bigger, the menu won't appear because of the hide() function.
I know this could be solve with a $(window).resize but I definitely don't want that solution since it's terrible for performance for such a small feature.
So how can I either have this toggle class with an animation or do it with js without the resize method?
I've put my comment into an answer instead: "For best performance wire your window size check to only the end of the browser resize, not to every stage."
This code works and it only runs .5 sec after the end of the window resize event rather than during (better performance). Run the code full page and squeeze your browser window to see it in action.
Instead of sending the text values #width and #height you can elect to run your menu toggle or deactivate it; I'd do this by removing the js class you're using to activate the menu initially.
And make your menu an unordered list and set it to be inline on desktop and an unbulleted list on mobile using css.
$(window).resize(function() {
if(this.resizeTO) clearTimeout(this.resizeTO);
this.resizeTO = setTimeout(function() {
$(this).trigger('resizeEnd');
}, 500);
});
$(window).bind('resizeEnd', function() {
var widthReport = $("#width").text($(this).width());
var heightReport = $("#height").text($(this).height());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="width"></div>
<div id="height"></div>
I am making a preview box that pops up when you click a gallery image and need to make it disappear when you click outside of it. I found many solutions but none work with my code. I think the problem is I may need a while loop but I tried several conditions and all were infinite.
This is the last solution I tried. The preview works but I can't get it to close when I click out.
DEMO
$('.portPic').click(function() {
if ($(this).attr('data-src2')) {
$('#clickedImg').attr('src', $(this).attr('data-src2'));
} else {
$('#clickedImg').attr('src', $(this).attr('src'));
}
$('#clickedImg').css('visibility', 'visible');
$('#clickedImg').blur(function() {
$('#clickedImg').css('visibility', 'hidden');
});
});
I've done a similar thing with a pop-out menu, where the user clicks "off" the menu and it closes. The same can be applied here.
I used an overlay div which spans the whole screen (with a translucent opacity - maybe 0.6 black or similar; or whatever colour you want) which gives a nice modal effect. Give it an id - let's say modal-overlay.
You can put it static in your page code, and set the display to none and make it the full-size of the page (through a CSS class).
<div id="modal-overlay" class="full-screen-overlay"></div>
Set the z-index of the overlay to higher than the rest of your page, and the z-index of your popup to higher than the overlay. Then when you show your popup, also set the visibility of the modal-overlay to visible, too.
In your script code, put an event handler for when the modal div is clicked:
$('#modal-overlay').click(function() {
$('#clickedImg').hide();
$('#modal-overlay').hide();
})
I would also use the .hide() jQuery method, which is easier than typing out the visibility.
Better still, if you have more than 1 thing going on (which you would with a modal overlay), wrap your "show/hide" of the popup in a hidePopup() or closePopup() method and call it onClick to save re-using code.
For effects when opening the popup/overlay, you can also use jQuery animations like .fadeIn() or .slideDown(). Use fadeOut and slideUp to hide.
These animations also perform the showing/hiding, so you wouldn't need to call .hide() or .show().
Check out this link to jQuery's API documentation for animations. Very useful and a good read.
Hope this helps!
You'll need to create a seperate div that is most likely fixed position that sits just one step lower (z-index) than your popped-up image. Attach a click handler to this div (overlay) and do your showing/hiding functions in there.
You can use modal photo gallery.
http://ashleydw.github.io/lightbox/
You can use this codepen code, too. SO is not letting me post the link here. So serach using thi "Bootstrap Gallery with Modal and Carousel".
Hope this helps..
I've downloaded a free modal plugin called blockUI, and used it as my image uploading modal.
So far i've designed, positioned everything, but I have one problem:
When I make my browser screen smaller, OR go on iphone, or go on my other screen, some content gets out of the modal
See example here:
(source: gyazo.com)
See LIVE example of the website to test on your screen:
https://argonite.net/img/
Why is this happening? I have set min-width, the modal should automatically resize the background and let the content in.
Information:
.file_bg Each file will be stored in file_bg, it's like a block that will hold image preview, progress bar, and more.
#button_start - the progress bar
#button_remove - #button_link - Remove / Copy to clipboard icons
CSS File:
http://pastebin.com/QwF4Vj3B
JS file:
http://pastebin.com/xWt6bC32
Why is it doing that?
for div.blockUI blockMsg blockPage change min-width:35%; to width:35% and add min-width with a fixed pixel value (520px seems to be good in your case). That should do the trick. For mobile, you can use #media queries to apply different values for width and min-width.
div.blockUI blockMsg blockPage {
width:35%;
min-width:520px;}