We Keep Coding

Click event not fired in floating button if over an element scrolling

When having a button (or any other element, positioned absolute or fixed) on top of an element with a scrolling area which is actively scrolling (i.e. for example it's decelerating) it seems that the button doesn't receive the click event when clicked.
It seems that when clicking (or touching) the scrollable element area, the scrolling is interrupted, but the button on top of it doesn't receive any event.
I've debugged events for the floating element in Chrome and the only thing received is a mousewheel event.
This is particularly annoying if the button is a navigation button, as you have to click twice to exit the page if the content is decelerating (as opposed to once when the content is still).
I browsed many times for a solution but never found a clue about this behaviour and how to avoid it, so any thoughts will be appreciated.
Sample code here: https://codepen.io/djibarian/pen/bGLoYxY
If you scroll the red box and while still scrolling due to inertia try to click the button, you only manage to stop the scrolling in the box, but the button doesn't receive the click event.

I haven't seen your code, but it's worth checking following.
Check if any element overlaps the positioned fixed element.
Make sure the stacking context of the element is correct.
Try adding a higher z-index and see if it's working. If it works then it's worth changing the dom element order for precedence.

Floating text overlay on image hover

What I'm trying to do: When a user hovers over any image on a specific page, a floating box element appears, displaying the Image's title (the html title="" tag). As the user moves their cursor across the image, the box element moves along with it.
(Example: http://minecraft.gamepedia.com/Glass_Bottle - If you looking under the "crafting" section, hovering over certain images displays a box with it's title - Sorry, this was the only example that I could find).
Is it possible to achieve this result utilising raw HTML, or does this require css or an addition such as Javascript/Jquery?
Sorry if I haven't been clear enough - if you require certain information, please let me know!
Thanks in advance, and I hope everyone has a Happy New Year! :)

I think you need javascript. I don't think your going to get everything you want in HTML5. You want to use the mouseover event to show the image next to the cursor which means you'll have to float a div next to it. The moving part won't be a problem because you'll probably just reshow it for every mouse over which will get fired every time they move the cursor I think. Here are the problems you must solve. Figure out one at a time.
1) How to float a div at a higher z index with the title in it.
2) How to know the coordinates of your curser
3) Move the div to your cursor coordinates with an offset
4) How to hide the div

I have used this a few months ago and helped me a lot with the very same problem:
http://notlaura.com/show-title-hovering-image/
Hope it helps you as well,
Andrew

Scroll large image on menu click

I have a rather large image (not my choice how it was given to me) I have a simple navigation structure and when I click on one of the links I want to be able to scroll to a certain point of the large jpg below the menu. It's one large image so using # isn't going to work. I assume this is going to need to be a javascript or jquery function, but I'm just how sure how to set that up. I've looked around but everything I found is for a slide show, where I just have one overly large image that I need to scroll down and up via a menu button. I tried having the a tag jump around the page, and that kind of worked, but it didn't scroll it just jumped.
I wish I had code to show, but nothing I have used worked.

You can use scrollTop property of element like body or any div to scroll at any position. see here created a pen for the same.

If you are going to animate the page scroll you will probably need to use jQuery's animate function.
$("html, body").animate({
scrollTop: 400 /*Desired offset position*/
}, 1000);
Take a look at this jsFiddle as an example.
You could also position anchors behind the image at the positions you need the page to scroll
See this jsFiddle

How to scroll an element inside parent when a fixed element passes?

This is a bit too tricky for my jQuery / javascript knowledge so i'm sorry to say i haven't really tried anything yet. I need some hints to get pointed in the right direction!
The problem is that i have a fixed element on my page, and when scrolling down this element will enter different wrappers, and while in that wrapper i need a smaller child element to "snap" to my fixed element and while it's in the element.
Kind of hard to explain, i made a static mockup here:
http://jsfiddle.net/ycmYc/
When "fixed cart button" reaches a price, i need it to attach and scroll with the cart button as long as it's inside the prices "product-div". When it leaves and enters the next the price should stay in the bottom of it's product and then snap to the cart-button again when the users is reaching it by scrolling up.
Well, again, sorry for not having tried anything but i am lost. If i had to do this without any help i think i'd go with waypoints.js but it feels far from optimal.
Any help MUCH APPRECIATED!
The fixed element will always have the same position, so i guess offset from the browser top could be used instead of keeping track of it's position. Always something ;)
Update:
Been working on it myself, and got it working downwards but not upwards:
Should clarify what i mean:
http://retype.se/temp/scrolltest/test.html
When scrolling by the price, it joins the button downwards and snaps loose when leaving the container. My problem now is making it snap to it and scroll back to its original position when scrolling upwards :)

Do you want it like this?
http://jsfiddle.net/ycmYc/39/
only result: http://fiddle.jshell.net/ycmYc/39/show/light/
updated:
How about this?
http://jsfiddle.net/ycmYc/93/
only result: http://fiddle.jshell.net/ycmYc/93/show/light/

this is just a brainfart, but maybe it gets things going (sry, dont have time for a fiddle). But I got the idea, of maybe trying to cheat optically.
What I mean is, to calculate the absolute positions of all price divs, hide them, and when the cart div reaches that position by scrolling, show the price div for x amount of pixel scrolling (or via z-indexes by making backgrounds, not sure what suits you better).
Hope this helps a bit, maybe I get time today to script it out.

It kinda depends on the constraints. You can detect the scroll position of a window with:
window.pageYOffset or document.documentElement.scrollTop.
If the divs are all the same size you could easily calculate which div the button is over and the position: fixed the price next to it.

Morphing content based on window part focus

What I'm trying to achieve is basically have a code that will morph (move around the page) based on the part of the window which is currently viewed.
Scenario:
actual page height : 2000px
actual screen height( pc, laptop whatever ) : 800px
1 image of 600px
3 div's or virtual boxes ( just to prove what I want to do )
Workflow
When you open the page, you'd see the first part of the page with the image loaded in the first div.
What I want and need to achieve is when scrolling the page, and the focus would be on the second div (or the image simply gets out of focus - you can't see it no more),
the image would move (disappear from the first box) and appear in the second one, which is currently visible.
The idea might seem pretty easy but I'm not JavaScript savvy.
Ideally, the answer should include a way to load a JavaScript instead of that image.

The way you use the word focus can be misleading, as focus is a JS event that happens after an element is clicked. You need to get familiar with the jQuery scroll event and scrollTop. Here is similar Thread here in StackOverflow that you may want to read Jquery / Javascript find first visible element after scroll