This question already has answers here:
Is there a way to force a user to scroll to the bottom of a div?
(6 answers)
Closed 8 years ago.
I can't find a website at the moment, because I'm not at my desk where this is done, but I have seen it when you register there is a Terms of Use. To make sure the user reads it, it appears in a dialogue box (not sure of the exact name of this in HTML) and the "register" button stays greyed out until the user scrolls through the entire Terms of Use. How is this done? I am assuming this is JavaScript, but I don't know how to detect and control this. Some examples of this or how this is done in JavaScript would be very helpful. Thanks!
You can do this without jQuery with the following code:
//Your DIV with the TOS
var i=document.getElementById("ipsum");
//Event Listener for Scroll
i.onscroll=function(){
//Your Button
var y = document.getElementById("yay");
//The height to scroll to:
var x = i.scrollHeight - i.offsetHeight - 1;
if(i.scrollTop >= x)
y.removeAttribute("disabled");
else if(!y.hasAttribute("disabled"))
y.setAttribute("disabled",true);
};
Fiddle with HTML and CSS here.
Also, I agree with everyone else who's posted or commented, this is probably not a good idea.
You want to check the scrollTop is toward the bottom of the scrollHeight on the element.
$('.tos').scroll(function() {
if ($(this).scrollTop() + $(this).height() >= $(this)[0].scrollHeight - 100) {
$('input[type="submit"]').prop('disabled', false);
}
});
Adapted from this answer
Here is a jsfiddle example.
Warning: Before you implement this
This will not detect if the user has read the terms. It is also extremely annoying to have to scroll through these (often tiny) TOS boxes.
A much, much better solution is to require the user to explicitly tick a box stating they have read and understand the TOS.
Related
Recently I have been working on a project with an image grid for a friend of mine. The idea behind the website was that when the images in one row come into focus it pops out and the remaining go back into their original sizes.
After some research I found the IntersectionObserver API for JavaScript and the following example: http://codepen.io/pawelgrzybek/pen/YWqWXJ I modified the code to change the threshold to
let options = {
threshold: [1.0]
};
but those are just personal modifications, the issue I had was when I scroll down to the next element that comes into focus using the visible class but the previous elements still stay in focus. I wasn't sure about the best way to go about doing this.
I found examples and was able to notice the following code:
function updateStatus(visiblity) {
console.log(visiblity);
const status = document.querySelector('.status');
status.textContent = visiblity;
status.className = 'status status--' + visiblity;
}
but this is only for the top bar in the Simple Example I needed some help figuring this out, please and thank you everyone!
I've spent quite a while trying to find answers for this issue, but haven't had any success. Basically I need to scroll the user to the contact portion of the website when they go to healthdollars.com/#contact. This works just fine in Safari, but in Chrome I haven't had any luck. I've tried using jQuery/Javascript to force the browser to scroll down, but I haven't been able to.
Does anyone have any ideas? It's driving me crazy - especially since it's such a simple thing to do.
Not a full answer but in Chrome if you disable Javascript I believe you get the desired behavior. This makes me believe that something in your JavaScript is preventing default browser behavior.
It looks to me like the target element doesn't exist when when page first loads. I don't have any problem if I navigate to the page and then add the hash.
if (window.location.hash.length && $(location.hash)) {
window.scrollTo(0, $(location.hash).offset().top)
}
check for a hash, find the element's page offset, and scroll there (x, y).
edit: I noticed that, in fact, the page starts at #contact, then scrolls back to the top. I agree with the other answerer that there's something on your page that's scrolling you to the top. I'd search for that before adding a hack.
You can do this with JS, for example` if you have JQuery.
$(function(){
// get the selector to scroll (#contact)
var $to = $(window.location.hash);
// jquery animate
$('html'/* or body */).animate({ scrollTop: $to.offset().top });
});
The name attribute doesn't exists in HTML 5 so chrome looks to have made the name attribute obsolete when you use the DOCTYPE html.
The other browsers have yet to catch up.
Change
<a name="contact"></a>
to
<a id="contact"></a>
Maybe this workaround with vanilla javascript can be useful:
// Get the HTMLElement that you want to scroll to.
var element = document.querySelector('#contact');
// Stories the height of element in the page.
var elementHeight = element.scrollHeight;
// Get the HTMLElement that will fire the scroll on{event}.
var trigger = document.querySelector('[href="#contact"]');
trigger.addEventListener('click', function (event) {
// Hide the hash from URL.
event.preventDefault();
// Call the scrollTo(width, height) method of window, for example.
window.scrollTo(0, elementHeight);
})
I am having an issue getting the height of an object. Please excuse the mass (and mess!) of code it was easier to show the issue this way.
To recreate problem - hit the blue 'play' button - then click the green 'back to where we were' button.
You will see that it doesn't work on the return and I am completely stuck.
To make matters worse I am calculating the height on an element that is visibility: hidden - so I can't even tell if it is collapsing in some weird way!
The problem lies in the atrocity that is my 'getheight()' function but I can't see where it is causing the issue. (code here for reference - the fiddle tells the full story.)
please help me out guys - and do'nt criticise my 'code as I think mess' too much :-D
p.s. - as this is turning into a rather complex and messy lot of code and alternative ways to achieve what I am trying to achieve (morph one container to another without having to absolutely position either of the items) would be appreciated - just some ideas dont want code writing for me!
Fiddle illustrating problem
function getHeight(elem){
var parent = $(elem).parent();
if(parent.css('display') == "none"){
console.log('parent');
parent.css('display', 'hidden');
parent.css('position', 'absolute');
parent.css('display', 'block');
theHeight = $( elem ).height();
parent.css('display', 'none');
return theHeight;
}else{
console.log('element');
var beforePos = $(elem).css("position");
var beforeDisplay = $(elem).css("display");
var beforeVisibility = $(elem).css("visibility");
$(elem).css('visibility', 'hidden');
$(elem).css('position', 'absolute');
$(elem).css("cssText", "display: block !important");
console.log("DISPLAY" + $(elem).css('display'));
theHeight = $(elem).height();
console.log(theHeight);
console.log(beforeVisibility);
console.log(beforeDisplay);
console.log(beforePos);
console.log(elem);
$(elem).css("cssText", "");
$(elem).css('visibility', 'visible');
$(elem).css('display', beforeDisplay);
$(elem).css('position', beforePos);
return theHeight;
}
}
as for getting height of hidden element, jQuery page says this:
The value reported by .height() is not guaranteed to be accurate when the element or its parent is hidden. To get an accurate value, ensure the element is visible before using .height(). jQuery will attempt to temporarily show and then re-hide an element in order to measure its dimensions, but this is unreliable and (even when accurate) can significantly impact page performance. This show-and-rehide measurement feature may be removed in a future version of jQuery.
link to the jQuery height function
Thanks to Mark for pointing me to the documentation - the fix was actually quite simple once I knew what inconsistency jQuery has -
changed:-
theHeight = $(elem).height();
to
theHeight = $(elem).css("height");
and it functions as it should!
now working fiddle
So I haven't yet started writing any of this, so I'll do my best to put together some pseudocode for the sake of clarity - but the idea here is that a user would click and hold on a 'button' ( might not end up being an actual button ), that then spawns a movable DIV. Once the DIV has been created ( wherever the mouse is at the time, perhaps offset a little so the mouse is inside the div ), I'd like to switch my 'hold focus' to the new, movable DIV, so that it can be positioned on the screen; at which time I'll do some other operations on the DIV - but after this point the remainder is irrelevant to the question.
In true, incomplete pseudocode - this is roughly what I'm after; and I believe that my biggest question here is how to actually change my grab focus.
<script>
function NewDiv()
{
NewDiv = CreateDiv(MouseX, MouseY);
GrabDiv(NewDiv);
}
function CreateDiv(X, Y)
{
// DOM for a new DIV... I've got this part covered...
// JQuery for Movable - Covered
NewDiv.style.left=(X - 3) + "px";
NewDiv.style.top=(Y - 3) + "px";
return NewDiv;
}
function GrabDiv(Div)
{
// Here's the question...
// Div.Focus? - While the mouse is still down, I might think this would work?
// Div.onMouseDown? - Buuuuuut... Is that going to interact with the mouse properly?
}
</script>
<input type='button' onMouseDown='NewDiv();' value="Spawn a new Div" />
Now - again, the real question is what the 'proper' approach to the 'GrabDiv' function would be. Any feedback is much appreciated; and if I need to elaborate at all I'm glad to.
-- It looks like there may have been at least one other post on something like this; with a pretty convoluted answer. Perhaps this little bump will encourage a new answer. Hopes.
Have you seen this working somewhere else?
I would look into using jQuery-UI's drag and drop.
Edit: I guess it does work. I would use this jsbin as a starting point: http://jsbin.com/deyovunaxe/2/edit
I have seen a lot of websites which "wrapper" width is 960px. As a background image they have an image which is clickable (some kind of advertise) and the whole webpage is over that image, like on this site.
Can you give me tutorial or something on that ?
Tom's code was a huge help, but I needed pointer cursor for this type of ad, but not for all the site, so I came up with this solution:
$('body').bind('click', function(e) {
if ($(e.target).closest('#container').size() == 0) {
alert('click');
}
}).bind('mouseover', function(e) {
if ($(e.target).closest('#container').size() == 0) {
$(this).css('cursor','pointer');
} else {
$(this).css('cursor','default');
}
});
In the first place you put the ad image as the website background then basically you have to capture the click on the whole body and check if it was in-or-outside of the page content. To do that you have to check if the event target element have the content wrapper (or wrappers if there are multiple) as one of its parent nodes - if not it means the click was outside of the page content.
If you'd like to do it here on StackOverflow you could do it with this bit of code.
$('body').bind('click', function(e){
if(!$(e.target).closest('#content').length) {
alert('ad outside content clicked');
}
});
Feel free to try it in your javascript console - SO is using jQuery so it will work - when you will click outside of the content area (at the edges of the screen) you will get alert that ad was clicked.
You'd obviously have to replace the alert with any kind of callback you'd have for your commercial - opening a new web page or whatever
Hope that helps
Tom
ps.
Keep in mind that this example is using jQuery for simplicity not native JS so you'd need the library for it to work.