SnipSnip.pro

Stop the Scroll! Float the Admin Notice Above the Editor in Code Snippets Pro

•

, , , , , ,
Hey Look Note Floats

Okay, here’s a snippet that changes your game. It allows the admin notice in Code Snippets Pro ❤️ to float above the editor. This simple enhancement improves the user experience by keeping important messages visible while preventing your page from scrolling while you’re editing your snips! Allow me to explain a little further…

Once upon a time, when you hit ‘Save’ on a snippet inside the Code Snippets Pro ❤️ code editor, the entire page would refresh.

It got the job done, but it was bothersome because you couldn’t undo or see what went wrong, etc.

So the clever developers of Code Snippets Pro ❤️ made a wonderful change where it would save your code without! refreshing the page, and then an admin notice would display at the very top of the page that would indicate if your snippet was saved correctly or if there was an error, etc.

It got the job done, but it was bothersome because if you were working on a large block of code and were scrolled down far enough, the notice would be hidden and you might never… “notice” …if something had gone wrong. And you would keep working and changing stuff and writing awesome snips and and and annnnnd… then you would scroll up and realize there was an error. But you had no clue when it happened or how many times you needed to press Undo! Undo! Undo!

So the clever developers of Code Snippets Pro ❤️ did a great job quickly solving this by ensuring the page would scroll the notice into view anytime a notice appeared.

It got the job done, but it was bothersome, to me, at least. I kept losing my place of where I was working.

So this clever massive fan of Code Snippets Pro ❤️ made a slight modification to the CSS of the admin notice so that now it floats above the editor at the top of your window so you don’t miss a notice and your page doesn’t scroll!

Win-win! Enjoy it now before the bake it in one day!

What it does…

This code snippet adds a little bit of CSS to the admin notice in the Code Snippets Pro ❤️ plugin for WordPress. If you’re on the Add New Snippet or Edit Snippet page, it makes the admin notice float at the top of your window on top of the code snippet editor so that when you save the page doesn’t scroll away. This ensures that the notice is always visible and you don’t lose your place, even when working on a large block of code and scrolled far down the page.

Why it does it…

By default, the admin notice in Code Snippets Pro ❤️ appears at the top of the page when a snippet is saved or when there is an error. And to make sure you see it, the page scrolls to the notice anytime a notice appears. If you are working on a large block of code and scrolled far down the page, it can get a little distracting every time the page scrolls up to the notice when you save. This modification addresses this issue by making the notice float above the editor, ensuring it is always visible and preventing the page from scrolling.

How it does it…

This code snippet achieves the desired functionality by adding a custom CSS style to the admin notice. Here’s how it works:

  • The code checks if the class MakeTheSnippetNoticeFloat is not already defined.
  • If the class is not defined, a new class called MakeTheSnippetNoticeFloat is created.
  • The class has a constructor function that hooks into the admin_enqueue_scripts action.
  • In the add_snippet_page_css function, the code checks if the current page is either the “Add Snippet” or “Edit Snippet” page.
  • If it is, the code echoes a custom CSS style that modifies the position of the admin notice.
  • The CSS style sets the position of the notice to sticky, which makes it float above the editor.
  • The top property is set to 40px to position the notice below the WordPress admin bar.
  • The z-index property is set to 999 to ensure the notice appears above other elements on the page.
  • Finally, an instance of the MakeTheSnippetNoticeFloat class is created to initiate the modification.

Related Snips

Leave a Reply

Your email address will not be published. Required fields are marked *