These are chat archives for FreeCodeCamp/HelpFrontEnd

9th
Sep 2018
urketadic
@Urketadic_twitter
Sep 09 2018 03:48

Can someone explain to me why is there flicker before the menu item (which is image) gets its src changed by css:
https://www.hvgamers.com/ (last 4, i removed it from servers menu item)
Afterwards it stops with flickering, its just if you do hard refresh + cache clear and hover over it.

Also Jquery doesnt work at all, its installed as you can see but if you try to do something in main.js it wont work at all.

alpox
@alpox
Sep 09 2018 10:37
@Urketadic_twitter Do you even need them to be pictures?
Johnny
@JohnnyBizzel
Sep 09 2018 11:29
@Urketadic_twitter The browser is loading the images which takes time - causing the flicker. Either an image sprite or loading the image data as part of the page would probably fix it but as @alpox suggests, you can probably create the same effects with CSS nowadays, removing the need for images.
@Urketadic_twitter embed images: http://www.techerator.com/2011/12/how-to-embed-images-directly-into-your-html/ Unfortunately the tool link is broken but there will be others out there.
urketadic
@Urketadic_twitter
Sep 09 2018 14:12
Alright I see
Thank you for the advice
Johnny
@JohnnyBizzel
Sep 09 2018 14:23
@Urketadic_twitter I asked on the forum for you on how to do encoding: https://forum.freecodecamp.org/t/tool-for-embedding-images-into-html/225177
urketadic
@Urketadic_twitter
Sep 09 2018 16:24
Thanks man, thats nice of you :D
Rob
@PGFracing
Sep 09 2018 16:39
I added overflow:hidden; because I was having some problems on iPhone and iPad, and works just fine on safari, however now on other browsers on desktop you can’t scroll to the bottom of the page, basically on iPhone and iPad when you scrolled the page would go left and right and if you resize the screen and then went back to regular size the margins would be messed up, any ideas how I can have the best of both worlds, is there a way I can tell other browsers then safari to ignor the overflow hidden, or tell safari only to recognize overflow hidden
urketadic
@Urketadic_twitter
Sep 09 2018 17:49

So I have ended up fixing the issue by preloading images in css, like this:

 .preload-servers { background: url('../src/servers_red2.png') no-repeat -9999px -9999px }
.preload-store { background: url('../src/store2_red.png') no-repeat -9999px -9999px }
.preload-forum { background: url('../src/forum_red.png') no-repeat -9999px -9999px }
.preload-sbans { background: url('../src/sBANS2_red.png') no-repeat -9999px -9999px }
.preload-contact { background: url('../src/contact_red.png') no-repeat -9999px -9999px }

So this just registers path to these images from the get go so they can later be used elsewhere in the document.
I hide them ofc with -9999px, they are somewhere off the screen.

Rob
@PGFracing
Sep 09 2018 18:32
@Urketadic_twitter why were you using them later? as pop ups?
urketadic
@Urketadic_twitter
Sep 09 2018 19:06

@PGFracing Later I used them to change the src of the images once i hover over them:
So my menu item which is actually image swaps with another image that is same just has different background.

Problem was: This caused a flicker to occur because it takes a split second for the new image to get loaded in.

For your problem though, is definitely possible with javascript to detect which browser user is on and then you can also manipulate dom elements with javascript aswell to make overflow: hidden or not
urketadic
@Urketadic_twitter
Sep 09 2018 19:14
@PGFracing
Also I recommend setting up chrome and mozilla first since 90%+ people use that.
Then you can try and fix for the other 5-10% safari.
I remember I had a lot of problem with overflow aswell but I always somehow manage to fix it in developer tools and then just apply the fix
Duwayne Patience
@DuwaynePatience
Sep 09 2018 20:07
How do you keep the footer at the bottom of the page if their is not enough content
urketadic
@Urketadic_twitter
Sep 09 2018 21:38
@DuwaynePatience
Stackoverflow has around 1000 questions on this topic.
https://stackoverflow.com/questions/47650199/how-to-keep-footer-at-the-bottom-of-page-under-the-body-content