I'm trying to figure out how to get the value of an element width: 'min-content' in px. How is it calculated? I have a slide selector that modifies the css left property of a relative positioned element inside a div that has a max width of 1200px. I need to know if the difference between 1200px and left value has reached the minimum width of the element to stop it incrementing. Like:
styles.formato.width = 1200
styles.plato.posh contains the slide value for the left attribute
$('.menu-preview .menu-plato').css('max-width', styles.formato.width + 'px');
$('.menu-preview .menu-plato').css('min-width', 'min-content');
$('.menu-preview .menu-plato').css('width', 'calc(' + styles.formato.width + 'px - ' + (styles.plato.posh > 0 ? styles.plato.posh : (-styles.plato.posh)) + 'px)')
$('.menu-preview .menu-plato').css('left', styles.plato.posh + 'px');
This code just shrinks ".menu-plato" width to force break-words if it reachs the end of the parent div. But, as "left" max value is styles.formato.width, ".menu.plato" element just overflow parent.
What I want to achieve is:
if (element."min-width" <= (styles.formato.width - styles.plato.posh)){
//DON'T UPDATE LEFT PROPERTY BECAUSE CHILD IS USING MIN-WIDTH AS WIDTH VALUE
//SO IT CANNOT BE SHRUNK MORE AND LEFT ATTR WILL OVERFLOW THE ELEMENT TO THE RIGHT
}
I've tryed using some element node attrs like clientWidth or offSetWidth but failed because when the element width reachs the min-width value, they both hold the min-width value, but, as it's a slide selector and those attributes depends on the screen rendering, if you slide too fast, the calculations are wrong.
EDIT
There are more than one element with those classes, so what I've tryed is:
$('.menu-preview .menu-plato').each((index, element) => {
element.style.width = ('calc(' + styles.formato.width + 'px - ' + (styles.plato.posh > 0 ? styles.plato.posh : (-styles.plato.posh)) + 'px)');
if (element.offsetWidth <= (styles.formato.width - (styles.plato.posh > 0 ? styles.plato.posh : (-styles.plato.posh)))) {
if (styles.plato.posh >= 0) {
element.style.left = styles.plato.posh + 'px'
}
}
})
Thanks
Related
This question already has answers here:
Get percentage of scroll position [duplicate]
(2 answers)
Closed 3 years ago.
Similar, but not exactly like this other question, I want to know the percentage of scroll "lifecycle" of any given div inside a scrollable document.
In other words:
When the top edge of the div is aligned with the bottom edge of the visible viewport, it's 0%
When the bottom edge of the div is aligned with the top edge of the visible viewport, it's 100%
If the div is below the visible viewport, it always remains 0%
If the div is above the visible viewport, it always remains 100%
I tried adapting the solution from that other question, as well as a plugin like this; however in both of these cases the percentage decreases once the div begins scrolling out of view at the top of the viewport, which is not what I want.
I've attempted to do the maths on my own in this JSFiddle, but haven't been very successful: https://jsfiddle.net/5h3tdmb4/
var pct = (window.scrollY + window.innerHeight <= target.offsetTop) ? 0 : (window.scrollY + window.innerHeight) / (target.offsetTop + target.offsetHeight - window.scrollY);
How can the above calculation be achieved in vanilla JavaScript?
This should be it Jsfiddle... i just fixed the maths and changed how the pecentage was getting calculated :
document.addEventListener("scroll", function(){
var target = document.getElementById("target");
var itemLength = (window.scrollY + window.innerHeight) <= target.offsetTop
? 0
: ((window.scrollY + window.innerHeight) - target.offsetTop) <= (window.innerHeight + target.offsetHeight)
? (window.scrollY + window.innerHeight - target.offsetTop)
: (window.innerHeight + target.offsetHeight)
var percentage = Math.round((itemLength * 100) / (window.innerHeight + target.offsetHeight))
/* Show in DOM */
document.getElementById("pct").innerHTML = percentage + "%";
});
I am using jquery and I am trying to find the position of the block relative to the parent:
$("*", document.body).click(function (e) {
var offset = $(this).position();
e.stopPropagation();
$("#result").text(this.tagName + " coords ( " + offset.left + ", " + offset.top + " )");
});
https://jsfiddle.net/gk8z18vg/3/
How to get the correct value? Why is offset left 11
You need to add position relative to the parent container so that the value doesn't concern the position from the entire document but just from the parent. The 11 offset looks like the offset of the container + the multiple borders.
#co {
position: relative;
}
Fixes it.
Also note that margin are not concerne when talking about position.
Hope that helps
I got a design in Full HD resolution, it was planned for a presentation in this solution, now they want that it will be a bit responsive. Now I have to change all these parameters: margin, padding, width, height, top, left on the fly, maybe someone got a solution for me.
I tried following and it works for the images with the width and height:
// Set Array for Resize (0 => width of the window, 1 => resize (yes / no)?, 2 => how much per cent do I have to put away
var resize_pool = new Array(parseInt($(window).width()), false, 0);
if(resize_pool[0] < 1920) {
resize_pool[1] = true;
resize_pool[2] = (100 * resize_pool[0]) / 1920;
resize_pool[2] = 100 - Math.floor(resize_pool[2]);
}
// Do I have to resize?
if(resize_pool[1] == true) {
$("#content img").each(function(index, element) {
$(this).css('width', 'calc(' + $(this).width() + 'px - ' + resize_pool[2] + '%)').css('height', 'calc(' + $(this).height() + 'px - ' + resize_pool[2] + '%)');
});
}
This works fine, but is there a better solution, where I can change all my values? margin, padding etc.
Thanks for your help in advance
CSS Media Queries are what you need to use - e.g.
td {
padding:20px; /* Default padding size for 1920px+ wide */
}
#media screen and (max-width: 1919px) {
td {
padding:10px; /* Smaller padding for screens less than 1920px wide;
}
}
I'm making left/right buttons to make a div slide. It slides by changing the left margin. What I'm trying to do is have it check the left margin and then add/subtract pixels to it. So when the page loads, left margin should be 0. Then you click the button and it checks the margin, finds it's 0, adds 150 and sets the left margin to 150. And then if you click it again, it checks the margin, finds it's 150 and adds another 150 and sets the margin to 300.
It succeeds in moving the margin from 0 to 150, but i can't get it to go to 300. I'm thinking it's not able to determine the margin correctly. Any ideas how I can fix this? Thanks!
$('#left').click(function(){
var pos=$('#contentarea').css("margin-left").replace('px', '');
pos=pos+150;
$('#contentarea').animate({ 'margin-left': '-' + pos + 'px'}, 1000);
return false;
});
There is no need to get current margin-left value, you can use the '+=%value%' and '-=%value%' operators. This will add/substract from the current value the specified value.
$('#left').click(function(){
$('#contentarea').animate({ 'margin-left': '+=150px'}, 1000);
return false;
});
try this,
use for Get Margin
$('#contentarea').css("margin-left")
it will return margin default is "PX".
Use For Set Margin
$('#contentarea').css("margin-left","Your Size");
Default size is "PX" not need to provide size with "PX".
Try this function
$(document).ready(function () {
$('#contentarea').css("margin-left", "0");
});
$('#left').click(function () {
var pos = $('#contentarea').css("margin-left");
var size = 0;
if (pos == "0px") {
$('#contentarea').css("margin-left", "150");
}
else {
size = parseInt(pos.slice(0, -2));
size = size + 150;
}
var pos = $('#contentarea').css("margin-left", size);
$('#contentarea').animate({ 'margin-left': '-' + pos }, 1000);
return false;
})
Use parseInt instead of replace to get css margin left value.
$('#left').click(function(){
var pos = parseInt($('#contentarea').css("margin-left")) + 150;
$('#contentarea').animate({'margin-left' : '-' + pos + 'px'}, 1000);
return false;
});
Please have a look at the attached image.
As you can see i am showing a popover. Basically i want to change the placement of the popover depending up on the space available( left or right ). Right now its going outside of an image.
Its a fancy-box(iframe)
Showing the popover using this code.
// Position and show the message.
this.message
.css({
left: (tPosition.left + "px"),
top: ((tPosition.top + t.outerHeight()) + "px")
})
.show();
I would do something like this:
this.message
.css({
left : function () {
if ( tPosition.left + $(this).width() >= $(this).parent().width() ) {
return $(this).parent().width() - $(this).width();
}
else {
return tposition.left;
}
},
top : function () {
if ( tPosition.top + $(this).height() > $(this).parent().height() ) {
return $(this).parent().height() - $(this).height();
}
else {
return tposition.top;
}
}
});
Basically you need to check if the popup is going to exceed your containing box boundaries before you show it and adjust it appropriately. On the horizontal axis this is as simple as making sure that mouse position x + the width of the popup is not greater than the width of the parent container. On the vertical axis you want to make sure that mouse position y + the popup height is not greater than the parent container height.