jQuery Forum

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?

I use the following on the sortable <ul>:

    $("#mmc-sortable").sortable({ helper: "clone" });
    $("#mmc-sortable").disableSelection();

And here is my hover over/out function:

var intSideSubMenuHoverTimer;
$('.mmc-hassub').hover(
      function() {
            var objSideSubMenuHoverObject = $(this);
            intSideSubMenuHoverTimer = setTimeout(function(){
                  objSideSubMenuHoverObject.find('.mmc-subsubmenu').animate({width: 'show'});
            }, 500);
      },
      function() {
            var objSideSubMenuHoverObject = $(this);
            objSideSubMenuHoverObject.find('.mmc-subsubmenu').animate({width: 'hide'});
            clearTimeout(intSideSubMenuHoverTimer);
      }
 );

And here is the html (basically):

<ul>
    <li><a href="x">X</a></li>
    <li><a href="y">Y</a></li>
    <li class="mmc-hassub">
        <a href="z">Z</a>
        <div class="mmc-subsubmenu">
            <ul id="mmc-sortable">
                <li><a href="a">A</a></li>
                <li><a href="b">B</a></li>
                <li><a href="c">C</a></li>
            </ul>
        </div>
    </li>
    <li><a href="q">Q</a></li>
</ul>

I would greatly appreciate any help that can be given on this. Thanks!

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.

Here is my structure:

<div class="thumbs">
    <div class="cloth solid" style="background-image: url('bc-01.png');">bc-01</div>
      .... more images
</div>

I have a nested object structured like this:

1. var wDefaults = {
2.     "pcrPortal":{
3.         "pcr001":{"wclosed":false,"wcollapsed":true,"pcol":0},
4.         "pcr002":{"wclosed":false,"wcollapsed":true,"pcol":1},
5.         "pcr003":{"wclosed":false,"wcollapsed":true,"pcol":2}
6.     },
7.     "pcfPortal":{
8.         "pcf001":{"wclosed":false,"wcollapsed":true,"pcol":0},
9.         "pcf002":{"wclosed":false,"wcollapsed":true,"pcol":1}
10.     },
11.     "posPortal":{
12.         "pos001":{"wclosed":false,"wcollapsed":true,"pcol":0},
13.         "pos002":{"wclosed":false,"wcollapsed":true,"pcol":1}
14.     }
15. };

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:

1. var pID = "pcfPortal";
2. if (wDefaults[pID].length) { /* it exists! */ }
3. if (wDefaults[pID] != undefined) { /* it exists! */ }
4. if (wDefaults[pID] != null) { /* it exists! */ }

Any help would be greatly appreciated!

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'".

Is there an IE7-friendly way to do this?

Any help would be greatly appreciated!!

I have the following nested object:

1. var wDefaults = {
2.   "testAPortal":{
3.     "w001":{"wclosed":false,"wcollapsed":true,"pcol":0},
4.     "w002":{"wclosed":false,"wcollapsed":true,"pcol":1},
5.     "w003":{"wclosed":false,"wcollapsed":true,"pcol":2}
6.   },
7.   "testBPortal":{
8.     "w004":{"wclosed":false,"wcollapsed":true,"pcol":0},
9.     "w005":{"wclosed":false,"wcollapsed":true,"pcol":1},
10.     "w006":{"wclosed":false,"wcollapsed":true,"pcol":2}
11.   },
12.   "testCPortal":{
13.     "w010":{"wclosed":false,"wcollapsed":true,"pcol":0},
14.     "w011":{"wclosed":false,"wcollapsed":true,"pcol":1},
15.     "w012":{"wclosed":false,"wcollapsed":true,"pcol":2}
16.   }
17. }

How can I remove one of the objects from it? For example, wDefaults["testBPortal"]["w005"]?

I'm new to working with objects. I would really appreciate any help on this!

I have a div that has a negative top margin and a negative right margin. The right margin is because I want to have the div slide onto the page from the right. The top margin is because without it my page height is the height of the visible elements plus the height of the off-screen div.

On a button click, I move the div down and then animate it onto the screen from the right. On button click again, I animate the div to the right, off the screen, and then move it up. I also toggle its width & padding so it will appear to grow/shrink as it moves on/off screen. At least that's what I am trying to do. The animation onto the screen looks good, but going off the screen, it appears to happen intantaneously, instead of animated.

Does anyone know how I can fix this?

1. $(".addPanels").live("click", function(){//now and in the future, show the add panels menu
     var thisAddPanelsMenu = $(this).parent().prev(".addPanelsMenu");//get the addPanelsMenu
     if(thisAddPanelsMenu.length) {//if the addPanelsMenu exists
       if (thisAddPanelsMenu.css("width") == "0px") {//if off screen
         //first move it down onto the page, then animate it in from the right
         thisAddPanelsMenu.css("marginTop", "20px").animate({
           marginRight:    '0px',
           paddingTop:     '20px',
           paddingBottom:  '20px',
           paddingLeft:    '20px',
           paddingRight:   '50px',
           width:          '500px'
         }, 500);
       }
       else {//if on screen
         //first animate it out towards the right, then move it up off the page
         thisAddPanelsMenu.animate({
           marginRight:    '-9999px',
           paddingTop:     '0px',
           paddingBottom:  '0px',
           paddingLeft:    '0px',
           paddingRight:   '0px',
           width:          '0px'
         }, 500).css("marginTop", "-9999px");
         //note: this doesn't work as expected. for some reason, the div will slide in, but slide out is instantaneous, not animated
       }
     }//end if the addPanelsMenu exists
   });

1. .addPanelsMenu {
       float: right;
       z-index: 1;
       margin: -9999px -9999px 20px 20px;
       padding: 0;
       width: 0;
       background: #fff;
       border-width: 1px;
       border-style: solid;
       -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
       border-radius: 5px;
       box-shadow: 1px 1px 2px #ddd9cd;
       filter: progid:DXImageTransform.Microsoft.Shadow(strength=2, direction=180, color='#ddd9cd');
       -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(strength=2, Direction=180, Color='#ddd9cd')";
       zoom: 1;
   }
   

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.

1. window.onresize = function(event) {
     $('#main-tab-bar').tabs('resize'); //resize something
     $('.aportal').portal('resize'); //resize something else
   }

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?

1. var tabTools = "#tab-tools-" + uniqueID; //create the unique id for the tab tools
2. 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
   
3. $('#main-tab-tools').append(tabToolsDiv); //add the tab tools div to the page
   
4. $('#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

Thank you for any help you can give me!

I have a json object like this:

1. var wDefaults = {
     "testPortalA":[            
       {"wid":"w001","wclosed":false,"wcollapsed":true,"wmaximized":false,"pcol":0,"wpos":0},
       {"wid":"w002","wclosed":false,"wcollapsed":true,"wmaximized":false,"pcol":1,"wpos":0},
       {"wid":"w003","wclosed":false,"wcollapsed":true,"wmaximized":false,"pcol":2,"wpos":0}
     ],
     "testPortalB":[
       {"wid":"w004","wclosed":false,"wcollapsed":true,"wmaximized":false,"pcol":0,"wpos":0},
       {"wid":"w005","wclosed":false,"wcollapsed":true,"wmaximized":false,"pcol":1,"wpos":0},
       {"wid":"w006","wclosed":false,"wcollapsed":true,"wmaximized":false,"pcol":2,"wpos":0}
     ]
   }

I understand how to get or set a value if I know its position in the array:

1. myval = wDefaults.testPortalA[0].wid; //get a value
   
2. wDefaults.testPortalA[0].wclosed = true; //set a value
   

I understand how to access all of the values using .each():

1. $(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:

1. var whichPortal = "testPortalA";
2. 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?

1. var wDefaults = {
     "testPortalA":[           
       {"wmaximized":"w002"},
       {"wid":"w001","wclosed":false,"wcollapsed":true,"pcol":0,"wpos":0},
       {"wid":"w002","wclosed":false,"wcollapsed":true,"pcol":1,"wpos":0},
       {"wid":"w003","wclosed":false,"wcollapsed":true,"pcol":2,"wpos":0}
     ],
     "testPortalB":[
       {"wmaximized":"w005"},
       {"wid":"w004","wclosed":false,"wcollapsed":true,"pcol":0,"wpos":0},
       {"wid":"w005","wclosed":false,"wcollapsed":true,"pcol":1,"wpos":0},
       {"wid":"w006","wclosed":false,"wcollapsed":true,"pcol":2,"wpos":0}
     ]
   }

I would greatly appreciate any help anyone can give me!

I have the following object:

1. var wDefaults = {
2.     "skin":1,
3.     "pagewidth":"960px",
4.     "c1col":[
5.         {"wid":"w001","pcol":0,"wpos":0,"wclosed":"false","wcollapsed":"true"}
6.     ],
7.     "c3col":[
8.         {"wid":"w002","pcol":0,"wpos":0,"wclosed":"false","wcollapsed":"false"},
9.         {"wid":"w003","pcol":0,"wpos":1,"wclosed":"false","wcollapsed":"false"},
10.         {"wid":"w004","pcol":0,"wpos":2,"wclosed":"false","wcollapsed":"false"},
11.         {"wid":"w005","pcol":1,"wpos":0,"wclosed":"false","wcollapsed":"false"},
12.         {"wid":"w006","pcol":1,"wpos":1,"wclosed":"false","wcollapsed":"false"},
13.         {"wid":"w007","pcol":1,"wpos":2,"wclosed":"false","wcollapsed":"false"},
14.         {"wid":"w008","pcol":1,"wpos":3,"wclosed":"false","wcollapsed":"false"},
15.         {"wid":"w009","pcol":2,"wpos":0,"wclosed":"false","wcollapsed":"false"},
16.         {"wid":"w010","pcol":2,"wpos":1,"wclosed":"false","wcollapsed":"false"},
17.         {"wid":"w011","pcol":2,"wpos":2,"wclosed":"false","wcollapsed":"false"}
18.     ]
19. }

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:

1. alert(wDefaults.c3col[0].wid);  //first try
   
2. alert(wDefaults.c3col.0.wid);  //second try
   
3. var obj = wDefaults.c3col[0];  //third try
   
4. 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:

1. for each widget on the page
   
2.   found = false 
   
3.   find the object in c3col where wid == x and update its other values. set found = true
   
4.   if found == false then add a new object to c3col with x & its properties
5. end for
6. for each object in c3col
7.   if that wid isn't found in the list of widgets on the page, delete it from c3col
8. end for
   
9. 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)

Any help would be greatly appreciated.