Hi everyone,
I have a basic jqModal page:
-------------------------------------------------------------------------------
<html>
....... blah blah
<div class="jqmAlert" id="ex3b" >
<div id="ex3b" class="jqmAlertWindow" style="width:580px;" >
<div class="jqmAlertTitle clearfix" >
# <em>Close</em>
</div>
<div class="jqmAlertContent">
<p>Please wait... '<?php echo base_url()."images/busy.gif"? '
alt="loading" /></p>
</div>
</div>
</div>
....... blah blah
</html>
<script type="text/javascript">
$().ready(function(){
// select + reference "triggering element" -- will pass
to $.jqm()
var triggers = $(".ex3bTrigger");
var t = $('div.jqmAlertContent');
// NOTE; we could have used
document.getElementById(), or selected
// multiple elemets with $(..selector..) and passed
the trigger
// as a jQuery object. OR, just include the string
'#ex3btrigger'
// as the trigger parameter (as typically
demonstrated).
// NOTE; we supply a target for the ajax return.
This allows us
// to keep the structure of the alert window. An
element can
// also be passed (see the documentation) as target.
$('#ex3b')
//$('#ex3b').jqResize('.jqResize')
$('#ex3b').jqm({
overlay: 88,
zIndex: 1000,
modal: false,
trigger: triggers,
ajax: '@href',
//the following creates a fade effect...
//onHide: function(h) {
//t.html('Please Wait...'); // Clear Content
HTML on Hide.
// h.o.remove(); // remove overlay
//h.w.fadeOut(888); // hide window
//},
target: t
})
.jqDrag('.jqmAlertTitle');
// Close Button Highlighting. IE doesn't support
:hover. Surprise?
if($.browser.msie) {
$('div.jqmAlert .jqmClose')
.hover(
function(){ $(this).addClass('jqmCloseHover');
},
function(){
$(this).removeClass('jqmCloseHover'); });
}
});
</script>
---------------------------------------------------------------------------------
I load via ajax a php that contains the following jquery script that creates
a image preview when hovering over some thumbnails:
-------------------------------------------------------------------------------
html
....... blah blah
echo' a target="_blank" href="'.base_url().$image1full.'" class="preview" >
< i m g border="0" src="'.base_url().$image1.'" width="80" height="60";
....... blah blah
/html
this.imagePreview = function(){
/* CONFIG */
xOffset = 30;
yOffset = 20;
// these 2 variable determine popup's distance from the cursor
// you might want to adjust to get the right result
/* END CONFIG */
$("a.preview").hover(function(e)
{
this.t = this.title;
this.title = "";
var c = (this.t != "") ? "<br/>" + this.t : "";
$("body").append("<p id='preview'> "+ this.href +" "+ c
+"</p>");
$("#preview")
.css("top",(e.pageY - xOffset -
($("#preview").height())) + "px")
.css("left",(e.pageX + yOffset) + "px")
.fadeIn("fast");
},
function()
{
this.title = this.t;
$("#preview").remove();
}); //end of a.preview hover function
$("a.preview").mousemove(function(e)
{
$("#preview")
.css("top",(e.pageY - xOffset -
($("#preview").height()) ) + "px")
.css("left",(e.pageX + yOffset) + "px");
}); //end of a.preview mousemove function
//handle previewleft
$("a.previewleft").hover(function(e)
{
this.t = this.title;
this.title = "";
var c = (this.t != "") ? "<br/>" + this.t : "";
$("body").append("<p id='previewleft'> "+ this.href +" "+ c
+"</p>");
$("#previewleft")
.css("top",(e.pageY - xOffset -
($("#previewleft").height())) + "px")
.css("left",(e.pageX - yOffset -
$("#previewleft").width()) + "px")
.fadeIn("fast");
},
function()
{
this.title = this.t;
$("#previewleft").remove();
}); //end of a.preview hover function
$("a.previewleft").mousemove(function(e)
{
$("#previewleft")
.css("top",(e.pageY - xOffset -
($("#previewleft").height())) + "px")
.css("left",(e.pageX - yOffset -
$("#previewleft").width()) + "px");
}); //end of a.preview mousemove function
//handle previewmiddle
$("a.previewmiddle").hover(function(e)
{
this.t = this.title;
this.title = "";
var c = (this.t != "") ? "<br/>" + this.t : "";
$("body").append("<p id='previewmiddle'> "+ this.href +" "+ c
+"</p>");
$("#previewmiddle")
.css("top",(e.pageY - xOffset -
$("#previewmiddle").height()) + "px")
.css("left",(e.pageX - yOffset -
($("#previewmiddle").width()/2)) + "px")
.fadeIn("fast");
},
function()
{
this.title = this.t;
$("#previewmiddle").remove();
}); //end of a.preview hover function
$("a.previewmiddle").mousemove(function(e)
{
$("#previewmiddle")
.css("top",(e.pageY - xOffset -
$("#previewmiddle").height()) + "px")
.css("left",(e.pageX - yOffset -
($("#previewmiddle").width()/2)) +
"px");
}); //end of a.preview mousemove function
};
// starting the script on page load
$().ready(function(){
imagePreview();
});
--------------------------------------------------------------------------------
This all works fine in IE 7, but not in Firefox 3.0.3. No errors are thrown.
Upon debugging, ready is never fired. Nor is any of the hover functions.
Any ideas?
Thanks in advance...
Kid_Niki
--
View this message in context:
http://www.nabble.com/jqModal-problem-in-firefox-not-firing-ready-tp20352990s27240p20352990.html
Sent from the jQuery General Discussion mailing list archive at Nabble.com.
