We Keep Coding

More Elegant Loading #container (like google chrome)

I have a piece of code to display a simple loading by clicking for example on an action (ajax facet search in my case)
so far it does the job.
/!\
Please don't be confused, read and look at the illustration carefully, there is no code or php file or html modified. we only inject a snippet and just specifying an empty #div in the page /!\
add_action( 'wp_head', function () { ?>
<style>
#loading-container {
display:relative;
}
.custom-loader {
z-index:999;
display:flex;
position:fixed;
padding:0;
margin:0;
top:0;
left:0;
width: 100%;
height:100%;
align-content:center;
align-items:center;
justify-content:center;
text-align:center;
font-size:18px;
font-weight:400;
color: white;
background-color:rgba(0,0,0,0.8);
background-size:cover;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.custom-loader i{
margin-right:5px;
margin-left:5px;
}
</style>
<script>
(function($) {
$(document).on('facetwp-refresh', function() {
if (FWP.loaded) {$('#loading-container').prepend('<div class="custom-loader facetwp-loading"><i class="fas fa-sync fa-spin"></i><a>Loading...</a></div>');}
});
$(document).on('facetwp-loaded', function() {
$('.custom-loader').remove();
});
})(jQuery);
</script>
<?php } );
I noticed on very rare occasions because of the network? or anything else unexplained, the loading freeze and we are left to watch fa-sync spinning forever...ouch!very bad for user experience ...
my question: how to make it more customizable? to show a message after x milliseconds for example.
imagine that the loading time will not exceed 4-5 seconds max otherwise there is a real problem...
(like google chrome no network error)
display an error message with a link or button to reset the page.
(in my case it will be reset button onclick = "FWP.reset" )
so the user knows that something wrong has happened to the current request.
I would also like to be able to modify it a little with personalized messages for each task for example :
action when Page Refresh = Loading...
action when clic Facet / search-btn = One moment...
action reset button = Page Reset...
so the dear user knows what exactly is going on.
for the moment this is how I make it work
Elementor Editor
you can see our hidden div section this is our #loading-container
I redo it in any page or section with facets, I feel that it is not practical..
I must think of a more elegant way than that maybe, can be added conditions like
if facets in the page then apply loadings.
thank you if you understand what I'm talking about and you have a more elegant solution to offer

I believe you are using the FacetWP plugin (please make sure that you mention the plugin name exactly so that we would be able to understand).
I did a quick look at their documentation and couldn't find any events/hooks that you can use for your requirements. But you can listen to the click events of the search button or the reset button to trigger the display of loading screen. Here's the link to the documentation of the jQuery's on() method which you can use to handle the click event: https://api.jquery.com/on/
If you are having doubt regarding how to pass the selector to this on(), just right click on the button and choose Inspect Element option in your browser(assuming you are using Chrome/Firefox or something). This will give you some idea on how to choose the selector.
Based on this example, the click event handler for the button would look something like this:
jQuery('.facetwp-icon').on('click', function(){
alert('button clicked');
});
Also, I would suggest prepending your loading screen only once. Then use the show() or hide() function of jQuery to display or hide the screen when needed, rather than removing and prepending again!
If you need custom events (rather listening to the click events like I said above), since this is a paid plugin, try pinging the developers. And they probably would help you with the additional code.
Hope I've given you some pointers to start. Cheers!

I noticed on very rare occasions ... the loading freeze ...
I've recently made a vanilla .js loader. I ran into that exact problem and managed to fix it by generating an <svg> spinner via javascript and animating it after.
The script create a container prepended to the <body> tag, and prepend the css to the closing <head> tag.
It's probably lighter than any plugins you're using and has no dependencies.
var t="#2774ab",u=document.querySelector("*"),s=document.createElement("style"),a=document.createElement("aside"),m="http://www.w3.org/2000/svg",g=document.createElementNS(m,"svg"),c=document.createElementNS(m,"circle");document.head.appendChild(s),(s.innerHTML="#sailor {background:"+t+";color:"+t+";display:flex;align-items:center;justify-content:center;position:fixed;top:0;height:100vh;width:100vw;z-index:2147483647}#keyframes swell{to{transform:rotate(360deg)}}#sailor svg{animation:.3s swell infinite linear}"),a.setAttribute("id","sailor"),document.body.prepend(a),g.setAttribute("height","50"),g.setAttribute("filter","brightness(175%)"),g.setAttribute("viewBox","0 0 100 100"),a.prepend(g),c.setAttribute("cx","50"),c.setAttribute("cy","50"),c.setAttribute("r","35"),c.setAttribute("fill","none"),c.setAttribute("stroke","currentColor"),c.setAttribute("stroke-dasharray","165 57"),c.setAttribute("stroke-width","10"),g.prepend(c),(u.style.pointerEvents="none"),(u.style.userSelect="none"),(u.style.cursor="wait"),window.addEventListener("load",function(){setTimeout(function(){(u.style.pointerEvents=""),(u.style.userSelect=""),(u.style.cursor="");a.remove()},100)})
Beside including the script, you have nothing to do. You can have a look the Github and documentation here # https://github.com/amarinediary/Sailor there is also a visual demo.
Google's best practice is to have a page speed index under 3 seconds. In 3 seconds you shouldn't be able to read anything. Instead of placeholders saying "wait", you should focus on optimizing your page loading times.
Regarding the "No Network" Google's warning, you can make a similar screen by switching your whole website to a webapp and setup an offline page. It's an easy switch, there is a tones of tutorial out-there.

Create your loading screen with SVG and some custom text underneath it. Wrap it inside a DIV.
Using CSS or <Style> set the display equal to block and give it a high Z-index so that it appears above all other HTML elements on the page. This will ensure that the loading screen is displayed when the webpage is first opened.
Use vanilla Javascript to hide the loading screen DIV when the page loads.
window.addEventListener("load", function(){
//this code will run after the page is fully loaded
// just use some javascript to set the loading screen DIV to display none.
document.getElementById("ENTER_DIV_ID_HERE").style.display = "none";
});
If you want to call the loading screen again for some other activity such as clicking a button just create a function with vanilla javascript that will toggle the display on and off this can be done with a timer or some other event that you want to use to hide the loading screen again, below example where will will pass the number of mili-seconds that we want the loading screen to display for.
function showLoadingScreenTemporally(numberofMiliSeconds){
//when this function is called we will show the loading screen first
document.getElementById("ENTER_DIV_ID_HERE").style.display = "block";
//then we will hide the loading screen after the specified numberofMiliSeconds has elapsed
setTimeout(function(){
document.getElementById("ENTER_DIV_ID_HERE").style.display = "none";
}, numberofMiliSeconds);
}
//then we just need to call this function and pass it the number of mili-seconds that we want to display the loading screen for
showLoadingScreenTemporally(4000);
//note I wrote all this just free hand, I have not ran the code coz I am too tired to do so, but thats the general gist of it. Note this is never the way I would implement a loading screen I would always try to tie it to a physical event such as a file upload being completed, etc, rather than just specifying a number of mili-seconds, reason being not all computers are equal some process more quickly than others.

If you want your UI to remain responsive even when network connections are lost then the timeouts you have suggested can help, but to consistently handle this you need a service worker.
Service workers are how you would implement a custom "You are offline!" message.
Basically, a service worker is a javascript proxy to all your network requests - it runs when someone visits your site, and can respond to requests from your site even when there is no network connection either by serving a cached copy, or by serving specific offline messages that your UI JS can handle this for users.
They can also retry poor connections, allowing the occasional drops to just be a slightly slower load by users (rather than asking them to reset/retry manually).
Service workers are a huge topic, but you there are plenty of simple off the shelf implementation (like Workbox) that you can plug in with minimal effort.
Wordpress has an official plug in, and they have examples how to implement offline and retry support.

How to turn elementor section into clickable button

Link: http://up8.431.myftpupload.com/services/
I need to turn the section on the page above into clickable buttons. I'm using WordPress with the elementor plugin installed.
I've already added some extra CSS to make the sections appear to clickable. I just need to add the actual functionality. I understand this is done with javascript. I haven't tried adding any javascript code yet. I'm a little hesitant too because I don't think I have the skill and knowledge to do it properly. I don't want to just start adding code everywhere. Past experience has thought me that's a bad idea.
I'm hoping someone experience with elementor can help me out. Here's where I'm stuck:
Where do I add the javascript? There's nowhere for me to add javascript like there is a section for CSS for each element. Should I add it in the customizer (Appearance --> Customize --> Custom CSS/JS)? Should I get a plugin for custom javascript? I've already given each element a custom class. I could attach some JS to these classes.
EDIT: Thought about it a little more. I don't think adding the JS in the Customizer is the way to go. I'm thinking any CSS/JS I add there should be exclusive for the topbar, header, and footer. My reasoning is because these are the sections that will show up the exact same way on each page.
That leaves me with the option of getting a JS plugin. Is this the best way?
What would be the best way to accomplish what I need to. I definitly don't have the skill to understand the Elementor Developer Docs. It's way too advanced for me. That's why I'm asking here.
Thx in advance

if you know how-to and it's through javascript you can do it this way:
Drag and drop HTML widget-> insert your js between script tags.
I recommened using html in your footer(made with elementor) so the script will be available in entire site.

I managed to find a way to do so without any plugin or js, just CSS:
First we need to set a minimum height for our Section/Column (I set 50vh);
then we have to add an element which has link/a tag (e.g. Title Widget) and set a CSS class for that (in my example .mhdizmni_title);
now we have to write a bit of css:
.mhdizmni_title a:after {
content: "";
display: block !IMPORTANT;
position: absolute;
height: 50vh;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 2;
}

Valid alternative to nested links (a tags) for rich web applications?

I have a rich SPA application with some "material-design cards" (maybe not in the strict sense) like this one:
and I wonder if the "a" html tag is appropriate to handle the click on the card to open the content full-size.
As you can see, it's a rich widget on which you can do interactions (as the like/comment/tag buttons). I can have to display a link inside this card (the "source" of the content actually displayed, for example nytimes.com)
When the user click (or touch, because it's also a Cordova/mobile app) the card then we should go to the card item's url and view the card item in full-screen (unless the click is on a card button...)
So I thought about using a link (a tag) as a wrapper around the card, but it seems illegal because I already have the source link inside the card:
You cannot have Interactive Content inside an A element. Interactive Content includes anchor tags.
So, how am I supposed to solve this use-case?
A very important thing to note is that I'd like to preserve some of the defaults that come with links, including the fact that clicking it with middle click/ctrl opens in new tab, or that on hover the link is displayed at the bottom of Chrome... I know I can use history.push but this seems quite annoying or even impossible to reimplement all these defaults in plain JS...

A very important thing to note is that I'd like to preserve some of the defaults that come with links, including the fact that clicking it with middle click/ctrl opens in new tab, or that on hover the link is displayed at the bottom of Chrome...
First of all, great that you’re thinking about this – a large number of developers don’t, but just go “Ah, I’ll just drop a click handler on it, and then open the URL via location.href, and that’s that done & dealt with …”
Giving user’s their accustomed browser UI & functionality is a big part of accessibility IMHO.
So, since links can not be nested into each other (which makes sense of course, the resulting behavior would just be undefined – do we open the target URL of the inner link, or the outer?), another solution would be to emulate what you want to achieve via a little CSS trickery.
.card {
position: relative;
z-index: 1;
display: inline-block;
width: 100px;
padding: 50px;
background: #ccc;
}
.cardlink {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: -1;
}
<div class="card">
<a class="cardlink" href="#fullcardview"></a>
<p>Foo bar baz</p>
<p>
Like
</p>
</div>
A container element for our card, positioned relative (so we can use it as anchor point for absolute positioning of descendant elements).
In that, the first element is our link to the full version of the card (I only used anchor links here, to demonstrate the principle) – but it does not enclose any of the other card content, it is basically just empty. (To take care of accessibility, like putting a descriptive text inside it for screenreader users, and hiding that again for visual devices, I’ll leave up to you.) That element gets absolutely positioned, and specifying 0 for all four corners will make it stretch to cover the whole parent element automatically. Plus a z-index: -1 to put it “behind” the rest of the content that follows.
If you check my snippet (or as a fiddle, here: https://jsfiddle.net/Lz4o9114/1/), you should be able to hover over the “like” link and see it show ...#like in the browser status bar, whereas hovering the rest of the card should show ...#fullcardview. Opening #like or #fullview in a new tab via context menu should work as expected, as should middle click/ctrl … the whole shebang.
Now this is a very basic use of z-index here … depending on your actual card content and structure, you might have to do a little more to get it to work (like giving the rest of the card content a higher z-index than the card link.)
z-index can be a bit of a “fickle mistress” – for more details on stuff like stacking contexts etc., I recommend Philipp Walton’s excellent article What No One Told You About Z-Index.
Last but not least, I agree somewhat with the concerns Dávid Horváth raised in his comment – it might be unexpected to the user that the whole card acts as a link. They might f.e. just click somewhere on it, after they selected some text, to remove that selection again … or for whatever other reason. So perhaps only making a portion of the card clickable might be the better choice after all.
(Plus, how this behaves on touch devices, when the user just tries to scroll the page or pinch-zoom, also still needs some investigating/testing for sure.)

Is there any way to change the CSS of the Facebook Like Box?

So I'm trying, through whatever way possible, to modify the Facebook Like Box's CSS. I've found the offending value and I want to change it. This is inside of an iframe.
The CSS is this:
.pluginLikeboxStream {
overflow-x: hidden;
overflow-y: auto;
}
This is causing there to always be a scrollbar on the Like Box stream, which I really, really don't want.
I'm not seeing anyway to modify this - not the Javascript SDK (which is my best hope, I think), not through using Javascript or jQuery on it (as it creates an iframe, this is impossible, as far as I can tell - even though Firebug lets me change this).
Obviously the best solution would be to be able to set a style using CSS, but that also seems impossible.
Is there any way to fix this?
I've tried to load the iframe with no scrollbars, but that's just on the outside of the iframe - this is obviously internal.
All I want is for this class to be set to overflow: hidden;

It is not possible to change the CSS of the official Facebook Like Box because it is an external iframe.
Read more in this duplicate.

Since the content you want to change via CSS is in an iframe, you can inject a style into the iframe. But as Vector said, know what you are getting yourself into.

You can create your own "Like" button - without like count (but you can fix this) and then use JS API to "like" URL's

If you set !important then it will over rule any other CSS applied to the element
.pluginLikeboxStream {
overflow: hidden !important;
}
!important should only be used in circumstances like this.
EDITED
To apply it to the iFrame you need to use jQuery
$('iframe').load( function() {
$('iframe').contents().find("head")
.append($("<style type='text/css'> .pluginLikeboxStream {overflow: hidden !important;} /style>"));
});
This is how i've always done it.

my magento website is freaking out the menu

First than all sorry that I can put code here, the best way is to see the live site.
WHen I go to www.theprinterdepo.com, the menu is acting weird on the onmouseover.
However when I go to a product page it works fine.
I am trying to know whats going on in the html but I cant find the problem.
pasting the entire generated html wont do any good.
This is a magento ecommerce site. so either its a problem with html, js or css?
Once detected I could paste the original code that generates that part of the problem

I got it! There is class named "over" in line 28 on any of your css(may be in assets new.css) remove that class & everything will be fine. Below is the given class.
.over {
left: 40px;
position: absolute;
top: 10px;
z-index: -1;
}
I am attaching image regarding this class. https://dl.dropbox.com/u/19982181/svs.jpg