Signature is not visible until after resize on modal bootstrap - javascript

At my appliction after user enter data he needs to sign,
I'm using signature-pad plugin: https://github.com/szimek/signature_pad
and put the signature in modal of bootstrap4.
The issue is that before I open the modal, the canvas inside it has size of 0x0 pixels, so I need to resizing the screen and initializing the library whene the modal is opened.
I tried send the modal-body when calculate the width.
I put width and heigth manual - dosnt work good.
<script>
$('#myModal').on('show.bs.modal', function (e) {
console.log("modal open");
resizeCanvas();
});
</script>

tnx guys, I finally got it.
I gave the modal style="display:block;"
and then by jq I change it
$(document).ready(function (){
$('#myModal').css('display','none');
});
and diabled the screen resize at signature-pad.

Related

Scrolling issues with multiple bootstrap modals

I have a page with a modal with a lot of info so you need to scroll. This modal contains a link to a second modal.
When I
open modal 1
click on link to open modal 2 (modal 1 stays in background)
and then close modal 2 so that I am back on modal 1
modal 1 looses scrolling (there is still a scroll bar but it doesn't do anything). Instead the modal stays in the position it was at the time of opening modal 2.
I played around with closing the background modal with js first (but that messes up scrolling on the second modal). It appears that every time I try to open/close more than one modal I always get some issue with the scrolling.
Any suggestions on how to handle this?
Add
.modal { overflow: auto !important; }
To your CCS.
Without your code I went ahead and created this jsFiddle that recreates your issue, or at least a very similar one. Add your code and I will test if this works or not.
Adding that line to the CSS fixed the issue as demonstrated with this jsFiddle.
Solution taken from this thread on github which offers other solutions as well.
The solution that worked for me was:
$('.modal').on("hidden.bs.modal", function (e) {
if ($('.modal:visible').length) {
$('body').addClass('modal-open');
}
});
$(document).on('hidden.bs.modal', '.modal', function () {
$('.modal:visible').length && $(document.body).addClass('modal-open');
});
this is the solution:
<script>
$('#id_ofyou_secondary_modal').on('hidden.bs.modal', function (e) {
$('body').addClass('modal-open');
});
</script>
take care that "#idofyousecondarymodal" is the id of the secondary or tertiary or infinite modal. but NEVER write the ID of the first modal.
example i have 2 modal:
<div id="mymodal1" class="modal fade in" style="display:none;">
.
.
.
.
</div>
<div id="mymodal2" class="modal fade in" style="display:none;">
.
.
.
.
</div>
then the script will be:
<script>
$('#mymodal2').on('hidden.bs.modal', function (e) {
$('body').addClass('modal-open');
});
</script>
jus add this code and work fine.
I tried the previous solutions, and not working for my use case:
just adding css .modal { overflow: auto !important; }
This will cause the content below modal become scrollable. Not good when you want to keep the previous content position. especially in mobile browser.
Use javascript to track opened modal and keep the 'modal-open' class in body element using this jQuery selector $('.modal:visible').length. This is not working when there are multiple modal opened and closed fast. I use BS modal for my ajax spinner, so the $('.modal:visible') is not accurate.
This is the working one for me:
Use JS global variable to keep track/count of opened modal; instead of just using :visible selector
And I added css style so I don't have to recalculate backdrop z-index
https://stackoverflow.com/a/63473738/423356
var bootstrapModalCounter = 0; //counter is better then using visible selector
$(document).ready(function () {
$('.modal').on("hidden.bs.modal", function (e) {
--bootstrapModalCounter;
if (bootstrapModalCounter > 0) {
//don't need to recalculate backdrop z-index; already handled by css
//$('.modal-backdrop').first().css('z-index', parseInt($('.modal:visible').last().css('z-index')) - 10);
$('body').addClass('modal-open');
}
}).on("show.bs.modal", function (e) {
++bootstrapModalCounter;
//don't need to recalculate backdrop z-index; already handled by css
});
});
.modal {
/*simple fix for multiple bootstrap modal backdrop issue:
don't need to recalculate backdrop z-index;
https://stackoverflow.com/questions/19305821/multiple-modals-overlay/21816777 */
background: rgba(0, 0, 0, 0.5);
}
This is modified fiddle from #Keeleon for the fix https://jsfiddle.net/4m68uys7/
This is github issue https://github.com/nakupanda/bootstrap3-dialog/issues/70
Add following to your CSS :
.modal
{
overflow: scroll !important;
}

How do I apply a browser-position to my code?

Earlier today I asked a question about my webpage being very 'jumpy'.
I've posted a test version of my webpage here: http://armandbakx.nl/
And a codepen can be viewed here: http://codepen.io/anon/pen/GpmQoY
$('img').on('click', show);
$('.overlay').on('click', hide);
function show(){
$('.scroll-container').eq($(this).parent().index()).addClass('show');
$('.content-container').addClass('no-scroll');
$('.overlay').addClass('opacity');
}
function hide() {
$('.scroll-container').removeClass('show');
$('.content-container').removeClass('no-scroll');
$('.overlay').removeClass('opacity');
}
The idea of the page is that you click on an image (in this case a red square), resulting in a hidden container showing, which can be scrolled through, containing more information and images about this image.
However, when you click one of the squares, and the container and overlay show, the other images (squares) move. It was suggested to me that in my show function I should try and keep track of the position my browser was in when this container opened. Then in my hide function, return the browser to that position.
Truth to be told, I am not good with JavaScript AT ALL, so I'm pretty much clueless as to how I should apply this. I'm having more issues with this webpage and I have to fix them fast, hence I'm asking again. Could anybody help me with this?
From what I can tell, your squares are moving around because of the .no-scroll class. If I remove it, everything appears to work correctly.
try this:
$('img').on('click', show);
$('.overlay').on('click', hide);
function show(){
$('.scroll-container').eq($(this).parent().index()).addClass('show');
$('.overlay').addClass('opacity');
}
function hide() {
$('.scroll-container').removeClass('show');
$('.overlay').removeClass('opacity');
}
In your show function, you can retrieve the scroll position before the Text is shown.
scrollHeight = $(document).scrollTop();
In your hide function, set the scroll position to the value you got previously.
$(document).scrollTop( scrollHeight );

Setting size of custom edit form for Kendo UI grid with AngularJS

I have a custom edit form for my Kendo UI grid, but I need to make it wider to fit my layout. The way I currently do it works, except for that the position of the Update and Cancel button does not get adjusted (= they wind up in the middle instead of to the right).
Here is how I adjust the size (by specify this in the edit field of the grid options):
edit: function (e) {
var popupWindow = e.container.getKendoWindow();
popupWindow.setOptions({
width: 640
});
}
Here is a plunker:
http://plnkr.co/edit/bRaFZFjrzR3IyeVrmulR
What is the best way to set the width of the edit form so that the buttons, etc. also get positioned correctly?
I got it working by setting the width of k-edit-form-container to auto:
edit: function (e) {
var popupWindow = e.container.getKendoWindow();
e.container.find(".k-edit-form-container").width("auto");
popupWindow.setOptions({
width: 640
});
Updated plunker: http://plnkr.co/edit/bRaFZFjrzR3IyeVrmulR
I found solution here: http://dojo.telerik.com/aVOj

Window resize not working

My background image loads blocky for some reason (i.e., the center doesn't load horizontally), but after any tiny window resize it snaps into full form. I wanted to add a small bit of Javascript to adjust the window size by 1 pixel to remedy this. Unfortunately, I'm getting no results with the below code:
<script>
$(document).ready(function(){
window.resizeTo(window.outerHeight, window.outerWidth + 1);
}
</script>
Anyone have any ideas why?
Thanks!
Try to close the DOM ready function:
$(document).ready(function(){
window.resizeTo(window.outerHeight, window.outerWidth + 1);
}); // <-- Here

Prevent jquery browser scrolling to top on click

I have the following script for a thumbnail image viewer. I've named each thumbnail image and large parent image ending in thumb and large, respectively. The script replaces the large image with whatever thumbnail image is clicked on by changing the filepath.
<script>
$('.thumbs').delegate('img','click', function(){
$('.large').attr('src',$(this).attr('src').replace('thumb','large'));
$('.large').hide().fadeIn(500);
});
</script>
Each time a thumbnail is clicked, the page scrolls back to the top. I've tried to prevent this with
return false;
It works, however, then large image won't update. Is there another way to prevent the page from scrolling to the top?
Thanks for your help.
I doesn't seem to be doing that in IE9. Try preventing the default action :
<script>
$('.thumbs').delegate('img','click', function(event){
$('.large').attr('src',$(this).attr('src').replace('thumb','large'));
$('.large').hide().fadeIn(500);
event.preventDefault();
});
</script>
The page does not scroll to the top of page, it scroll to the top of large image because you change the image source.
You can try to disable and hide and fadeIn effects and see if the problem persists.
If the problem persists simply add the following code that the issue is resolved.
<script>
$('.thumbs').delegate('img','click', function(){
var y = window.pageYOffset;
$('.large').attr('src',$(this).attr('src').replace('thumb','large'));
$('.large').hide().fadeIn(500);
window.scrollTo(0, y)
});
</script>
Sorry any english mistake. I'm using google translate.
Where exactly did you place the return false? If you did it at the end, it should have worked. Like this:
<script>
$('.thumbs').delegate('img','click', function(){
$('.large').attr('src',$(this).attr('src').replace('thumb','large'));
$('.large').hide().fadeIn(500);
return false;
});
</script>
You can also use e.preventDefault() to stop the default link action:
<script>
$('.thumbs').delegate('img','click', function(e){
$('.large').attr('src',$(this).attr('src').replace('thumb','large'));
$('.large').hide().fadeIn(500);
e.preventDefault();
return false;
});
</script>
This happens because when you replace large image src, for a moment it dissapears, page got smaller and scrolls are no needed so go up. Try zooming page and then you will see it doesnt happen(ctrl + mouse scroll up).
Just put you large image with DIV with fixes size that does not change:
<div style="height: 490px; width: 490px;float: left;">
<img style="display: block;" class="large" src="images/06_large.png">
</div>

Categories