jQuery ui dialog dragging issues - javascript

I used the jQuery ui (jquery-ui-1.10.3) dialog pluggin for one of our products, and found a possible "problem":
When the hosting page is small or the current view of the hosting page is scrolled to the top, dragging an openned dialog box behaves as what is expected. The problem start to manifest when hosting a dialog in a large page which is scrolled to somewhere not at the top, in which case the dialog box starts to jump around during dragging. It happens to both IE 9 and the latest Firefox (21.0).
The page is dynamically generaed, complex and has to be long. I am not familiar with fiddle, but it seems to have no option for jQuery-ui lib option that I can use.
More specifically, I found if I scoll the hosting page 100px down (so the top 100px of the hosting page is 'feed' into the top border of the browser window) then when I drag the dialog, instead of it following the mouse, it jumps down 100px so that it is out of the mouse capture.
The dialog is initiallized as
$(element).dialog({
autoOpen: false, width: 950, height: 820,
modal: false, resizable: true, draggable: true
});
My questiong is: 1) does any one else has the same issue? 2) If so, is this an setting issue or a bug.
Any expert here can help me with it?

I used to have the same issue, content on the page is generated automatically. It is very long.
html, body {position: relative} solves the problem.

OK, I found this is a bug of jQuery-ui 1.10.3, see here:
That appears only with using UI 1.10.3 and when the scrollbar is not
at the very top in Firefox, Opera, IE8.
In Chrome works fine and also with 1.10.2 on other browsers.
The UI dialog demo page has this bug too:
drag the dialog down until appears the scrollbar scroll down again
drag the dialog down. dialog goes down with the offset

My solution to fix this bug is similar to that of Dado, but using the drag event:
$(element).dialog({
draggable: true,
drag: function(event, ui) {
var fixPix = $(document).scrollTop();
iObj = ui.position;
iObj.top = iObj.top - fixPix;
$(this).closest(".ui-dialog").css("top", iObj.top + "px");
}
});
My version: jQuery UI - v1.10.3 - 2013-10-10

I think there is a bug. I faced to this problem too. My solution for fixing this to turn off the dragging. Just make draggable false.
Like this:
$(element).dialog({
autoOpen: false, width: 950, height: 820,
modal: false, resizable: true, draggable: false
});

Update the jQuery UI Library (js) worked for me.
http://jqueryui.com/download/
Remember to update your css files too.

Bugreport: view bug report
My solution to fix this bug is to "reset" the "ui.position.top" (for me 228px).
$(element).dialog({
dragStart: function(event, ui) {
var fixPix = 228; // offset top (add your own here!)
iObj = ui.position;
if (iObj.top > fixPix) {
iObj.top = iObj.top - fixPix;
}
ui.position = iObj;
}
});
My version: jQuery UI - v1.10.4 - 2014-01-17
This solution works for me. Hope it helps you too until this ugly bug is fixed.

Related

Fancybox - set widths for different overlays

I have a several blocks of content which open in a Fancybox. This all works as it's meant to but the contents of a couple of the boxes is quite small and doesn't really warrant a 1000px width Fancybox overlay. Is there a way to set the widths of these boxes to something else?
I've tried added a width to the content box (#login-overlay) for example but Fancybox just ignores this as it is built around the content once the relative link has been clicked which opens the overlay.
Here's my javascript:
$(document).ready(function() {
$(".fancybox").fancybox({
margin: [20,20,20,20],
padding: [20,20,0,20],
openEffect: 'fade',
openEasing: 'easeInQuad',
openSpeed: 400,
title: false,
//closeBtn: false,
//autoCenter: false,
scrolling : 'no', // turns off scrolling in box.
fitToView : false, // allows box to overflow out of viewport.
autoSize: false, // needs to be turned off for width/maxWidth to work.
height: 'auto', // if autoSize is set to 'false', this needs to be 'auto' so height matches content.
width: '100%',
maxWidth: 960,
helpers: {
overlay: {
// locked: false, // Prevents jump to top of window when opening a fancybox.
showEarly : false
}
},
tpl: {
closeBtn : '<a title="Close" class="fancybox-item fancybox-close icon-circle-cross" href="javascript:;"><span>Close</span></a>'
}
});
});
As you can see I'm using maxWidth to see the width of the default size. I couple of boxes could be almost half that. I've tried setting auto so see if it would inherit the width set on the content block in the CSS but this doesn't seem to work.
Any ideas that don't involve writing a whole need block of script for $(".fancybox-narrow")?
EDIT
I actually found an example on the Fancybox page which uses data-fancybox-width to set the width of an overlay: http://jsfiddle.net/wgPTR/
Though this doesn't seem to work with my code. The width sets but it isn't responsive anymore. Setting fitToView to false seems to get that working but then the fancybox crops when there's not enough vertical space and it's un-scrollable.
UPDATE
Just to update, here's a CodePen of the working (default) fancybox: http://codepen.io/moy/pen/YGgjqv
I've also created a forked version which uses data-fancybox-width to set a width - which works but unfortunately the fancybox is no longer responsive. The only way to get this to work is to take out fitToView: false which breaks my vertical scrolling.
Any ideas?
I seem to have found a solution (with a lot of help from the CSS Tricks forum) by using the following beforeLoad if statement:
beforeLoad: function() {
if ($(this.element).hasClass('fancybox--small')) {
this.maxWidth = 600;
}
}
Basically it checks for the class fancybox--small and if it's present it amends the maxWidth of the fancybox.
Can't see any problems with it (yet), checking in IE it seems to work down to IE8 as well. Hopefully this helps someone else but let me know if you find any issues with it ;)

Fancybox inline popup on mobile not moving with page scroll

I am working on this website:
http://www.fairfaxandroberts.com.au/
And I am using fancybox for inline popup:
http://fancyapps.com/fancybox/
When you visit the site you can see the popup that is shown down below the instagram feed when you scroll.
On desktop and larger version it is working well, but on mobile versions the popup is shown when you scroll below insta feed, but it stays on the position where it is shown, it doesn't move with the page scroll behind.
The jQuery code I use to display Fancybox is this:
$(window).scroll(function() {
var y = $(window).scrollTop();
var insta_feed_top = $("#slide-55").offset().top;
if (y > insta_feed_top) {
$(window).off('scroll');
$(".fancybox_newsletter")
.fancybox({
helpers: {
overlay: {
locked: false
}
}
}).trigger('click');
}
});
What can be the issue guys? I tried a lot, saw the documentation on the site, but nothing works.
[SOLUTION]
Guys after debugging on the mobile, I found that the position was changing on absolute for mobile devices. I just changed the position to be fixed, added some top and left margin and everything looks perfect.
Thanks again.

Images scaled in safari & chrome but not in ff & opera

I'm using an image slider called jb gallery 3.0 - running using jQuery.
It's just a normal image slider, but it's got a feature that detects the browser size and then scales the image to the size of the browser ie. if your viewing on an iPad it will give you a smaller image so that you can still see the entire picture.
The resizing is done each time the image loads in the slider, so if you resize the window in between slides, the next time the image loads it will be scaled... No need to refresh the page.
This all works fine it safari and chrome, but in firefox and opera (12.14) it doesn't, it just serves the full size image cropped...
I've made a js fiddle of what's happening here - http://jsfiddle.net/ktvvW/5/ - try resizing the 'result' panel in chrome or safari to see what's meant to be happening.
Any idea why this doesn't work in ff or opera?
.
Cheers
Forcing webkit behaviour on the jbgallery-3.0.js script seems to fix the issue.
See the options below, I'm forcing webkit to true (disregarding the userAgent).
I've tested this on both FF and Opera and functionality is as expected, the images display with the same zoom as in Chrome.
$(".jbgallery").jbgallery({
style : "zoom", //"centered"|"zoom"|"original" - image style
menu : "simple", //false|"numbers"|"simple"|"slider" - menu type
shortcuts: [37, 39], //[prev,next] - keyboard code shortcuts
slideshow: true, //true|false - autostart slideshow
fade : true, //true|false - disable all fade effects
popup : false, //true|false - modal box & traditional popup hack to display multiple gallery (3.0 : fullscreen:false)
randomize: 0, //0|1|2 - randomize first image (1) or randomize "slideshow" (2) - blackout: http://www.grayhats.org
caption : false, //true|false - show/disable internal caption system
autohide : false, //true|false - auto hide menu & caption
clickable: false, //true|false - "image click & go"
current : 1, //number - set initial photo (modal "hack" - see demo. don't use "hash". jbgallery use "location.hash" only in popup mode)
// webkit : (navigator.userAgent.toLowerCase().search(/webkit/) != -1), //boolean - used for specific browser hack. if you want, you can force disable this flag & try to find crossbrowser solution
webkit : true,
ie6 : (/MSIE 6/i.test(navigator.userAgent)), //boolean - IDEM
ie7 : (/MSIE 7/i.test(navigator.userAgent)), //boolean - IDEM
labels : { //labels of internal menu
play : "play",
next : "next",
prev : "prev",
stop : "stop",
close: "close",
info : "info"
},
timers : { //timers
fade : 1000, //fade duration
interval: 3000, //slideshow interval
autohide: 7000 //autohide timeout
},
delays: { //delays (timers) to improve usability and reduce events
mousemove: 200, //used by autohide. cancel autohide timeout every XXXms.
resize : 10, //used by ie6 to reduce events handled by window.resize
mouseover: 800 //used by tooltip. show tooltip only if the mouse STAY over thumb for XXXms
},
close : function(){}, //callback handled by menu's button close. see demo. example : close : function(){window.close()}
before : function(){}, //callback handled BEFORE image gallery loaded
after : function(ev){}, //callback(ev) handled AFTER image gallery loaded. receive the native load event.
load : function(ev){}, //callback(ev) handled AFTER native image load event. receive the native load event.
ready : function(el){$('.jbg-menu').hide(); $('.jbg-loading').remove(); $('.jbg-caption').remove(); $('.jbg-menu-opacity').remove();}, //callback(el) handled AFTER jbgallery render. receive the HTML element.
fullscreen: false, //true|false : the most important feature of jbgallery 3.0. now jbgallery can "stay in a box" and have multiple istance in one page.
push : function(o){}, //callback handled by push public method (JBGALLERY API). receive the object/string/array of objects/array of strings passed from external. useful for external menu system
unshift : function(o){}, //callback handled by unshift public method (JBGALLERY API). receive the object/string/array of objects/array of strings passed from external.
shift : function(){}, //callback handled by shift public method
pop : function(){}, //callback handled by pop public method
empty : function(){} //callback handled by empty public method
});
Here's the link to my jsfiddle
Seems to be the CSS which is an issue.
original
.jbgallery .jbgallery-target.zoom {
min-height: 50%;
min-width: 50%;
}
modified
.jbgallery .jbgallery-target.zoom {
height: 50%;
width: 50%;
}
error had to add the css in the css panel as the original was in the plugin css
here is a link of the new css http://jsfiddle.net/ktvvW/8/
I think i know how to do this:
Change the load function like below:
load : function(ev){$(".zoom").css("width",$("#slider").width()),$(".zoom").css("height","auto");$(".zoom").css("left","0px");$(".zoom").css("top","auto")},
It will work on all browsers, tested and worked successfully
I have not the full answer of this, but I had a similar issue in the past with this. I learnt that Gecko (Firefox) and Webkit (Safari and Chrome) do not handle images the same way. The information of the size of the image was not available when I was trying to scale it, so it was not possible to scale them with the same code.
I can only suggest to do some research on image + onload event. This would be a javascript issue in my point of view.

Tiny_mce - can't set width

Let me start by saying I am well aware this is a duplicate question - TinyMCE width and height disobedient!
The trouble is I have tried all the css fixe suggested to no avail and I am not using an init (where the docs i found tell you to set your width and height) - I dont know why, I did this along time ago.
Here is the mce code which is being launched in an aftershow event of a fancybox:
$('textarea.tinymce').tinymce({
// Location of TinyMCE script
script_url: '/assets/js/common/tiny_mce/tiny_mce.js',
// General options
theme: "advanced",
plugins: "autolink,lists,pagebreak,table,advlink,iespell,inlinepopups,insertdatetime,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,template,advlist",
// Theme options
theme_advanced_buttons1: "undo,redo,|,cut,copy,paste,|,bold,italic,underline,|,forecolor,|,justifyleft,justifycenter,justifyright,justifyfull,|,sub,sup,|,formatselect,fontsizeselect",
theme_advanced_buttons2: "tablecontrols,|,charmap,iespell,|,cite,abbr,acronym,|,bullist,numlist,|,outdent,indent,blockquote,|,link,unlink,|,fullscreen",
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
theme_advanced_statusbar_location: "bottom",
theme_advanced_resizing: false
});
Please someone, tell me how to make this god damn thing 500px wide. I tried this(does nothing):
.mceEditor > table {
width:500px !important;
}
Tried putting this in general options in my code:
width:"500",
Tried setting columns of the textarea to 2
Tried setting the css width of the following elements with !important:
id=desc_mce_parent, id="desc_mce_tbl"
I have set resizing to false
Nothing changes no matter what I do - why?
Ok... I feel a bit of an idiot saying this but in my case it was because my toolbars were too big. I solved this by spreading my buttons over three toolbars - you can set the width using css but it wont go smaller than your toolbars and the they will not wrap around (seems like that might be a good feature).

jQuery UI Accordion - Each Panel Fit To Contents

I'm using jQuery UI's Accordion http://jqueryui.com/demos/accordion/ and I'm trying to get it to fit the height of each panels contents.
The way it currently works is to fit the largest panels contents, but I would like it to resize based on which panel is open.
Also, is there a way to make one panel open instead of the top one by default? I'd like to have the bottommost panel open when the user loads the page.
Thanks in advance!
EDIT: I've tried putting height:auto !important; in the jquery-ui.css file on .ui-accordion .ui-accordion-content-active which does work, but results in a weird issue when closing an accordion, where one stays open while the other is opening.
To keep things current, it seems that for jquery UI version 1.9, the autoHeight has been replaced by heightStyle. http://api.jqueryui.com/accordion/#option-heightStyle
The way to do this after 1.9 would be $( ".selector" ).accordion({ heightStyle: "content"});
autoHeight still works under most circumstances, but I ran into difficulties in Chrome and Safari but not Firefox when I used autoHeight: false and my .ui-accordion-content included an image whose height was set to auto. Using heightStyle instead worked much better.
Ahh, found out they just have a setting for this! http://jqueryui.com/demos/accordion/#no-auto-height
So basically, just do this: $( ".selector" ).accordion({ autoHeight: false });
Question is fairly old but now jQuery has option to set the height as per the content.
More information here: http://api.jqueryui.com/accordion/#option-heightStyl
$(function () {
$("#accordion").accordion({
{heightStyle: "content" }
});
});
this working for me
$(function () {
$("#accordion").accordion({
header: "h3",
autoFill:true,
autoHeight: false
});
});

Categories

Resources