So, I'm trying to create something that's unique and uses absolute positioning. Along with overflow:hidden;, this website wont contain a scrollbar, but I still need to test when the user is using the scroll wheel.
Attempts
Here is a Code Snippet of my problem.
document.getElementById("main").onscroll=function(){
console.log("scrolled");
document.getElementById("scrolled").innerHTML="true";
}
#main {
width:100px;
height:100px;
border:1px solid #000;
overflow:hidden;
}
.object {
width:100%;
height:75%;
background:rgba(0,0,0,0.1);
}
<div id="main">
<div class="object"></div>
<div class="object"></div>
<div class="object">Can't see me.</div>
</div>
(The objects inside are expanding, it's just hidden)<br>
Try scrolling (with scroll wheel) in the div, then look below.<br>
Scroll triggered: <span id="scrolled">false</span>
As you can see, no scroll is triggered, that's because there is no scrollbar! Essentially, I would still like to know if the scroll wheel is being used, I'd also like to know if it's being used upwards or downwards.
What's my goal?
Basically, I want to create this "dynamic scrolling" type framework behind my website. So, the container is overflow:hidden, but when the scroll wheel is triggered (either up or down) it increments or decrements a varible which is set as top:(variable) in JavaScript.
So all in all, I just want something that detects if the scroll wheel is being used so I can fulfil my dynamic scrolling script.
Things I'm aware of (so you shouldn't mention them to me)
I'm aware that some people have broken scroll wheels, or don't even have one. So before you mention it. My solution to that is putting buttons at the bottom (or top) of each slide, which scrolls down or up according.
Other
The solution should be pure javascript, that means no libraries! Sorry to put you through the struggle, but that's what I need. The only acception I'll make is if the script is way to long and a library makes it shorter. Otherwise, no no.
That's all!
Thanks for reading through, and good luck find a solution! I'll be furiously trying to find a solution as well. I'll update this post to let you know if I find any information, or require something different.
Feel free to ask questions in the comments.
You can try to set the position gradually in reaction on wheel event. This event is fired every time the mouse wheel is scrolled. Event properties deltaX, deltaY, deltaZ contains the size of shift in given direction.
Snippet http://jsfiddle.net/07516utp/ shows sensing of scroll deltas of this event.
document.addEventListener('wheel', onWheel);
function onWheel(event) {
document.querySelector('#log').innerHTML = 'event: dx=' + event.deltaX + ' dy=' + event.deltaY + ' dz=' + event.deltaZ;
}
Related
I'm trying to create a small image that follows the mouse around but only exists inside a specific area. I'm using javascript/jquery to create the image when the mouse enters the area and remove it when the mouse leaves.
The problem is, if I create the "follower" inside the area div, the image seems to be considered part of it's parent for determining mouse state, and thus it continues to exist even after the mouse is outside the area.
(If I move the mouse fast enough the cursor will escape and the follower disapears.)
Here is the code I'm using:
$("#area").mouseenter(function() {
$("#area").append("<img id='follower' src='follower.png'/>");
});
$("#area").mousemove(function(event){
$("#follower").css("top",event.pageY-35);
$("#follower").css("left",event.pageX-35);
});
$("#area").mouseleave(function() {
$("#follower").remove();
});
JSFiddle: http://jsfiddle.net/cgWdF/186/
I have also attempted creating the "follower" inside a separate div, which works but results in a weird flickering of the image, as seen here: http://jsfiddle.net/cgWdF/187/
Any help, with this, would be appreciated. It doesn't matter whether the follower is created inside the area div, or not, as long as the flickering affect isn't seen. Also, I'd like to keep the code as compact as possible, but I'll take what I can get.
This occurs because the element on which you mouseleave is not the one on which you think it happens. In fact, your sprite is triggering the event instead because your pointer is over it at that time.
To prevent that from happening, you can force the page to cancel all pointer events on your sprite. By doing that, #area will trigger your pointer events as intended. The css rule pointer-events might be helpful for this.
CSS
#follower {
position: absolute;
height: 80px;
pointer-events: none;
}
There are probably better ways to deal with that but it's the most simple I can come up with for now.
Hope this helps!
See FIDDLE.
I copied this from another post, not blindly, I can see what it does but I can't think of a way to fix the problem. I am not really proficient in JavaScript but I can read this snippet.
// The function actually applying the offset
function offsetAnchor() {
if (location.hash.length !== 0) {
window.scrollTo(window.scrollX, window.scrollY - 100);
}
}
// This will capture hash changes while on the page
$(window).on("hashchange", function() {
offsetAnchor();
});
// This is here so that when you enter the page with a hash,
// it can provide the offset in that case too. Having a timeout
// seems necessary to allow the browser to jump to the anchor first.
window.setTimeout(function() {
offsetAnchor();
}, 3);
;(function($) {
$('.swipebox').swipebox();
})(jQuery);
The issue was, that when I was scrolling to DIVs with ID's used for anchor points, I was scrolling slightly too far down as I have a sticky header. I tried using this so when changing DIV it would account for the sticky header, it doesn't exactly work perfectly but the main issue I am having, is that I will have over 12 navigation DIV ids, and every time anyone of them is clicked it no longer goes to the DIV, but instead just scrolls up -100 pixels.
I essentially need a solution that will scroll to just above where I need it without affecting the rest of my menu functionality, it doesn't have to be achieved by JS but that's the only feasible way I can see a solution (I've tried thinking of a CSS only one but margin/padding won't help in this situation of scrolling)
To give one last detail, when clicking on a navigation div it will scroll to that div, and the menu (sticky header) will cover some of the image and the of the item scrolled too. Major problem :)
I can leave a link if you'd like a better description and I am learning JS at the moment, but as this is for a client I'd love to be able to fix it within a timely manner and would greatly appreciate any and all help anyone can offer.
Thank you.
In this question there's an answer for jumping to certain element.
If you want a smooth scroll: look here.
Any idea how make a layout like google plus or facebook. You can see at google plus home as example,
at the beginning, if you scroll the page in the main content, they will scroll together (friend post and sidebar), but when you scroll until the bottom of sidebar (in the right of friend post), that sidebar will stop scrolling , but the another content (friend post) will still scrolling. can explain to me how to make layout like that? sample code or demo will be very help.
Fixed positioning with CSS is a very limited approach. There are a number of ways to do this style of "fixed" areas, many of which have already been given in answers to similar questions on here (try the search above?).
One technique (which many are based on) is like so (in brief)..
Capture the browser's scrolling
Get the position from top of chosen element (x)
Check if the scrolling > x, if so apply a class to the element to fix it to a certain position.
The same will work in reverse, for example:
var target = $('#div-to-stick');
var div_position = target.offset().top;
$(window).scroll(function() {
var y_position = $(window).scrollTop();
if(y_position > div_position) {
target.addClass('fixed');
}
else {
target.removeClass('fixed');
}
}
Note: Depending on how you chose to complete the code above, the page will often "jump" as the div's position is modified. This is not always a (noticeable) problem, but you can consider getting around this by using .before with target.height() and appending a "fake" replacement div with the same height.
Hope this helps.
The new approach with css3 is reduce your effort. use single property to get it.
position:sticky;
here is a article explained it and demo.
article
Demo
You are looking for CSS position:fixed (for the scroll-along sidebar), you can set the location with left:[length], right:[length], top:[length], bottom:[length] and the normal width and height combos
You will need to augment it with a window resize and scroll listener that applies the position:fixed property after the window has scrolled past the top of the sidebar.
Use css property (position:fixed). This will keep the position of the div fixed even if you scroll down or scroll up.
Problem in brief
I have got a piece of working two dimensional scrolling code. Scrolling as such is working fine. Scrolling can be done in any direction (not like restricted to only horizontal or only vertical at a ti,e) but there are two problems -
Scrolling beyond the visible area towards top and left, does not bounce back the scrollable area.
Scrolling to right and bottom bounces back.
Problem demo - http://jsfiddle.net/sandeepan_nits/pAhjU/6/
Note - Test in webkit browsers only (Google chrome and Safari).
Solution I am looking for
Either, point out what is wrong in my code.
Or share any properly implemented working demo of both ways scroll (horizontal + vertical) using the same version of iscroll, so that I can follow the same. I am using - version 3.7.1, preferable, or using iscroll version 4, fine as well.
Or any pointers, of course, would be appreciated.
Problem Description
Please check working code here - http://jsfiddle.net/sandeepan_nits/pAhjU/6/
Note -
Test in webkit browsers only (Google chrome and Safari).
I have knowingly put everything inside the HTML section in the jsfiddle, because if I separate things completely, the scrolling does not work, and I am not sure where exactly it stops working. Thanks if you can point out.
Code
Here is the HTML -
<div class="header">
<div class='left_link'></div>Demo</div>
<div id="main_content" class="main_content">
<b><div id=scroller1><br/>
<div class='center_data'>Scrollable area</div>
<div class='center_data'>hello world!</div>
<br/>
</div></b>
</div>
Note - I know there is invalid html there - <div id=scroller1> is inside <b></b> and I am not sure why if I remove the <b></b> tags, horizontal scrolling does not work anymore - check here.
Here is the js -
var myScroll;
var a = 0;
function loaded() {
//setHeight(); // Set the wrapper height. Not strictly needed, see setHeight() function below.
// Please note that the following is the only line needed by iScroll to work. Everything else here is to make this demo fancier.
myScroll = new iScroll('scroller1', {desktopCompatibility:true});
//myScroll2 = new iScroll('scroller2', {desktopCompatibility:true});
}
// Prevent the whole screen to scroll when dragging elements outside of the scroller (ie:header/footer).
// If you want to use iScroll in a portion of the screen and still be able to use the native scrolling, do *not* preventDefault on touchmove.
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
// Load iScroll when DOM content is ready.
document.addEventListener('DOMContentLoaded', loaded, false);
I guess the reason is that the scrollable div is by default rendered at the bottom-right corner of the scrollable area. But I am not sure about the proper way to configure those things - how to set where to render the scrollable div inside the scollable area. So far I did not find any working demo of both ways scrolling - horizontal + vertical scrolling.
I checked out the documentation of iscroll and many working demos, but did not find any demo where scrolling can be done both ways - horizontally as well as vertically. I checked the "Accepted options are:" section under "Syntax" section in http://cubiq.org/iscroll but none of those params seem to be what I am exactly looking for.
Other things
Also, one more thing, I am not able to view the area covered by dom elements in chrome browser, while I inspect the given scroll demo. By viewing the area I mean moving the mouse over the dom inspector panel highlights the dom in the browser view. When does it not appear? I checked with validated HTML as in http://jsfiddle.net/sandeepan_nits/pAhjU/12/.
Somebody please create a tag iscroll or iscroll3 so that I can retag my question.
Update
I just want to have normal two dimensional scrolling with the scroll area being properly inside the visible screen and there should be bounce back on taking outside the screen. Right now there is no bounce back (in my jsfiddle) on scrolling towards top and left, outside screen. Bounce back happens on scrolling to right and bottom. I just want the scrolling area to be well placed inside the screen. I guess bounce back will automatically get fixed then.
I think the last version (4.1.8) on the github repo will fix your problem ;) I'm using it on some projects and it is now optimized for desktop browser ;)
Edit
From the documentation :
hScroll, used to disable the horizontal scrolling no matter what. By default you can pan both horizontally and vertically, by setting this parameter to false you may prevent horizontal scroll even if contents exceed the wrapper.
vScroll, same as above for vertical scroll.
By default, when creating a new iScroll('idOfElement') the scroll is vertical and horizontal. It can be disabled with these parameters. Dual Scroll is totally possible as this video shows it.
So, to force dual Scroll :
var myScroller = new iScroll('idOfElement', {vScroll:true, hScroll:true});
This is not a complete solution, but this might help you.
First of all, The HTML code was not properly nested, and so you were needed to put the <div> inside the <b>. I fixed up the HTML a bit and its working without the <b>
http://jsfiddle.net/Aexhz/
And with properly nested HTML and correct settings, This worked even after dividing the HTML/JS/CSS
For me, it does show some Horizontal as well as Vertical Scrolling, but i don't know if that's how you want it to be. i Edited the Class initialization line as well
myScroll = new iScroll('scroller1', {desktopCompatibility:true});
TO
myScroll = new iScroll('scroller1', {
snap: true,
momentum: false,
hScrollbar: false,
vScrollbar: false,
desktopCompatibility: true
});
This doesn't affects much but i still put that.
I will continue looking into this and update my answer if i find anything new.
I know you want to fix this using iscorll but wanted to share this with you, i had great results using it: http://jscrollpane.kelvinluck.com/#usage
It is highly customizable with css, a demo here with vertical and horizontal scroll: http://jscrollpane.kelvinluck.com/basic.html
I need to implement mouse resistance in JavaScript.
As an example of what I mean, think of how the Enlightenment window manager handles screen edge resistance to switch between different desktops, or if you are not familiar with that:
Imagine a large rectangle with a square within it.
When click-moving the mouse [onmousedown] within the square, the mouse lets itself be moved until the borders of the square, then exercises some resistance until a threshold is met, and then moves around within the larger rectangle.
Ideally the mouse cursor should stay trapped within the square until that threshold isn't met, and only leave that area if it is met.
Any ideas or examples of this somewhere?
A cross-browser solution is also greatly appreciated. (Down to IE7, that is)
As stated you can't set the mouse position with Javascript.
Since you asked about implementing this on mousedown, however, I assume the user is dragging something around on screen. So you could have the element they are dragging show this behavior. You need two elements to act as regions, one where the target can be freely dragged and another to define the size of the boundary. I'd do it with jQuery to shorten up the code but basically you'd have something like this. (Untested code)
HTML:
<div class='borderLand'>
<div class='freeZone'>
<img class='draggable'>
</div>
</div>
CSS:
.borderLand {position: relative; width: 110px; height: 110px;}
.freeZone {position: relative; top: 10px; left:10px; height: 100px; width: 100px;}
JS:
I can't write the full code off the top of my head but the algorithm would be something like
onmousedown{
check for click location
if it's over the draggable (watch for bubbling) begin dragging, set dragging flag
}
onmouseup{
clear dragging flag if it's set
}
borderland onmouseover{
if dragging, stop the movement of the draggable (watch for bubbling here too)
}
borderland onmouseout{
start dragging again (if they move back in or out it doesn't matter, you want to drag)
}
Sorry if you need more detail, but doing this in plain JS would be a little lengthy and I'm not sure how much help you need.