I have implemented an onscroll function for a div that worked like this:
window.onscroll = function () {
document.getElementById("faceExtractor").style.top = (($(window).scrollTop()) + 50) + "px";
};
That worked fine. Now I made the div element also draggable, which means after someone dragged the div a but down and then scrolled the div was put again 50px below the top of the page due to the onscroll function. I wanted to solve that, so that the div keeps it position while scrolling even when someone drageed it a a specific position and I tried this:
window.onscroll = function () {
topDistance = document.getElementById("faceExtractor").getBoundingClientRect().top;
if (topDistance < 50){
document.getElementById("faceExtractor").style.top = (($(window).scrollTop()) + 50) + "px";
} else {
var gap = ($(window).scrollTop()) + topDistance;
document.getElementById("faceExtractor").style.top = gap + "px";
}
};
But then the onscroll doesn't work at all. How can I modify my onscroll so that the div keeps it position and is not always put to the top of the page or a static position?
window.onscroll = function () {
positionFromTop = document.getElementById("faceExtractor").offsetTop;
topDistance = document.body.parentElement.scrollTop+positionFromTop;
if (topDistance < 50){
document.getElementById("faceExtractor").style.top = topDistance+ "px";
} else {
var gap = topDistance;
document.getElementById("faceExtractor").style.top = gap + "px";
}
};
Try this method. And, give 'position:absolute' for 'faceExtractor' Div.
Related
Hi guys i have following code which is i am using to create a simple tooltip.
html
<div class="x">
<div class="abc">abc</div>
</div>
javascript
//Finding the elements position
var elmPosition = function (elm) {
var x = 0,
y = 0;
while (elm) {
x += (elm.offsetLeft - elm.scrollLeft + elm.clientLeft);
y += (elm.offsetTop - elm.scrollTop + elm.clientTop);
elm = elm.offsetParent;
}
return {
x: x,
y: y
};
};
//Creating and adding the tooltip to document
document.querySelector('.abc').addEventListener("mouseover", function () {
var elm = document.createElement("div");
var position = elmPosition(document.querySelector('.abc'));
elm.textContent = 'just a tooltip';
elm.classList.add('tooltip');
document.body.appendChild(elm);
elm.style.position = 'absolute';
elm.style.top = (position.y - 20) + 'px';
});
//remove tooltip on mouse out
document.querySelector('.abc').addEventListener("mouseout", function () {
document.body.removeChild(document.body.querySelector('.tooltip'));
})
DEMO
The generated tooltip should always stay top of the mouse hovered element. This code perfectly works until the page is scrolled. When then page is scrolled the position of the tooltip is pushed to very far from the mouse hovered element. Could someone please help me to find out what the issue is. Thanks :)
What you're checking for using scrollLeft is how far elm is scrolled. What you want is how far the window is scrolled I'm guessing.
Use window.pageYOffset and window.pageXOffset like so:
while (elm) {
x += (elm.offsetLeft - window.pageXOffset + elm.clientLeft);
y += (elm.offsetTop - window.pageYOffset + elm.clientTop);
elm = elm.offsetParent;
}
EDIT
After trying it out it doesn't make much sense involving the scroll if you're not working with position: fixed. I removed it and edited your fiddle: https://jsfiddle.net/mg606dh1/2/
EDIT 2
You can also change the position to position: fixed and use the code the way you meant for it to be used: https://jsfiddle.net/mg606dh1/3/
I have a snippet that on scroll it checks wether an element is in the current viewport.
I now want to add multiple elements into the mix, but I wanted to avoid doing multiple if statements checking for each, I know the following code doesn't work but it is an example of how I would like to do it, is there a way of doing it this way?
var listOfPanels = $('#item2, #item2, #item3, #item4, #item5');
$(window).scroll(function(event) {
// if the element we're actually looking for exists
if (listOfPanels.length){
// check if the element is in the current view using the attached function
// and the event hasn't already fired
if (isElementInViewport(listOfPanels)) {
// do something
}
}
});
try this:
function isElementInViewport(el) {
var top = el.offsetTop;
var left = el.offsetLeft;
var width = el.offsetWidth;
var height = el.offsetHeight;
while(el.offsetParent) {
el = el.offsetParent;
top += el.offsetTop;
left += el.offsetLeft;
}
return (
top < (window.pageYOffset + window.innerHeight) &&
left < (window.pageXOffset + window.innerWidth) &&
(top + height) > window.pageYOffset &&
(left + width) > window.pageXOffset
);
}
var listOfPanels = $('#item2, #item2, #item3, #item4, #item5');
$(window).scroll(function(event) {
if (listOfPanels.length){
listOfPanels.each(function(){
if (isElementInViewport($(this)[0])) {
console.log($(this).attr('id') + ' in viewport');
}
});
}
});
(isElementInViewport js method brought from: How to tell if a DOM element is visible in the current viewport?)
hope that helps.
Good morning!
I want to share with you a simple script I made for the purposes of my company new website. It allows you to make a floating navigation bar which smoothly changes its background.
For now it's working with jQuery. My question is - is it possible to made this in pure CSS? My previous idea was to make navigation container with overflow: hidden and position: absolute + menu with position: fixed. Everything worked well until I realized that Firefox can't handle with this combination.
I'm waiting for yours ideas :)
Here's the code and preview:
var nav = $('.nav'),
navHeight = nav.height();
// Duplicate navigation
var navReversed = nav
.clone(true)
.addClass('nav-reversed')
.insertAfter(nav);
var navs = $('.nav'),
slides = $('.slide');
/* ... */
// onScroll event
$(window).on('scroll resize', function() {
var scrollTop = $(document).scrollTop(),
slide;
// Find first visible slide
slides.each(function() {
if ($(this).offset().top > scrollTop)
return false;
slide = $(this);
});
if (slide.length) {
var id = '#' + slide.attr('id'),
slideNext = slide.next('.slide');
var clipTop = clipBottom = 'auto';
if (slide.hasClass('slide-reversed')) {
clipBottom = Math.max(slideNext.offset().top - scrollTop, 0);
}
else {
clipTop = navHeight;
if (slideNext.length && slideNext.hasClass('slide-reversed')) {
clipTop = Math.min(slideNext.offset().top - scrollTop, clipTop);
}
}
if (clipTop !== 'auto') {
clipTop = Math.round(clipTop) + 'px';
}
if (clipBottom !== 'auto') {
clipBottom = Math.round(clipBottom) + 'px';
}
navReversed.css('clip', 'rect('+clipTop+',auto,'+clipBottom+',auto)');
/* ... */
}
}).trigger('scroll');
Full version: http://jsfiddle.net/greenek/NL7Fh/
You can try checkbox hack http://css-tricks.com/the-checkbox-hack/, there are :target too but you can't higlight the link. http://codepen.io/anon/pen/lqvpA
I've been trying to make my navbar stick to top when I scroll by it and achieved it. The only problem is that my content kind of kicks up when the navbar transition to position fixed is executed.
Here is an example of this behavior: http://jsfiddle.net/7HHa5/4/
JavaScript
window.onscroll = changePos;
function changePos() {
var header = document.getElementById("header");
if (window.pageYOffset > 70) {
header.style.position = "absolute";
header.style.top = pageYOffset + "px";
} else {
header.style.position = "";
header.style.top = "";
}
}
I am using bootstrap and jQuery.
How can I avoid this behavior?
When you set the header to position: absolute, it leaves an empty space which gets filled by the content. You need to add a margin to the top of the content when the header becomes fixed, like this:
window.onscroll = changePos;
function changePos() {
var header = document.getElementById("header");
var content = document.getElementById("content");
if (window.pageYOffset > 70) {
header.style.position = "absolute";
header.style.top = pageYOffset + "px";
content.style.marginTop = '55px'
} else {
header.style.position = "";
header.style.top = "";
content.style.marginTop = '0'
}
}
See http://jsfiddle.net/2EhLs/1/ for an example.
However, there is a better way.
Since you are already using Bootstrap, you should consider using the built-in Affix feature.
The best example is this one from another question:
$('#nav-wrapper').height($("#nav").height());
$('#nav').affix({
offset: { top: $('#nav').offset().top }
});
Is it possible to know whether or not an HTML element like image is viewable in current viewport or it will be visible on scroll?
If it is viewable completely or partially then how can I get the amount of portions is visible?
I am trying to explain it from the following image:
The two images at the bottom is partially visible within the viewport and these will be completely visible if one scroll down a little bit.
Now I want to get the the aforesaid information.
In the actual scenario I am trying to get the popup-zoom effect on hover of image in my album like google image search. Everything is fine, except if the images are placed in the described manner then the zoomed div also displaying in half.
Normal condition where image is completely in viewport:
And partially in viewport:
I really appreciate your help.
The code:
var albumDetailOnReady = function() {
$('.image').each(function(){
var photo = $(this);
var wrap = $(findParentByClassName(document.getElementById(photo.attr('id')), 'wrap'));
var row = $(findParentByClassName(document.getElementById(wrap.attr('id')), 'albumDetailRow'));
var visibleZone = $(wrap).find('.alDtlColumn');
var pictureBlock = $(visibleZone).find('.pictuteBlock');
var hiddenZone = $(wrap).find('.hiddenZone');
$(photo).load(function(){
if(177 > $(photo).width()){
var imgleft = ($(pictureBlock).width() - $(photo).width())/2 + 'px';
$(photo).css({'left': imgleft});
}
});
$(photo).hover(function(){
var y;
if($(photo).height() > $(photo).width()) {
y = ($(visibleZone).offset().top - 50) + 'px';
} else {
y = ($(visibleZone).offset().top + 50) + 'px';
}
var x;
if($(row).find('.wrap:first').attr('id') === $(wrap).attr('id')) {
x = ($(visibleZone).offset().left - 10) + 'px';
} else if($(row).find('.wrap:last').attr('id') === $(wrap).attr('id')) {
x = ($(visibleZone).offset().left - 50) + 'px';
} else {
x = ($(visibleZone).offset().left - 20) + 'px';
}
$(hiddenZone).css({
'top': y,
'left': x,
'position': 'absolute',
'z-index': '10'
});
$(hiddenZone).fadeIn('fast');
}, function(){
});
$(hiddenZone).hover(function(){},function(){
$(hiddenZone).hide().stop(true, true);
});
});
}
var findParentByClassName = function(element, clazz) {
while (element.parentNode) {
element = element.parentNode;
if (hasClass(element, clazz)) {
return element;
}
}
return null;
}
function hasClass(element, cls) {
var regex = new RegExp('\\b' + cls + '\\b');
return regex.test(element.className);
}
I am unable to show any HTML as I haven't have any, I am working in ADF framework.
But for an explanation:
I have two zone for each image: visible and hidden. Both of them are in a wrap. Now on hover an image I am showing the hidden div. The top and left of the hidden div is measured by the top and left of the visible div with some condition.
jQuery.Viewport
Very helpfull and lightweight jQuery plugin that makes an element as a handy viewport for displaying elements with absolute position. The plugin is hosted on GitHub. You can see it in action right there:
https://github.com/borbit/jquery.viewport