Jump to content

Can I add a code block to my site header?

Recommended Posts

Hello, quick question for you folks to see if something is possible. I'm trying to add this code block to my site header:

    <div id="countuptimer" data-countup="July 27, 2018 12:00:00"></div>

It currently appears in the footer of my site, https://outside365.blog , and looks like this:

ScreenShot2023-02-22at6_23_08AM.thumb.png.0b3f78de71970082eb230ed0b62e2cd2.png

 I would like to put it here on web:

ScreenShot2023-02-22at6_22_06AM.thumb.png.9bb8ee16a06da115bf5a439d6ba54f85.png

And either next to or below my logo on Mobile:

image.thumb.jpeg.6a9413447d0387a5a9d807193b6242a0.jpeg

 

Does anyone know if this is possible and how I could do it? Thanks for any help you can provide!

Edited by mtbgreg
clarity
Link to comment
  • Replies 8
  • Views 1.1k
  • Created
  • Last Reply

Top Posters In This Topic

40 minutes ago, mtbgreg said:

Hello, quick question for you folks to see if something is possible. I'm trying to add this code block to my site header:

    <div id="countuptimer" data-countup="July 27, 2018 12:00:00"></div>

It currently appears in the footer of my site, https://outside365.blog, and looks like this:

ScreenShot2023-02-22at6_23_08AM.thumb.png.0b3f78de71970082eb230ed0b62e2cd2.png

 I would like to put it here on web:

ScreenShot2023-02-22at6_22_06AM.thumb.png.9bb8ee16a06da115bf5a439d6ba54f85.png

And either next to or below my logo on Mobile:

image.thumb.jpeg.6a9413447d0387a5a9d807193b6242a0.jpeg

 

Does anyone know if this is possible and how I could do it? Thanks for any help you can provide!

I can not access your URL now. Can you check it again?

The suitable solution is using the javascript code to move this element into the header

Edited by Beyondspace

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
9 hours ago, Beyondspace said:

I can not access your URL now. Can you check it again?

The suitable solution is using the javascript code to move this element into the header

The correct url is: https://www.outside365.blog/

Part of the code injection for the counter is indeed in the footer section, but how would I then move the code block to display the counter into the header? Like how do I choose to show the counter in that particular location? 

To make the counter work, I put this code injection in the header:

<style>
        .countup {
            text-align: center;
            margin-bottom: 20px;
            font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
        }

        .countup .pitiyacountup {
            display: inline-block;
            padding: 10px;
            background: #151515;
            margin: 0;
            color: white;
            min-width: 2.6rem;
            margin-left: 13px;
            border-radius: 10px 0 0 10px;
        }

        .countup span[class*="timeRef"] {
            border-radius: 0 10px 10px 0;
            margin-left: 0;
            background: #C8A47E;
            color: black;
        }
    </style>

 

 

And then I put this code injection in the footer:

<script>
        /*
        Count Up from Date and Time
        Author: @thepitiya / https://wwww.pitiya.com/website-count-up-timer-widgets.html
        */
        window.onload = function () {
            var g = document.getElementById('countuptimer');
            g.setAttribute("class", "countup");
            var e = '<span class="pitiyacountup days">00</span><span class="pitiyacountup timeRefDays">days</span>';
            g.insertAdjacentHTML('afterbegin', e);
            var t = g.dataset.countup;
            countUpFromTime(t, 'countuptimer');
        };
        function countUpFromTime(countFrom, id) {
            countFrom = new Date(countFrom).getTime();
            var now = new Date(),
                countFrom = new Date(countFrom),
                timeDifference = (now - countFrom);

            var secondsInADay = 60 * 60 * 1000 * 24,
                secondsInAHour = 60 * 60 * 1000;

            days = Math.floor(timeDifference / (secondsInADay) * 1);
            hours = Math.floor((timeDifference % (secondsInADay)) / (secondsInAHour) * 1);
            mins = Math.floor(((timeDifference % (secondsInADay)) % (secondsInAHour)) / (60 * 1000) * 1);
            secs = Math.floor((((timeDifference % (secondsInADay)) % (secondsInAHour)) % (60 * 1000)) / 1000 * 1);

            var idEl = document.getElementById(id);
            idEl.getElementsByClassName('days')[0].innerHTML = days;
            idEl.getElementsByClassName('hours')[0].innerHTML = hours;
            idEl.getElementsByClassName('minutes')[0].innerHTML = mins;
            idEl.getElementsByClassName('seconds')[0].innerHTML = secs;

            clearTimeout(countUpFromTime.interval);
            countUpFromTime.interval = setTimeout(function () { countUpFromTime(countFrom, id); }, 1000);
        }
    </script>
 

And then this code in a code block to display the timer:

<div id="countuptimer" data-countup="July 27, 2018 12:00:00"></div>

Edited by mtbgreg
Link to comment
59 minutes ago, mtbgreg said:

The correct url is: https://www.outside365.blog/

Part of the code injection for the counter is indeed in the footer section, but how would I then move the code block to display the counter into the header? Like how do I choose to show the counter in that particular location? 

To make the counter work, I put this code injection in the header:

<style>
        .countup {
            text-align: center;
            margin-bottom: 20px;
            font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
        }

        .countup .pitiyacountup {
            display: inline-block;
            padding: 10px;
            background: #151515;
            margin: 0;
            color: white;
            min-width: 2.6rem;
            margin-left: 13px;
            border-radius: 10px 0 0 10px;
        }

        .countup span[class*="timeRef"] {
            border-radius: 0 10px 10px 0;
            margin-left: 0;
            background: #C8A47E;
            color: black;
        }
    </style>

 

 

And then I put this code injection in the footer:

<script>
        /*
        Count Up from Date and Time
        Author: @thepitiya / https://wwww.pitiya.com/website-count-up-timer-widgets.html
        */
        window.onload = function () {
            var g = document.getElementById('countuptimer');
            g.setAttribute("class", "countup");
            var e = '<span class="pitiyacountup days">00</span><span class="pitiyacountup timeRefDays">days</span>';
            g.insertAdjacentHTML('afterbegin', e);
            var t = g.dataset.countup;
            countUpFromTime(t, 'countuptimer');
        };
        function countUpFromTime(countFrom, id) {
            countFrom = new Date(countFrom).getTime();
            var now = new Date(),
                countFrom = new Date(countFrom),
                timeDifference = (now - countFrom);

            var secondsInADay = 60 * 60 * 1000 * 24,
                secondsInAHour = 60 * 60 * 1000;

            days = Math.floor(timeDifference / (secondsInADay) * 1);
            hours = Math.floor((timeDifference % (secondsInADay)) / (secondsInAHour) * 1);
            mins = Math.floor(((timeDifference % (secondsInADay)) % (secondsInAHour)) / (60 * 1000) * 1);
            secs = Math.floor((((timeDifference % (secondsInADay)) % (secondsInAHour)) % (60 * 1000)) / 1000 * 1);

            var idEl = document.getElementById(id);
            idEl.getElementsByClassName('days')[0].innerHTML = days;
            idEl.getElementsByClassName('hours')[0].innerHTML = hours;
            idEl.getElementsByClassName('minutes')[0].innerHTML = mins;
            idEl.getElementsByClassName('seconds')[0].innerHTML = secs;

            clearTimeout(countUpFromTime.interval);
            countUpFromTime.interval = setTimeout(function () { countUpFromTime(countFrom, id); }, 1000);
        }
    </script>
 

And then this code in a code block to display the timer:

<div id="countuptimer" data-countup="July 27, 2018 12:00:00"></div>

You can try the following

<script>
  windonw.onload = function(){
    const timeEl = document.querySelector('#countuptimer');
    const timeElMobile = timeEl.cloneNode(true);
    if (timeEl && timeElMobile) {
      const headerRight = document.querySelector('.header-actions-action.header-actions-action--social');
      const headerLogo = document.querySelector('.header-display-mobile .header-title-logo a');
      console.log(timeElMobile);
      headerRight.insertAdjacentElement('afterbegin',timeEl);
      headerLogo.insertAdjacentElement('beforeend',timeElMobile)
    }
  }
</script>
<style>
  #countuptimer {
    margin-bottom: 0;

  }
  .header-actions-action.header-actions-action--social {
    align-items: center;
  }

  .header-display-mobile .header-title-logo a {
    display: flex;
  }

  .header-display-mobile #countuptimer {
    display: flex;
    box-sizing: border-box;
    width: 110px;
  }
  .header-display-mobile .countup .pitiyacountup {
    font-size: 20px;
    display:flex;
    justify-content: center;
    align-items: center;
    width: 30%;
    min-width: unset;
  }
</style>

Support me by pressing 👍  or marking as solution if this useful for you

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
  • 1 month later...

Hello Beyondspace,

I tried using that code, but I couldn't get it to work. But let me ask a few follow up questions:

1. Where should I paste that code in to make it work properly?

2. Do I need to remove any of the other code that I've already added?

Thanks for your help!

Link to comment
On 4/5/2023 at 6:22 AM, mtbgreg said:

Hello Beyondspace,

I tried using that code, but I couldn't get it to work. But let me ask a few follow up questions:

1. Where should I paste that code in to make it work properly?

2. Do I need to remove any of the other code that I've already added?

Thanks for your help!

Add to Settings > Advanced > Code Injection > Footer

No need to remove any current codes

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 4/10/2023 at 10:35 PM, mtbgreg said:

Hi Tuanphan, thanks for the follow up! I followed those instructions, and it still doesn't appear to be to be working. See https://outside365.blog , and screenshot attached.

Screenshot 2023-04-10 at 9.34.46 AM.png

Change windonw to window

image.png.6fc9ee674caa961ce8ad11864252ddfc.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.