I'm trying to increase only the top value of the rootMargin by 50px. The code I'm using for the option is rootMargin: '50px 0px 0px 0px'. And that isn't working.
Although using rootMargin: '50px 0px' can work for my case, I have no desire to increase the bottom value.
The full test code is listed below. I did not create a demo on jsFiddle because jsFiddle wraps the result in an iframe, which would be the root. I cannot set that iframe as the root on jsFiddle so the demo would not work.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>rootMargin test</title>
<style>
* {
margin: 0;
padding: 0;
}
#full-height {
margin-bottom: 100px;
height: 100vh;
background-color: lightgreen;
}
#observee {
background-color: lightblue;
}
</style>
</head>
<body>
<div id="full-height"></div>
<p id="observee">I'm being observed.</p>
<script>
var observer = new IntersectionObserver(
function(entries) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
console.log('Intersected.');
}
});
},
{
rootMargin: '50px 0px 0px 0px'
}
);
observer.observe(document.querySelector('#observee'));
</script>
</body>
</html>
While this is an older question, I think the following may help users with similar issues.
You can run the demo in JSFiddle - just change the root you want to use as the trigger. See the demo below to highlight this.
I think you may be confusing the rootMargin properties. From you question, it sounds like you want the observed element to trigger 50px before it comes into view. If that is the case, then you want to increase the root bottom margin: 0px 0px 50px 0px if you want to trigger the element only when it reaches 50px inside the root, then use: 0px 0px -50px 0px. You can leave off the last value like: 0px 0px 50px which would be top left/right bottom
See the demo below:
JSFiddle
Related
i try to set a margin bottom to the body element, but it wont work as expected...
document.addEventListener('DOMContentLoaded', (event) => {
if(window.outerWidth > 768) {
let footerHeight = document.querySelector('footer').offsetHeight;
document.querySelector('body').style.marginBottom = footerHeight + "px";
}
/* .... */
});
its just doing nothing.
the weird part i dont understand: it works as expected when i try to set it as a paddingBottom, but when i change it to margin...
my current solution for now is to wrap it in a setTimeout() like:
document.addEventListener('DOMContentLoaded', (event) => {
if(window.outerWidth > 768) {
setTimeout(function(){
let footerHeight = document.querySelector('footer').offsetHeight;
document.querySelector('body').style.marginBottom = footerHeight + "px";
}, 1);
}
/* .... */
});
let footerHeight gets the correct value in any cases.
no other scripts are loaded which i can think of could affect this...
The simplified CSS & HTML:
body {
margin: 0;
padding-top: 48px;
}
.content-wrapper {
background: #fff;
padding-bottom: 40px;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.08), 0 4px 4px rgba(0, 0, 0, 0.16);
}
footer {
position: fixed;
bottom: 0;
z-index: -1;
background-size: cover;
background-position: center;
display: flex;
width: 100%;
}
<!DOCTYPE html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
</head>
<body class="start">
...
<div class="content-wrapper">
...
</div>
<footer style="background-image: url('/images/polygon.jpg');">
<div class="container">
<div class="row">
...
</div>
</div>
</footer>
<script src="/js/script.js"></script>
</body>
</html>
creates this type of footer reveal effect: https://codepen.io/hkdc/pen/BLJAVL
but to make sure that the whole footer is always visible i add a margin-bottom of the footers height to the body element.
Anyone has an idea what is happening here or am i getting wrong and can explain it?
I'm not sure you understand body tag correctly. You footer is in that body too adding margin to body cant have any effect in this case cause there is no element (at least visible) after body. Padding works cause padding is for the elements inside the body. If you want to add margin before your footer you can use previousSibling property and set its margin.
I have created an iframe (lets call it a div to simplify things), that has a transform: scale property that I'm calling with javascript.This scales the div, but however, it also shifts the div upwards. I would like the top to stay in the same place.
Background info (from answers suggestions): I want to create something that looks like google docs. I have created an iframe that will transform when an input box value is change (like google docs). I want the top to remain in the same place (like google docs).
1) I have tried in javascript to implement document.getElementById("textareathingy").style.transform = "translateY(1000px)"; document.getElementById("textareathingy").style.transform = "scale(" + percentage + ")"; I tried to put the translate both before and after the scale, but both methods do not work, and the div continues to go upwards when I put translate first, and the div does not zoom in when I put scale first.
2) I have tried to put position: absolute; to counteract it going up, but that doesn't help either, and it gets rid of my scrolling feature on the div. So in answers please don't use position: absolute.
3) I have tried using the zoom feature, but that doesn't zoom in on the contents of the div, so that also doesn't work.
For some reason, there is no error messages in any of my attempts.
Here is also my css for the div:
#textareathingy{
width: 820px;
margin: 20px auto;
height: 1000px;
border: none;
display: block;
padding: 75px;
background-color: white;
box-shadow: 0 0 5px 0 rgba(0,0,0,0.2);
}
Here are two pictures from google docs that represents what I want.
Notice how they both have the same "top" position, but it is zoomed in.
Use the transform-origin CSS property to set the point in the element that the transform should originate from. Set this to top so that the scale extends downward from the top point.
img { border:1px solid black;}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Transforms</title>
<style>
img {
/* Single Transformations: */
transform-origin: top;
}
/* Triggering a transformation: */
img:hover {
transform: scale(1.5, 1.5);
}
</style>
</head>
<body>
<img class="car" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAS8AAACmCAMAAAC8yPlOAAAAt1BMVEX////e3+AFM2EAMF8AHlYAJ1y6w87r7vIADE8AL18dPmjc3d4ALF0AIlgAKlwAKFvl5eUAIFcAG1UAF1MAFFLp6uoAEVH5+fnw8fHFzNZyg5tQY4E2U3cANmTR1dm+xtHd4ujb4OauuMWRn7HKz9QoSG+ZpLJidpGGlamxu8hugZl6jKJWbInQ2OC8wcjJztNGXHwhRGwAAE47WX2XorCjrbkzTHBVaIUPPmteb4mNl6evtb+Bj6FtBcyeAAAVp0lEQVR4nO1da3uquhKukkhREghY8QKKUkRFLS6L1bb//3edXECtolWrtvs8vOfDWRu5TCYzk7klfXjIkSNHjhw5cuTIkSNHjhw5cuTIkSNHjhw5cuTIkSNHjhw5cuTIkSNHjhw5cuTIkSNHjhw5cuTIkSNHjhw5cuTIkSNHjhw5cuTIkePakN3uc6nTaDy3210KdxI2ZIa6ZVm/TdufQr077AfzsgKBQQAwGAAghEAENawqUrHoOOVyeTbzF7Y9j1pv43EQjJrh5+Dd68cN+bfpvyfc3miOTAIxRITyyRSoVk2AlKIkFRWV/VCt1WrVbdB7Ur4ahr/yJr89jvugFNWoFBFSLGpNr9eYuPUt1QuhvXO7RbXT7U4m7UapF3uDsDlavfkIIIRMMxj+v8tZ3SsDjPCiOWxgLeSXLKvuThgz+pQbC8VpRfO5bduLBFQZoxbFG9PHcPAaD0uNidzoBwsqhwSPS//Hdk4OIZLUWUyHKDexGobBm73ERtU0AKECAzWN2i1VoZCUbagCWMUaRIgAw5QWq2Bus7uBNnr+7XHdBm5Q06gZn78HPjINXCxijFVqri6CpPBFgf1LM/3hb4/t2rAmpYBgMT6MlZO5IlBkrOH/yIYCZvH/iyXrNvrhW9k0E25lsERRqaAxRQPMsWALZe2xRlUUQcx0kf5v6c8kyV86CqFLJlfexOfYcAxVl6PY/e3B/gSW3OmPZpQJSFN3BYPxiPkMpqE5/ry1GjUHXtyjjutk0nXl+v7LXGDKyVv54jAIWgvFNJC24ZqEkfnWufMgrwYvWlJOYWmHTVijDISK44+bdKWbuLJ8mh9fLxp7rKjLjd5gXoQArj+jGrN+Brf/PsLqtrowcULArDrz0aDfmbgXuAA28Q784ja8wKkSTU0UE4T/QVNWlFJOUYEyiotWM+50T2MT9cfqdXkH9QCt6iKuzHxILoWRisRHIWq6VxzKXTBnsy0hpMzDuOMenXBmkDqlXn8QjoK3lu2Xl46wb5B7WlURLanU00JQdcozuzVuDnqdyd5LZa9IxMqrkeA/FiwNEWWXsz8mAcqiTuyFQeQ7iC14dMUjPM5WqbMqHXEcmFPBllNIhbZqLluh13G3X9yzq0Itca31X/Ji3RkbMfqqO1a9W4q9UTRzVMS8hV2f4GxIVAgBKs4HvY1FfH4jmjD9YN64+7gvxERjegHH6wsydQCiMjKpFH3v0nMB+xoKUQdNouxhodLe08xEmkoUlhJh7o5MyO9Rzei/wbGeyaUrWl+I/1EfLFOWhH5pkBorFhgCA2jScjbzRdaLRtpvDCsaas8Uf/XWihZUOgFg2qt+XYE1UHOawmrVB1iYfrX6X+BY32C0gtHmSnGHVZRHGnXoCXXEZr7dCprvr/04/phOX9rtCkNBQN/gqYmiJ10vFNjPL9P4NRzbZQUhvO0La8Dvc82se07CMWD/dY41TUZodbB1yRFjSgy1qc6ioPn5Gk9fntvbPCkcgd5H5a0bxP3P0zhsKSZdN1OmKUgZcIfV6mPCLypm6y+vlVaEuHT1ti/GXOKWb0HY/5i2T+LPHqZEfclgI5W89sdgPKNRl/AlJFgNXfHVssEvqbXoz3JM9jU+yztKEPFV/vnpXCZtoULQ9MBP9K2V57jpIzVRS5S4X70ZEFppjP8mxyYSI1mV3J3rcpVx0b+UVwxPS+QdYzZl2kfLTDiG06Wx5JuKuPAXtbL0yKZTs/fd1B7TSBg8na2GG368oeY3j+r6dAWF90VFyhYBemmeaKX557RSLIxknPVbABnN89Vnv/dSKVzANv0Ttb5/Rn8ZqQnHFDNxWBs2UAULA/ee7PgOY86u6mfmj1aZzTL1I+gKicoRtfzTl8o54kYXyOIp9+rtTwyT9dicCxlrtGqcY7j6dzgm20yCJLN34PeusXGUWB4MUlffsYPP14/EqfiOEVNitE/jbOW9nKQqFDATqf1JS2glBuHfyI+5DptBBR5OcJbMvbS9JFG+EVT0o+Az7j2L0R5yN54VMjyJX4xjfT/VSsMXM/hsA/59TRn9ATvmqowYvHSP3DP0ayYgUM0KAVWNRkOEqEvq7q+CJqszUnef+vsV/Snl3wz1TzZ6+tNgmbqwYCk41llwGZNw1f716ojP/Yg364El+w6mmC23wQJvXwEGDQCzAkoWTrLomseTUMNK0SlTFo5Hn++vPl6xgIlGTIeFcI2x4mxeSsol/v2hL4yCQlCr95ss8wgjwxm3/GURq84sGodx47ChkN3nntecFwmVKYjVo+U1KWEhhEpRpfdrxeXMjlrjYBS+9+OPIWXhdkwlOKiLpXoNxbCFHes5Yq0sqohEv9aBYSXmVeW6Jgn9Mv6Nvn3QnQy95srHNYOwDIZyJFP4RQY5BzVR7KYBKVGWfvRG1fiTspCr8edu9Y7aMWFah3NTS6iFJgziE7PkV0XD2B8VRe3U1IAlT4Zx+Gb7M0fSiMG7A3i69ST+JTwUHISI5diyJFZKE4iTpgNSdqoIOPOw15DvyrUOyBzE49mpFKsuy647aQx580nQspeqWauyPiYAEGT+m5qxXJwK1VjE4jOdwDBSprJ8o2E69ltAbch9pC2TX0qteZ23sxLtc6MUe0U1ClaRPXO0TYsKxqeqMecNQl5i5xtN30QbQWRGUkPArBF75MWHCg9XQiODX2h29VpzBPrs/yxWcUtaoAbNYDxf+GVHwQgkeny8LoC0dbVN7o18bavam3AOQ2Ro5SjsTW4lbJM9fuHaofLqDzAiwaGfLN5UR1lI9fiTsnC5zQOJV57WQqhVV5uFUW54K+XRBGiHyRJbscBi1H++QTzQ5fzaVMIk8+07gXYbKU5f1D3kn3prqboZujYLR8E4sv0lSdfxx50GqG4jbo55Qwb8wjYutc4onlyXaXXGL6nM+nN9JvLF0ndPWFVqwQX+nay3JaCeTNJY9LpSwFEyWMuS41mSqphnPcMaMrxg4WhfW2QkjAwnGnSuqJ1MrDD/10BVH8MT3jz795jgX/fUr0wAch9YA2wrQXSE1d22wI7p7kQ11qkXHXiKQ570Bm9qzdgqpkgqBOZ80LnSOsDKs5ByaaggY37y+M+FjAxWtLYNlMDMFJNv0A2QCU8wAjLV0cjZXkMVjSB/cCRuORmMX9qDvDIhOpTPuQY0wt4+GTUTXJhpkDsnD7ne7TVnEKBNAQoaUqv3U9Xk5f8+QrXRTbNLMzT4/qbrQ570A6e6bmaTaBj7s56pAU82QeDfOIAdo4MOxc0h94KZsZYzDfzAXxrx8FE1+tejLhvvaHHrT+zC6vfj3rDU6DKBojxT2B4UBjC/VJUGnF1GdPuEUozQzb+xg7CGECGE9aHNVoOS/CDHtiicY+eyAU8emU6DmwvXA4u7qvfO8g2ra0dMwRoAxblXGkaiCixdRIxP5VMy7tLVIZv3+c42OkT9El2qCOHWnCdv1dkF7xsybQT3GYYsgVvs5DhuiOQF2ubXwjdRknAswgsyMHMqXugGwXUmFtf/0iT04TeTEGylE6T5g9trKUlW2zjbIbCKiWt/F7Su7VD0bBOhf99NQs/c6GSVjVUujassds+OQ4/BhawudBmx56OJjgZ+56KHCQbL5vfGxPXXOkmSmNXqlSnDqucKWJeaLy27BeAG8NDseqLsRoZq2MPTXjgwkjAy2bVJMaRqis+1YCy1iu7hS3AMgXI1hyI2VOCfngOeOELElLXLXMesZ/7M+RsSyq+TYmzZHfbifjzs/mDEDcNwL396G1ZgqCjeuiB3hzFz5Q9vrhgIIw9K6YawMf3v6pn09CjXyQkG4DVSTVagQMTEdnip++GaxnW2IVg2gr67/s/JwNYS8gwlGhwwSm5EiKZKBCyj8KMhP/ThqbKyQUz5pbbcb26ya2jL65M0c+ldFH1Ztevki+plTMapJlle2YSbiqWkwOoizlYztxS2SBXw3vcqZLlk9cwF+5OlJjA4loCOJbTfmYPQKVnYPajo9YKndmHNVJKabctDaK+aJCF82CbLjf4oWgKDPyctz/t0i8qNU1TNg4ZzsgBJLxYr37OqdUIdKl9QcLNR+P1N3+JNA+lrSuXEU1A0xFtcEvIkYB/NE1vyJH736b08RX46aPQo+VZZPRQI92tctiSIomb/Y+oNRi0JiMybUjt/7Ct0BV/PM2CqReGjIAXBFut1j/vhammIcEd9/HbZH8CzQ0FFKkr2g6tqmV2rSWpMIfZrm7fO8Aaa6SjZfUGic3UyRJfEuF8xMdXEJ7BaXLhUFPUrG/Jemkl7ovFdwwxzDuB5ERp9QpkzZ8bM4vOY00Psj6+NWnrbw7zjQ/PPZJiH4HkPZMBXEx2yeBOiBKLpDnmV1yLkJuMbYWZ1V3yekiDBr4cF3j3IhSJg7FJwf7+tTa+seBCL7fMYNgTgpw6+Rwyxxlo2mzNVjfeb7vRCkyvGN+Gqq50dDMLE4y2R/Vh9wLro8OIlswlQ73MzAc9bj9sG+KGDbwE1mdkxkyHsP2/I25pXPeZGFhwtsNSLUlE5uebOsaT2i5uUItwVzE6NC1BlTcJTod0uPKU06VNB0VnBVBeBH9ZUPJRMbB98IU9/eh5+fAwrKX36lM9npplZo8x6A8/6/Jyuj0U25QPkfP2lzhoR1MV6xj5WCqvRL0cfBX2bon/nCIysGd/2GhyFtcRiZXJZGn1Nnj4NNIOw6MP/fE7Jg/xUlWP6z1IU5xnUJrUBxH1gqw4auF9+ocotFdct8zpGEPGNnsRPLIb+wewbPssAzP/9LJVbShcm5jhKy3bCmhZRJZX6hxr17nGzIppgWexSRMeSL6zuCs76vkeNAOH5yTJEtYW3dvJcJu6G4Ize1guWZ3/2OqU4VAxsvCUUNZkJOSuHZP2w2yDQhL1psF2axlSQ8QpU1YBjL45DvwoluEyuh4w8eET+mXyZZ32f5XNESsgdOQZEhjMSG6lHbO0Yi+8OHldbj3RsgpfJIsAmSL1qDvA4LCUpkdvUjdZGgryRIRmtNNioD7CqoI8NedoRh+F8fZTxJoayOoEEIASaHTZkNn+Y7/DU38GOszEAarktNJJJIbhZh8oenoGw9hO+X07QECLlSwZfnkNJnW408rAHY7GNw2cGkKyctpUEmgz8Go3fAaMHBzo3Dqaiul8fGlZxJOaWzTO8X1eEh4S5CTWWG+XkfZgS3pmwACkzQR6LEMnBcgjzv870J7gB+yqy8nDk8/0LQGyI9RW0J0B9QF71dAal5d75LzdCPUgKAKx+CLn0V8oK2TOgEYafnLxXSh5e7f6cgvv3B3/Nhss7H3ebY7tMTX3hlxKS4WJFuMiZ2ebxJbwTNAXy5a5bZWEJ50gfZdToZLpOcmV9ZquockghS+SC4gXfm60ho+qPvIabXGT2AXNzqs/UcsZTE0D47ik9YvkLFdwLovuTSbUmJGihZimUB8XuZ06eeWgBZ/mJs4sXpXRzh4IhgMVo0OvWeZoacWdiirLfGGl8u6z+zgpyQad0J4gJZV6jWANf4JcsfgoZqkL8QnzEgLEE/vkJ8iXcPmhE1ZCpRuzoSjLlBsqsZi5/MeLOIjdg+N5tXUwn+O5Tqo7ZmbsxdiopeQdTNjyiOjuelUc2MBD+0ofNI0NuASqrbP9lYgBub1/AfT0wDrYqo9QlzbyjDyFfrZiJwgfyYKz2eu7yKGBNeiO7aKRnZggYIpTVsx+Rq1z+Cm2yXdO7ExaUTix8VZRd0u8AQR6fzoxcqCWX+sy2nV2w3UDu9mg4YZA0BX6cXw818sH5xVbSK1atTwLjlyp86X/ZA24k/Gobe+LP6x2SSXhN6Wil5xRMhmFL4aeWCX0sxNneu1wFG/lau/8T//EeYCMlYjbb2cMoJcepNHblSw4ewZbxIddocLZktnIIe//xiDKFpwHgcyrwSjqBVvlLc9pNkZ42kD0EDyqcvA/Ca4xWgvon/LITFWWXLc5GH6UL9gfKrqAMkL8O0dZFTxcdGt31kcbU2aagpc2EO8sT+TgFgunj3BGota7UP1/iaQtOUFHLXF58KKJLFsltFmwbSncBHbD2LviVOWIZaCK6DLKOJVY0YhZb4fB6eQKZLbU8pNabWlbKfQgMkQJgphesK7fyuHwXsDRScryMF2RwLITC2yn4+zspoTYfDC85Q/YYWNoCPYsFEGcoeRFz/5n615SCx3vvObdYtkkS/iHKKDN2CV5x8qaEq94aigSNz1v0aLNsdBLjv5P9s3nHmliuuTre3V0V2WgkMiSfyNjtYbGWapIbGzFvZ9FaI1oObrPjZ2KyPA33wPRIM3ZitCYBnJeFCquYklvu0cpGTNiGTZHjWuCdrmvZxkAcpdJm5H0pFN5ME9iOYChMasXWzO2NWK6NSJIKZu09Er7/EUB8h2tyAFt7ho3tZqGGg83PJFOtnd+BcyF6jCIifJxKi0DVc/l1azICasIuYb3umF7dgJUyJGHBCu05gtgTFtzqvAGcHNSjT3m2/E7Sv+SljKRyNoAQgcUqHI3LJoRKWoJni6N0rABzM8jM00uXyELIan2ztyBoSQYEtigPFSqs3KH8vMHlNJTYGpSeoae3Px1+YARCoPxZSS6umHhlZV/vAI8XF8MnQclzsyi6BgFqfaQV7hbzvU4+pOXHGLPPkc/064Xp62gVrd6nhfTKiM/xveZvF2Wec0rPkNQr0/cgCN/jdtpEofNuGe1+qbk676IC4bqJ4+sJVPqK0SPx4vhvYMLP1SWDp0zy9AInTzm3X/xHFAFxjnQ7o0FHn/o8FDN/mg+5HD3BsKTWvkvejPeGwfuVRh8SE1bExX5hhyS9EorUYjUreX4veII8J4O8Jk9uSce7c66PIW8PldDstbKliE/td4cLl1T9HVufYsBrgRJZxJvWL3bA8kC0Fyr3Zhf1/TBPaEmQvHnT53al0n75+LSTA+oVLatD2vqC+k/w9VUZ3+olZ3Ij0HqfMuoYeQtDkKc5v3D+nGwTEdWrkKhOuexoJE3yo1nbqj9RZBxDWNnFvok5gu+e5gfEU9StjqKtyWN/b9KBKXmSMb53FkDAQ+sU0vZf5sDk8zwm3AR6e2SoGdRJsHjfv8nGVOmJ9zZSkjS4k0WSoNrMWjV/AXpjvN5fvM4HosSn1pkM3vgvw1I+sU9tKYH+MvBhWiOQFBXC2eCPcItBn4ZlmJyaxv+ylBbFWz4GH4hO+XYTZj0VsrRM11/6o8gBBoDSfPQ6vfwY/JtA16deMGenwjqLVTN+ziSvUni6Ab/0TH5xmigR7Uryjz8HQV7hCHmVgn4bEUv08Z6jvSluqY8brlHP6SkxZOe6A7+PlGZm7w8f73wz1jGvc9vNusCluh2+EMP9smNHYP8G1o574qwKPu45mZd4qvuMyH5h6rE+rcOA32bK5ciOhp5OR3ZE9NvDypHjivgf2eUiCDNUxugAAAAASUVORK5CYII=">
</body>
</html>
To trigger this from JavaScript, just access the transformOrigin property as you would any other:
let img = document.querySelector("img");
img.style.transformOrigin = "top"; // Set the origin
img.addEventListener("mouseover", function(){
this.classList.add("scale");
});
img.addEventListener("mouseover", function(){
this.classList.remove("scale");
});
.scale {
transform:scale(1.5,1.5);
}
img { border:1px solid black; }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Transforms</title>
<style>
img {
/* Single Transformations: */
transform-origin: center;
}
/* Triggering a transformation: */
img:hover {
transform: scale(1.5, 1.5);
}
</style>
</head>
<body>
<img class="car" src="data:image/png;base64,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">
</body>
</html>
I'm trying to implement an effect similar to the StackOverflow effect when you visit a post and the answer has an orange background that fades out.
Example:
How do I add a class to a given element?
My approach looks something like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Highlight element based on URL hash example</title>
<style>
/*
Custom class to be applied to our element.
*/
.focused {
padding: 5px;
border-radius: 30px;
box-shadow: 0px 0px 30px #9FC43E;
animation: fade-out-in 5s;
animation-fill-mode: forwards;
}
/*
Add keyframes to our fade out effect
*/
#keyframes fade-out-in {
0% {
border-radius: 30px;
box-shadow: 0px 0px 30px #9FC43E;
}
100% {
border-radius: 0px;
box-shadow: 0px 0px 0px transparent;
}
}
</style>
</head>
<body>
<section style="max-width: 768px">
<div id="target">
This element will be highlighted on load.
</div>
</section>
<script>
// Highlight the target based on the URL
var anchor_id = window.location.href.split('#');
var target = document.getElementById(anchor_id['1']);
target.className += ' focused';
</script>
</body>
</html>
This works for the first visit, but if the user clicks on a new anchor on the same page, or changes the URL fragment in the address bar, the class remains on the old element.
I'm looking for a way to move it every time the URL changes like that.
Thanks in advance.
I have two HTML documents, b.html contains c.html using an iframe.
On b.html I need to draw some DIV (in my example id=selector), which partially cover content of c.html visualized in the iframe.
I need to get the ID of a DOM element corresponding to the mouse coordinate under the DIV selector.
At the moment Using document.elementFromPoint() directly in in c.html works partially, as when the mouse it is on DIV selector I cannot identify the underling DOM element in c.html (in this example DIV c).
I would need to know:
Is it possible to select element under another, using document.elementFromPoint() or any other means?
What could be a possible alternatively solution possibly using DOM and native API?
Example here (Please look at the console in Chrome):
http://jsfiddle.net/s94cnckm/5/
----------------------------------------------- b.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>B</title>
<script type="text/javascript">
window.app = {
start: function () {
}
};
</script>
<style>
#selector {
position: absolute;
top: 150px;
left: 150px;
width: 250px;
height: 250px;
-webkit-box-shadow: 0px 0px 0px 5px yellow;
-moz-box-shadow: 0px 0px 0px 5px yellow;
box-shadow: 0px 0px 0px 5px yellow;
}
#iframe {
width: 500px;
height: 500px;
border: none;
}
</style>
</head>
<body onload="app.start();">
<div id="selector">SELECTOR</div>
<iframe id="iframe" src="c.html"></iframe>
</body>
</html>
----------------------------------------------- c.html
<html lang="en">
<head>
<meta charset="utf-8" />
<title>C</title>
<script type="text/javascript">
window.app = {
start: function () {
document.querySelector('body').addEventListener('mousemove', function (event) {
//console.log(event.pageX, event.pageY, event.target.id);
var item = document.elementFromPoint(event.pageX, event.pageY);
console.log(item.id);
}.bind(this));
}
};
</script>
<style>
body {
background-color: lightslategray;
}
#a {
position: absolute;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
background-color: green;
z-index: 2;
}
#b {
position: absolute;
top: 100px;
left: 100px;
width: 100px;
height: 100px;
background-color: #ffd800;
z-index: 1;
}
</style>
</head>
<body onload="app.start();">
<h1>Content</h1>
<div id="a">a</div>
<div id="b">b</div>
</body>
</html>
A possible soltion is the usage of pointer-events.
The CSS property pointer-events allows authors to control under what
circumstances (if any) a particular graphic element can become the
target of mouse events. When this property is unspecified, the same
characteristics of the visiblePainted value apply to SVG content.
When you apply
#selector {
/* ... */
pointer-events: none;
}
All content of #selector and the element itself are no more interactive. Content may not be selected and events like :hover or click are not applicable.
Here is the demo with the above css: http://jsfiddle.net/s94cnckm/6/
Another possible solution, is to capture the document coordinates of a mouse event fired on the masking item(DIV.selector), momentarily hide that masking item, and then ask the document what is under that coordinate position (using document.elementFromPoint(x,y)) before showing the masking item again.
The support for document.elementFromPoint() cover also old version of IE.
Unfortunately pointer-events has limited support for older version of IE.
Here a working example:
http://jsfiddle.net/s94cnckm/14/
document.getElementById('iframe').contentDocument.addEventListener('click', function (event) {
alert(event.target.id);
}.bind(this));
document.getElementById('selector').addEventListener('click', function (event) {
var selector = document.getElementById('selector');
selector.style.display = 'none';
var item = document.getElementById('iframe').contentDocument.elementFromPoint(event.pageX, event.pageY);
selector.style.display = '';
alert(item.id);
}.bind(this));
Regarding the use of pointer-events I link to mention some related article, included a work around for older version of IE.
How to make Internet Explorer emulate pointer-events:none?
https://css-tricks.com/almanac/properties/p/pointer-events/
http://davidwalsh.name/pointer-events
http://robertnyman.com/2010/03/22/css-pointer-events-to-allow-clicks-on-underlying-elements/
This solution was inspired by this article:
http://www.vinylfox.com/forwarding-mouse-events-through-layers/
<head>
<title>Overlay test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#overlay {
position: absolute;
background-color: #ccffcc;
display: none;
height: 200px;
margin: 0 auto;
width: 200px;
}
</style>
<script type="text/javascript">
//<![CDATA[
function hide() {
document.getElementById("overlay").style.display = "none";
}
function show() {
document.getElementById("overlay").style.display = "block";
}
//]]>
</script>
so when the user clicks it runs show() which places the css box on top. However i want it to be centered in the browser. I've set the margin: 0 auto; which should be doing the trick shouldnt it?
I'm just trying to create an overlay function without using jquery because it seems to be incompatible with my schools cms templates.
Thanks
Margin: 0 auto won't work on position absolute elements, they exist in their own little world, outside of normal flow. So in order to pull this off, you need to do an extra step. The CSS dead centre technique will work here.
Try setting the top and left attributes on your overlay.
Use % to set top and left position. Set css attribute top:10%; Left 40%;