Short version: This works
$(document).on("click",".Container",function(){})
This does not:
$(document).on("scroll",".Container",function(){})
Long version:
I'm sorry but posting a code snippet isn't feasible as it's a complex app-like interface but I'll try to explain the issue to the best of my abilities:
Mobile responsive website that loads different interfaces depending on screen real-estate.
Smallest interface composed of 3 parts - navigation at the top, search at the bottom and content in the middle.
Content is mostly loaded during use and not at page load.
I need to trigger a function when the content is scrolled, both up and down and on the fly not just past a certain point.
I can still scroll, it just doesn't trigger as an event.
I've tried everything I've found to no avail, from my short experience and what I've been reading I think it might have to do with how scroll doesn't bubble up the same as click, but I have no idea what I should do or try with that information.
While it doesn't seem to influence my problem (removing it doesn't solve the issue) I should disclose that I'm using hammer.js to simulate touch events as it might influence the solution.
Thanks in advance for all the help.
Beyond this point I'll edit with suggestions that didn't work--
I think it's because the scroll event doesn't bubble and you are adding the listener as delegated, you should add it directly:
$('.Container').on('scroll',function(){});
More info about this in:
https://api.jquery.com/on/
With help from #A. Wolf and #M.Doye I found something that works. While it doesn't help understand what was wrong at least its working.
document.addEventListener('scroll',function(event){
if(event.target.className==='Container'){
insert magic spell here
}
},true);
Related
Scrollbar with points
Can someone explain to me (or has a good tutorial for it) how this scrolling thing works? I don't know how I should google it.
This looks like a side scrollbar, and when I scroll down, it switches one Point down, and the page changes. Are there thew tutorials on how to create this? Please send me some info about it, because I really wanna know how to create this.
There is an other question that may help you:
Scroll to a specific position on a page using Javascript / Jquery
and I think these links may help you:
https://www.codespeedy.com/scroll-to-a-specific-position-in-javascript/
https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior
https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
They speak about:
.scrollTo
scroll-behavior
scrollIntoView()
scrollIntoView(alignToTop)
scrollIntoView(scrollIntoViewOptions)
You better read all articles.
Find out a website http://www.boy-coy.com/#home. When you scoll down all content scrolls very smooth. Even if you scroll it fast, scroll is done at specific speed. This makes the website faster and responsive. How this can be achieved with the help of css and jquery?
At first glance.
Try reading their html source code output.
They use a few jquery plugins and legacy browser js plugin calls.
They have a custom and partially obfuscated .js script that is in depth, but you can see the specific properties it is setting on items in the page.
Barring any terms of use issues, you could likely decipher this pages cool scroll technique by working with this sample code as an example. But it is definitely a fair amount of work to write from scratch or post the entire solution here.
Im going to go and look for a smaller example that isnt as involved as this parallax.
And check out this link http:// codepen.io/JTParrett/pen/BkDie its got some starting principals here of some of the images positioning at different locations in the viewport when you scroll.
This link in SO can also help Can I change the scroll speed using css or jQuery?
Kirupa has a nice tutorial that can likely help in getting the smoothe scrolling effect stared too. http://www.kirupa.com/html5/smooth_parallax_scrolling.htm
And this one is pretty awesome. I think I would look into this demo. Be sure to test all of click event demos here. Im sure you could tie in your jquery tween event for the scroll bar with this http://plugins.compzets.com/animatescroll/
Another decent example http://bassta.bg/demos/smooth-page-scroll/
It is called Parallax,
Check this: http://www.w3schools.com/howto/howto_css_parallax.asp
http://matthew.wagerfield.com/parallax/
http://jsbin.com/ovODORove/1/edit
I'm sure you've all seen those design applications where you drag a node and it resizes the element. Well last night, and today I decided to give it a try.
So today I wanted to try dynamically resizing a div, and I'm a bit confused.
I tried various ways, but none seem to work.
Logically I know that by using JQuery UI I can set my class .EE (for east east) to draggable to make it drag the element horizontally, but while the element is being dragged I want it to also set the width to where it's position is. I assume by binding the draggable event to the elements css width would work, but when I tried that it didn't work.
If anyone can help assist me with this it'd be greatly appreciated.
EDIT:
Using JQuery UI's resizable handlers make this a real easy solution as you can see here.
ThreeDubMedia also has a nice plugin that enables this functionality as well. As seen here.
I played with it a bit, and I've got it working. This may be not exactly right for you, but I think it's a pretty good starting point.
I've assigned the same stop callback for every handle, and that controls the resizing in any direction. Also you should give a parameter to width() and height(), like Man of Snow said.
Here is the fiddle.
I'm building a single-page website with a few sections that each fill out the user's window; I've got that working.
What I want to do is:
When the user scrolls up or down he/she would ease-up or down (accordingly) to the section before or after. My sections each have a anchor at the top of them.
Here is an example of what I'm trying to achieve. Each article fills the page. Once you scroll you jump to the next article.
http://www.made-my-day.com/
I think you could get the job done using this plugin: https://github.com/alvarotrigo/fullPage.js.
Also, it seems to be actively updated. The last commit to the repo was made 3 days ago.
Cheers!
You should take a look at scrollorama and superscrollorama.
They are lots of cool effects that you can use for scrolling, including the one just like the site you provided.
--UPDATE--
After some talking with OP, I realized that both libraries don't do what he wants.
So, my new suggestion is reveal-js, a js presentation library.
You don't really want to do this on an onscroll. Consider that onscroll isn't really anything except an event which says "the view of the page is moving".
That doesn't mean that they're using the mousewheel to do it.
On a phone, your plan can make sense: then it would be like making a drag movement equal to a swipe movement. Great.
My preferred method for scrolling is to click the middle-mouse button, and then position the mouse just below the anchor point, so that I can read each block of text as it scrolls past the screen.
I don't even need a hand on the mouse, for long blocks.
So in my case, onscroll will fire at something like 60 events/sec, and if you auto-jump the articles, I'm going to be teleporting through your entire site's content.
Other people still drag the actual scrollbar.
Listening to the mousewheel and keys (up/down, pg-up/pg-down), rather than just any method of moving the page, is safer... ...but are you sure all articles are going to be small enough so that all content fits in all browser windows, even at stupid-small resolutions (iPhone 3)?
Because if people need to scroll to read content, then all of a sudden you're dealing with a much, much more complex solution:
You would be required to listen to regular (or customized) scroll requests of any kind, to get to the bottom of the current content... ...and then you'd have to provide some sort of visual queue to the user that they are now at the very bottom of the content, and continuing to use a trigger method (swipe/drag/keys/mwheel) would switch articles.
The first two are fine... ...make it feel spring-loaded, like smartphones do.
...what about the other two, where people might expect to hit them multiple times in a second, to get where they're going?
I need a little help...
After read and search for a while I discover a good jQuery plugin to deal with the selectbox custom style problems. I made some small modifications to make it work as I want. The plugin hide the custom select and append some div and ul tags.
In Firefox 3.6.10 it works really nice, but in Chrome (6.0.472.63), Opera (10.62) when I tried to scroll down the selectbox list (in this case the div with an overflow) it disappears.
It looks like a bug, could you check it please? Try to look around line 182:
.blur(function() {...}
I tried to make an example so I cleaned a lot of my custom CSS and make it all clear for anyone who wants to analyse it.
view example HERE and please try it on FF and Chrome/Opera
PS: I didn't pay much attention to IE... It will be another fight, but i'll keep it for later!
Any help would be appreciated! Thanks for your time!!
Cheers from Portugal
Yeah, it does look like a bug. I'm not sure exactly what the appear and disappear mechanics are for this control, but it looks like when I try to scroll the drop-down area, the .blur() style event is firing for the parent control, but no .focus() style event is firing for the child control.
You might try delaying the drop-down disappearance by a second for .blur() style events, then only hide the drop-down if the .scrollTop() of the drop-down hasn't changed (this gives the user a delay between when they grab that scroll bar in order to actually scroll it, and it won't hide if they do so). That's a massive work-around, but without studying the code a lot more closely it's hard to know if there's a better approach.