Jump to content
Coffeebuzz

Snackbar??

Recommended Posts

does anyone have experience with creating a "snackbar?" i would like it to completely cover the bottom of the page. how do i set the margins and padding to work on a desktop and mobile viewport? thanks.

Share this post


Link to post
Share on other sites

I'm not familiar with the term "snackbar" in the context of web development. Could you describe what it is?

Share this post


Link to post
Share on other sites

Set the bottom to zero, left to zero and width to 100%. For the animation frames, instead of going from 0 to 30px, make it go from -30px to 0.

I modified the example: https://www.w3schools.com/code/tryit.asp?filename=FKZOXM2O3JB1

Share this post


Link to post
Share on other sites

that was exactly the effect i was looking for, thank you! do you know if i can add a graphic or image inside the "snackbar?" also, how do i download or copy all the source files and rename them so they link directly to my servers? thanks in advance :-)

Share this post


Link to post
Share on other sites

You can put anything you want in the snackbar.

I'm not sure what your files you're referring to, all the code is right there in the example and not being loaded from an external file. Learn how the code works so that you can build it on your own.

Share this post


Link to post
Share on other sites

do you know if i can load the snackbar automatically without having to click on a button and have it appear for a certain time period, like 10 seconds then fade away? or is it possible to add a close icon ( x ) to it so the site visitor can close it when they want? thanks

Share this post


Link to post
Share on other sites

If you learn a bit more Javascript, you can do any of that. You'll need to learn about event listeners and timing. I believe all of it is covered in the W3Schools tutorials.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...