Help with a call now button

Please test the following “call now button” code in sitepoint.com in Google Chrome and you would probably see that the button somewhat covers the footer area (which I expected not to happen).

How to solve that problem?

document.body.insertAdjacentHTML('beforeend', `
<aside class="all_textual_cnb_wrapper">
	<a dir="ltr" class="all_textual_cnb_link" href="tel:PHONE_NUMBER">Call now ✆</a>
</aside>
`)

newStyle = document.createElement("style");
newStyle.type = "text/css";
newStyle.innerHTML +=`
	.all_textual_cnb_wrapper {
                height: 100px; // Just for the sake of testing;
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 9999;
		padding: 0 0 5px 0; /* vertical-centralization fix */
		font-size: 36px;
		font-weight: bold;
		background: #149714;
	}
`;
document.head.appendChild(newStyle);

Why would we test an element which doesn’t exist on the site? :shifty:

Hello Dave,

Sorry, I don’t understand, what element doesn’t exist on the site?

Why are you putting a call me button on the sitepoint page? Why not test it on a site that it would actually go on?

Because there is a global problem here of covering footers in various sites which I want to understand and it really doesn’t matter to me which site is given for the test as long as the footer is covered :slight_smile:

Well, then look at the script and see what it does…it’s adding the element at the end of the document and fixing the position to the end of the container, which is the body.

If this is the markup before

<body>
    <header></header>
    <main></main>
   <footer></footer>
</body>

after the script, the markup is now

<body>
    <header></header>
    <main></main>
   <footer></footer>
   <aside class="all_textual_cnb_wrapper"></aside>
</body>

Then look at the html added. It’s fixing the position, which means it’s outside the document flow - essentially like a float. Then it’s put at the bottom with the left/right/bottom set to 0. If the footer is sticky (which means it’s stuck at the bottom), then this will end up taking up the same space. And because the z-index is 9999, it’ll show up on top of whatever’s below it.

2 Likes

This looks like it’s more of a CSS issue than JS, so I’ve moved this thread to the CSS forum where people more knowledgeable about that can assist.

As Dave explained position:fixed takes the element out if the flow of the document and places it where you told it.

If something else happens to be at that same position then the elements will overlap. There is no way to avoid this happening unless you make sure no other elements occupy that space which is not usually viable.

Perhaps you could explain what you wanted to happen as you said this behavior was unexpected?

Dave, I myself wrote the code so I already looked on it,

I might have had a mistake and I don’t know everything about some commands there.

If I understand you correctly, it’s an issue of z-index, but changing it to say -1 or doesn’t solve the problem.

So remove the position:fixed and the top/right/left. Make it width:100% and margin:0 auto;

But then it won’t follow down with users scrolling down (for lack of a better phrasing).

Reposted

Hello @PaulOB

What I expected to happen is that I could keep scrolling down until I reach the end of the footer and the button will scroll with me — but then when I reach the end of the footer the call now button would appear as a standalone element under the footer.

You would need to place something after the footer that is as tall as your button so that the footer can keep scrolling away.

Usually you would add extra padding-bottom to the body element and that will allow the page to scroll a bit more.

2 Likes

Thanks a lot PaulOB

I set the footer’s min-height CSS property to 60px and added the following JavaScript command to the end of the script:

document.querySelector("#mw-footer-container").style.minHeight = "120px";

From Google Chrome (desktop) and Microsoft Edge (desktop), I find it to solve the problem.

Thank you again,

1 Like

Why are you putting a call me button

To get phone calls.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.