Im having a problem in how im going to push it upward when it toggles down heres the code
$("#inquire_button").click(function(){
function formfocus() {
document.getElementById('clientName').focus();
}
window.onload = formfocus;
$("#pPage_mainDivRight_inquireDivTop").fadeOut(function(){
$("#pPage_mainDivRight_inquireDivBottom").stop().slideToggle("slow");
if($(document).scrollTop()<=284){
$('html, body').animate({
scrollTop: "284px"
},1000);
}
if($(document).scrollTop()>=900){
/*$(".pPage_mainDivRight_headerDiv3").css({"position":"fixed","top":"123px"});*/
$(".pPage_mainDivRight_headerDiv3").stop().animate({"top":"-10px"}, "slow");
}
});
});
Here's the code for scrolling
$(document).scroll(function(){
if($(this).scrollTop()>=265){
$(".pPage_mainDivRight_headerDiv3").css({"position":"fixed","top":"123px"});
}
if($(this).scrollTop()<=305){
$(".pPage_mainDivRight_headerDiv3").css({"position":"static","top":"123px"});
}
});
and after i toggle it, if i scrolled it up the position of the sidebar toggle gets destroyed.
heres the preview when i toggled it up
![1]: https://nimbus.everhelper.me/client/notes/share/11053/EM4rLcpMJwdLm9CtSOkwZiiPGm53bnxU/
and when i scrolled it the position destroyed
![2]: https://nimbus.everhelper.me/client/notes/share/11054/QTin2OKMMF60OGgS5x9WzBfTDGcVzpQn/
Related
I have a ion content with an horizontal scrollbar
<ion-content [fullscreen]="true" [scrollX]="true" (wheel)="onWheel($event)">
The scrollbar works well but the mouse wheel does not.
I would like to use mouse wheel to scroll horizontally
Here is my try :
onWheel(event: WheelEvent): void {
console.log(event.deltaY);
const element: HTMLElement = event.currentTarget as HTMLElement;
element.scrollLeft += event.deltaY;
event.preventDefault();
}
The console log show +100 or -100, but the scroll does not make it.
The scroll is on a element under the ion-content.
This works :
onWheel(event: WheelEvent): void {
const element: IonContent = event.currentTarget as unknown as IonContent;
element.getScrollElement().then((scroll) => {
scroll.scrollLeft += event.deltaY;
});
event.preventDefault();
}
I want to start marker dragging after 2 seconds on the mousedown.
I know how to enable/disable the dragging, but not find how to start dragging by code.
I tried :
marker.on('mousedown', function(e){
setTimeout(() => {
marker.dragging.enable();
marker.dragging._draggable._onDown(e);
}, 2000);
});
The draggable option is enable, but the marker does not move.
Of course, I can move it on the 2nd mousedown.
this is solve my problem :
marker.on('mousedown', function(e){
setTimeout(() => {
map.dragging._draggable.finishDrag();
marker.dragging.enable();
marker.dragging._draggable._onDown(e.originalEvent);
}, 2000);
});
I have created a portfolio-type (WordPress-based) website, using FullPage and Flexslider (as a absolute positioned pop-up), and it has a FullScreen button, which is currently giving me some nightmares, but only on the second ".section" in of the FullPage (it only has two sections).
I am also using SlimScroll.js as advised on the FullPage documentation as it can be taller than the window.
For Chrome the animation is "clunky", and when it goes fullscreen it waits like a second until it actually does. Please see the image below:
Screenshot of transition happening
I have added the following code and it worked for the first section, but not to the second section...:
html:not(.ios) .fp-section.active {
height: 100vh !important;
}
html:not(.ios) .fp-section.active .fp-tableCell {
height: 100vh !important;
}
On Safari, though, the transition is smooth but, every now and then, when it finishes it flickers...!
On Firefox there's not much problem as the fullscreen fades in and out. (Is there a way to replace it for a zoom-type animation?
My FullPage settings:
$('#fullpage').fullpage({
// Navigation
slideNavigation: false,
// Scrolling
easingcss3: 'cubic-bezier(0.850, 0.000, 0.250, 1.000)', //easeInOutCirc
scrollingSpeed: 500,
scrollOverflow: true,
// Design
controlArrows: false,
// Events
afterLoad: function(anchorLink, index) { // after changing section
if (index == 1){
// Load scrollDown link so that you don't have to load it afterwards
$('#main').load(scrollDown + ' .main-content', function(){
$.fn.fullpage.reBuild();
});
// Hide menu
if ( $( '#site-navigation' ).hasClass( 'toggled' ) ) {
$( '#site-navigation' ).removeClass('toggled');
$( '#site-navigation .menu-toggle').attr( 'aria-expanded', 'false' );
$( '#site-navigation ul').attr( 'aria-expanded', 'false' );
}
}
colorInversion();
popupSlider();
},
afterRender: function() { // so that it applies to first section too
colorInversion();
popupSlider();
},
afterSlideLoad: function( anchorLink, index, slideAnchor, slideIndex) { // after changing slide
//$.fn.fullpage.reBuild();
popupSlider();
}
});
My FlexSlider settings:
$('#popup-slider').flexslider({
animation: 'slide',
slideshow: false,
easing: 'easeInOutExpo',
animationSpeed: 0,
customDirectionNav: $(".flex-direction-nav a"),
// Usability features
video: true,
// Special Properties
manualControls: '.popup-slider-link',
// Callback API
start: function(slider){
$('.slides li *').click(function(event){
event.preventDefault();
slider.flexAnimate(slider.getTarget("next"));
});
},
after: function(){ // After each slider animation completes
flexslideColorInversion(); // Check for color inversion
$('#popup-slider').data('flexslider').vars.animationSpeed = 500; // Put animation speed back to 500
},
});
(Flexslider is initialised inside the popupslider() function.)
Is there a way to "fix" these issues?
Thank you so much in advance to anyone who may be able to help me with this.
EDIT:
I have seen that the lag in Chrome was because the popup was over the thumbnails and therefore was still resizing them even though they weren't in view; my solution to this was to apply a "display: none" to when the popup slider was on.
The Flicker in Safari is because FullPage.js changes the sections' sizes and their "translate3d", so there is a flicker when that adjustment occurs. The default Fullpage.js characteristic is to actually show part of the section above while it's adjusting, but as I am using 100vh for the .active section it doesnt show on Chrome, Opera or Firefox and only flickers in Safari (hence me wondering what the flicker was!)
Probably the only way around it is to recode Fullpage.js's translate3d (and height/width) codes also with "vh" so that it doesn't have to adjust the size. If any one has a ready code of this, that would be really appreciated! (IE8 is support is not required).
Cheers
http://docs.kendoui.com/api/dataviz/stock-chart#events-zoom seems to help in disabling mousewheel event on chart area. However, there doesn't seem to be anything that can help aborting zoom event on stockChart navigator.
Try these:
zoom: function (e) {
e.preventDefault(); //prevents mouse event
}
or
zoom: function (e) {
e.originalEvent.preventDefault(); //prevents window from scrolling
}
or atleast you can return false in combination with e.preventDefault()
I used the JScrollPane from http://jscrollpane.kelvinluck.com/ and modified it to hide the arrow key when scrolling at the end (top or bottom). When scrollbar is at the top, the arrowUp should disappear, showing only arrowDown at the bottom and appears again when scrolling down.
I've made the arrow image disappear at the top, but the problem is the scroll track does not change but just adds extra space equal to the size of the arrow image at the very bottom. How can I go around this, how do I change it so that when the arrow is hidden at one end, the jspTrack's height is adjusted as well, showing the other arrow on the opposite end without extra space?
if (settings.showArrows) {
if(isAtTop){
arrowUp.addClass('jspDisabled');
arrowUp.css('display', 'none');
}
else{
arrowUp.removeClass('jspDisabled');
arrowUp.css('display', 'block');
}
if(isAtBottom){
arrowDown.addClass('jspDisabled');
arrowDown.css('display', 'none');
}
else{
arrowUp.removeClass('jspDisabled');
arrowDown.css('display', 'block');
}
/*arrowUp[isAtTop ? 'addClass' : 'removeClass']('jspDisabled');
arrowDown[isAtBottom ? 'addClass' : 'removeClass']('jspDisabled');*/
}
Thanks all.
you can control it via css
<style>
.jspVerticalBar{
background:none;
}
.jspVerticalBar .jspArrow{
display:block;
}
.jspVerticalBar .jspDisabled
{
display:none;
}
</style>
JavaScript:
<script>
$('.pane').jScrollPane({showArrows:true});
</script>