1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

How can I make the dimensions of a scaled element permanent?

Discussion in 'CSS' started by SoftLink, Jul 8, 2024 at 6:39 AM.

  1. #1
    I'm trying to make the dimensions of a scaled element and all its children permanent.

    When I do what is below the element's dimensions change dramatically, not the same as the scaled element.

    How can I fix this?

    
    
    function scaleElement(elScale, elCntnr, b4RptBldrBlk) {
       var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0, elCtrl, rctCntnr = null, cntnrWidth, sttWidth, sttHeight;
     
       if (typeof elScale == 'string' || elScale instanceof String) elScale = document.getElementById(elScale);
       if (typeof elCntnr == 'string' || elCntnr instanceof String) elCntnr = document.getElementById(elCntnr);
       if(!elScale) return false;   
       if(elCntnr == undefined) elCntnr = null;
       if(b4RptBldrBlk == undefined) b4RptBldrBlk = false;
       
       if(elCntnr) {
         rctCntnr = elCntnr.getBoundingClientRect();
         cntnrWidth = rctCntnr.width;
       }
         
       elScale.ontouchstart = scaleMouseDown;
       elScale.onmousedown = scaleMouseDown;   
    
       function scaleMouseDown(e) {
         var x, y, rct = elScale.getBoundingClientRect();
         
         elScale.style.transformOrigin = "left top";
         
         e = e || window.event;
         e.preventDefault();
         e.stopImmediatePropagation();
         e.stopPropagation();
         
         if(e.type == "touchstart") {
           x = e.touches[0].clientX;
           y = e.touches[0].clientY;
         }
         else {
           x = e.clientX;
           y = e.clientY;
         }
         
         pos3 = x;
         pos4 = y;
         sttWidth  = rct.width;
         sttHeight = rct.height;
             
         document.ontouchend = closeScaleElement;
         document.onmouseup = closeScaleElement;   
         document.touchmove = elementScale;
         document.onmousemove = elementScale;
       }
    
       function elementScale(e) {
         var wdt, hgt, x, y, lft = null, rct, rctScale = elScale.getBoundingClientRect();
         var arScl, arChlds, child, scl1, scl2;
         
         e = e || window.event;
         e.preventDefault();
         e.stopImmediatePropagation();
         e.stopPropagation();
         
         if(e.type == "touchmove") {
           x = e.touches[0].clientX;
           y = e.touches[0].clientY;
         }
         else {
           x = e.clientX;
           y = e.clientY;
         }
             
         pos1 = x - pos3;
         pos2 = y - pos4;
         
         wdt = sttWidth + pos1;
         hgt = sttHeight + pos2;
         
         if(wdt < 20) wdt = 20;
         if(hgt < 20) hgt = 20;
         
         if(elCntnr) {
           if(wdt >= cntnrWidth) {
             lft = 0;
             wdt = cntnrWidth;
           }
           else if(rctScale.left + wdt >= cntnrWidth) {
             lft = cntnrWidth - wdt;
           }
           if(is_numeric(lft)) elScale.style.left = lft + "px";
         }   
         scl1 = wdt/sttWidth;
         scl2 = hgt/sttHeight;
         
         elScale.style.scale = scl1 + " " + scl2;
         
         /* with this remmed it works fine but temporary
         
         rctScale = elScale.getBoundingClientRect();
         arScl = [rctScale.width, rctScale.height];
         
         arChlds = Array.from(elScale.children);
         arChldScl = [];     
         for(let i=0; i < arChlds.length; i++) {
           child = arChlds[i];
           rct = child.getBoundingClientRect();
           arChldScl[i] = [rct.width, rct.height];       
         }
         
         elScale.style.scale = "";   
         elScale.style.width = arScl[0] + "px";
         elScale.style.height = arScl[1] + "px";
         //now the size changes much more than the scaled version - WHY?
         
         for(let i=0; i < arChlds.length; i++) {
           child = arChlds[i];
           child.style.width = arChldScl[i][0] + "px";
           child.style.height = arChldScl[i][1] + "px";       
         }
         */
       }
    
       function closeScaleElement() {
         document.ontouchmove = null;
         document.onmousemove = null;
         document.ontouchend = null;
         document.onmouseup = null;
         if(b4RptBldrBlk) {
           elScale.ontouchstart = null;
           elScale.onmousedown = null;
         }
       }
    }
    
    
    Code (markup):
     
    SoftLink, Jul 8, 2024 at 6:39 AM IP
  2. SoftLink

    SoftLink Active Member

    Messages:
    120
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    60
    #2
    I think my problem involved a timing issue.
    I moved the conversion from scale to styles into the closing function.
    Now I'm having trouble figuring out how to change fonts to match the scaled fonts.
     
    SoftLink, Jul 8, 2024 at 11:19 AM IP
  3. GreenHost.Cloud

    GreenHost.Cloud Member

    Messages:
    189
    Likes Received:
    14
    Best Answers:
    3
    Trophy Points:
    33
    #3
    he issue you are facing is because setting the scale of an element affects the dimensions of its children as well. When you reset the scale and manually set the width and height of the element and its children, you need to take into account the scaling factor.

    To fix this issue, you can calculate the scaled width and height of the children based on the scaling factor you used for the parent element. Here is how you can modify your code:

    // Calculate the scaled width and height of an element based on the scaling factor
    function getScaledDimensions(originalWidth, originalHeight, scale) {
    return {
    width: originalWidth * scale,
    height: originalHeight * scale
    };
    }
    
    function elementScale(e) {
    // Other code remain the same
    
    elScale.style.scale = scl1 + " " + scl2;
    
    // Reset the scale and set the width and height of the element and its children
    elScale.style.scale = "";
    elScale.style.width = arScl[0] + "px";
    elScale.style.height = arScl[1] + "px";
    
    for (let i = 0; i < arChlds.length; i++) {
    child = arChlds[i];
    // Get the scaled dimensions for the child element
    let scaledDimensions = getScaledDimensions(arChldScl[i][0], arChldScl[i][1], scl1);
    child.style.width = scaledDimensions.width + "px";
    child.style.height = scaledDimensions.height + "px";
    }
    }
    Code (CSS):
    By calculating the scaled dimensions of the children based on the scaling factor used for the parent element, you can ensure that the dimensions of all elements remain consistent after resetting the scale.
     
    GreenHost.Cloud, Jul 10, 2024 at 5:07 AM IP
  4. SoftLink

    SoftLink Active Member

    Messages:
    120
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    60
    #4
    GreenHost: thanks. I did figure this out and pretty much did just what you suggested.
    I also figured out how to set the fonts by getting the pixels from getComputedStyle and then multiplying it by the Scale.
     
    SoftLink, Jul 10, 2024 at 10:20 AM IP