I've got a div in my app that is displayed each time my theme options panel is "saved".
The markup is...
<form method="post">
<?php
if ( $_REQUEST['saved']) { ?>
<div id="message" class="updated fade"><p>Sweet! The settings were saved :)</p></div>
<script type="text/javascript"> $('#message').delay(3000).fadeOut(3000);</script>
<?php }?>
This has the effect of showing the div (which is absolutely positioned to overlay the interface). I'm also using jQuery to fade the message offscreen after 3 seconds.
This works fine, however, when I add a bit of script to my jQuery chain (see the commented out block below), the message div is only visible when the jPicker popup appears.
$(function()
{
$("#carousel").jCarouselLite
(
{
btnNext: ".next",
btnPrev: ".prev",
visible: 6,
speed: 700
}
);
$('#carousel').show();
$('#myTheme').change
(
function()
{
var myImage = $('#myTheme :selected').text();
$('.selectedImage img').attr('src','../wp-content/themes/myTheme/styles/'+myImage+'/screenshot.jpg');
}
);
$('#carousel ul li').click
(
function(e)
{
var myOption = $(this).children('img').attr('title');
$("#myTheme option[value='"+myOption+"']").attr('selected', 'selected');
$("#myTheme").css('backgroundColor', '#A9A9A9').animate({backgroundColor: "#ffffff"}, 'slow');
}
);
$('#carousel ul li').hover
(
function(e)
{
var img_src = $(this).children('img').attr('src');
$('.selectedImage img').attr('src',img_src);
}
,function()
{
$('.selectedImage img').attr('src', '<?php echo $selectedThumb; ?>');
}
);
/*
$('#myTheme_sidebar_color').jPicker
(
{},
function(color)
{
$(this).val(color.get_Hex());
},
function(color)
{
$(this).val(color.get_Hex());
}
);
*/
});
