Consider the following markup: http://jsfiddle.net/gbWgH/. Because the list overflows its container and overlaps with the text below, I'd like it to be scrollable instead, so I set it to overflow:auto. However, this cuts off parts of the image: http://jsfiddle.net/gbWgH/1/. Removing this rule make the image appear properly.
How can I make the text scrollable without cutting off the image? Is the simplest option to just calculate the coordinates manually using Javascript, as suggested in this answer?
img {position:relative; top : 20px; left : 20px;}
I ended up just resorting to Javascript. Here, an image is positioned 50 pixels to the left and 40 pixels above a li with id "myli", inside a ul with id "myul", by calculating an offset from the li's absolute position within the page body. Note that you have to account for the amount the ul has been scrolled.
var img = document.createElement("img");
img.src = ...
var li = document.getElementById("myli");
var scrollTop = document.getElementById("myul").scrollTop;
img.style.left = li.offsetLeft - 50 + 'px';
img.style.top = li.offsetTop - 40 - scrollTop + 'px';
img.style.position = 'absolute';
document.body.appendChild(img);
Related
How can I calculate offset top inside a scrollable div? I have two divs that I want scroll inside my content div, and I want to set 2 variables to true/false, depending on where they are positioned inside that content div.
I tried something like this but I guess it calculates the entire page offset, it doesn't really work. I bind scroll to that content div, and I want to calculate their positon:
angular.element(slideContent).bind("scroll", function () {
var contentScrollTop = angular.element(slideContent).scrollTop();
var slideOneOffset = slideOne.offset().top;
var slideTwoOffset = slideTwo.offset().top;
var firstSlideDistance = (contentScrollTop - slideOneOffset);
var secondSlideDistance = (contentScrollTop - slideTwoOffset);
});
I think this should get you most of the way there:
// Position of first element relative to container top
var scrollTop = $(".container .element").offset().top - $(".container").offset().top;
// Position of selected element relative to container top
var targetTop = $(".container > *").offset().top - $(".container").offset().top;
// The offset of a scrollable container
var scrollOffset = scrollTop - targetTop;
// Scroll untill target element is at the top of its container
$(".container").scrollTop(scrollOffset);
———————————
EDIT (May 31 2018)
I guess this is better:
var scrollOffset = $(".container .element")[0].offsetTop - $(".container")[0].offsetTop
setInterval(function() {
var divPosition = $('div').position();
console.log('X: ' + divPosition.left + ", Y: " + divPosition.top");
}, 500);
So I can get the x and y position of this div. left/top but it's a square div on the page. I'm also tracking a section tag that flies around the page, I want to basically do if (_thesectiontag_.left == _thesquarediv_.left || _thesectiontag_.top == _thesquarediv_.top) ... do something so if the section tag is within the div coordinates on the page do something.
But I need to get the full dimensions of the square to be able to do that. I'm a bit lost on where to start and how to go about it.
Can anyone offer some help? Thank you!
Use this two code :
For the Width and Height includes padding :
var Height = document.getElementById('square').clientHeight;
var Width = document.getElementById('square').clientWidth;
For the Width and Height includes padding, scrollBar and borders :
var Height = document.getElementById('square').offsetHeight;
var Width = document.getElementById('square').offsetWidth;
$('div').height($('div').width());
Here is a link to a JSFiddle http://jsfiddle.net/9NYcn/11/ i put together with what i would like to do, but i need to do this with pure css.
function expand(){
var sect = document.getElementById("sect");
var body = document.getElementById("main");
var panes = document.getElementById("panes");
var newHeight = 40 + "px";
var newHeight2 = 120 + "px";
var topVal = 120 + "px";
sect.style.display = "block";
sect.style.height = newHeight;
body.style.height = newHeight2;
panes.style.top = topVal;
}
In the above function i had to set the "top" property of panes in order to get this to work. i need to get it so that the panes section will work like it currently does without using javascript to change the "top" property of "panes". When the user clicks the "expand" button the div with the class "body" will expand and not stick behind or overlap the "panes" div.
I know im doing a terrible job explaining i apologize for that.
Remove the absolute positioning of .panes: http://jsfiddle.net/rHTM8/
It will make it naturally flow after the middle div.
I have div called first which width can be dynamic and horizontally centered according margin left right to auto
.first
{
width:70%;
background-color:#5b9a68;
position:relative;
margin:0 auto;
}
Another div second with position fixed
.second
{
position:fixed;
background-color:black;
color:white;
left:input;
}
Html
<div class="first">content</div>
<div class="second">Left Value</div>
i want this second div to position according to first div.The Problem here is second div position is fixed so it is positioning according to screen width so i tried this script to position it according to first div.
$(document).ready(function(){
var input=0;
var first_width = $(".first").width() / $('.first').parent().width() * 100;
var pos = (100-first_width)/2;//getting the empty part
var ex_pos=pos+input;
$('.second').css("left",ex_pos+"%");
});
Here when the input is zero it should start at the start of first div this is fine but when we changed the input value am not getting accurate percentage positioning according to first div.
Let say for example if i give 50 as input then i'll place it on 65 but this way am not perfectly positioning in 50 of first div.Also if i give 100% as input this will go outside.
How to do this if input is 100 then the second div should be at the end of first div.
if the input is 50 it should be at middle of first like that.
Output With 0% left position
Output With 50% left position
Output With 100% left position
NOTE-I don't want to change or edit the css. i would like to do it in script alone.
Check Fiddle
Here you go :
$(document).ready(function () {
var input = 0,
firstWidth = $('.first').width(), // width of first div
secondWidth = $('.second').width(), // width of second div
offset = (input * (firstWidth - secondWidth)) / 100, // % to shift
leftPos = $('.first').offset().left; // left position of first div
$('.second').css("left", leftPos + offset);
});
JSFiddle
From jQuery API Documentation : Link
The .offset() method allows us to retrieve the current position of an element relative to the document.
It returns an object containing the properties top and left.
So :
leftPos = $('.first').offset().left;
This gives us the left co-ordinates for the .first div i.e the point where it starts.
I guess, you are looking for scenarios for 50% and 100% .
This should do it :
JS :
if(input===100){
ex_pos = ex_pos - 43;
}else if(input===50){
ex_pos = ex_pos - 13;
}
FIDDLE
I am in a situation that; need to calculate image's original width and heigth values when one of them defined 0 on css. I can't change CSS with jQuery, need to solve like this:
Here is example link.
CSS:
img { width:0px; }
jQuery:
var imgHeight = $('img').height();
alert(imgHeight);//which returning 0 ofcourse
I hope this is possible with less code, thanks,
Try this:
var img = $("img")[0];
alert( img.naturalWidth + "x" + img.naturalHeight );
http://jsfiddle.net/mjaA3/50/
You could clone the element to a new hidden DOM node (I assume you want to hide it here). Then remove the CSS, then measure the dimensions.
var img = $('img'),
imgHeight = img.css("width","auto").height();
img.css("width","0");
alert(imgHeight);
Here is a fiddle. All we do is temporarily set the height to it's automatic value (which is the image's 100% width), grab the height, and reset the image to width:0;.
EDIT: Since you can't manipulate CSS directly, you can change the class:
var img = $('img'),
imgHeight = img.addClass("auto").height();
img.removeClass("auto");
alert(imgHeight);
And the CSS:
img {width:0;}
img.auto {width:auto;}