I have an Image Gallery Slider that uses ScrollIntoView() for its thumbnail, but every time I scroll up or down the page and the newest thumbnail is selected, it brings the entire page location back to where the thumbnail sits. Is there a way to disable this scrollIntoView() feature? The project is: https://codepen.io/abcretrograde/pen/povVxVq
function updateImage() {
const thumbs = document.querySelectorAll(
"#jsSlideshow .js-slideshow__thumb-image"
);
clearInterval(autoUpdate);
autoUpdate = setInterval(() => {
incImage();
}, slideSpeed);
const newOffset = getImagePos(imageWidthArray, whichImage);
slideshow.style.setProperty("--offset", newOffset + "px");
thumbs.forEach((thumb) => {
thumb.classList.remove("js-slideshow__thumb-image--selected");
});
thumbs[whichImage].classList.add("js-slideshow__thumb-image--selected");
thumbs[whichImage].scrollIntoView({
behavior: "auto",
block: 'center',
inline: "center",
});
}
The block property - scrollIntoView(options) - defines vertical alignment.
Have you tried changing center to nearest?
thumbs[whichImage].scrollIntoView({
behavior: "auto",
block: "nearest",
inline: "center"
});
Related
After the pop-up box pops up in the web, when I want to scroll the content of the pop-up box, the background element cannot scroll. After closing the pop-up box, the position of the background element will remain unchanged. Any suggestions to achieve this?
You can use js to dynamically set the style of the pageview package of the body and the child elements of the body. For example:
Html:
<body>
<div class="pageview"></div>
</body>
JS:
$('#dlg_btn__open').click(function () {
// ...something else
var st = $(window).scrollTop();
$('body').css({ height: '100%', overflowY: 'hidden' }); // Fix background
$('.pageview').css({ position: 'fixed', top: (-1 * st) + 'px' }); // Fix background
});
$('#dlg_btn__close').click(function () {
// ...something else
var st = $('.pageview').css('top').replace('-', '').replace('px', '');
$('body').css({ height: 'auto', overflowY: 'visible' });// Cancel fixed background
$('.pageview').css({ position: 'relative', top: 0 });// Cancel fixed background
window.scrollTo(0, st);// Roll to original position
});
Why is not my element scrolled into view?
useEffect(() => {
const elements = document.getElementsByClassName('some-class-name');
const [element] = elements;
if (element) {
window.scrollTo(0, 0);
element.scrollIntoView({ inline: 'center' });
}
}, [aProp]);
It did work before, but now it does not work. I am using Chrome. Should not the container with horizontal scroll scroll the element into view? The reason I have the window.scrollTo(0, 0) is because I want the window to scroll to the top as well.
I've got quite an issue with positioning of colorbox. The methods described on official website http://www.jacklmoore.com/colorbox/ are not quite enough for my purpose. The thing is that I have button opening the colorbox and I need to position it "over the button" (button is 50px height, colorbox is something about 700px height so I need to center it over the button (something like 300px top of the button).
I have tried basic repositioning with jquery in onOpen and onLoad function in colorbox like:
onOpen:function() {
$('#colorbox').removeAttr('top');
$('#colorbox').css('top','200px');
},
It works but colorbox settings automatically overwrite those settings right after onOpen or onLoad and colorbox is positioned in center of the viewport again.
So I am basically calling for help, colorbox positioning settings like top, left etc. are simply not enough for positioning on top of the button element.
Thanks in advance!
Edit: full code below
$(".reserve_").live('click',function() {
var loadUrl = $(this).attr("href");
$.colorbox({
innerWidth:660,
innerHeight:720,
returnFocus: true,
overlayClose: true,
fixed: false,
iframe: true,
href: loadUrl,
opacity: 0.6,
reposition: true,
onOpen:function() {
$('#colorbox').removeAttr('top');//test
$('#colorbox').css('top','200px');//test
},
onLoad: function() {
$('#colorbox').removeAttr('top');//test
$('#colorbox').css('top','200px');//test
},
onClosed:function() {
}
});
return false;
});
EDIT 2: link on jsfiddle: http://jsfiddle.net/zS8J8/8/ (sorry about the messy code in CSS and HTML)
The jsfiddle was helpful, I was able to use the same code as you and get it working.
This was tested in firefox 20, chrome 26, IE 9 on Win 7. The "Open Colorbox" link isn't visible in IE using your HTML, but if you move your mouse in that area, you'll see the cursor change and if you click, Colorbox will open in the correct location.
Here's the HTML, I changed class="rezervuj" to id="rezervuj" because we're keying on a single element rather than a bunch of images:
<h3 style="margin-bottom: 300px;">TOP OF THE PAGE</h3>
<div class="unitKontejner">
<div style="float:right;">
<a id="rezervuj" href="http://www.imgur.com">
<div class="reserveIt">
<div class="reserveIt-content">
open colorbox ยป
</div>
</div>
</a>
</div>
</div>
Here's the script that you can put in the head:
<script>
$(document).ready(function(){
// I removed the options that were set to the default.
// The top and left can be left out or set to a default,
// I used them as a test to see the difference when the event hook is used.
$("#rezervuj").colorbox({
iframe:true,
innerWidth:660,
innerHeight:720,
opacity: 0.6,
top: 0,
left: 0
});
// Use the "cbox_complete" event hook.
// It allows the colorbox div to be positioned after it opens,
// but before the content is loaded.
$(document).bind('cbox_complete', function(){
// Grab the position of the button,
// colorbox can be positioned relative to it.
var pos = $(rezervuj).position();
//console.log(pos);
// Set the position of the colorbox div
// You can add to or subtract from the pos values
// Example: top: (pos.top + 20) + "px"
$("#colorbox").css({
position: "absolute",
top: pos.top + "px",
left: pos.left + "px"
}).show();
});
});
</script>
you can also try this.
$.colorbox({
width: "600px", height: "500px", inline: false, overlayClose: false, escKey: true, iframe: true,
onComplete: function () {
$('#colorbox').removeAttr('top');//test
$('#colorbox').css('top', '100px');//test
$('#colorbox').removeAttr('display');//test
$('#colorbox').css('display', 'block');//test
},
onLoad: function () {
$('#colorbox').removeAttr('display');//test
$('#colorbox').css('display', 'none');//test
},
});
I have a long page with scroll bars. When I open a modal kenoWindow and scroll the page, the window goes off the viewing area. How can I force the window to stay where it is? I thought of making it's position fixed:
div.k-window
{
position:fixed !important;
}
But if I try to move the window, it jumps down (depending on the scroll position of the page).
Any idea?
There is an easier/better way. The snippet below will center the image on screen and position 20% from the top, even as you scroll:
$('#window').data('kendoWindow').center();
$('#window').closest(".k-window").css({
position: 'fixed',
margin: 'auto',
top: '20%'
});
Combined with position:fixed you should find it behaves as you are looking for, and with much less code.
I've got it working with re-positioning the window on page scroll event.
var fixedPosWindows = null;
var currentWindowScrollPos;
function FixWindowPos(kwin) {
if (fixedPosWindows === null) {
fixedPosWindows = [];
currentWindowScrollPos = $(window).scrollTop();
$(window).scroll(function () {
var top = $(window).scrollTop();
var diff = top - currentWindowScrollPos;
for (var i = 0; i < fixedPosWindows.length ; i++) {
var w = fixedPosWindows[i].parent();
w.css("top", parseInt(w.css("top"), 10) + diff + "px");
}
currentWindowScrollPos = top;
});
}
fixedPosWindows.push(kwin);
}
then I call the function for every window that I want to have fixed position:
var w = $("#window").kendoWindow();
FixWindowPos(w);
if you destroy a window, it will not remove from the array. so if it's a long living page with a lot of windows that are destroyed and recreated, it may have some performance isuues. But in most cases it's not a problem.
Edit:
Here is the jsfiddle: http://jsfiddle.net/mahmoodvcs/GXwfN/
Any better idea?
I've got this solution, but it involves jQuery position
var kendo_wnd = $("#window")
.kendoWindow({
title: "Title of Window",
modal: true,
visible: false,
resizable: false,
width: 500,
open: function (e) {
var currentWindow = $(this.element);
currentWindow.closest(".k-window").position({ my: "center", at: "center", of: window }).css("position", "fixed");
// Some Code;
}
}).data("kendoWindow");
I liked KakashiJack's solution, but ended up simplifying it a bit more. Using Kendo's built in center function instead of JQuery's position.
Using the Kendo example at
http://docs.telerik.com/kendo-ui/web/window/overview#initialize-window-center-and-configure-button-click-action
$(document).ready(function(){
var win = $("#window").kendoWindow({
height: "200px",
title: "Centered Window",
visible: false,
width: "200px",
open: function (e) {$(this.element).closest(".k-window").css("position", "fixed")}
}).data("kendoWindow");
});
$("#openButton").click(function(){
var win = $("#window").data("kendoWindow");
win.center();
win.open();
});
I'm trying to make a page inspection tool, where:
The whole page is shaded
Hovered elements are unshaded.
Unlike a lightbox type app (which is similar), the hovered items should remain in place and (ideally) not be duplicated.
Originally, looking at the image lightbox implementations, I thought of appending an overlay to the document, then raising the z-index of elements upon hover. However this technique does not work in this case, as the overlay blocks additional mouse hovers:
$(function() {
window.alert('started');
$('<div id="overlay" />').hide().appendTo('body').fadeIn('slow');
$("p").hover(
function () {
$(this).css( {"z-index":5} );
},
function () {
$(this).css( {"z-index":0} );
}
);
Alternatively, JQueryTools has an 'expose' and 'mask' tool, which I have tried with the code below:
$(function() {
$("a").click(function() {
alert("Hello world!");
});
// Mask whole page
$(document).mask("#222");
// Mask and expose on however / unhover
$("p").hover(
function () {
$(this).expose();
},
function () {
$(this).mask();
}
);
});
Hovering does not work unless I disable the initial page masking. Any thoughts of how best to achieve this, with plain JQuery, JQuery tools expose, or some other technique? Thankyou!
What you can do is make a copy of the element and insert it back into the DOM outside of your overlay (with a higher z-index). You'll need to calculate its position to do so, but that's not too difficult.
Here is a working example.
In writing this I re-learned the fact that something with zero opacity cannot trigger an event. Therefore you can't use .fade(), you have to specifically set the opacity to a non-zero but very small number.
$(document).ready(function() { init() })
function init() {
$('.overlay').show()
$('.available').each(function() {
var newDiv = $('<div>').appendTo('body');
var myPos = $(this).position()
newDiv.addClass('available')
newDiv.addClass('peek')
newDiv.addClass('demoBorder')
newDiv.css('top',myPos.top+'px')
newDiv.css('left',myPos.left+'px')
newDiv.css('height',$(this).height()+'px')
newDiv.css('width',$(this).width()+'px')
newDiv.hover(function()
{newDiv.addClass('full');newDiv.stop();newDiv.fadeTo('fast',.9)},function()
{newDiv.removeClass('full');newDiv.fadeTo('fast',.1)})
})
}
Sorry for the prototype syntax, but this might give you a good idea.
function overlay() {
var div = document.createElement('div');
div.setStyle({
position: "absolute",
left: "0px",
right: "0px",
top: "0px",
bottom: "0px",
backgroundColor: "#000000",
opacity: "0.2",
zIndex: "20"
})
div.setAttribute('id','over');
$('body').insert(div);
}
$(document).observe('mousemove', function(e) {
var left = e.clientX,
top = e.clientY,
ele = document.elementFromPoint(left,top);
//from here you can create that empty div and insert this element in there
})
overlay();