0
320
ViewsHow to create a zoom in and zoom out icon in flask app?
I have created a flask based UI where there are several html files inside templates and python main.py file. Below is a screenshot of my UI webpage:
As you can see there are two navigation tabs, Reports and Insight Engine.
In this page, I want to make a zoom in and zoom out button at right upper corner. Zoom out button will decrease the webpage size to 80% and zoom in button will increase the webpage size to 120%. They should work similar to ctrl+ and ctrl- in windows. These buttons should be available for both the navigation tabs.
This is my directory structure:
/static
/design.css
/templates
/index.html
/upload.html
/engine.html
/main.py
How can I achieve this?
I am not attaching any code because I didn't try any solution as I didn't find any.
1 answers
Answer question0
You could use the zoom CSS property :
document.querySelector("#zoom").addEventListener("click", function(){
document.body.style.zoom = 1.0;
});
document.querySelector("#zoomout").addEventListener("click", function(){
document.body.style.zoom = 0.8;
});
document.querySelector("#zoomin").addEventListener("click", function(){
document.body.style.zoom = 1.2;
});<button id="zoomout">Zoom -</button>
<button id="zoom">Restore zoom</button>
<button id="zoomin">Zoom +</button>Note that it is not supported on Firefox.