jQuery Forum

I'm trying to implement this in a template where a variety of items may have the class assigned to implement the tooltip.

I have had success getting the tooltip on click only, and some success on getting the tooltip populated with ajax of the url is fixed, but I can't seem to extract the url from the link and get the content for the tooltip from that link and have the tooltip work on click rather than hover.

I had success doing something similar with dialog. I added a rel property which contains the url plus the element to load out of the link. That works. Can't seem to accomplish the same thing with tooltip. I've tried a variety of approaches and about everything Google has to offer.

Any ideas would be appreciated.

I had a recent strange problem I have not encountered before.

I have a form that uses tablednd and colorbox. The main form (event) allows the user to open a detail page (tshirt sizes) in a colorbox window, and resort the table row order.

The problem is that jQuery or colorbox seems to be caching the content so when the reordered list is submitted, the MySQL query is completed, but the table shows the old order in FF11. If I reload the frame, my changes appear.

PHP Headers, Meta tags, and $.ajaxSetup({cache:false}) have no impact. IE seems to be respecting the headers and working fine, but FF refuses to stop caching the content. I am certain that is the cause, in part, because if I disable FF's cache, the form inside colorbox works fine.

The only way I could get it to work consistently in FF11 was to resort to an old method of adding a dummy url variable on the redirect after the query is executed.

Any ideas on a better solution or info on whether this is a known issue with FF11 would be greatly appreciated.

This is the PHP code I used in both the parent page and the colorbox form:

//Set no caching
header("Expires: -1");
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
header("Cache-Control: no-store, no-cache, must-revalidate, post-check=0, pre-check=0");
header("Pragma: no-cache");

I also used meta tags and tried both $.ajaxSetup ({cache: false}); and $.ajaxSetup ({async: false, cache: false}); in the parent page that calls the colorbox with no luck.

Thanx

I have some code for enabling the submit button once the form is fully loaded. The button i an image button and for some reason, removeAttr refused to work, but .prop("disabled", false) did work. The thing is, removeAttr worked on a regular button, so anyone know what the deal is?

I am trying to resize a colorbox from the child iframe window. The strange thing is, the parent window via $(window).height() reports 1080, but from the child colorbox window via parent.$(window).height() reports 956. If I make a function in the parent window called getHeight which just returns $(window).height() and access it by parent.getHeight(), I get 1080, so why the discrepancy between $(window).height() and parent.$(window).height(). SHouldn't they be the same?

I have an object-embed combination for a flash swf file. I have added javascript controls for the movie.

I am successfully using the following in a function to access the movie and send the javascript commands:

1. if (window.document[movieName])
2.   {
3.     return window.document[movieName];
4.   }
5.   if (navigator.appName.indexOf("Microsoft Internet")==-1)
6.   {
7.     if (document.embeds && document.embeds[movieName])
8.       return document.embeds[movieName];
9.   }
10.   else // if (navigator.appName.indexOf("Microsoft Internet")!=-1)
11.   {
12.     return document.getElementById(movieName);
13.   }

I am trying to use jQuery to select the objects by determining if one of the flash properties exists. Something like:

1. if ($("#"+movieName).TGetProperty("/",15) != "undefined") {
2.          return $("#"+movieName).get(0);
3.     } else if ($("#"+movieName).children("embed:first").TGetProperty("/",15) != "undefined") {
4.         $("#"+movieName).children("embed:first").get(0);
5.     }

$("#"+movieName) works for IE, but nothing I have tried can get the correct movie element out of the DOM to be the equivalent of document.embeds[movieName]. I have tried quite a few combinations beyond what is in the code above like:

• $("#"+movieName).children("embed:first")
• $("#"+movieName+"embed:first")
• $("[name='"+movieName+"']")

Any idea what the correct method is would be greatly appreciated. I have it working but the problem bugs me.

Steven

I am trying to use colorbox with media plugin (http://jquery.malsup.com/media/). The program uses ajax to load the links that make up the gallery and then opens the colorbox as a slideshow.

It works great for pictures. What I am trying to do is fill in the gap for the lack of native flash support in color box by the follwing method.

If a gallery item is an swf file instead of an image, the gallery link points to a player file instead of the image.
The player file contains a link pointing to the swf file.

I am trying to use the onComplete method like this:

1. onComplete:function() {
2.                         if ($("#playerbox").length > 0) { // Test if the player content was loaded instead of an image
   
3.                             $("#playerbox").parent("div").css({"width":"400px","height":"400px"}); // Just trying to get some dimensions
   
4.                             $(this).colorbox.resize();
5.                             $('.cboxSlideshow_on').find('#cboxSlideshow').click(); // Stop the slideshow for a video
   
6. /*
   
7.                             //$(this).colorbox.resize({width:"400px",height:"400px"});
   
8.                              // I cannot seem to get the resize function to take any parameters. I've tried every syntax combination I can think of, but only resize() does anything.
9. */
   
10.                         }

The result is:

1. <div id="cboxLoadedContent" style="display: block; width: 0px; overflow: auto; height: 400px;">
2.       <div style="width: 400px; height: 400px;">
3.             <object height="400" width="400" type="application/x-shockwave-flash" data="/media/galleries/Gallery_13_Img_53.swf" id="playerbox" style="visibility: visible;">
4.                   <param name="bgColor" value="#ffffff">
5.                   <param name="wmode" value="transparent">
6.                   <param name="autoplay" value="false">
7.             </object>
8.       </div>
9. </div>

The colorbox resizes to the correct height but retains a width of 0px. Any idea what is wrong?

The entire function looks like this:

1. function showGallery(id) {
2.     if (window.gallery_init === true) {
3.         var error = false;
4.         $.ajax({
5.             type: "GET",
6.             url: "/apps/galleries/gallery_items.php",
7.             data: "idgallery="+id+"&player=1",
8.             cache: false,
9.             success: function(html){
10.                 $("#galleryContents").html(html);
11.                 $("a[rel='gallery_"+id+"']").colorbox({
12.                     slideshow:true,
13.                     open:true,
14.                     onComplete:function() {
15.                         if ($("#playerbox").length > 0) {
16.                             $("#playerbox").media({isWindowless:false});
17.                             $("#playerbox").parent("div").css({"width":"400px","height":"400px"});
18.                             $(this).colorbox.resize();
19.                             $('.cboxSlideshow_on').find('#cboxSlideshow').click();
20.                             //$(this).colorbox.resize({width:"400px",height:"400px"});
21.                         }
22.                     }
23.                 });
24.                },
25.             error: function() {
26.                 error = true;
27.             }
28.         });
29.         if (error) { return true; } else { return false; }
30.     }
31. }

I am trying to use the Cycle plugin with the corners plugin to cycle rounded corners. I am accounting for different sized images and hiding all but the first image until document ready.

Everything works until I try to use any easing affect it does not work. I have tried using easing version 1.1.1 which is used on the cycle plugin website and I have tried using the compatibility plugin on the easing plugin site without any luck. It may just be an outright incompatibility, but any help would be appreciated.

The code is:

1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
   <html>
   <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <title>Untitled Document</title>
   <script type="text/javascript" src="inc/jquery.easing.1.3.js"></script>
2. <?php
3. /*
4. <script type="text/javascript" src="inc/jquery.easing.1.1.1.js"></script>
   <script type="text/javascript" src="inc/jquery.easing.compatibility.js"></script>
5. */
6. ?>
   <script type="text/javascript" src="inc/jquery.min.js"></script>
   <script type="text/javascript" src="inc/jquery.cycle.all.min.js"></script>
   <script type="text/javascript" src="inc/jquery.corner.2.11.js"></script>
   <style type="text/css">
   div.imagecycler {
       margin:100px auto;
   }
   div.imagecycler div.cycleimg {
       display:none;
   }
   div.imagecycler div.first {
       display:block;
   }
   </style>
   <script type="text/javascript">
   $.fn.corner.defaults.useNative = false;
   $(document).ready(function() {
       $('.cycleimg').corner("30px");
   
       $('.imagecycler').cycle({
           before:setSize,
           fx:'zoom', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
           easing:'bounceout',
           delay: -2000,
           //speed:500,
           //timeout:3000
       });
       function setSize() {
           $(this).css({display:"block"});
           var w = $(this).children("img").width();
           var h = $(this).children("img").height();
           $(this).css({width:w+"px",height:h+"px"});
           $(this).corner("30px");
       }
   });
   </script>
   </head>
   
   <body>
   <div class="imagecycler">
       <div class="cycleimg first"><img src="images/pic1.jpg" /></div>
       <div class="cycleimg"><img src="images/pic2.jpg" /></div>
       <div class="cycleimg"><img src="images/pic3.jpg" /></div>
       <div class="cycleimg"><img src="images/pic4.jpg" /></div>
   </div>
   </body>
   </html>
   
   

I just registered and I put in the wrong email, but I cannot change it. What do I do?

1. <script type="text/javascript">
   var DAbuttons = { "up" : "type=\"image\" src=\"/inc/DAbuttons/TopRowUp.gif\"", "down" : "type=\"image\" src=\"/inc/DAbuttons/BottomRowDown.gif\"", "update" : "type=\"image\" src=\"/inc/DAbuttons/UpdateRowOrder.gif\"" };
   </script>

1. if (typeof(DAbuttons) == "undefined") {
     var DAbuttons = { "up" : "type=\"submit\"", "down" : "type=\"submit\"", "update" : "type=\"submit\"" }
    }