Image Hover changes - Githubissues

Pashe / 8chanX

Adds various features to 8chan.

MIT License

45 stars 16 forks source link

Image Hover changes #11

Closed anonish closed 9 years ago

anonish commented 9 years ago

Change image hover to follow mouse

anonish commented 9 years ago

still learning git :-/

7185 commented 9 years ago

I'm pretty sure you could use less .css() functions and put everything in an array.

anonish commented 9 years ago

I was going for clarity after ther previous discussion about messy code but yes, you could mix them. I did run into problems mixxing the main

    hoverImage.css({
"position" : "absolute",
"z-index" : 101,
"pointer-events": "none",
"max-width" : "100%",
"max-height" : "100%",
});

with

hoverImage.css('left',e.clientX);
hoverImage.css('top',e.pageY);

i dont think having a call to e.clientX works on the regular .css array section unless i dont know what i'm talking about which is likely, but i defer to others with more knowledge, i just wanted it to work ;^)

Pashe commented 9 years ago

The hovered image can go off-screen.

But I still don't get why anyone is upset about the image not following the cursor. Is it just baby duck syndrome, or am I missing something here?

anonish commented 9 years ago

Is it just baby duck syndrome or am I missing something here?

your condescension notwithstanding, i prefer that to the static format for a few reasons

smaller images are easy to see on long threads when they popup next to the thumbnail (as opposed to the top right corner where it may be away from the topic of the post)
on tablet mode (which is my main form of reading threads and for which i have made a couple of pull requests with HW), having hover mode stick to the thumbnail saves space and makes life easier
i got used it to that way ;^) plus it's an inexpensive, non-messy fix.

the offscreen loading is an easy fix which i'm working on, it's a matter of getting the window size and preventing image_left_edge+width from going over and based on the 8chanx thread, there's a few other people who want it

7185 commented 9 years ago

@anonish

i dont think having a call to e.clientX works on the regular .css array section unless i dont know what i'm talking about which is likely, but i defer to others with more knowledge, i just wanted it to work ;^)

Try this:

hoverImage.css({
  "position" : "absolute",
  "left": e.clientX,
  "top": e.pageY,
  "z-index" : 101,
  "pointer-events": "none",
  "max-width" : "100%",
  "max-height" : "100%",
});

@Pashe

The hovered image can go off-screen.

Yes, I like your solution better for this reason for now, but I also agree with anonish on the smaller images thing and I can understand how this can be annoying on large screens. Tux3's version feels more natural imho.

anonish commented 9 years ago

fa89b5eb1b0254bbf21a620429871ecdbd6ab038 fixes the image overflow @7185 that works

Pashe commented 9 years ago

Thanks. Sorry for being a bit of a dick.