Click here to Skip to main content
15,916,693 members
Please Sign up or sign in to vote.
1.00/5 (2 votes)
See more:
Hi I have this html and CSScode:
HTML
<div class="col-8 border border-1 border-dark rounded rounded-2 p-0">

<div id="toolsBox"> <button >

</button>
<button >
</button>
<button onclick="toolBoxFunction(event,'zoomInBtn')">
<img src="~/assets/sitetheme/zoom-in.png" />
</button>
<button  onclick="toolBoxFunction(event,'zoomOutBtn')">
<img src="~/assets/sitetheme/zoom-out.png" />
</button>

  <button >
  
  </button>
  <button >
    
  </button>
  <button >
    
  </button>
</div> <div class="overflow-auto p-0"> <div id="adsBody">

      <div id="dimensionsInfo"></div>
      <div id="selection"></div>

  </div>
</div> 
</div>

and CSS is:
CSS
#toolsBox {
  
    display: flex;
    justify-content: start;
    width: 100%;
    height: 42px;
    background-color: whitesmoke;
    text-align: center;
    border-bottom:2px solid black;
    border-radius: 5px 0px;
    color: black;
    overflow-x: auto;
}


    #toolsBox button {
        width: 40px;
        height: 40px;
        margin-inline: 2px;
        border: 1px solid transparent;
        border-radius: 5px;
        background-color: whitesmoke;
    }

    #toolsBox button:hover {
        transform:scale(0.95);
        background-color:lightgray;;
    }

    #toolsBox button img {
        width: 25px;
        height: 25px;
        text-align:center;
    }
#adsBody {
    position: relative;
    min-width: 1000px;
    max-width: 1000px;
    height: 3000px;
    background-color: whitesmoke;
    cursor: crosshair;
    border: 1px solid black;
    border-radius: 0px 5px;
    overflow: visible;
    transform:scale(1);
}

as you can see my adsbody div is bigger the parent so get the scroll bar.
I want add button for zoom in and out of the adsbody div. so for example when user click on zoom out can see the entire of adsbody without needs scrolling or zoom in for only see part of it.
also my user can draw shape in the adsbody div with mouseclick/touchScreen. so I do not what the Axis of width and height changed so I can get the user position of draw correctly.

I try this javascript:
<pre lang="Javascript">function toolBoxFunction(event, btnName) {
    let computedStyle = window.getComputedStyle(adsBody);
    let currentScale = computedStyle.transform.match(/-?\d+(\.\d+)?/g)[0]


    if (btnName == "zoomInBtn") {
        var newScale = currentScale + 0.1;
        adsBody.style.transform = 'scale(' + newScale + ')';

    } else if (btnName == "zoomOutBtn") {
        var newScale = currentScale - 0.1;
        adsBody.style.transform = 'scale(' + newScale + ')';
    }
}

it is worked but not correctly and the adsbody shrink in middle of the parent div or get the more scroll bar. also the Axis is get wrongly.
for example the adsbody shrink and have empty space between parent. But I want position of the is not change and still fil the parent.
how can do this?

What I have tried:

I try this javascript:
JavaScript
function toolBoxFunction(event, btnName) {
    let computedStyle = window.getComputedStyle(adsBody);
    let currentScale = computedStyle.transform.match(/-?\d+(\.\d+)?/g)[0]


    if (btnName == "zoomInBtn") {
        var newScale = currentScale + 0.1;
        adsBody.style.transform = 'scale(' + newScale + ')';

    } else if (btnName == "zoomOutBtn") {
        var newScale = currentScale - 0.1;
        adsBody.style.transform = 'scale(' + newScale + ')';
    }
}

it is worked but not correctly and the adsbody shrink in middle of the parent div or get the more scroll bar. also the Axis is get wrongly.
for example the adsbody shrink and have empty space between parent. But I want position of the is not change and still fil the parent.
how can do this?
Posted
Comments
Richard Deeming 8-May-24 3:41am    
You want to shrink the content, but still fill the parent?

That makes no sense.
Member 11400059 8-May-24 4:36am    
yes for example something like the tradingview website chart. in this site you can zoom in/out and change the view without the content position change and the chart still the same (fill parent) in all form.
Richard Deeming 8-May-24 4:39am    
Something that's zoomed out so it's 100px wide cannot "fill" a parent that's 1000px wide.

So either you need to disable zooming-out past a certain level, or clarify what you're actually trying to do.
Member 11400059 9-May-24 1:57am    
this div worked like whiteboard. user and draw their shape on it the save it and the other users can see it. so I want user can zoom it and out on adsbody div and see this area in better state
Richard Deeming 8-May-24 4:43am    
To fix the position, you need to set the transform-origin:
transform-origin - CSS: Cascading Style Sheets | MDN[^]

By default, transforms will be applied from the centre of the transformed element.

1 solution

A simple search for zooming div content brought this handy little article[^] up. What I like about this particular version is that it explains the pros and cons of the different approaches, and explains how fixed sizes are affected. If I were you, I would base any implementation on this.
 
Share this answer
 
Comments
Maciej Los 8-May-24 15:42pm    
5ed!
Pete O'Hanlon 8-May-24 16:11pm    
I thank you kind sir.
Member 11400059 9-May-24 1:58am    
thank you. I am going to try this link right now
Pete O'Hanlon 9-May-24 3:30am    
Good luck.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900