0

I want to force my backoffice (edit : the page where I mamange my site) to open in a "pop-in" window (Edit : special type of pop-up ads created using Dynamic HTML, JavaScript and similar web browser technologies. Because they do not scroll with the web page, they appear to "hover" over the page, usually obscuring the content.) but when I click before the page is fully loaded it opens in a _blank page. That's a problem.

Based on Stackoverflow's old threads (edit : such as How to enable/disable an html button based on scenarios?) I came with the idea of hiding the link to the backoffice and showing it when the document is ready using Javascript's .removeClass at the end of my pop-in script (it's called Clearbox, if you need to know). Theorically, it should prevent the link to the backoffice to appear before the pop-in script is ready to load correctly. I'm probably mistaken as the toolbar just don't appear at all.

$(window).load(function(){ $("div#outils").removeClass('d-none'); });
// At the end of clearbox.js

What's my mistake ? class="d-none" is a Bootstrap 4 standard that initialize the div as not display and is mixed up with other classes I need in div#outils. I'm open to any suggestion, if you know a better way.

Greg
  • 65
  • 1
  • 10
  • 1
    I can't follow you at all. What are you trying to do? You talk about a bunch of different stuff like you expect us to know what it is. What's a 'pop-in window'? What's Clearbox? What toolbar? That isn't JavaScript, it's jQuery, so is your question about jQuery? What's your 'backoffice'? – Jared Smith Dec 17 '18 at 13:06
  • Did you confirm the event fired ? like $(window).load(function(){ console.log("Hello"); }); – Eponyme Web Dec 17 '18 at 13:11
  • Sorry but my question seems pretty clear. As a pop-in window is a web standard I didn't expect I'd have to explain it... (Wikipedia : special type of pop-up ads created using Dynamic HTML, JavaScript and similar web browser technologies. Because they do not scroll with the web page, they appear to "hover" over the page, usually obscuring the content). Basically, I have a toolbar, when clicked it opens my backoffice in a pop-in. Clearbox's mention is only made if you need to know what script I'm using. You can ignore that info if not. – Greg Dec 17 '18 at 13:13
  • @EponymeWeb : your line return Uncaught TypeError: $(...).load is not a function I have to admit I'm not very good at Javascript – Greg Dec 17 '18 at 13:16
  • Your question is not clear at all - if you read this question without any idea or background, you wouldn't understand it - what has removing a display none class got to do with loading a link in a blank window? Also, give a link to the old threads so we can see what you are talking about. And finally, create a [mcve] – Pete Dec 17 '18 at 13:21
  • @Pete That's the point, it shouldn't open in a blank page. Maybe I forgot a sentence to make it clear enough : "Based on Stackoverflow's old threads I came with the idea of HIDING THE TOOLBAR AND SHOWING IT WHEN DOCUMENT'S READY using Javascript. Post edited. – Greg Dec 17 '18 at 13:30
  • That's the point though, based on your code, it should work - therefore it is impossible to answer your question: *Questions seeking debugging help ("why isn't this code working?") must include the desired behavior, a specific problem or error and the shortest code necessary to reproduce it in the question itself. Questions without a clear problem statement are not useful to other readers* – Pete Dec 17 '18 at 13:33
  • 1
    Ok, have made a boostrap and it seems [`$(window).load` doesn't work](https://www.bootply.com/thsKAFVqBt) in jquery 3 - you need to [use `$(window).on('load'` instead](https://www.bootply.com/KNgz1wjPYj) See how easy that was to debug with a working example – Pete Dec 17 '18 at 13:39
  • @Pete It works like a cham :) Thank you and sorry if my post wasn't clear enough. I'm doing my best to respect the rules but it's not always easy to be understood – Greg Dec 17 '18 at 13:52
  • It's always good if you can include a working example - it really clears up most of the misunderstanding and the act of making the example often helps you find the problem - There's been many times I go to ask a question and whilst I am making a snippet, I will find the thing that is causing the problem – Pete Dec 17 '18 at 13:54
  • I'm learning everyday :) How can I mark your answer as the solution I chose ? – Greg Dec 17 '18 at 14:10

1 Answers1

1

Use jQuery's $(document).ready() function. Add your click event to your toolbar after the page has loaded.

$(document).ready(function(){
$(selector).click();
})
André
  • 343
  • 2
  • 9
  • That could do the trick but can I replace the Click action by a Display action instead ? I'm afraid my impulsive team will just assume it's a bug if they can't click :-D – Greg Dec 17 '18 at 13:23
  • Yes, you can add everything you want in the "ready"-function. – André Dec 17 '18 at 13:25
  • It seems to be working but the element toolbar still appears too quickly. I used it that way in the main page : – Greg Dec 17 '18 at 13:46
  • If you set you toolbar for example via css to "display:none;" and in your ready-function via jQuery $(selector).show() it appears after load. – André Dec 17 '18 at 13:49