Develop Reference

How do you find coordinates of pseudo elements?

I have been searching the answer to this question but haven't been able to find a valid one. Let's take the following web site as an example:
https://www.atlassian.com/devops
There's a pseudo element before the following element:
var e = document.querySelector('li[class=language-selector]');
e.getClientRects();
top: 9797
bottom: 9818
left: 78
right: 162
x: 78
y: 9797
width: 85
height: 21
The function window.getComputedStyle returns some values for top, bottom, left and etc:
window.getComputedStyle(e, ':before').top; //10.5
window.getComputedStyle(e, ':before').bottom; //-9.5
window.getComputedStyle(e, ':before').left; //-26
window.getComputedStyle(e, ':before').right; //90.6
window.getComputedStyle(e, ':before').x; //0
window.getComputedStyle(e, ':before').y; //0
window.getComputedStyle(e, ':before').width; //20
window.getComputedStyle(e, ':before').height; //20
At first it seems to be relative values to the base element, but if I check the other element from the same page, the behavior seems inconsistent:
var e3=document.querySelectorAll('blockquote[class="cite large-quote"]')[0];
top: 2303
bottom: 2408
left: 78
right: 1038
x: 78
y: 2303
width: 960
height: 105
The function window.getComputedStyle returns the followings:
window.getComputedStyle(e3, ':before').top; //-25
window.getComputedStyle(e3, ':before').bottom; //-50
window.getComputedStyle(e3, ':before').left; //0
window.getComputedStyle(e3, ':before').right; //889.25
window.getComputedStyle(e3, ':before').x; //0
window.getComputedStyle(e3, ':before').y; //0
window.getComputedStyle(e3, ':before').width; //70.75
window.getComputedStyle(e3, ':before').height; //180
For example, the top and bottom of the first pseudo element are 10.5 and -9.5 and (10.5) - (-9.5) is the height of the pseudo element (20).
The top and bottom of the second pseudo element are -25 and -50 but the height of the pseudo element is 180. They are both having "absolute" in their "position" attribute. So the behavior is inconsistent.
It'll be greatly appreciated if someone can shed some lights on how to obtain the position or coordinates of pseudo elements.

The css property bottom is not the same as a bounding rectangle's bottom property. The fact that the top and bottom css values end up being the height of the pseudo element in the first test is just coincidence.
The bounding rectangle bottom is calculated based on its y position and its height:
https://drafts.fxtf.org/geometry/#dom-domrectreadonly-domrect-bottom
The bottom attribute, on getting, must return max(y coordinate, y
coordinate + height dimension).
The css bottom property however is a position value. With an absolute positioned element:
https://www.w3.org/TR/CSS2/visuren.html#propdef-bottom
Like 'top', but specifies how far a box's bottom margin edge is offset
above the bottom of the box's containing block.
So you can't simply use the formula bottom-top to get the pseudo element's height. You have to take the closest positioned container element's height into account, in your case the blockquote.
So for the blockquote element: Its height is 105px. The top of the quote is 25px above the top, and its bottom is 50px below the bottom. With those values you get the pseudo element's height:
105 - -25 - -50 = 180
As for the coordinates: the x,y properties seem to be browser specific as they do not exist in Firefox, IE, etc. And I cannot find out what they are exactly supposed to hold. Also the ones on the bounding box are simply the left,top values.
So if you want to calculate the left, top values you would have to use its left, top values and take again into account the closest positioned parent's location
var rect = e.getClientRects();
var pseudoStyle = window.getComputedStyle(e, ':before');
//find the elements location in the page
//taking into account page scrolling
var top = rect.top + win.pageYOffset - document.documentElement.clientTop;
var left = rect.left + win.pageXOffset - document.documentElement.clientLeft;
//modify those with the pseudo element's to get its location
top += parseInt(pseudoStyle.top,10);
left += parseInt(pseudoStyle.left,10);

Move the BrowserWindow to the bottom right

I want to ask if there's method dynamically set the position or move the Browser Window to the bottom right?
BrowserWindow.setPosition(x, y)

You can use the screen API, and use a fixed with to offset from the edge of the screen:
let display = electron.screen.getPrimaryDisplay();
let width = display.bounds.width;
win = new BrowserWindow({
width: 600,
x: width - 600,
y: 0
});

Displaying Spinner until Mathjax loaded even with direct anchors URL

My issue is a little bit tricky. For the moment, I get to display a spinner until Mathjax equations are loaded in my HTML page. For this, I do :
<script type="text/javascript">
var targetSpin;
var targetHide;
$(document).ready(function() {
var opts = {
lines: 13 // The number of lines to draw
, length: 28 // The length of each line
, width: 14 // The line thickness
, radius: 42 // The radius of the inner circle
, scale: 1 // Scales overall size of the spinner
, corners: 1 // Corner roundness (0..1)
, color: '#000' // #rgb or #rrggbb or array of colors
, opacity: 0.25 // Opacity of the lines
, rotate: 0 // The rotation offset
, direction: 1 // 1: clockwise, -1: counterclockwise
, speed: 1 // Rounds per second
, trail: 60 // Afterglow percentage
, fps: 20 // Frames per second when using setTimeout() as a fallback for CSS
, zIndex: 2e9 // The z-index (defaults to 2000000000)
, className: 'spinner' // The CSS class to assign to the spinner
, top: '50%' // Top position relative to parent
, left: '50%' // Left position relative to parent
, shadow: false // Whether to render a shadow
, hwaccel: false // Whether to use hardware acceleration
, position: 'absolute' // Element positioning
};
targetSpin = document.body;
targetHide = document.getElementById('hide_page');
spinner = new Spinner(opts).spin(targetSpin);
});
</script>
<script type="text/x-mathjax-config">
//
// The document is hidden until MathJax is finished, then
// this function runs, making it visible again.
//
MathJax.Hub.Queue(function () {
spinner.stop();
targetHide.style.visibility = "";
});
</script>
Now, my issue is to get the same behavior, but for URL which contains anchors.
You can see this problem by clicking for example on a link which contains an anchor into the URL.
In this case, you won't see the spinner before HTML content displays : I would like to fix this issue but I don't know how to acheive it.
If someone could see a solution, that would be nice to tell it to me.
Thanks for your help

Use position: 'fixed'. This will keep the spinner in the center of the page, no matter if it is scrolled or not.
The spinner is present on your second example, but it is absolutely positioned at the top of your page.

try to use a CSS loader on MathJax_Preview class
CSS snippet
.MathJax_Preview {
display: inline-block;
width: 12px;
height: 12px;
background-image: url(https://anishmprasad.com/images/loader.gif);
background-repeat: no-repeat;
}
math{
display:none
}
demo jsfiddle here
I hope this way solves your problem

How to use jQuery scroll to change the height of an element?

I have a HTML class navigation with the initial height of 100px and min-height is 40px. I want to change the height of the class, based on the scroll (if scroll down than size will decrease and if scroll up than size will increase). I use the following code and it's working perfectly.
$(window).scroll( function() {
if( $('.navigation').offset().top > 50 )
{
$('.navigation').css({
'height' : '40px',
'background' : 'rgba(37, 37, 37, 0.9)'
});
} else {
$('.navigation').css({
'height' : '100px',
'background' : '#b24926'
});
}
});
If I press the keyboard down arrow key two times than navigation class moved from original height to minimum height and if the up arrow key press two times than navigation class moved from minimum height to original height.
But I want to make the scroll more smooth (like 4-5 up or down key presses to reach from one height to another).
For example: initial height is: 100px and minimum height is 30px. Now:
if down arrow key is pressed/mouse wheel is move down one time than height will be 85px, if again down arrow is pressed height will be 70px and so on. That means for each down arrow key is pressed/mouse wheel is move down than height will decrease by 15-20px and for each up arrow key is pressed/mouse wheel is move up, height will increase by 15-20px.
Can anyone tell me how can I do that (without using third party api).
Thanks

You can use simple percent calculation to update height
var limitForMinimalHeight = 400; //after this distance navigation will be minimal height
var maxHeight = 100;
var minHeight = 40;
$(window).scroll( function() {
var screenTop = $(document).scrollTop();
var achievedDistancePercent = Math.min(screenTop*100/limitForMinimalHeight, 100);
var amounToAdd = ((maxHeight - minHeight) * (100 - achievedDistancePercent))/100;
var newHeight = minHeight + amounToAdd;
$('.navigation').height(newHeight);
});
You can test it on JSFiddle

$(document).scroll(function() {
if($(this).scrollTop()>100) {
$('.selector').addClass('scrolled');
}
if($(this).scrollTop()<40) {
$('.selector').removeClass('scrolled');
}
});

How to adjust my floating bar when minimized

Right now the code below floats to the left side of the content and it's visible when you scroll down. So far everything is Okay as long as the window is maximized. But when it's minimized or you increase the zoom the bar shows over the content which I don't want it to. In these cases (minimized window and increased zoom) I'd like the bar to be stuck to left margin so it won't be shown over the content. Obviously the bar must keep being floating to the left and visible when scrolled down (if the window is maximized). What changes do I need to do to accomplish this? Thank you very much for your support in advance!
#pageshare
{
position:fixed;
bottom:15%;
right:10px;
float:left;
border: 1px solid #5c5c5c;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
background-color:#e5e5e5;
padding:0 0 2px 0;
z-index:10;}
#pageshare .sbutton
{
float:left;
clear:both;
margin:5px 5px 0 5px;
...
}

You can accomplish this by using JavaScript to modify the attributes of both the main site container as well as the pageshare container. For simplicity, I utilized jQuery.
Adjust Site Margin (jsfiddle)
I created a method that adjusts the site margin based on the amount of space needed by the pageshare container. First, this method calculates the amount of space needed for the pageshare container (based on its width and its left offset) and the amount of space available (the site width subtracted from the window width, normalized to zero if negative). The method then calculates the difference between these two values and applies the value to the left margin of site container. This ensures that the pageshare container does not overlay the content. In addition, the reason I am setting and removing scroll event handlers is because otherwise the pageshare container will still appear over the content on a small window when you scroll left and right (example of issue).
function adjustSiteMarginForPageShare() {
// Get the window dimensions
var windowWidth = $(window).width();
var windowHeight = $(window).height();
// Get the site width
var siteWidth = $('#inner-wrapper').outerWidth();
// Get the pageshare dimensions
var pageshareWidth = $('#pageshare').outerWidth();
var pageshareHeight = $('#pageshare').outerHeight();
// Get the pageshare left offset
var pageshareLeft = $('#pageshare').offset().left;
// Calculate the needed pageshare space
var pageshareSpaceNeeded = pageshareWidth + pageshareLeft;
// Calculate the available pageshare space (division because of centering)
var pageshareSpaceAvailable = (windowWidth - siteWidth) / 2;
// Ensure the minimum available pageshare space as zero
pageshareSpaceAvailable = (pageshareSpaceAvailable > 0) ? pageshareSpaceAvailable : 0;
// If the pageshare space available is less than what is needed
if (pageshareSpaceAvailable <= pageshareSpaceNeeded) {
// Calculate the left margin needed as the difference between the two
var leftMarginNeeded = pageshareSpaceNeeded - pageshareSpaceAvailable;
// Add the left margin needed to the site
$('#inner-wrapper').css('margin-left', leftMarginNeeded);
// Modify the pageshare style
$('#pageshare').css({
'position': 'absolute'
});
// Set the pageshare scroll behavior
$(window).off('scroll.pageshare');
$(window).on('scroll.pageshare', function() {
// Set the bottom to top conversion factor (100% total height - 15% bottom offset = 85% top offset)
var conversionFactor = 0.85;
// Calculate the top offset based on the conversion factor and the pageshare height
var pageshareTopOffset = (conversionFactor * windowHeight) - pageshareHeight;
// Adjust the pageshare top offset by the current scroll amount
pageshareTopOffset += $(window).scrollTop();
$('#pageshare').css({
'top': pageshareTopOffset + 'px',
'bottom': 'auto'
});
});
// Trigger the pageshare scroll handler
$(window).triggerHandler('scroll.pageshare');
} else {
// Reset the pageshare style
$('#pageshare').css({
'position': 'fixed',
'top': 'auto',
'bottom': '15%'
});
// Turn off the pageshare scroll behavior
$(window).off('scroll.pageshare');
}
}
The last step is to call that method, both on page load and every time the window is resized.
// Adjust the content margin for pageshare container on load
adjustSiteMarginForPageShare();
// When the window is resized
$(window).resize(function () {
// Adjust the content margin for the pageshare container
adjustSiteMarginForPageShare();
});