I'm trying to use jquery ui dialog and google maps... so when an user clicks a link, the dialog opens showing the map.
I've tried in many ways... it works on FF and Chrome but on IE8 the map is gray.
In one of the changes in script reference order in html head, makes the map loads just a part of it in IE8... tried to load google maps before and after dialog, but nothing changed
It's very confusing... Has anyone gone through this issue??
Thanks!
The jQuery UI documentation for tabs says this, and I think it applies to dialogs as well (you'll need to adjust the code for dialogs).
Any component that requires some
dimensional computation for its
initialization won't work in a hidden
tab, because the tab panel itself is
hidden via display: none so that any
elements inside won't report their
actual width and height (0 in most
browsers).
There's an easy workaround. Use the
off-left technique for hiding inactive
tab panels. E.g. in your style sheet
replace the rule for the class
selector ".ui-tabs .ui-tabs-hide" with
.ui-tabs .ui-tabs-hide {
position: absolute;
left: -10000px;
}
For Google maps you can also resize
the map once the tab is displayed like
this:
$('#example').bind('tabsshow',
function(event, ui) {
if (ui.panel.id == "map-tab") {
resizeMap();
}
});
resizeMap() will call Google Maps'
checkResize() on the particular map.
Related
I am trying to use pickadate.js with highcharts.
It does work, but it requires clicking twice. It looks like highcharts first renders the date in a text svg element and there is accompanying input element that is 1px x 1px. When you click on the text SVG, it is replaced by the input element. Then you click again, and the pickadate opens.
I have tried binding pickadate to the g/text element via $(g.highcharts-range-input).pickadate(), but that doesn't work.
I have also tried using the input.onFocus event to trigger an input.onClick event, which works but then sometimes it goes through two click cycles- causing pickadate to open then immediately close:
$('input.highcharts-range-selector').bind("focus", function() {
console.log("focus");
$('input.highcharts-range-selector').trigger("click");
});
Fiddle:
https://jsfiddle.net/04svbnfd/
Thanks
Matt
I have a web-application which was originally designed to be used from standard desktops and laptops, now I am trying to see if it can work "as is" also on tablets.
I tried it on an iPad 2, and I fould one major problem: the application makes heavy use of dialogs, created using jQuery UI 1.8.22, which are used as "popup", that is, each dialog contains an iframe, and when the content overflows the dialog size the vertical scrollbar appears, but I'm unable to scroll the iframe content 'cause it will always scroll the main page content.
How could this problem be solved? Do you think it is an issue with my application or with the iPad browser itself?
If it can be of any use, I'll post the code which creates the dialogs themselves, for now just let me say that, when navigated using a standard computer, there are absolutely no scrolling problems.
EDIT:
I just created this fiddle http://jsfiddle.net/MLGku/1/ which shows how we create such popups, I tried the fiddle with the iPad and in fact I cannot scroll the iframe content, I'd be very grateful for any help you'd be able to give me.
In the end I've been able to solve the problem by using this snipped of code:
if (/iPhone|iPod|iPad/.test(navigator.userAgent)) {
$('iframe').wrap(function() {
var $this = $(this);
return $('<div />').css({
width: $this.attr('width'),
height: $this.attr('height'),
overflow: 'auto',
'-webkit-overflow-scrolling': 'touch'
});
});
}
The code above was found here: http://home.jejaju.com/play/iframe-scroll.html
Seems like tooltips that you get from attribute title="test" are not displayed inside the panel.
Tested also with stackoverflow loaded in the panel, no tooltips when you hover mouse over hot, week, month. But the custom tooltips work, e.g. when you hover over tags.
Is there a way to enable tooltips in Add-on SDK panels, or the only way is going custom tooltips?
No, displaying tooltips for HTML elements requires special code in the browser. This code is there for the built-in browser but not for the browser that the SDK embeds in a panel. That's something that might be worth filing as an SDK bug but in the meantime - custom tooltips are the way to go.
Yes, there's a way.
This works since Firefox 31
var panel = require("sdk/panel").Panel({
width: 400,
height: 400,
contentURL: "http://stackoverflow.com/",
});
panel.show();
require('sdk/view/core').getActiveView(panel)
.setAttribute('tooltip', 'aHTMLTooltip');
I have a mobile application running Backbone.js and jQuery mobile. Because I have Backbone.js and for performance reasons I have disabled all the JQM routing and transitions. I understand that storing scroll location is a feature available in JQM, but I am unable to utilize that (as far as I know).
I have a list view with a potentially long list of items. When the user taps one on the mobile device, it stores the current scroll position and renders a new view. When the user taps the "back" button, it goes back one in the history.
clickLink: ->
window.lastScroll = $(window).scrollTop()
render: ->
...
if window.lastScroll
$.mobile.silentScroll window.lastScroll
window.lastScroll = undefined
This works as desired on desktop Safari, but when I try it using it on iOS Safari (both simulator and the real thing), there is an issue with the fixed footer navbar.
If the user taps back, the listview is scrolled down as intended, but then if they tap the footer navbar, it is as if they tapped under it, whatever list item is under it will be activated instead. If the user scrolls a little bit before tapping the navbar, everything works fine.
Does anyone have any ideas? Perhaps there is a better approach that would avoid this issue all together.
Thanks in advance for the help.
Could it be related to this bug?
Form elements can lose click hit area in position: fixed containers
(linked from here JQuery Mobile 1.1.0 docs )
I see there is a workaround in the first link - worth a try?
Chad Smith Answered this Mobile Safari bug on fixed positioned button after scrollTop programmatically changed...?
His method worked best for me. Here is his response:
I got around it by adding a 101% high div then (almost) immediately removing it.
Try:
<style>
.iosfix {
height: 101%;
overflow: hidden;
}
</style>
and when you scroll:
window.scrollTo(0, _NEW_SCROLLTOP_);
$('body').append($('<div></div>').addClass('iosfix'));
setTimeout(function() {
$('.iosfix').remove();
}, 500);
It also works with jQuery.scrollTo.
See an example here.
This is more of a proof of concept for myself, to fool around and learn what I can and can't do with jQuery, and I have had partial success.
I created an accordion that contains two spans, which serve as name and description, as well as a button that is independently click-able (ie, it does not open or close the accordion.)
Taking that concept, I decided to try and make the name and description editable by turning the name and description spans into text inputs / text areas, which worked fairly well.
The problem however is that when I take the same technique I used on the button and use it on the input and textarea, clicking it does not allow you to move the cursor to different positions. There does not seem to be a way for me to get around this behavior.
I tried event.preventDefault(), which does not work at all.
I tried event.stopPropagation(), which gives the partially working behavior.
and I tried return false, which worked the same way as stopPropagation.
I was wondering if anyone could provide any insight on this issue.
I included the jQuery javascript below, but for a much more concise example I will provide a jsfiddle link here (http://jsfiddle.net/Rakshasas/xFhN3/) which gives you a much more clear example of what I am doing. Note that when you click the accordion to expand it, the spans are hidden and inputs are shown. Clicking the inputs does not close the accordion, but it also does not allow you to position the cursor.
Also, if you do attempt to change the text in the inputs, closing the accordion does indeed update the spans which is the intended result. This is why I am saying my concept partially works.
Thank you.
$(function() {
$(".accordion").accordion({
header: 'h3',
collapsible: true,
active: false,
change: function(event, ui) {
var id = ui.newHeader.find('input:last').val();
$("#status").text(id);
ui.newHeader.find('div.headerContainer input.name').val(ui.newHeader.find('div.headerContainer span.name').text());
ui.newHeader.find('div.headerContainer textarea.desc').val(ui.newHeader.find('div.headerContainer span.desc').text());
ui.oldHeader.find('div.headerContainer span.name').text(ui.oldHeader.find('div.headerContainer input.name').val());
ui.oldHeader.find('div.headerContainer span.desc').text(ui.oldHeader.find('div.headerContainer textarea.desc').val());
ui.newHeader.find('div.headerContainer span').hide();
ui.newHeader.find('div.headerContainer input, div.headerContainer textarea').show();
ui.oldHeader.find('div.headerContainer span').show();
ui.oldHeader.find('div.headerContainer input, div.headerContainer textarea').hide();
}
});
$('input.name, textarea.desc').click(function(event){
event.stopPropagation();
});
$(".delButton").button({
icons: {primary: 'ui-icon-trash'},
text: false
}).click(function(event) {
//Display user friendly text
return false;
});
});
If someone is facing this issue, this is a little trick that worked for me.
PROBLEM: nested jquery accordions with input/textareas elements, cannot gain focus with normal click in Firefox (if you use jquery accordions with NO nested accordions on it, everything works fine). Confirmed by above users.
The sympton relates only to normal click (left click). If you try optional click (right click), the element (input/textarea) WILL gain focus. Weird.
SOLUTION: Just declare this in your document ready function
$(function() {
//some code ...
$("input, textarea").click( function(){
$("input, textarea").blur();
$(this).focus();
});
//more code ...
});
Confirmed (by me) working on IExplorer, Firefox and Chrome.
Seems to work fine in Chrome. This might be browser dependent.
"Clicking the inputs does not close the accordion, but it also does not allow you to position the cursor"
Also fine in Chrome.