At random times, when opening a jQuery UI dialog box on ipad, the overlay background that goes behind the dialog box will appear, but the dialog box will not. Often, if I refresh the page and try again, the dialog box will then appear.
Also, when rotating the iPad (in either direction) while a dialog box is open, the dialog box will disappear after rotation. Again, its overlay background is still present.
I can't tell if the dialog box is just gone, or if it is positioned off screen, or positioned behind the page elements.
Has anyone experienced this issue, or know what might be causing it? Unfortunately, my site is secure, so I can't provide a link. I would greatly appreciate any help anyone can provide.
I am using ajax to load content and 30-35 large images onto a page. In Firefox, the images seem to load fine. In IE 10, however, random images will not appear. Instead, you see a white x in a black box with a white border at the top left corner of where the image should appear. These images aren't actually broken, though. If you right click and select "Show picture", the image will display. Also, by "random", I mean that when you reload the page, different images might appear broken, or all images might appear correctly.
Has anyone experienced this issue before? I'm not sure if it has to do with the content being ajax loaded, or if it's just an IE issue, if it's something else entirely, or all of the above.
I would greatly appreciate any assistance anyone can offer. Unfortunately, this is a secure site so I cannot post a link.
I have a submenu that appears on hovering over a <li> and disappears on hovering out. Within that submenu, I am using the jquery ui sortable widget to allow sorting of the submenu's <li>'s. Works great in all browsers except firefox. In firefox, as soon as I drop an item, the hover out event is triggered and the submenu disappears, even though I have not hovered out. Any ideas how to fix this?
Does anyone know of a form field masking plugin or script that allows the field to have a default value that doesn't match the mask?
For example, a text field that says "Phone" initially. When you click in it, "Phone" disappears, and it says "(___)___-____", which fills in as you type, like "(123)456-7890".
I've written a script that will show/clear the default value, and I've found plugins that will allow masking, but I'm not sure how to combine the two.
I have a page that contains 1000+ background images. Each image is the background of a thumbnail-sized div, and when that div is clicked, the background of the page changes to the same background as the thumbnail. Initially all thumbnail divs are hidden. Links are used to show a few thumbnails at a time. For example, you could click on "pink" to show all pink background images. I don't want any thumbnail divs to load their backgrounds until they are actually visible on the page. It looks like what's happening is that the page is attempting to load all background images even when they aren't shown. So, even when I'm only showing 10 images, it takes forever to load because it's trying to load several hundred other images first.
Does anyone know how to make the background image load only when its div is actually visible? I would then want it to stay loaded even if turned off afterwards (re-hidden), so it won't have to load twice.
There can be more items in it than just "pcrPortal", "pcfPortal", and "posPortal".
How can I find out if a particular nested object exists in wDefaults? I have tried the following three methods, but I got "object is null or undefined" errors each time:
var pID = "pcfPortal";
if (wDefaults[pID].length) { /* it exists! */ }
if (wDefaults[pID] != undefined) { /* it exists! */ }
I have two objects, 'Loaded' and 'Current'. I wanted to make 'Current' a copy of 'Loaded' initially, but I found that if I just set 'Current = Loaded', that 'Current' was acting as a pointer to 'Loaded'. Any changes I made to 'Current' updated 'Loaded' also. I read online that the way to do it was to use 'Current = Object.create(Loaded)', which worked perfectly.
However, now I'm doing my browser testing -- I have to support IE7+ -- and in IE7, that line gives me the error "Object doesn't support property or method 'create'".
I've been reading forum posts (not just on this site) and unsuccessfully trying to apply the examples to what I'm doing for hours now. Can anyone help me do this correctly?
I need the browser window's resize event to trigger resizes on different objects on my page. The objects are added dynamically, so I can't just have one function to set it all up at the beginning, although so far that's the only way I know how to do it. I understand that using this method (below), that there can be only one such statement, but I need to add new functions to the resize event as I add new items to my page.
What is a cross-browser method for attaching multiple functions (like the two above) to the browser window resize event, where they aren't both done at the same time (like above)?
I would greatly appreciate any help anyone can give me.
I'm trying to understand how to get one action to not happen until another action has complete. I looked up callbacks and chaining and experimented some, but I cannot figure out how to get this to work.
Specifically, I am dynamically creating a div and adding it to the page with .append(). This div holds tab tools for easyUI tabs, tiny buttons that get placed inside the tab. Then, I dynamically create the tab, pointing to the newly created div as the place for it to find its tools.
However, the lines aren't executing in the order written (I think). The tab doesn't find the new div containing its tools, so it doesn't add them. Conversely, if I create a tab and point to a static div that was there from page load, it can find that and use it correctly.
How do I make sure that my tab isn't added until the new div is created and added to the page?
var tabTools = "#tab-tools-" + uniqueID; //create the unique id for the tab tools
var tabToolsDiv = "<div id='" + tabTools + "'><a href='javascript:void(0);' class='icon-mini-popup' onclick='javascript:popTab(\"" + tabTitle + "\");'><\/a><\/div>";//create the tab tools div
$('#main-tab-tools').append(tabToolsDiv); //add the tab tools div to the page
$('#main-tab-bar').tabs('add',{ //add the new tab (with tools) title: tabTitle, //tab title href: tabContent, //url to load via ajax cache: true, //cache the content so the tab doesn't reload every time selected iconCls: tabIcon, //tab icon closable: tabClose, //whether to show the close button on the tab tools: tabTools, //which div holds its tools (popup icon) selected: true //whether this tab should be selected after it is added });//end add the new tab
I understand how to get or set a value if I know its position in the array:
myval = wDefaults.testPortalA[0].wid; //get a value
wDefaults.testPortalA[0].wclosed = true; //set a value
I understand how to access all of the values using .each():
$(wDefaults["testPortalA"]).each(function() { //for the "testPortalA" array in the "wDefaults" object $(this).each(function(index, value) { //for each object in that array myval = $(this)[index]["wid"]; //get a value $(this)[index]["wclosed"] = true; //set a value }); });
Now, here's where I have questions:
(A) Is there any way to access a specific value in an object if I don't know its index in the array, other than looping through all objects? For example, if I want to get or set the wclosed value for an object in testPortalA where its wid = "w002".
(B) Is it possible to use variables in getting/setting values? For example, can I do something like this:
var whichPortal = "testPortalA";
myval = wDefaults.whichPortal[0].wid;
(C) Can I save more than one type of object in an array of objects? For example, in the object above, it is saving a "wmaximized" value in each object. At any given time, only one object in the array will have a 'true' value. It seems to me that I should really only be saving one object: "wmaximized":"w001", where its value is the wid of whatever object is currently maximized. Then I would have the following object, which would probably screw up my looping through all objects, so probably isn't the way to do it. Can anyone tell me how to do this the right way?
First, how do I access a single value? I've tried some of the examples I saw on the forum, but nothing happened. The alert did not fire:
alert(wDefaults.c3col[0].wid); //first try
alert(wDefaults.c3col.0.wid); //second try
var obj = wDefaults.c3col[0]; //third try
alert(obj.wid);
The nested objects are the properties for widgets within a portal. After the user moves around the widgets, I need to update the object, putting the widgets in a different order within c3col and updating the values saved in pcol, wpos, wclosed, & wcollapsed. I also may need to add or delete an object, for example, delete wid=w003 and add a new one called w012.
My logic would be:
for each widget on the page
found = false
find the object in c3col where wid == x and update its other values. set found = true
if found == false then add a new object to c3col with x & its properties
end for
for each object in c3col
if that wid isn't found in the list of widgets on the page, delete it from c3col
end for
sort the objects under c3col by pcol and then wpos
The red parts are the ones I'm unclear about how to do it. My basic questions are:
(1) How do you access a single nested object? (an object within c3col, find and change its values) (2) How do you add a new nested object to an existing object? (add a new object to c3col) (3) How do you delete an nested object? (remove an object from c3col) (4) How do you sort nested objects? (sort the objects in c3col by pcol and wpos)