I'm using jQuery UI Tabs for showing several graphs, using Flot. This works perfectly fine in every browser but IE8. It looks like IE8 doesn't support several Flot graphs next to each other.
Anyone experienced this before?
I'm rendering the graphs when the specific tab is selected, see code below.
$( "#tabs" ).tabs({
select: function(event, ui) {
var tab = ui.index+1;
if(tab == 1)
rendergraph1();
else if(tab == 2)
rendergraph2();
else if(tab == 3)
rendergraph3();
}
});
The renderGraph1/2 functions just render the graphs with some options, like this:
function rendergraph1()
{
$.plot($("#graph1"), data, {
.....
Again, the code is working fine in Firefox. This is why I won't bother you with the full rendergraph code :)
Anyone experienced this before?
I assume your other tabs are hidden until after you draw the plot. There are several issues with hidden divs under older versions of IE.
Try showing the tab/div before you call plot, rather than after. If you have other stuff to do, or are using some kind of transition, you can always hide the tab/div immediately afterwards and then show it later; it just needs to be visible and attached to the DOM when you call plot.
Related
I have a panel and am trying to always show the panel when the window is wide. I don't need to have a close button at all - just always show it for wider windows.
jQuery Mobile Responsive Panel Dismiss issue helped, along with others, but no luck. I can get everything to almost work, but everytime I navigate to a new page, the panel animates in, which looks weird.
I am now looking at using a fixed div on the left that is not a jquerymobile panel. I can do this from the server. But it seems like a lot of effort to just keep a panel open.
Any hints?
Did you try something like this:
$(document).on("pagebeforeshow", function( event, data ) {
$('#my-panel').panel("open");
})
I also encounter such a problem. Here is my solution:
add the following javascript into your header:
$(document).on("pagebeforeshow", function( event, data ) {
$('#my-panel').panel("open");
})
and in your panel add two attributes:data-swipe-close="false" , data-dismissible="false"
then the panel will be always shown in your html
Are there any issues surrounding the use of contenteditable div elements in jQuery UI that lead to the caret not appearing. Here is a bit of code to show what I mean
<div id='diaHTMLEd' style='display:none'>
<div id='divRTE'></div>
<!--iframe src='xrte.html' height='300' width='500'></iframe-->
</div>
function openHTMLEditor( {
$('#diaHTMLEd').dialog({
height:200,
width:450,
modal:true,
open:addRTE
});
}
function addRTE() {
$('#divRTE').html("<div contenteditable='true'>Testing</div>");
return;
}
Explanation - I am opening up a modal jqUI dialog and in its :open event am adding a contenteditable div element to an inner div in the dialog. The text shows up but it does not become editable when clicked. If I replace that code and use the commented out iframe instead which contains an contenteditable drive everything works just fine.
It looks like there is something that stops content from becoming editable inside the dialog.
This question may be lacking in some detail but given the complexity of my application I am not really in a position to provide more representative code. Any help would be much appreciated.
A note for anyone running into this thread. After much work I eventually discovered the issue. Using contenteditable with jQuery UI dialogs is not by itself a problem. The problem in my case came down to some sort of conflict with the excellent jstree plugin which I am using.
As a general rule - in complex applications that use multiple plugins you are probably better off sandboxing contenteditable content inside an iframe
I'm developing a web page with a Google Maps element and a jquery UI accordion/tab based sidebar. Everything is working pretty well in most modern browsers, but I've had several problems with IE7. The web page is hosted here: http://jeffandkelly.net/map
There's a lot going on in the page; normally I'd try to create a jsfiddle, but I haven't been able to get that site working in IE7. I've already employed numerous IE7-specific hacks, and now things are looking a lot better. However, I've still got some issues.
My sidebar consists of a jquery UI accordion with 2 elements. In the second element is a jquery UI tab control, and inside each tab are several <div> elements. It's these elements that aren't behaving correctly in IE7 (shown left) vs Chrome (shown right).
ie7 vs. chrome page rendering http://jeffandkelly.net/map/ie7-vs-chrome.jpg
First of all, I've got a CSS rule that should be hiding the headers for these elements (the "Safe Medicine Disposal Drop Off Location" text):
<h3 class="map-popup-header>Safe Medicine Disposal Drop Off Location</h3>
CSS:
.poi-holder .map-popup-header {
display: none;
}
But IE7 doesn't apply that rule. Second, IE7 hides the content that should be there (the F12 tools show that the elements are in the DOM, but have a height of 0).
Any help would be appreciated, as well as advice on some next steps to try.
It turns out there were multiple problems with the code. First, IE7 requires tables to include <tbody> elements when creating content dynamically. Therefore, the following code doesn't work without the commented line.
var infoTable = document.createElement('table');
var infoTbody = document.createElement('tbody'); //required for IE7!!
var infoTr = document.createElement('tr');
var infoTextTd = document.createElement('td');
var infoPhotoTd = document.createElement('td');
infoDiv.appendChild(infoTable);
infoTable.appendChild(infoTbody);
infoTbody.appendChild(infoTr);
infoTr.appendChild(infoTextTd);
infoTr.appendChild(infoPhotoTd);
Second, IE7 won't apply CSS rules to dynamically generated content given class attributes using element.setAttribute('class', className). It requires the use of element.className = className.
var header = document.createElement('h3');
header.className = 'map-popup-header'; //works as expected in IE7
var header = document.createElement('h3');
header.setAttribute('class','map-popup-header'); //doesn't work in IE7
Hope this answer can help someone else!
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.
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.