HTML Magnifier JavaScript Code Documentation

Class: HTMLMagnifier

HTMLMagnifier is a JavaScript class for creating a magnifier element on a webpage.

Constructor:

• options (Object): Options for configuring the magnifier, including zoom level, shape, width, and height.

/**
 * HTMLMagnifier is a JavaScript class for creating a magnifier element on a webpage.
 * @param {Object} options - Options for configuring the magnifier, including zoom level, shape, width, and height.
 * @constructor
 */
        

Method: setZoom

Sets the zoom level of the magnifier.

Parameters:

• value (number): The zoom level.

/**
 * Sets the zoom level of the magnifier.
 * @param {number} value - The zoom level.
 */
HTMLMagnifier.prototype.setZoom = function(value) {
    // ... Method code ...
};
        

Method: setShape

Sets the shape, width, and height of the magnifier.

Parameters:

• shape (string): The shape of the magnifier ('square' or 'circle').
• width (number): The width of the magnifier.
• height (number): The height of the magnifier.

/**
 * Sets the shape, width, and height of the magnifier.
 * @param {string} shape - The shape of the magnifier ('square' or 'circle').
 * @param {number} width - The width of the magnifier.
 * @param {number} height - The height of the magnifier.
 */
HTMLMagnifier.prototype.setShape = function(shape, width, height) {
    // ... Method code ...
};
        

Method: setWidth

Sets the width of the magnifier.

Parameters:

• value (number): The width of the magnifier.

/**
 * Sets the width of the magnifier.
 * @param {number} value - The width of the magnifier.
 */
HTMLMagnifier.prototype.setWidth = function(value) {
    // ... Method code ...
};
        

Method: setHeight

Sets the height of the magnifier.

Parameters:

• value (number): The height of the magnifier.

/**
 * Sets the height of the magnifier.
 * @param {number} value - The height of the magnifier.
 */
HTMLMagnifier.prototype.setHeight = function(value) {
    // ... Method code ...
};
        

Method: getZoom

Gets the current zoom level of the magnifier.

/**
 * Gets the current zoom level of the magnifier.
 * @returns {number} - The zoom level.
 */
HTMLMagnifier.prototype.getZoom = function() {
    // ... Method code ...
};
        

Method: getShape

Gets the current shape of the magnifier.

/**
 * Gets the current shape of the magnifier.
 * @returns {string} - The shape ('square' or 'circle').
 */
HTMLMagnifier.prototype.getShape = function() {
    // ... Method code ...
};
        

Method: getWidth

Gets the current width of the magnifier.

/**
 * Gets the current width of the magnifier.
 * @returns {number} - The width of the magnifier.
 */
HTMLMagnifier.prototype.getWidth = function() {
    // ... Method code ...
};
        

Method: getHeight

Gets the current height of the magnifier.

/**
 * Gets the current height of the magnifier.
 * @returns {number} - The height of the magnifier.
 */
HTMLMagnifier.prototype.getHeight = function() {
    // ... Method code ...
};
        

Method: isVisible

Checks if the magnifier is currently visible.

/**
 * Checks if the magnifier is currently visible.
 * @returns {boolean} - True if the magnifier is visible; otherwise, false.
 */
HTMLMagnifier.prototype.isVisible = function() {
    // ... Method code ...
};
        

Method: on

Registers an event handler for a specific event.

Parameters:

• event (string): The event name.
• callback (Function): The event handler function.

/**
 * Registers an event handler for a specific event.
 * @param {string} event - The event name.
 * @param {Function} callback - The event handler function.
 */
HTMLMagnifier.prototype.on = function(event, callback) {
    // ... Method code ...
};
        

Method: syncScrollBars

Synchronizes the scroll bars of the magnifier.

/**
 * Synchronizes the scroll bars of the magnifier.
 */
HTMLMagnifier.prototype.syncScrollBars = function() {
    // ... Method code ...
};
        

Method: syncContent

Synchronizes the content of the magnifier.

/**
 * Synchronizes the content of the magnifier.
 */
HTMLMagnifier.prototype.syncContent = function() {
    // ... Method code ...
};
        

Method: hide

Hides the magnifier.

/**
 * Hides the magnifier.
 */
HTMLMagnifier.prototype.hide = function() {
    // ... Method code ...
};
        

Method: show

Displays the magnifier at a specified position.

Parameters:

• event (MouseEvent): The mouse event triggering the display (optional).

/**
 * Displays the magnifier at a specified position.
 * @param {MouseEvent} event - The mouse event triggering the display (optional).
 */
HTMLMagnifier.prototype.show = function(event) {
    // ... Method code ...
};