1. JavaScript
  2. Creating a Simple Moving Watermark for websites using JavaScript

Creating a Simple Moving Watermark for websites using JavaScript

Submitted by oretnom23 on Saturday, January 7, 2023 - 16:47.
Language
JavaScript

In this article, we will tackle about Creating a Simple Moving Watermark for websites using JavaScript. Here, I will be providing a simple and free JavaScript plugin or module that generates a simple site watermark. The main goal of this article is to provide IT/CS students and new programmers a reference for enhancing their knowledge and skill using JavaScript Object-Oriented Programming.

How to Create a Simple Moving Watermark using JavaScript?

Creating a watermark for websites is not that complicated. In fact, we can simply add the watermark by adding the HTML script of the watermark on your site interface and adding some styles script for the design. Using JavaScript, we can create a simple Text/Image Watermark for websites by Manipulating the DOM (Document Object Model) and adding some event listener to move the water from the current location to another.

Simple JavaScript Plugin

Below is the script of a simple JS Plugin that generates a moving watermark for websites. The script was written using JS OOP Approach.

  1. class SiteWatermark{
  2.     constructor(id, _html, defaultLocation = 'bottom-right', styleOptions = {}, styleConfig, _containerStyles, _container, currentLocation){
  3.         /**
  4.             * Watermark Styles
  5.             */
  6.         this.styleConfig = {
  7.             width : styleOptions.width || 'auto',
  8.             background : styleOptions.background || '#e1e1e1',
  9.             padding : styleOptions.padding || '0.5em 1.5em',
  10.             border : styleOptions.border || '1px solid #bbafaf',
  11.             position : styleOptions.position || 'fixed',
  12.             "z-index" : styleOptions.zIndex || '99',
  13.             "border-radius" : styleOptions.borderRadius || '15px',
  14.             "min-width" : '15px',
  15.             opacity : styleOptions.opacity || '.5',
  16.             "text-align" : styleOptions.textAlign || 'left',
  17.         }
  18.         defaultLocation = defaultLocation.toLowerCase()
  19.         /**
  20.             * set Default window location
  21.             */
  22.         this.setLocation(defaultLocation)
  23.  
  24.         // Container styles
  25.         this._containerStyles = this._containerStyles
  26.  
  27.         // Watermark Container Element
  28.         this._container = document.createElement('div')
  29.  
  30.         // Watermark Container Element ID
  31.         this.id = id
  32.  
  33.         // Watermark Container Element Content/innerHTML
  34.         this._html = _html
  35.         this.currentLocation = defaultLocation
  36.  
  37.         // Watermark Container Element hover Event Listener
  38.         this._container.addEventListener('mouseenter', function(e){
  39.             e.preventDefault();
  40.             if(this.currentLocation == 'bottom-right'){
  41.                 this.currentLocation = 'bottom-left'
  42.             }else if(this.currentLocation == 'bottom-left'){
  43.                 this.currentLocation = 'top-left'
  44.             }else if(this.currentLocation == 'top-left'){
  45.                 this.currentLocation = 'top-right'
  46.             }else if(this.currentLocation == 'top-right'){
  47.                 this.currentLocation = 'bottom-right'
  48.             }
  49.             this.setLocation(this.currentLocation)
  50.             this.init()
  51.         }.bind(this))
  52.     }
  53.     /**
  54.         * Set Watermark Location
  55.         * @param {"bottom-right" || "bottom-left" || "top-left" || "top-right"} location
  56.         */
  57.     setLocation(location){
  58.         /**
  59.             * Reset container position
  60.             */
  61.         if(!!this.styleConfig.top)
  62.             delete this.styleConfig.top;
  63.         if(!!this.styleConfig.bottom)
  64.             delete this.styleConfig.bottom;
  65.         if(!!this.styleConfig.right)
  66.             delete this.styleConfig.right;
  67.         if(!!this.styleConfig.left)
  68.             delete this.styleConfig.left;
  69.  
  70.         /**
  71.             * Update container position
  72.             */
  73.         if(location == "bottom-right"){
  74.             this.styleConfig.bottom = ".5em";
  75.             this.styleConfig.right = ".5em";
  76.         }else if(location == "top-right"){
  77.             this.styleConfig.top = "4em";
  78.             this.styleConfig.right = ".5em";
  79.         }else if(location == "top-left"){
  80.             this.styleConfig.top = "4em";
  81.             this.styleConfig.left = ".5em";
  82.         }else if(location == "bottom-left"){
  83.             this.styleConfig.bottom = ".5em";
  84.             this.styleConfig.left = ".5em";
  85.         }else{
  86.             this.styleConfig.bottom = ".5em";
  87.             this.styleConfig.right = ".5em";
  88.         }
  89.     }
  90.     /**
  91.         * Initialize Watermark
  92.         */
  93.     init(){
  94.         this._containerStyles = Object.assign([], Object.keys(this.styleConfig).map(k => { return `${k}:${this.styleConfig[k]}` }))
  95.         this._containerStyles = this._containerStyles.join(";")
  96.         this._container.setAttribute('style', this._containerStyles)
  97.         this._container.setAttribute('id', this.id)
  98.         this._container.innerHTML = this._html
  99.         document.body.appendChild(this._container)
  100.     }
  101.     /**
  102.         * Update Watermark Container Styles
  103.         * @param {str} style
  104.         * @param {str} value
  105.         */
  106.     setStyle(style, value){
  107.         this.styleConfig[style] = value
  108.         this.init()
  109.     }
  110.     /**
  111.         * Update Watermark Content
  112.         * @param {HTML or string} html
  113.         */
  114.     setHTML(html){
  115.         this._html = html
  116.         this.init()
  117.     }
  118.    
  119. }
  120. /**
  121.     * This simple project was developed by:
  123.     *
  124.     * SourceCode has been published @:
  125.     * https://sourcecodester.com
  126.     *
  127.     * 01-07-2023
  128.     */

Using the JS Plugin above, developers can simply initiate or generate a watermark for the site that they are building or managing. The created watermarks move around the four (4) corners of the site window when hovered. Each time that the end-users puts the mouse cursor on the watermark, the watermark is automatically moved or transferred to the other corner of the window. Developers can also initiate the watermark with their desired style.

Syntax

Here's a sample snippet that demonstrates the usage of the Simple JS Watermark Plugin.

  1.     /**
  2.     * new SiteWatermark()
  3.     * @param {string} id
  4.     * @param {html || string} _html
  5.     * @param {"bottom-right" || "bottom-left" || "top-left" || "top-right"} defaultLocation
  6.     * @param {object(width, background, padding, border, position, zIndex, borderRadius, opacity, textAlign)} styleOptions
  7.     */
  8.     var styles = {
  9.         background:'#DAEAF1',
  10.         width : '300px',
  11.         opacity : '.9',
  12.         textAlign : 'center',
  13.     }
  14.     let wm = new SiteWatermark('SampleWaterMark',"SourceCodester","top-right",styles)
  15.     //Initialize Watermark
  16.         wm.init()

Change Watermark Container Style/CSS

You can also manipulate or update the Watermark container style using the setStyle() method. See the following snippet for the usage of this method.

  1.     /**
  2.     * setStyle(style, value)
  3.     * Update Watermark Container Styles
  4.     * @param {str} style
  5.     * @param {str} value
  6.     */
  7.     wm.setStyle('background', '#bbafaf')

Change Watermark Content

You can also manipulate or update the Watermark container content using the setHTML() method. See the following snippet for the usage of this method.

  1.     /**
  2.      * setHTML(html)
  3.      * Update Watermark Content
  4.      * @param {HTML or string} html
  5.      */
  6.     wm.setHTML(`<h2 style="text-center">Sample Watermark</h2>`)

Change Watermark Container Position

You can also manipulate or update the Watermark container position using the setLocation() method. See the following snippet for the usage of this method.

  1.     /**
  2.     * Set Watermark Location
  3.     * @param {"bottom-right" || "bottom-left" || "top-left" || "top-right"} location
  4.     */
  5.     wm.setHTML(`<h2 style="text-center">Sample Watermark</h2>`)
  6.     wm.init()

Watermark JS's styleOptions object

Here are the following valid styles that can be set by default using the styleOptions.

  • width = container width
  • background = container background
  • padding = container padding
  • zIndex = container z-index
  • borderRadius = container border-radius
  • opacity = container opacity
  • textAlign = container text-align

If your desired CSS option is not valid for styleOptions, you set it using the setStyle() method.

Example

Here's an example source code script that demonstrates the usage of the Simple Watermark JS plugin.

Interface

index.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Moving Site Watermark using JS</title>
  8.     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  9.     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
  10.    
  11.     <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/js/all.min.js" integrity="sha512-naukR7I+Nk6gp7p5TMA4ycgfxaZBJ7MO5iC3Fp6ySQyKFHOGfpkSZkYVWV5R7u7cfAicxanwYQ5D1e17EfJcMA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  12.     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
  13.     <style>
  14.         html, body{
  15.             height: 100%;
  16.             width: 100%;
  17.         }
  18.         body{
  19.             display: flex;
  20.             flex-direction: column;
  21.         }
  22.         body>nav{
  23.             flex-shrink: 1;
  24.         }
  25.         body>#main{
  26.             flex-grow: 1;
  27.         }
  28.     </style>
  29. </head>
  31.     <nav class="navbar navbar-expand-lg navbar-dark bg-primary bg-gradient">
  32.         <div class="container">
  33.             <a class="navbar-brand" href="./">Moving Site Watermark using JS</a>
  34.             <div>
  35.                 <a href="https://sourcecodester.com" class="text-light fw-bolder h6 text-decoration-none" target="_blank">SourceCodester</a>
  36.             </div>
  37.         </div>
  38.     </nav>
  39.     <div class="container-fluid px-5 my-3 d-flex h-100 justify-content-center flex-column" id="main">
  40.         <div class="col-lg-10 col-md-11 col-sm-12 col-xs-12 mx-auto">
  41.             <div class="card rounded-0">
  42.                 <div class="card-body bg-white border-3">
  43.                     <div class="container-fluid">
  44.                         <h1 class="text-center">Simple Moving when Hovered Watermark for sites using JavaScript</h1>
  45.                     </div>
  46.                 </div>
  47.             </div>
  48.         </div>
  49.     </div>
  50.     <!-- <div id="0623">
  51.    </div> -->
  52.     <script src="./watermark.js"></script>
  53.     <script>
  54.         var wm;
  55.         window.onload = function(){
  56.             styles = {
  57.                 background:'#DAEAF1',
  58.                 width : '300px',
  59.                 opacity : '.9',
  60.                 textAlign : 'center',
  61.             }
  62.             wm = new SiteWatermark('testWatermark','<a class="text-decoration-none fw-bolder text-muted" href="https://sourcecodester.com">sourcecodester.com</a>','top-right' , styles)
  63.                 wm.init()
  64.         }
  65.     </script>
  66. </body>
  67. </html>

Result

Simple Watermark JS Plugin Sample

I have also provided the sample working source code zip file that I created that demonstrates the Simple Watermark JS Plugin. You can download it by clicking the Download button located below.

That's it! I hope this Simple Watermark JS plugin for websites will be useful for your current and future projects.

Happy Coding=)

Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.

FOR YOUR OWN SAFETY, PLEASE:

1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.

Tags
Javascript
Javascript Tutorial
JavaScript Custom Plugin
JavaScript OOP
JavaScript Object-Oriented Programming
js
JS tutorial
Site Watermark
watermark
Moving Site Watermark using JS
HTML
css

Add new comment

About text formats
  • 657 views