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.
Related
I'm trying to make a toggle window to pop coming from the right to the left.
I have tried this:
$('#menuDiv').show({ direction: "left", easing:"linear" }, 1750 );
But this has 2 problem:
The time 1750 is not having any effect.
The windows pops top to down with half width and right to left at the same time. (In a diagonal way).
Any help appreciated.
I'm using the jQuery UI library.
You made two mistakes:
You didn't specify the type of effect you want, which is the required option effect
You tried to specify the duration as second parameter, while you should have used the option duration
A working version of your code:
$('#menuDiv').show({
effect: "slide",
direction: "left",
easing:"linear",
duration: 1750
});
We have some jQuery graphs that load into a fancybox iframe. Recently, some of these graphs are too tall for the fancybox frame, and the design requirement is that there is no scroll bar unless the height is over 700px AND there is no more than 10px of whitespace above and below the graph.
I tried this:
afterLoad : function(){
//(...)
$('.fancybox-inner').height($('.fancybox-iframe').contents().height() + 20);
console.log($('.fancybox-inner').height());
}
The console.log() correctly displays the desigred height.
But the fancybox is still displayed with the default height.
Putting a breakpoint on the console.log() line, the page displays the fancybox frame on the top of the window, graph rendered and iframe with the correct height. When I release the debugger stop, fancybox moves the frame to the center of the viewport, and it is back to the default height (the same behavior when not in debug mode).
How can I make fancybox use the desired height? It depends on the graph, so I cannot set it in the options.
Dealing with iframes make things a bit difficult but you may try something like
$(document).ready(function () {
$("a.fancybox").fancybox({
type: "iframe",
fitToView: false, // we need this
autoSize: false, // and this
maxWidth: "95%", // and this too
beforeShow: function () {
// find the inner height of the iframe contents
var _newHeight = $(".fancybox-iframe").contents().find("html").innerHeight();
this.height = _newHeight
}
}); // fancybox
}); // ready
Notice we disable fitToView and autoSize to be able to set the preferred height, however we also need to set a maxWidth to avoid fancybox going off screen dimensions.
Also notice we used the beforeShow callback to set the this.height setting.
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.
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.