Skip to main content

How Can I add This jQuery Twice to the Same Page?

Image
By User



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>




Labels:

Comments

  1. Tips For AllFebruary 13, 2012 at 6:59 AM

    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.

    <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});

    ReplyDelete
  2. Tips For AllFebruary 13, 2012 at 6:59 AM

    The ID would need to change.

    <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">

    ReplyDelete
  3. Tips For AllFebruary 13, 2012 at 6:59 AM

    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:

    <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.

    ReplyDelete

Post a Comment

Popular posts from this blog

Why is this Javascript much *slower* than its jQuery equivalent?

By User
I have a HTML list of about 500 items and a "filter" box above it. I started by using jQuery to filter the list when I typed a letter (timing code added later): $('#filter').keyup( function() { var jqStart = (new Date).getTime(); var search = $(this).val().toLowerCase(); var $list = $('ul.ablist > li'); $list.each( function() { if ( $(this).text().toLowerCase().indexOf(search) === -1 ) $(this).hide(); else $(this).show(); } ); console.log('Time: ' + ((new Date).getTime() - jqStart)); } ); However, there was a couple of seconds delay after typing each letter (particularly the first letter). So I thought it may be slightly quicker if I used plain Javascript (I read recently that jQuery's each function is particularly slow). Here's my JS equivalent: document.getElementById('filter').addEventListener( 'keyup', function () { var jsStart = (new Date).getTime()...
3 comments
Read more

Is it possible to have IF statement in an Echo statement in PHP

By User
Thanks in advance. I did look at the other questions/answers that were similar and didn't find exactly what I was looking for. I'm trying to do this, am I on the right path? echo " <div id='tabs-".$match."'> <textarea id='".$match."' name='".$match."'>". if ($COLUMN_NAME === $match) { echo $FIELD_WITH_COLUMN_NAME; } else { } ."</textarea> <script type='text/javascript'> CKEDITOR.replace( '".$match."' ); </script> </div>"; I am getting the following error message in the browser: Parse error: syntax error, unexpected T_IF Please let me know if this is the right way to go about nesting an IF statement inside an echo. Thank you.
5 comments
Read more