HomeHome  
  • WelcomeWelcome  
  • Events  
  • PublicationsPublications  
  • FAQFAQ  
  • SearchSearch  
  • MemberlistMemberlist  
  • UsergroupsUsergroups  
  • RegisterRegister  
  • Log inLog in  
  • You are not connected. Please login or register


    Create a floating menu

    avatar
    • Administrator

        Reputation : 315
        Registered on : 2012-02-22
        Posts : 2317
        School of codes courses: coming soon
      Create a floating menu


      Hello,

      Note: This tutorial was provided from drobga921 from his forum Codinghelp


      Enjoy! Wink Today I am going to be showing you how to make your own floating countdown clock on your forum for any occasion. Below is a step by step guide. This will work in PunBB and PHPBB2

      Step One:

      In your CSS add the following:


      Code: Select Content
      #customcountdown {
          float: right;
          margin-right: 150px;
          height: 40px;
          width: 300px;
          font-family: "georgia", times new roman, times, serif;
          color: #fff;
          font-size: 11px;
          text-align: center;
          margin-top: -50px;
          background: url(https://i.servimg.com/u/f43/16/73/82/07/server10.png) no-repeat;
          padding-top: 5px;
       letter-spacing:1px}


      Step Two:

      Go to: Modules -> Javascript Codes Management -> Create New

      Add the following:

      Code: Select Content
      // Andrew Urquhart : CountDown Timer : http://andrewu.co.uk/clj/countdown/
      function CD_T(id,e){var n=new Date();CD_D(+n,id,e);setTimeout("if(typeof CD_T=='function'){CD_T('"+id+"',"+e+")}",1100-n.getMilliseconds())};function CD_D(n,id,e){var ms=e-n;if(ms<=0) ms*=-1;var d=Math.floor(ms/864E5);ms-=d*864E5;var h=Math.floor(ms/36E5);ms-=h*36E5;var m=Math.floor(ms/6E4);ms-=m*6E4;var s=Math.floor(ms/1E3);if(CD_OBJS[id]){CD_OBJS[id].innerHTML=d+" day"+(d==1?" ":"s ")+CD_ZP(h)+"h "+CD_ZP(m)+"m "+CD_ZP(s)+"s"}};function CD_ZP(i){return(i<10?"0"+i:i)};function CD_Init(){var pref="countdown";var objH=1;if(document.getElementById||document.all){for(var i=1;objH;++i){var id=pref+i;objH=document.getElementById?document.getElementById(id):document.all[id];if(objH&&(typeof objH.innerHTML)!='undefined'){var s=objH.innerHTML;var dt=CD_Parse(s);if(!isNaN(dt)){CD_OBJS[id]=objH;CD_T(id,dt.valueOf());if(objH.style){objH.style.visibility="visible"}}else {objH.innerHTML=s+"<a href=\"http://andrewu.co.uk/clj/countdown/\" title=\"Countdown Error:Invalid date format used,check documentation (see link)\">*</a>"}}}}};function CD_Parse(strDate){var objReDte=/(\d{4})\-(\d{1,2})\-(\d{1,2})\s+(\d{1,2}):(\d{1,2}):(\d{0,2})\s+GMT([+\-])(\d{1,2}):?(\d{1,2})?/;if(strDate.match(objReDte)){var d=new Date(0);d.setUTCFullYear(+RegExp.$1,+RegExp.$2-1,+RegExp.$3);d.setUTCHours(+RegExp.$4,+RegExp.$5,+RegExp.$6);var tzs=(RegExp.$7=="-"?-1:1);var tzh=+RegExp.$8;var tzm=+RegExp.$9;if(tzh){d.setUTCHours(d.getUTCHours()-tzh*tzs)}if(tzm){d.setUTCMinutes(d.getUTCMinutes()-tzm*tzs)};return d}else {return NaN}};var CD_OBJS=new Object();if(window.attachEvent){window.attachEvent('onload',CD_Init)}else if(window.addEventListener){window.addEventListener("load",CD_Init,false)}else {window.onload=CD_Init};


      Save it, and copy the link.

      Step Three:

      PunBB Version:
      Go to OVERALL_HEADER and find:

      Code: Select Content
        <a id="top" name="top" accesskey="t"></a>


      Right below it, add:

      Code: Select Content
      <div id="customcountdown"><script type="text/javascript" src="LINK FROM THE JAVASCRIPT" defer="defer"></script><strong>Your Text Here: </strong><br><span id="countdown1">YYYY-MM-DD HH:MM:SS GMT+00:00</span></div>


      REPLACE LINK FROM THE JAVASCRIPT WITH THE LINK YOU COPIED EARLIER. Change the date to countdown to:

      YYYY = Year
      MM = Month
      DD = Day
      HH = Hour
      MM = Minute
      SS = Second


      save and publish your template. Your countdown will be on every page at the TOP RIGHT.

      PHPBB2 version:

      Find:

      Code: Select Content
      <a name="top"></a>



      Right below it, add:

      Code: Select Content
      <div id="customcountdown"><script type="text/javascript" src="LINK FROM THE JAVASCRIPT" defer="defer"></script><strong>Your Text Here: </strong><br><span id="countdown1">YYYY-MM-DD HH:MM:SS GMT+00:00</span></div>


      REPLACE LINK FROM THE JAVASCRIPT WITH THE LINK YOU COPIED EARLIER. Change the date to countdown to:

      YYYY = Year
      MM = Month
      DD = Day
      HH = Hour
      MM = Minute
      SS = Second


      save and publish your template. Your countdown will be on every page at the TOP RIGHT.



      Any problems -> Please PM me!



      Niko wants you in the team Guest

      Community manager and Administrator at Forumattivo.com

      avatar
      • ***


          Reputation : 4
          Registered on : 2012-03-25
          Posts : 38
        I saw this on codinghelp did you stole it from him

        avatar
        • Veteran staff member

            Reputation : 20
            Registered on : 2012-03-21
            Posts : 56
          @X-Gaming wrote:I saw this on codinghelp did you stole it from him

          Nico! wrote:Note: This tutorial was provided from drobga921 from his forum Codinghelp

          X-Gaming, this tutorial was provided by drobga921.it not stole other user work.

          avatar
          • ***


              Reputation : 4
              Registered on : 2012-03-25
              Posts : 38
            ok wutever

            avatar
            • Administrator

                Reputation : 315
                Registered on : 2012-02-22
                Posts : 2317
                School of codes courses: coming soon
              @X-Gaming wrote:ok wutever

              1st: read in the tutorial:
              Note: This tutorial was provided from drobga921 from his forum Codinghelp


              2nd: I can because i asked to him... Smiley



              Niko wants you in the team Guest

              Community manager and Administrator at Forumattivo.com

              avatar
              • ***


                  Reputation : 4
                  Registered on : 2012-03-25
                  Posts : 38
                lol

                avatar
                • Administrator

                    Reputation : 315
                    Registered on : 2012-02-22
                    Posts : 2317
                    School of codes courses: coming soon
                  @X-Gaming wrote:lol
                  I won't copy anything from anything :Good:



                  Niko wants you in the team Guest

                  Community manager and Administrator at Forumattivo.com

                  avatar
                  • Veteran staff member

                      Reputation : 14
                      Registered on : 2012-02-25
                      Posts : 98
                    Very Good! Is fantastic menu!

                    avatar
                    • **


                        Reputation : 1
                        Registered on : 2012-04-02
                        Posts : 18
                      where is the preview?

                      • Veteran staff member

                          Reputation : 11
                          Registered on : 2012-03-27
                          Posts : 116
                        There is a preview in the tutorial. You have to look.


                        YOUR BANNER HERE
                        728x90
                        DMCA.com Protection Status
                        Free forum | © PunBB | Free forum support | Contact | Report an abuse | Free forum