I am trying to add this code, generated by a WordPress plugin, to the same page twice - but it won't generate the countdown timer the second time.... Is there a simple change I could make to make it appear twice?
THANKS!
<script type="text/javascript">
<!--
jQuery(document).ready(function($){
var austDay = new Date("2012/02/11 00:00");
jQuery.countdown.regional["uji"] = {
labels: ["Years", "Months", "Weeks", "Days", "Hours", "Minutes", "Seconds"],
labels1: ["Year", "Month", "Week", "Day", "Hour", "Minute", "Second"],
compactLabels: ["A", "L", "S", "Z"],
whichLabels: null,
timeSeparator: ':',
isRTL: false
};
jQuery.countdown.setDefaults(jQuery.countdown.regional["uji"]);
jQuery("#ujiCountdown").countdown({until: austDay, text_size: '55', color_down: '#3A3A3A', color_up: '#635b63', color_txt: '#FFFFFF', color_sw: '#000000', ujic_txt: true, animate_sec: true});
jQuery("#ujiCountdown").css({"width": (jQuery("#ujiCountdown").width()-10)+"px", "padding-left": "30px"});
});
//-->
</script>
<div id="ujiCountdown" class="ujic_center"></div>
In order to get more than one of these on the page you will need to assign the second one to a different DOM element. Is it possible for you to make a second div with a different ID? You could then call the jQuery code on the second div and they will both show because they will be different.
ReplyDelete<div id="ujiCountdown2"></div>
and then in the same ready block you can call
jQuery("#ujiCountdown2").countdown({until: austDay, text_size: '55', color_down: '#3A3A3A', color_up: '#635b63', color_txt: '#FFFFFF', color_sw: '#000000', ujic_txt: true, animate_sec: true});
The ID would need to change.
ReplyDelete<script type="text/javascript">
<!--
jQuery(document).ready(function($){
var austDay = new Date("2012/02/11 00:00");
jQuery.countdown.regional["uji"] = {
labels: ["Years", "Months", "Weeks", "Days", "Hours", "Minutes", "Seconds"],
labels1: ["Year", "Month", "Week", "Day", "Hour", "Minute", "Second"],
compactLabels: ["A", "L", "S", "Z"],
whichLabels: null,
timeSeparator: ':', isRTL: false};
jQuery.countdown.setDefaults(jQuery.countdown.regional["uji"]);
jQuery("#ujiCountdown1").countdown({until: austDay, text_size: '55', color_down: '#3A3A3A', color_up: '#635b63', color_txt: '#FFFFFF', color_sw: '#000000', ujic_txt: true, animate_sec: true});
jQuery("#ujiCountdown1").css({"width": (jQuery("#ujiCountdown").width()-10)+"px", "padding-left": "30px"});
});
//-->
</script><div id="ujiCountdown1" class="ujic_center">
<script type="text/javascript">
<!--
jQuery(document).ready(function($){
var austDay = new Date("2012/02/11 00:00");
jQuery.countdown.regional["uji"] = {
labels: ["Years", "Months", "Weeks", "Days", "Hours", "Minutes", "Seconds"],
labels1: ["Year", "Month", "Week", "Day", "Hour", "Minute", "Second"],
compactLabels: ["A", "L", "S", "Z"],
whichLabels: null,
timeSeparator: ':', isRTL: false};
jQuery.countdown.setDefaults(jQuery.countdown.regional["uji"]);
jQuery("#ujiCountdown2").countdown({until: austDay, text_size: '55', color_down: '#3A3A3A', color_up: '#635b63', color_txt: '#FFFFFF', color_sw: '#000000', ujic_txt: true, animate_sec: true});
jQuery("#ujiCountdown2").css({"width": (jQuery("#ujiCountdown").width()-10)+"px", "padding-left": "30px"});
});
//-->
</script><div id="ujiCountdown2" class="ujic_center">
You need to add another div - when you run the function the second time, it's still operating on the same div. Add another div:
ReplyDelete<div id="ujiCountdown2" class="ujic_center"></div>
Then in the JS, change the following lines at the bottom of the function:
jQuery("#ujiCountdown, #ujiCountdown2").countdown({until: austDay, text_size: '55', color_down: '#3A3A3A', color_up: '#635b63', color_txt: '#FFFFFF', color_sw: '#000000', ujic_txt: true, animate_sec: true});
jQuery("#ujiCountdown, #ujiCountdown2").css({"width": (jQuery("#ujiCountdown").width()-10)+"px", "padding-left": "30px"});
Then the jQuery methods get applied to both divs.