Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

tuanphan

Circle Member
 View Profile  See their activity

  • Content Count

    11,196

  • Joined

  • Last visited

  • Days Won

    130

Posts posted by tuanphan

  4. Posted

    Add to Home > Design > Custom CSS 

    @media screen and (min-width:641px) {
header#topBar {
    display: flex;
    justify-content: center;
    flex-direction: column;
    text-align: center;
}
.siteTitle {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
    padding-bottom: 0 !important;
    padding-top: 5px !important;
}
ul#nav {
    max-width: 100% !important;
    width: 100%;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
section#container {
    margin-top: 150px !important;
}
}

     

  8. Posted

    Add Code Block > Paste code 

    <div class="img-magnifier-container">
  <img id="myimage" src="https://cdn.pixabay.com/photo/2020/01/09/03/41/cow-4751775__340.jpg" width="600" height="400">
</div>
<script>
/* Initiate Magnify Function
with the id of the image, and the strength of the magnifier glass:*/
magnify("myimage", 3);
</script>
<style>
.img-magnifier-container {
  position:relative;
}

.img-magnifier-glass {
  position: absolute;
  border: 3px solid #000;
  border-radius: 50%;
  cursor: none;
  /*Set the size of the magnifier glass:*/
  width: 100px;
  height: 100px;
}
</style>
<script>
function magnify(imgID, zoom) {
  var img, glass, w, h, bw;
  img = document.getElementById(imgID);
  /*create magnifier glass:*/
  glass = document.createElement("DIV");
  glass.setAttribute("class", "img-magnifier-glass");
  /*insert magnifier glass:*/
  img.parentElement.insertBefore(glass, img);
  /*set background properties for the magnifier glass:*/
  glass.style.backgroundImage = "url('" + img.src + "')";
  glass.style.backgroundRepeat = "no-repeat";
  glass.style.backgroundSize = (img.width * zoom) + "px " + (img.height * zoom) + "px";
  bw = 3;
  w = glass.offsetWidth / 2;
  h = glass.offsetHeight / 2;
  /*execute a function when someone moves the magnifier glass over the image:*/
  glass.addEventListener("mousemove", moveMagnifier);
  img.addEventListener("mousemove", moveMagnifier);
  /*and also for touch screens:*/
  glass.addEventListener("touchmove", moveMagnifier);
  img.addEventListener("touchmove", moveMagnifier);
  function moveMagnifier(e) {
    var pos, x, y;
    /*prevent any other actions that may occur when moving over the image*/
    e.preventDefault();
    /*get the cursor's x and y positions:*/
    pos = getCursorPos(e);
    x = pos.x;
    y = pos.y;
    /*prevent the magnifier glass from being positioned outside the image:*/
    if (x > img.width - (w / zoom)) {x = img.width - (w / zoom);}
    if (x < w / zoom) {x = w / zoom;}
    if (y > img.height - (h / zoom)) {y = img.height - (h / zoom);}
    if (y < h / zoom) {y = h / zoom;}
    /*set the position of the magnifier glass:*/
    glass.style.left = (x - w) + "px";
    glass.style.top = (y - h) + "px";
    /*display what the magnifier glass "sees":*/
    glass.style.backgroundPosition = "-" + ((x * zoom) - w + bw) + "px -" + ((y * zoom) - h + bw) + "px";
  }
  function getCursorPos(e) {
    var a, x = 0, y = 0;
    e = e || window.event;
    /*get the x and y positions of the image:*/
    a = img.getBoundingClientRect();
    /*calculate the cursor's x and y coordinates, relative to the image:*/
    x = e.pageX - a.left;
    y = e.pageY - a.top;
    /*consider any page scrolling:*/
    x = x - window.pageXOffset;
    y = y - window.pageYOffset;
    return {x : x, y : y};
  }
}
</script>

     

  11. Posted

    5 hours ago, cameronoutridge said:

    Hi guys, I have the same issue on my site ... www.mapletoniga.com.au. On the home page main image doesn't resize correctly, which cuts people out of the hero image. If anyone can help with code, it would be much appreciated. I've tried the above code but the best result I could achieve still left grey space under the photo, so it didn't look right. You can see screenshots below ... 

    16 minutes ago, samasplen said:

    Thanks @tuanphan - unfortunately that hasn't worked. The video is still cropping. I'm using squarespace 7 .1 if that makes any difference? 

    I'd also like to apply the same to the background banner video that appears half way down the page, if we can get this to work. I.e to force 100% width

     

     

     

    Add to Home > Design > Custom CSS 

    @media screen and (max-width:767px) {
.homepage #page section:first-child {
    min-height: 30vh !important;
    height: 50vh !important;
    margin-top: 90px;
}
}

     

×
×
  • Create New...

Support

Community

Developers

Resources