JavaScript

Browser-Based Message Display: An Effective Approach for Zoom Events Using jquery.wanker.js

 

The world of web development is evolving every day. Today, we introduce a unique method using jquery.wanker.js to display a message across the entire page when the browser is zoomed in or out. This technique can enhance the user experience, especially in an era where responsive design is essential.

Contents
  1. Setting Up Message Display with CSS
  2. Setting Up the Message Area in HTML
  3. Function Setup with JavaScript
  4. Demo Page: Displaying a Full-Browser Message on Zoom Using jquery.wanker.js
  5. Source: jquery.wanker.js by Mig Reyes
  6. Conclusion

Setting Up Message Display with CSS

First, we define the style of the message area (.wanker) that appears when the browser is zoomed in or out. This section can be freely customized to match the design of your site.

・Set basic styles such as font size, color, and background color.
・Set display: none; to the .wanker class so it’s hidden initially. 

<style>
body {
  font-size: 18px;
  text-align: center;
}
h1{
  text-align: center;
  font-size: 22px;
  line-height: 1.6em;
  padding-top: 20px;
}
.wanker {
  background: #000;
  color: #FFF;
  display: none;
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 2014;
}
.wanker-content {
  font-size: 33px;
  font-weight: bold;
}
.wanker-content p{
  padding-top: 200px;
}
</style>

Setting Up the Message Area in HTML

Next, configure the area where the message will be displayed in the HTML. Assign the class attributes `.wanker` and `.wanker-content` so that the styles defined in CSS are applied.

・Place the `div` tag containing the message properly.
・Use the `data-wanker` attribute to enable the functionality of jquery.wanker.js. 

<h1>Display a message across the entire browser using jquery.wanker.js when zoomed in or out.<br>Try zooming in or out on the browser.</h1>

<div class="wanker" data-wanker>
  <div class="wanker-content">
    <p>Please do not zoom in or out on the browser.</p>
  </div>
</div>

Function Setup with JavaScript

Now we configure JavaScript to display the message. Load jquery.wanker.js and the jQuery library, then activate the feature with the appropriate options.
Load `jquery-1.11.0.min.js` and `jquery.wanker.js` files, and write `$(‘data-wanker’).wanker({options})`.

・Loading jQuery can affect site load speed, so use the optimal method.
・The display speed and duration of the message can be adjusted with options. 

<script src="jquery-1.11.0.min.js"></script>
<script src="jquery.wanker.js"></script>
<script>
$(function() {
  $('[data-wanker]').wanker({delay: 0, duration: 600});
});
</script>

Demo Page: Displaying a Full-Browser Message on Zoom Using jquery.wanker.js

We’ve prepared a demo page to see how it works in action. Access the link below and try it out yourself.

Demo Page: Displaying a Full-Browser Message on Zoom Using jquery.wanker.js

Source: jquery.wanker.js by Mig Reyes

Here is the original source website:

jquery.wanker.js by Mig Reyes

Conclusion

In this article, we learned how to use jquery.wanker.js to display a message when the browser is zoomed in or out. This small trick can provide a unique and interactive experience for users.
With the rise of responsive design, such thoughtful details contribute to enhancing the overall quality of a website.

　
※ Use this technique at your own discretion.
　Please do not reuse the Google Analytics tag in the `` of the demo page.

jquery.wanker.js
RELATED POST