April 3, 2012
how to apply this to all of my pages in jquerymobile
Question by Wondering Coder
Im using jquerymobile together with codeigniter framework and I’m having a problem
I have this script below and I want it to be trigger in all of my pages.
<script type="text/javascript">
var i = 0;
$(function() {
$("#h1").hide();
$("#h2").hide();
$("#h3").hide();
<? if ($account_type != 'prepaid' && $account_type != 'PREPAID') : ?>
$("#h4").hide();
<? endif ?>
head();
setInterval('head()',2000);
});
function head()
{
i++;
if (i==1) h1();
if (i==2) h2();
<? if ($account_type == 'prepaid' || $account_type == 'PREPAID') : ?>
if (i==3){ h3(); i=0; }
<? else : ?>
if (i==3) h3();
if (i==4){ h4(); i=0; }
<? endif ?>
}
function h1()
{
<? if ($account_type == 'prepaid' || $account_type == 'PREPAID') : ?>
$("#h3").hide();
<? else : ?>
$("#h4").hide();
<? endif ?>
$("#h1").fadeIn().delay(1000);
//h2();
}
function h2()
{
$("#h1").hide();
$("#h2").fadeIn().delay(1000);
}
function h3()
{
$("#h2").hide();
$("#h3").fadeIn().delay(1000);
}
function h4()
{
$("#h3").hide();
$("#h4").fadeIn().delay(1000);
}
</script>
tried replacing the $(function() { to $(document).bind(‘pageinit’, function () { but still doesn’t work. The function only fires in my index.php not in the other pages. Please help.
Answer by regeint
Try this one.
Prepare an index file with following scripts
<script type="text/javascript">
var i = 0;
$(function() {
start();
});
function start(){
$("#h1").hide();
$("#h2").hide();
$("#h3").hide();
<? if ($account_type != 'prepaid' && $account_type != 'PREPAID') : ?>
$("#h4").hide();
<? endif ?>
head();
setInterval('head()',2000);
}
function head()
{
i++;
if (i==1) h1();
if (i==2) h2();
<? if ($account_type == 'prepaid' || $account_type == 'PREPAID') : ?>
if (i==3){ h3(); i=0; }
<? else : ?>
if (i==3) h3();
if (i==4){ h4(); i=0; }
<? endif ?>
}
function h1()
{
<? if ($account_type == 'prepaid' || $account_type == 'PREPAID') : ?>
$("#h3").hide();
<? else : ?>
$("#h4").hide();
<? endif ?>
$("#h1").fadeIn().delay(1000);
//h2();
}
function h2()
{
$("#h1").hide();
$("#h2").fadeIn().delay(1000);
}
function h3()
{
$("#h2").hide();
$("#h3").fadeIn().delay(1000);
}
function h4()
{
$("#h3").hide();
$("#h4").fadeIn().delay(1000);
}
</script>
now, call this function when you initpage like the following
$('#my_page').live('pageinit',function(event){
start();
});
Answer by Starx
If you want to fire in other pages too. Include the script in all pages. Using
<script src="common.js"></script>
