I'm using this below code for one of my website. I know there have lot of ways to create a dialog boxes. But for a some reason, I need to follow these structure.
//On click trigger a popup box
$('#terms').click(function(e){
popupBox(e);
});
//Create a Popup Box
function popupBox(e){
e.preventDefault();
$('body').width($('body').width());
$('body').css('overflow', 'hidden');
$('<div id="popupbox" title="Terms and Conditions"><!-- popupbox - Edit by Yesh --></div>').appendTo('body')
.html('<div><h1>Lorem Ipsum Title</h1></div><div><p>Lorem ipsum dolar sit amet </p></div><div><small>Read it before accept</small></div>')
.dialog({
modal: true, title: 'Terms and Conditions', zIndex: 9999, autoOpen: true,
width: '60%', resizable: false,
close: function (e) {
e.preventDefault();
$(this).remove();
$('body').css('overflow', 'auto');
},
});
}
Problem is when I click on the Title. It's get hidden (not closed). So, how to fix it?
Here my JSFIDDLE is working fine.
The problem is related to vertical scrolling.
You're probably scrolled down on the page when you open the dialog. When you then click the title bar of the dialog to drag it, the dialog jumps further down the page, usually hidden from view. The only way to get it to close is to press Esc. Your JSFiddle doesn't show the problem because it's not vertically tall enough to require scrolling.
Here's a modified version of your JSFiddle with vertical space added to illustrate the problem.
The solution, as described in this post, is to change the style of the dialog from position: absolute to position: fixed:
.ui-dialog { position: fixed; }
Here's another JSFiddle with the problem fixed.
It is near impossible to answer when there is no way to reproduce the issue you are facing. Try narrowing your problem down:
What browser are you using? Is the behaviour consistent on all browsers?
If the problem doesn't reproduce in jsfiddle, maybe the problem is not the code you put in jsfiddle. Try giving it more code from your page until the problem shows itself - then remove as much as you can to isolate the bug.
So in short, show us more code.
Related
I've been trying to disable the scrolling when modal opened
$(document).on('show.bs.modal', '#setting', function (e) {
$("body").css("overflow", "hidden");
$("body").css("overflow-y", "hidden");
$("body").css("overflow-x", "hidden");
console.log('%c SUPREME ', 'background: red; color: white;');
});
The console seems to run, but the scroll codes not seem to works - it still happening.
Link = https://mybabies.app/baby/3b1344de-1d91-4c5c-b289-572d7e779c5f?code=!taly
How do I make sure this not happening?
Hey you can hide the scrollbar by changing the body height using:
$('body').height(0)
And to undo it when you want to close the modal you can use
$('body').height('auto')
For more info check:
https://api.jquery.com/height/
Could you try adding overflow: hidden to the <html> tag? It's working fine for me on Firefox.
Sorry I post this as an answer, I don't have enough reputation to comment.
I'm having issues with my CarouFredSel carousel.
I have a (tall) one pager with a carousel inside. If I scroll below it, any browser resize will make the page scroll back up about one page (I'm estimating the height of the carousel). I understand a few pixels of twerking, but now that's about 1000...
The problem is, I'd be 'fine' with it if it was only on resize, but this problem reproduces on reaching the bottom of the page on mobile, without any kind of resizing, no screen rotation (on Android, at least, cannot test iOS right now..). And like I explained, I reproduced the problem with slightly resizing a desktop browser on reaching the bottom of the page.
On disabling CarouFredSel, the problem goes away. It also goes away on disabling the responsive option on it.
carouFredSel is initiated like so :
$("#modeles").carouFredSel({
responsive: true,
scroll: {
fx: "crossfade",
duration: 500
},
direction: "left",
items: {
visible: 1,
width: 868
},
auto: false
}, {
transition: true
});
I have created a JS fiddle reproducing the issue here.
Okay so I get alot of these few 'tricky' stuff and what I oftenly do, I back it up with javascript.
In your case, what causes all the problem is Google Maps and the content of the iframe to be more specific.
What I would do in your case - of which does works perfectly - I would set an attribute of the scroll position on scroll, and on resize get me to that scroll position.
That said, we have this:
$(window).scroll(function () {
$("body").attr("xheight",$(document).scrollTop());
});
$(window).on("resize", function(e){
e.preventDefault();
$(document).scrollTop($("body").attr("xheight"))
});
And that's all you need.
Given example:
jsFiddle
I have used slimscoll in my code which work perfectly in firefox.
issue is with chrome when I click on scrollbar and tries to drag it. It selects the entire div or div content around it.
may be its because as mouse get moved out of that slim area of slimscroll and browser recognizing it as a content select.
could you please help me with that ????
here is sample code I am using for slimscroll
$('#Div').slimscroll({
railVisible: true,
allowPageScroll: false,
height: '320px'
});
Try addinig a size to make it wider. In Chrome I am not seeing the same issue.
$('#Div').slimscroll({
railVisible: true,
allowPageScroll: false,
height: '320px',
size: '10px'
});
documentation has an example like this
I had the same issue.
I modified the call of attachWheel() in jquery.slimscroll.js to
attachWheel.apply(this);
This workes for me.
I'm having a small issue with a jquery dialog box.
It works just fine in all browsers except one, I bet you can guess which one.
When it initially loads the dialog box it doesn't show the scroll bar and isn't sized as specified in the code.
When you go and find the bottom right corner to resize the dialog, the second you click and move it, it goes to the size as per the code and now has the scroll bar.
$( "#dialog-form" ).dialog({
autoOpen: false,
closeOnEscape: false,
height: 100,
maxHeight: 500,
width: 800,
modal: true,
buttons: {...
Another odd thing, if I don't set the height to 100, it will show the scroll bar but the height of the dialog box does not start at the maxHeight and grows off the screen.
Any help in being able to prevent the height from growing past the maxHeight and having the scroll bars show from the start is greatly appreciated.
turns out it was stupid quirks mode that was the problem.
I put in
<!DOCTYPE html>
before my <html> and everything works as is all other browsers.
I am using a fancybox with plugin jquery.easydrag.js. The reason for this is to be able to drag the fancybox around.
It seems to be working fine, but the problem comes when the fancybox has scrollbars. I.e. for example when clicking on submit and not entering any fields the valdidation on screen causes scrollbars. Which is fine normally but the scrollbars causes all sorts of issues with the draggable feature so that when I am trying to click the scrollbar up and down, it actually moves the entire windows. So it seems to be confused as to what content can be moved and what to do with a scrollbar.
claimLink.fancybox({
'width': 500,
'height': 590,
'autoDimensions': false,
'onCleanup': function (e) {
var modelClaimFormId = $j(e).attr("href").replace("body", "");
var modalClaimForm = $j(modelClaimFormId);
if (!($j(modalClaimForm).valid())) {
$j(claimForm).remove();
$j(e).parents("tr").remove();
}
}
});
$j("#fancybox-wrap").easydrag(true);
EDIT :
I managed to add something for input and textareas to ignore the scrolling see below...just wondering what I can do for scrollbars.
$j("#fancybox-wrap").easydrag(true);
$j("#fancybox-wrap input,textarea").click(function(){
$j("#fancybox-wrap").dragOff();
});
$j("#fancybox-wrap input,textarea").mouseover(function () {
$j("#fancybox-wrap").dragOff();
});
$j("#fancybox-wrap input,textarea").blur(function () {
$j("#fancybox-wrap").dragOn();
});
$j("#fancybox-wrap input,textarea").mouseout(function () {
$j("#fancybox-wrap").dragOn();
});
This is the link to JS for easydrag plugin
I posted the first example about how to make fancybox draggable back in 2009 for v1.2.1. Then I posted some notes to make it work with v1.3.1 as seen here but when fancybox v1.3.4 was introduced, the easyDrag plugin was not working as smooth as with the previous versions and started behaving buggy. I didn't have the time to find a workaround ... so I just drop it.
The solution was simple though: the easyDrag plugin provides a way to set a "handler" as explained here so instead of holding and dragging the whole #fancybox-wrap container, which blocks access to the scroll bars if any, you just drag the lightbox from a specific defined element. Such handler can be appended to #fancybox-wrap selector and set it within the EasyDrag plugin using the onComplete callback API option like:
'onComplete': function(){
// append the handler on the top-left corner of fancybox
$("#fancybox-wrap").append("<button id='handler'>Drag me</button>");
// set the handler using the handler's element ID
$("#fancybox-wrap").setHandler('handler');
}
Notice that you can use any element as handler, in my example I used a html button but you may use an image if preferred. The important thing is to assign the minimum important css properties to the handler so it can be appended to the #fancybox-wrap container without issue like:
width: 80px; /* or whatever needed */
height: 24px;
position: absolute; /* important to position the handler into the fancybox wrap */
top: 0; /* top-left corner of the box but can be anywhere */
left: 0;
display: block;
z-index: 1120; /* important to be over the box */
other properties can be cosmetic.
See it working here!!!
Once you complete and submit the form, the response will be a new fancybox with scroll bars that you can use independently from the easyDrag handler.
Please feel free to analyze the code and customize it to your own needs (and don't forget to grant me the bounty ;)
UPDATE: Notice that since we are appending the handler to the #fancybox-wrap container every time we fire fancybox, then we need to remove it once we close fancybox using the onClosed callback, otherwise we will duplicate the handler if we open fancybox again with unexpected results:
'onClosed' : function() {
$("#fancybox-wrap #handler").remove();
}
I updated my DEMO too.
LAST NOTE: This solution is for fancybox v1.3.4.
I haven't tested it with v2.x but I don't see why it wouldn't work. Just make sure that you bind EasyDrag and append the handler to the .fancybox-wrap selector instead
$(".fancybox-wrap").easydrag();
You may use the afterShow callback to append the handler to it and afterClose to remove it.
Using the above solution to add a handler for the #fancybox-wrap selector along with the EasyDrag plugin using the onComplete callback API, I found this works nicely with the fancybox 1.3.4 title element to create a dragable fancybox with scroll functionality. Using the title, there is no need to remove it after close.
<script type="text/javascript" src="#Url.Content("~/fancybox/jquery.mousewheel-3.0.4.pack.js")"></script>
<script type="text/javascript" src="#Url.Content("~/fancybox/jquery.fancybox-1.3.4.pack.js")"></script>
<script src="#Url.Content("~/Scripts/jquery.easydrag.handler.beta2.js")" type="text/javascript"></script>
<script>
//Fancybox
$(document).ready(function () {
$("#iframeVideoPop").fancybox({
'width': 890,
'height': 595,
'type': 'iframe',
'autoScale': 'false',
'hideOnContentClick': false,
'onComplete': function() {
//Style the title where and how you want it
$("#fancybox-title").css({'top':'-20px', 'bottom':'auto'});
//Set the fancybox-title as the handler
$("#fancybox-wrap").setHandler('fancybox-title');
}
});
$("#fancybox-wrap").easydrag();
}); //ready
<script>
In order to eliminate the scrollbar problem caused by combining Easydrag with Fancybox, you'll need to eliminate the scrollbars. By default, the Fancybox CSS stylesheet applies the overflow:auto rule to the element -- generated by Fancybox -- that wraps around the content displayed inside the Fancybox.
To override it, include your own CSS rule that supersedes the one that Fancybox applies to the wrapper. Place this style block in the <head> section of your web page:
<style>
/* id of the element generated and used by Fancybox as a wrapper around
the generated content. */
#fancy_ajax {
/* Use the important identifier to ensure the overflow:auto is suppressed */
overflow:none !important;
}
</style>
This will eliminate the scrollbars and allow the easy drag plugin to work smoothly.
After testing these solutions I ran into the problem with dragging an iframe. To resolve, I switched to the jQuery 1.9.1 UI plugin for dragging and created a transparent image while dragging. Remove the image after dragging to access the content. Works great with fancybox iframe and enables fast dragging over the iframe. See sample code below.
$("#iframePop").fancybox({
'width': 890,
'height': 430,
'type': 'iframe',
'autoScale': 'false',
'hideOnContentClick': false,
'onComplete': function() {
$("#fancybox-title").css({'top':'-2px', 'left':'15px', 'bottom':'auto', 'cursor':'move'});
$("#fancybox-wrap" ).draggable({ handle: "fancybox-title", iframeFix: true,
start: function(ev,ui){$("#fancybox-wrap").append("<img src='#Url.Content("~/Content/Images/transparent.png")' id='hidenImg' style='border: 1px solid black; width: 640px; height: 400px; top: 20px; position: absolute; z-index: 10000;' />")},
drag: function(ev,ui){},
stop: function(ev, ui){$("#fancybox-wrap #hidenDiv").remove()}
});
}
});