i have a huge html form , with near 350 controls that take 5-6 times of the user screen height.
user starts completing each input field from the beginning of the page and goes on.
once the cursor rich near the bottom of screen user must be able to see some next input fields so here is the problem :
i want to avoid the scrollbar usage.
i want to set some "margines" ( say 200px for each page side )
if user clicks a control that is near the screen edge, here this mechanism must work also
i'm looking for a jQuery solution
playing around with jQuery.ScrollTo, but can't figure out how to embed my logic into code.
This should do it
http://jsfiddle.net/JsWnk/
$(document).ready(function() {
$('input').focus(function() {
var padding = 100; // Desired page "padding"
var lbound = $(this).offset().top - $(window).height() + padding;
var ubound = $(this).offset().top - padding;
if ($(window).scrollTop() < lbound)
$(window).scrollTop(lbound);
else if ($(window).scrollTop() > ubound)
$(window).scrollTop(ubound);
});
});
Something like this should work...
http://jsfiddle.net/q9QHQ/
$(document).ready(function() {
$('input').focus(function() {
if ($(this).offset().top > 100)
$(window).scrollTop($(this).offset().top + 100);
});
});
Related
This may well have been asked before but I have an issue with a parallax effect I have deployed on an image slider. On scroll, the background images being used in the slider adjust their position and their opacity.
The problem is if I scroll a short way down the page and then refresh the page, the background position and the opacity revert to their original values, so then scrolling causes a jump in order for them 'catch up' on what their actual values should be.
I'm trying to figure out how I can have the values automatically set no matter what position the page is in when it's refreshed.
Here is the code that I have currently
//HomepageParallaxFade
window.addEventListener('scroll', function () {
var scrollPosition = window.pageYOffset;
var bgParallax = document.getElementsByClassName('carousel-cell');
Array.prototype.forEach.call(bgParallax, function (el) {
var limit = el.offsetTop + el.offsetHeight;
if (scrollPosition > el.offsetTop && scrollPosition <= limit) {
el.style.backgroundPositionY = (50 + 90 * scrollPosition / limit) + '%';
el.style.opacity = (1 - 1 * scrollPosition / limit);
} else {
el.style.backgroundPositionY = '50%';
}
})
});
Happy to provide a JSFiddle if necessary. All help much appreciated
You can do parallax with pure css.
https://www.digitalocean.com/community/tutorials/css-pure-css-parallax.
From there, when you refresh if you set the scroll position with javascript, the parallax will just work.
I want my navbar to be transparant on the top and bottom of my page but i want it to not be transparant in the middle. When i have my webpage on full screen this works:
$(window).on("scroll", function () {
if ($(window).scrollTop() > 720 && $(window).scrollTop() < 1450 ) {
$(".nav").addClass("active");
} else {
$(".nav").removeClass("active");
}
})
But when it gets resized this wont work anymore because the sizes change. Is there a way to do this with % instead of just normal numbers so it will be responsive?
It occur because you hardcoded your height values. Check the whole site height, divide it on three and incorporate this variables to your if statement. Every time you resize browser window it will recalculate your new position.
window.addEventListener('resize', function() {
//one third and two third of website
oneThird = window.scrollHeight / 3;
twoThird = onethird * 2;
if ( $(window).scrollTop() > oneThird && $(window).scrollTop() < twoThird ) {
$(".nav").addClass("active");
} else {
$(".nav").removeClass("active");
}
}
You can use Media Queries with JS too, so you can do certain things on your desired window size, this might help https://www.w3schools.com/howto/howto_js_media_queries.asp
http://codepen.io/BrianDGLS/pen/yNBrgR
This is what I am currently using which allows the user to track where he is on the page.
What would I have to do to show a div when the user reaches the bottom of the page? And continue to show it until he hits refresh
#show {display: none}
<div id="show">
<p>Hello</p>
<p>World!</p>
</div>
Show the div '#show' when the user reaches the bottom of the page and continue to show it for as long as he stays on the page.
Using a convention that mirrors the sample JS code:
$(window).scroll(function() {
var wintop = $(window).scrollTop(),
docheight = $(document).height(),
winheight = $(window).height(),
scrolled = (wintop / (docheight - winheight)) * 100;
if (scrolled >= 100) {
$(yourDiv).show();
}
});
The computation of the scroll percentage is straight from the link you provided and the condition just checks if you've reached 100% of the page (minus current window size).
You could also change 100 to be whatever percentage if you want to load the div before the user reaches the absolute bottom.
It could be something like:
$(window).on('scroll', function(){
var op = $(window).scrollTop() + $(window).height();
if( op >= $(document).height() ) $("#show").show();
});
You need to trigger a Javascript function when the <div id="show"> is visible in the client's viewport, for that you can use a plugin
try below code
var show=false;
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height() || show==false) {
$("#show").show();
show=true;
}
});
I want to imitate the Google+ header with the search bar. When you scroll down it goes to top:-60px and the second horizontal menu will be top:0 from top:60px and become the main top horizontal menu, while the one with top:-60px remains hidden until we scroll to top.
I managed to do this, but it only works when I scroll slowly (with trackpad, OSX, Chrome33). I researched and found out the scroll speed depends on the hardware (touchpad, mouse), the OS and even on the browser. I found mousewheel plugin, that aims to make the scrolling speed equal but I can't make it work.
Here is the js code: ( The delta divisions I got from here: https://stackoverflow.com/a/16696129 )
<script type="text/javascript">
gn_top_menu_featured = $('.gn-top-menu-featured'),
gn_top_menu = $('.gn-top-menu'),
hide_gn_top_menu_featured = 0,
gn_top_menu_position = 44;
$('body').on('mousewheel', function(event) {
if( event.deltaX >= 40 )
event.deltaX /= 40;
if( event.deltaY >= 40 )
event.deltaY /= 40;
var sy = $('body').scrollTop();
if ( sy >= hide_gn_top_menu_featured && sy <= gn_top_menu_position ) {
gn_top_menu_featured.css('top', -sy);
gn_top_menu.css('top', gn_top_menu_position-sy);
}
else {
// whatever
}
});
</script>
I really want to get this working properly, thank in advance. :)
Turns out i misunderstood your problem at first. Here's another attempt at solving this. I still might not be understanding you correctly, because I still don't need to control the mousewheel speed to make this work. Here's the updated fiddle.
I use the $(window).scroll event to check the $(window).scrollTop() value and change the css class of the div.
$(window).scroll(function(){
$("#nav").css("top", ($(window).scrollTop() < 60 ? (60 - $(window).scrollTop()) : 0) + 'px');
if ($(window).scrollTop() > 60) {
$("#nav").addClass('sub-60').text('WOOT!');
}
else {
$("#nav").removeClass('sub-60').text('MAIN NAV');
}
});
I'm looking for a solution to keep an element in view, while scrolling the rest of the page.
I don't want to re-invent the wheel so i'm reaching out to see if the community knows of a canned solution already.
I want to apply this to a huge table that I have, and I would like users to be able to continue seeing the table headers as they scroll down.
Just to clarify, what I'm looking for is different from a scrollable table with overflow CSS settings. The reason I can't use a scrollable table is because that method becomes very slow with thousands of rows. Also that method does not work well on the iPhone browser.
Ideally I would like it so that when the user scrolls the page down the table's header would 'stick' at the top edge of the browser's view. Inversely if the user scrolls back up it would continue to stick there until it arrives back at the original position the header started from.
Are you looking for the #element { position: fixed; ... }? You can switch between fixed, relative and absolute using JS.
http://www.w3schools.com/cssref/pr_class_position.asp
Edit
Take a look at how they do it on [I hope they don't mind] http://www.zocdoc.com/search.aspx?dr_specialty=98&address=Enter+a+City+and+State%2C+or+Zip&insurance_carrier=-1&insurance_plan=-1&button.x=166&button.y=21
They use jQuery, it doesn't seem complicated and they also has an IE6 workaround
$(function() {
var msie6 = $.browser.msie && $.browser.version < 7;
if (!msie6) {
var top = $('#scroll_header').offset().top
- parseFloat($('#scroll_header').css('margin-top').replace(
/auto/, 0));
$(window).scroll(function(event) {
var y = $(this).scrollTop();
if (y >= top) {
$('#scroll_header').addClass('fixed');
} else {
$('#scroll_header').removeClass('fixed');
}
});
var y = $(this).scrollTop();
if (y >= top) {
$('#scroll_header').addClass('fixed');
} else {
$('#scroll_header').removeClass('fixed');
}
} else {
setInterval("checkScroll()", 100);
}
});
function checkScroll() {
ie6top = $('#scroll_header_wrapper').offset().top;
if ($(document).scrollTop() > ie6top) {
$('#scroll_header').css("top", $(document).scrollTop() - ie6top + "px");
$('#scroll_header').css("visibility", "visible");
} else {
$('#scroll_header').css("visibility", "hidden");
}
}